Mermaid-Unterstützung

Diagrammix3 unterstützt den Import und Export von Diagrammen mithilfe 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 einer Mermaid-Syntax:

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

Mermaid-Diagramme importieren

Aus der Zwischenablage

1. Kopieren Sie die Mermaid-Syntax in Ihre Zwischenablage
2. Gehen Sie in Diagrammix3 zu Ablage → Importieren → Mermaid aus Zwischenablage
3. Das Diagramm wird auf Ihrem Canvas erstellt

Aus einer Datei

1. Gehen Sie zu Ablage → Importieren → Mermaid-Datei...
2. Wählen Sie eine .mmd- oder .mermaid-Datei
3. Das Diagramm wird auf Ihr Canvas importiert

Unterstützte Diagrammtypen

Zustandsdiagramm-Syntax

Zustandsdiagramme modellieren die Zustände, in denen sich ein Objekt befinden 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
• : label fügt Übergangsbeschriftungen hinzu
• Verschachtelte Zustände verwenden Einrückung

Zusammengesetzte Zustände:

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

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

Importbeispiele

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 Flussdiagramm von oben nach unten mit Rechteck-, abgerundeten Rechteck- und Rautenformen, verbunden durch beschriftete Pfeile.

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.

Nach Mermaid exportieren

Aktuelles Diagramm exportieren

1. Gehen Sie zu Ablage → Exportieren → Mermaid...
2. Wählen Sie einen Speicherort
3. Das Diagramm wird als .mmd-Datei exportiert

Als Mermaid kopieren

1. Wählen Sie die Formen aus, die Sie exportieren möchten (oder wählen Sie alle mit Cmd+A)
2. Gehen Sie zu Bearbeiten → Als Mermaid kopieren
3. Fügen Sie die Mermaid-Syntax ein, wo Sie sie benötigen

Importierte Diagramme bearbeiten

Nach dem Import werden Mermaid-Diagramme zu nativen Diagrammix-Objekten. Sie können:

• Formen frei verschieben und skalieren
• Stile ändern über den Inspektor (Farben, Schriften, Linienstile)
• Neue Elemente hinzufügen mit Diagrammix-Werkzeugen
• Verbindungen ändern durch Ziehen der Endpunkte
• Auto-Layout anwenden, um das Diagramm neu zu organisieren

Die Verbindung zur ursprünglichen Mermaid-Quelle wird nicht beibehalten — Änderungen werden direkt an den Diagrammobjekten vorgenommen.

Einschränkungen

• Komplexe Gestaltung: Mermaid-Styling-Anweisungen werden möglicherweise nicht vollständig übersetzt
• Teildiagramme: Werden in gruppierte Formen umgewandelt
• Erweiterte Funktionen: Einige Mermaid-spezifische Funktionen (wie Klick-Handler) werden ignoriert
• Roundtrip: Der Export eines importierten Diagramms erzeugt möglicherweise keine identische Mermaid-Syntax

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. Einheitlich gestalten: Wenden Sie Diagrammix-Stile für ein professionelles Erscheinungsbild an
4. Quelle aufbewahren: Speichern Sie Ihre Original-Mermaid-Dateien für die Versionskontrolle