So zeichnen Sie eine Swimlane in Mermaid

In Unternehmen ist es üblich, dass mehrere Abteilungen gemeinsam an einem Prozess arbeiten – jede mit unterschiedlichen Rollen. In solchen Fällen empfiehlt es sich, Swimlane-Diagramme zu verwenden, um den schrittweisen Ablauf und die konkreten Zuständigkeiten jedes Teams klar darzustellen.

Indem Sie die Bahnen für jede Abteilung und jede verantwortliche Person zusammen mit dem Prozessablauf aufteilen, können Sie Arbeitsteilung und mehr auf einen Blick erfassen. Dies hilft auch dabei, Geschäftsabläufe zu standardisieren und zu verbessern sowie die Kommunikation zwischen Teams zu stärken.

In diesem Artikel erfahren Sie, wie Sie ein Swimlane-Diagramm mit Mermaid erstellen können – inklusive Beispielen, die Sie einfach kopieren können.

Warum sollte man ein Swimlane-Diagramm mit Mermaid erstellen?

Nachteile herkömmlicher Tools

Ein reales Beispiel: Ein Vertriebsteam stieß auf mehrere Probleme, als es PowerPoint zur Erstellung eines Swimlane-Diagramms für die Auftragsabwicklung nutzte:

• Hoher Bearbeitungsaufwand: Als das Logistikteam einen neuen Qualitätsprüfungsschritt hinzufügte, mussten alle Verbindungslinien manuell neu positioniert werden.
• Probleme bei der Zusammenarbeit: Eine unzureichende Versionskontrolle führte dazu, dass das Kundenservice-Team mit einem veralteten Prozessdiagramm arbeitete.
• Druckprobleme: Titel und Inhalte waren beim Drucken häufig falsch ausgerichtet.

Was Mermaid besser macht

Mermaid ist ein textbasiertes Diagramm-Tool, das viele dieser Probleme dank folgender Funktionen löst:

• Versionsverfolgung: Funktioniert mit Git, um einen klaren Verlauf aller Änderungen an Ihrem Swimlane-Diagramm zu behalten.
• Kostenlos: Der Mermaid-Editor ist vollständig kostenlos nutzbar.

Einschränkungen von Mermaid

Allerdings hat Mermaid auch Nachteile. Bei Swimlane-Diagrammen ist es nicht ganz einfach, alles perfekt auszurichten – besonders wenn Sie versuchen, die Bahnen sauber zu formatieren. Dennoch können Sie Prozesse und Abteilungen in einem Diagramm darstellen.

Da Mermaid Code verwendet, um Diagramme zu erstellen, gibt es eine Einarbeitungszeit. Es ist gut geeignet für alle, die sich mit dem Schreiben von Code wohlfühlen. Falls Ihnen das zu aufwendig ist, gibt es einfachere Alternativen.

Tools wie EdrawMax oder Visio ermöglichen es Ihnen, Swimlane-Diagramme per Drag-and-Drop mit Formen und Vorlagen zu erstellen – ganz ohne Code.

So erstellen Sie Swimlanes in Mermaid

Grundlegende Syntax

Um Swimlanes in Mermaid zu erstellen, schreiben Sie zunächst ein einfaches Flussdiagramm in diesem Format:

flowchart LR
subgraph Abteilung A
A[Schritt 1]
end
subgraph Abteilung B
B[Schritt 2]
end
subgraph Abteilung C
subgraph Unterabteilung C1
C[Schritt 3]
end
subgraph Unterabteilung C2
D[Schritt 4]
end
end
A --> B --> CD --> B

Hier ist eine Aufschlüsselung der in der Syntax verwendeten Codes für Ihr besseres Verständnis:

Flowchart LR

Dies weist Mermaid an, ein Flussdiagramm zu erstellen, das von links nach rechts verläuft. Sie können LR in TB (von oben nach unten), RL (von rechts nach links) oder BT (von unten nach oben) ändern, je nach gewünschtem Layout.

Verwendung von Subgraph zur Erstellung von Swimlanes

Subgraph definiert einen Container oder eine Bahn, wie etwa eine Abteilung oder Rolle. Alle Schritte innerhalb des Subgraphs werden visuell gruppiert. Sie können Subgraphs auch verschachteln, um Hierarchien darzustellen, z. B. eine Abteilung mit Unterteams. Beispiel:

Beispiel
subgraph Abteilung A
A[Schritt 1]
end

Hier sind einige wichtige Tipps:

• Fügen Sie immer ein Leerzeichen zwischen subgraph und dem Label ein (z. B. subgraph Abteilung A).
• Mermaid erfordert keine Einrückung, aber sie hilft, den Code lesbar zu halten – besonders beim Verschachteln von Subgraphs.

Ablauf darstellen

Verwenden Sie „-->", um jeden Schritt der Reihe nach zu verbinden. Dies zeigt die Richtung des Prozesses.

Swimlanes in Mermaid anpassen

Sie können Ihre Mermaid Swimlane-Diagramme gestalten und beschriften, um Klarheit und visuelle Attraktivität zu verbessern. Hier ist ein Beispiel:

Beispiel
flowchart LR
subgraph Abteilung A
A[Schritt 1]
style A fill:#e6f3ff
end
subgraph Abteilung B
B[Schritt 2]
style B fill:#fffbe6
end
A -->|Anfrage senden| B
style Abteilung A stroke:#1890ff
style Abteilung B stroke:#faad14

Auch hier eine Aufschlüsselung der verwendeten Syntax:

Style-Befehl

Verwenden Sie style, um das Aussehen von Knoten oder Subgraphs anzupassen. Sie können ändern:

• fill für Hintergrundfarbe
• stroke für Rahmenfarbe

