Mermaid-Unterstützung

Diagrammix3 unterstützt das Importieren und Exportieren von Diagrammen mit der Mermaid-Syntax, einer beliebten textbasierten Diagrammsprache.

Was ist Mermaid?

Mermaid ist ein JavaScript-basiertes Diagrammwerkzeug, das eine Markdown-ähnliche Syntax zur Definition von Diagrammen verwendet. Es wird häufig in Dokumentationen, Wikis und README-Dateien eingesetzt.

Beispiel für Mermaid-Syntax:

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Mermaid-Diagramme importieren

Hinweis: Mermaid-Import und -Export sind ein PRO-Feature.

Mermaid einfügen (mit Vorschau & Validierung)

Die schnellste Möglichkeit, Mermaid auf Ihr Canvas zu bringen, ist das Panel Mermaid einfügen, das das Diagramm vor der Platzierung in der Vorschau anzeigt und validiert.

1. Gehen Sie zu Bearbeiten → Mermaid einfügen
2. Fügen Sie Ihre Mermaid-Syntax in den Editor ein oder tippen Sie sie ein
3. Während Sie tippen, validiert Diagrammix die Syntax live und zeigt an:
   • ob das Diagramm gültig ist
   • den erkannten Diagrammtyp
   • die Knoten- und Verbinderanzahl
   
   Fehler werden inline gekennzeichnet, damit Sie sie beheben können, bevor sie Ihr Canvas berühren.
4. Klicken Sie auf Anwenden, um das Diagramm zu platzieren, oder auf Abbrechen, um abzubrechen

Das Einfügen von Mermaid aus der Zwischenablage durchläuft dieselbe Validierung, sodass fehlerhafte Syntax nie ein beschädigtes Diagramm erzeugt.

Hinweis: Mermaid wird durch Einfügen oder Eintippen in das Panel „Mermaid einfügen" importiert — es gibt keinen separaten Befehl „Datei importieren". Um eine .mmd-Datei einzubinden, öffnen Sie sie in einem beliebigen Texteditor und fügen Sie deren Inhalt ein.

Unterstützte Diagrammtypen

Diagrammix erkennt eine breite Palette von Mermaid-Diagrammtypen, darunter:

Andere Mermaid-Typen (Zeitleiste, User Journey, Quadrant, XY-Diagramm, Sankey, Git-Graph und mehr) werden erkannt und importiert, aber als generischer Knoten-und-Verbinder-Graph gerendert statt als spezialisiertes Layout. Das Panel „Mermaid einfügen" zeigt Ihnen den erkannten Typ an, bevor Sie ihn anwenden.

Zustandsdiagramm-Syntax

Zustandsdiagramme modellieren die Zustände, die ein Objekt einnehmen kann, und Übergänge zwischen Zuständen.

Einfaches Zustandsdiagramm:

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

Zustände und Übergänge:

• [*] repräsentiert Start- und Endzustände
• --> erstellt einen Übergangspfeil
• : Bezeichnung fügt Übergangsbezeichnungen hinzu
• Verschachtelte Zustände verwenden Einrückung

Zusammengesetzte Zustände:

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

Ergebnis: Ein Zustandsmaschinendiagramm mit korrekten Zustandsformen und beschrifteten Übergängen.

Import-Beispiele

Flussdiagramm

Mermaid-Eingabe:

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Ergebnis: Ein von oben nach unten verlaufendes Flussdiagramm mit Rechteck-, abgerundeten Rechteck- und Rautenformen, die mit beschrifteten Pfeilen verbunden sind.

Sequenzdiagramm

Mermaid-Eingabe:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

Ergebnis: Ein Sequenzdiagramm mit zwei Teilnehmern und Nachrichtenpfeilen.

Klassendiagramm

Mermaid-Eingabe:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

Ergebnis: Ein UML-Klassendiagramm mit Vererbungsbeziehungen.

In Mermaid exportieren

Mermaid kopieren

Diagrammix exportiert über die Zwischenablage nach Mermaid — es gibt keinen separaten Befehl „In Datei exportieren".

1. Wählen Sie die Formen aus, die Sie exportieren möchten, oder lassen Sie nichts ausgewählt, um das gesamte Canvas zu exportieren
2. Gehen Sie zu Bearbeiten → Mermaid kopieren
3. Fügen Sie die Mermaid-Syntax überall ein, wo Sie sie benötigen (und speichern Sie sie anschließend als .mmd-Datei, falls gewünscht)

Der Export passt sich an, was sich im Geltungsbereich befindet: Eine Mindmap wird als mindmap-Syntax kopiert und eine UML-Klassen- oder Sequenzseite als classDiagram / sequenceDiagram; alles andere wird als flowchart exportiert.

In Mermaid weiterbearbeiten (Round-Trip)

Importierte Mermaid-Diagramme behalten ihre Quelle, sodass Sie weiterhin in Mermaid-Notation arbeiten können, anstatt Formen einzeln zu bearbeiten.

1. Wählen Sie ein importiertes Mermaid-Diagramm aus
2. Klicken Sie auf die Schaltfläche </> (Mermaid-Quelle bearbeiten) am Diagramm
3. Das Panel Mermaid-Quelle bearbeiten öffnet sich mit dem ursprünglichen Mermaid-Text vorausgefüllt
4. Bearbeiten Sie den Text und rendern Sie neu, um das Diagramm zu aktualisieren

Wenn Ihre Änderungen die Struktur des Diagramms verändern würden (zum Beispiel das Entfernen von Knoten, von denen andere Elemente abhängen), listet das Panel diese Inkompatibilitäten vorab auf, damit Sie entscheiden können, bevor Sie bestätigen.

Als native Objekte bearbeiten

Sie können ein importiertes Diagramm auch direkt als native Diagrammix-Objekte bearbeiten:

• Formen frei verschieben und in der Größe ändern
• Stile ändern mit dem Inspektor (Farben, Schriften, Linienstile)
• Neue Elemente hinzufügen mit Diagrammix-Werkzeugen
• Verbindungen ändern durch Ziehen von Endpunkten
• Auto-Layout anwenden, um das Diagramm neu zu organisieren

Tipp: Entscheiden Sie im Voraus, wie Sie ein Diagramm pflegen möchten. Verwenden Sie den </>-Quelleditor, um es Mermaid-gesteuert zu halten, oder bearbeiten Sie Formen direkt für eine einmalige visuelle Politur. Umfangreiche manuelle Bearbeitungen können von dem abweichen, was das Neu-Rendern der Quelle erzeugen würde.

Einschränkungen

• Komplexes Styling: Mermaid-Styling-Direktiven werden möglicherweise nicht vollständig übersetzt
• Untergraphen: Werden in gruppierte Formen umgewandelt
• Erweiterte Funktionen: Einige Mermaid-spezifische Funktionen (wie Click-Handler) werden ignoriert
• Round-Trip: Das Exportieren eines Diagramms, das Sie stark manuell bearbeitet haben, reproduziert möglicherweise keine identische Mermaid-Syntax — bevorzugen Sie für Round-Trips den </>-Quelleditor

Tipps

1. Nach dem Import aufräumen: Verwenden Sie Auto-Layout, um importierte Diagramme zu organisieren
2. Beziehungen prüfen: Überprüfen Sie, ob Beziehungstypen korrekt importiert wurden
3. Konsistent gestalten: Diagrammix-Stile für ein poliertes Aussehen anwenden
4. Quelle behalten: Speichern Sie Ihre originalen Mermaid-Dateien zur Versionskontrolle