User Flows mit draw.io und KI: Von der Landingpage auf die Mainstage

Lass dich vom Diagramming-Flow tragen! Unsere Flowchella-Kampagne zeigt, wie draw.io jeden Confluence-Space in die ultimative Collaboration-Stage verwandelt und jedem Teammitglied ermöglicht, seinen eigenen „Mix zu mappen”, mühelos zusammenzuarbeiten und komplexe Daten in klares, visuelles Wissen aufzubereiten.

Folgende Themen erwarten dich:

• User Flows mit draw.io und KI abbilden (dieser Artikel)
• Mindmapping-Tipps in draw.io
• Getting our groove on at Atlassian Team ’26

Warum der User im Mittelpunkt steht

Beim Erstellen eines User Flows geht es nicht nur darum, Shapes und Verbinder hinzuzufügen – es geht darum, sich in deinen User hineinzuversetzen. Es ist leicht, Annahmen darüber zu treffen, wie ein Prozess funktioniert, aber diese blinden Flecken können zu einer frustrierenden Erfahrung für die Menschen führen, die deine Website tatsächlich nutzen.

Der beste Weg dorthin? Frag am besten direkt nach. Aus erster Hand. Wenn du zuhörst, was User erleben, kannst du eine Journey abbilden, die funktioniert. In diesem Beitrag bauen wir Schritt für Schritt einen User Flow mit KI auf, mit draw.io für Confluence und Jira.

Warum draw.io für deine User-Flow-Diagramme nutzen?

draw.io ist vollgepackt mit praktischen Funktionen, damit deine User Flows genau so werden, wie du sie dir vorstellst. Deine Diagramme sind nativ in deiner Confluence-Seite oder deinem Jira-Ticket eingebettet, sodass Kolleginnen aus anderen Teams den User Flow schnell einsehen können. So können Designerinnen das Diagramm zum Beispiel beim Aufbau der UI heranziehen, und Entwickler*innen prüfen die Logik bei der Arbeit am Backend.

Weitere Vorteile:

• Diagramme mit KI generieren: Unser Generate-Tool (Sparkle-Button) eignet sich ideal, um die Grundlage für dein Diagramm in Sekunden zu legen.
• Mehrseitige Diagramme: Halte deine Diagramme übersichtlich, indem du komplexe Flows in Haupt- und Teilprozesse aufteilst.
• Custom-Links: Mache dein Diagramm interaktiv, indem du Shapes und Text mit externen Websites, internen Confluence-Überschriften und sogar anderen Seiten eines mehrseitigen Diagramms verknüpfst.
• Custom-Bilder: Lege Mobile-Mockups oder Festival-Icons auf deine Zeichenfläche, um deinem Team die User Experience besser zu veranschaulichen.

Seite 1: Prozess: User-Ticket-Kauf-Flow

Seite 2: Teilprozess: User-Campingoptionen-Flow

Schritt 1: Kenne dein Ziel und deine Zielgruppe

Bevor du den draw.io-Editor öffnest, frag dich: Was möchte mein User erreichen?

Stelle deine Zielgruppe in den Mittelpunkt. Nutze die Daten, die du bereits hast, wie Kundenfeedback oder CRM-Insights, um den Happy Path sowie mögliche Hindernisse zu identifizieren.

Für Flowchella ist unser Ziel einfach: Der User möchte das Ticket in seinem Posteingang. Aber unsere Zielgruppe ist nicht nur lokal: Wir haben Menschen, die aus aller Welt anreisen. Wenn wir Fans in verschiedenen Ländern ansprechen, kann eine Sprachbarriere zum großen Hindernis werden.

Wir können Reibung vermeiden, indem wir eigene Landingpages in den Muttersprachen unserer Fans erstellen. Wenn du Dinge wie Lokalisierung in deinem User Flow berücksichtigst, erfasst du nicht nur einen Prozess, sondern sorgst auch für einen reibungsloseren Checkout und mehr Ticketverkäufe.

Schritt 2: Erstelle deinen User Flow

Es gibt zwei Wege, das zu erreichen. Einer ist, deinen User Flow von Grund auf zu erstellen, indem du Shapes aus dem linken Seitenmenü per Drag-and-Drop ziehst.