Beispiel
style A fill:#e6f3ff
style Abteilung A stroke:#1890ff

Linienstile

Um das Erscheinungsbild von Verbindungslinien zu ändern:

• „-.->‟ erstellt eine gestrichelte Linie
• „==>‟ erstellt einen fetten Pfeil

Beschriftungen zu Verbindungslinien hinzufügen

Verwenden Sie |Ihre Beschriftung| zwischen Knoten, um den Ablauf zu erklären.

Beispiel
A -->|Prozess Schritt A| B
B -.->|Bedingt| C
C ==> D

So können Sie Entscheidungen, Nachrichten oder Bedingungen direkt auf den Linien anzeigen – ideal, um Ihr Diagramm lesbar zu halten.

Verwendung eines Mermaid-Editors

Sobald Sie den Mermaid Code für Ihr Swimlane-Diagramm geschrieben haben, benötigen Sie einen Editor, um ihn visuell darzustellen. Im Folgenden finden Sie einige empfohlene Mermaid-Editoren:

• Mermaid Live Editor. Ein browserbasiertes Tool, mit dem Sie Ihren Code einfügen und das Diagramm sofort sehen können.
• Markdown Preview Enhanced. Ein Visual Studio Code-Plugin, das Mermaid-Diagramme in Markdown-Dateien rendert.
• EdrawMax. Unterstützt Mermaid-Code und Drag-and-Drop-Diagrammerstellung und ist ideal für Nutzer, die visuelle Tools bevorzugen.

Mermaid Swimlane-Notation mit KI generieren und bearbeiten

Während es wichtig ist, die Grundlagen von MermaidMermaid zu lernen, ist es auch sinnvoll, sich für schnellere Ergebnisse auf KI zu verlassen. So müssen Sie den Code nicht manuell eingeben.

Sie können verschiedene Tools wie ChatGPT, Claude, Gemini oder andere verwenden, die Sie bevorzugen.

Schritt 1

Öffnen Sie Ihren bevorzugten KI-Chatbot und erstellen Sie eine Eingabeaufforderung, die Folgendes beschreibt:

• 1) dass die Mermaid-Notation verwendet werden soll;
• 2) den Inhalt Ihres Swimlane-Diagramms;
• 3) das Design Ihres Diagramms, falls gewünscht. Denken Sie daran: Je detaillierter, desto besser.

Hier ein Beispiel-Prompt: „Erstelle ein Swimlane-Diagramm mit Mermaid-Syntax/Notation, das den Aufgabenablauf in einer Anwaltskanzlei zeigt."

Schritt 2

Kopieren Sie dann den generierten Code und fügen Sie ihn in Mermaid ein.

Schritt 3

Wenn Sie einen Teil des Diagramms bearbeiten möchten, beschreiben Sie die Änderung so präzise wie möglich gegenüber der KI.

Schritt 4

Nachdem die KI Ihren neuen Flussdiagramm-Code generiert hat, kopieren Sie ihn erneut und fügen ihn in die Mermaid Live-Website ein.

Zwei Beispiele für Swimlane-Diagramme in Mermaid-Notation

Ablauf einer medizinischen Untersuchung

Hier ist ein Beispiel eines Swimlane-Diagramms, das mit Mermaid-Syntax erstellt wurde und den Ablauf einer medizinischen Untersuchung zeigt.

Einige zentrale Designpunkte sind:

1. Klare Trennung zwischen Abteilungen
• Verwenden Sie einen Subgraph, um das Diagramm in Notaufnahme, Radiologie und Kardiologie zu unterteilen.
• Wenden Sie unterschiedliche Farben (z. B. rot, blau, grün) für jede Abteilung an, um die visuelle Klarheit zu verbessern.
2. Leicht nachvollziehbarer Ablauf
• Ordnen Sie den Prozess von links nach rechts (LR) an, um die Notfallsequenz auf einen Blick zu zeigen.
• Verwenden Sie einen kreisförmigen Ablauf (z. B. B → C → D → E → B), um zu zeigen, wie Tests, Diagnosen und Behandlung sich in einem Zyklus wiederholen.

Spesenerstattungs-Ablauf

Dieses Beispiel zeigt ein Swimlane-Diagramm, das mit Mermaid-Syntax erstellt wurde und den Prozess der Spesenerstattung darstellt.

Hier sind die wichtigsten Designpunkte dieses Flussdiagramms:

1. Klare Trennung nach Abteilungen
• Verwenden Sie einen Subgraph, um den Ablauf in die Bereiche Buchhaltung, Verwaltung und Antragsteller zu unterteilen.
• Dies hilft, die Zuständigkeiten jeder Abteilung im Prozess zu verdeutlichen.
2. Visualisierung des Erstattungsprozesses
• Ordnen Sie die Schritte von der Antragstellung über die Genehmigung bis zur Zahlung in Links-nach-Rechts-Richtung (LR) an.
• Fügen Sie in der Genehmigungsphase eine Rückkopplungsschleife hinzu, um zu zeigen, dass unvollständige Anträge an den Antragsteller zurückgesendet werden.

Häufig gestellte Fragen

EdrawMax Desktop

280+ Diagrammtypen erstellen

Windows, Mac, Linux (läuft in allen Umgebungen)

Professionelle eingebaute Ressourcen und Vorlagen

Professionelle Software für Unternehmen

Datensicherheit auf Unternehmensebene

Gratis Testen Gratis Testen Gratis Testen

Gratis Testen

EdrawMax Online

280+ Diagrammtypen erstellen

Zugriff auf Diagramme überall und jederzeit

Vorlagen Community

Teammanagement und Zusammenarbeit

Persönliche Cloud und Dropbox-Integration

Online Testen