Mit unserem KI-Generate-Tool (Sparkle-Button) sparst du dir dabei eine Menge Zeit. So gehst du vor:

• Suche den Sparkle-Button im oberen Menü.

• Gib deinen Prompt ein.
• Fahre mit der Maus über das generierte Diagramm, um eine Vorschau zu sehen.
• Klicke auf das Plus-Symbol (+), um das Diagramm zur Zeichenfläche hinzuzufügen. Alternativ klicke auf das Regenerate-Symbol, um mit demselben Prompt ein neues Diagramm zu generieren.

Für unseren Flowchella-Flow haben wir diesen Prompt verwendet:

User flow diagram. 1. User enters website 2. Selects tickets 3. Decision split camping or day ticket? 4. Add selection to cart 5. Review order 6. Input card details 7. Decision split: Transaction successful? If Yes Transaction complete If No Payment declined – loop back to Review order

Für Best Practices beim Prompt-Schreiben schau gern mal in diesen Blogartikel: So schreibst du bessere Anfragen für smart generierte Diagramme

Sobald das Diagramm auf der Zeichenfläche ist, kannst du Schriftarten, Farben und Bilder anpassen, um es zu individualisieren.

Schritt 3: Die „VIP”-Feinheiten hinzufügen

Wenn die Grundlagen stehen, ist es Zeit für den professionellen Feinschliff:

Mehrere Seiten zu deinem Diagramm hinzufügen

Klicke am unteren Rand des draw.io-Editors auf das Plus-Symbol (+), um einen neuen Tab hinzuzufügen. Das eignet sich hervorragend, um verschiedene „Was-wäre-wenn”-Szenarien sowie Teilprozesse zu zeigen, ohne deinen Haupt-Flow zu überladen.

Weitere Informationen findest du unter: So erstellst du mehrseitige Diagramme in draw.io

Custom-Links zu Shapes oder Text hinzufügen

Du kannst Links zu Shapes oder Text hinzufügen. Verlinke Jira-Tickets, Confluence-Seiten oder andere Webquellen mit relevanten Informationen.

• So fügst du einem Shape einen Custom-Link hinzu: Wähle das Shape aus, klicke mit der rechten Maustaste und wähle Edit Link.

• So fügst du Text einen Custom-Link hinzu: Markiere den Text, klicke dann im Text-Tab im rechten Seitenmenü auf das Link-Symbol unter Einfügen und füge die URL ein.

In unserem User-Flow-Diagramm werden Shapes mit Links zu anderen Seiten zu Buttons, über die Betrachter*innen zwischen Haupt- und Teilprozess navigieren können. Diese Links funktionieren sowohl im Bearbeitungsmodus des Diagramms als auch in der Confluence-Seitenvorschau.

Weitere Informationen findest du unter: So nutzt du Custom-Properties wie Tooltips, Custom-Links und Platzhalter in draw.io

Team-Abstimmung für einen reibungslosen Ablauf

Und schon bist du fertig! Ein sauberer, professioneller User Flow, der genau dort lebt, wo dein Team ihn braucht. Ob du ein Weltklasse-Festival oder ein simples App-Update planst: Dein Team in Confluence und Jira auf dem gleichen Stand zu halten, ist der beste Weg, um einen reibungslosen Ablauf sicherzustellen.

Das Beste daran? Mit draw.io hast du ein vollständiges Toolkit zur Hand: KI-gestützte Generierung, mehrseitige Diagramme und nahtloses Teilen im gesamten Atlassian-Ökosystem.

Möchtest du tiefer in die Welt von draw.io eintauchen? Besuche unsere linktr.ee-Seite, folge uns in den sozialen Medien und erfahre, wie andere draw.io verwenden und welche hilfreichen Tipps und Tricks es gibt.

Nutzt du draw.io noch nicht? Überzeuge dich selbst und starte noch heute deine kostenlose 30-Tage-Testversion. Oder buche eine kostenlose, unverbindliche Demo mit unserem Customer-Success-Team und erfahre, wie draw.io das Leben für dich und alle in deinem Unternehmen (und darüber hinaus) einfacher und produktiver macht!

Happy diagramming!