Diagramm als Code mit Mermaid in Lucidchart

Menü „Diagramm als Code“ aufrufen

Um auf das Diagramm als Code-Menü in Lucidchart zuzugreifen, führen Sie die folgenden Schritte aus:

1. Wählen Sie das „Diagramm als Code“-Symbol () in der Haupttoolleiste ganz links im Arbeitsbereich aus.

Diagramm erstellen

Machen Sie sich mit dem „Diagramm als Code“-Prozess vertraut, indem Sie eines unserer bereitgestellten Beispiele für jeden unterstützten Diagrammtyp verwenden. Wenn Sie bereit sind, erzeugen Sie ein Diagramm, indem Sie Ihren eigenen Mermaid-Code schreiben.

Verwenden Sie ein bereitgestelltes Beispiel

Um ein Diagramm mit den bereitgestellten Beispielen zu erstellen, führen Sie die folgenden Schritte aus dem Menü „Diagramm als Code“ aus:

1. Wählen Sie +Neues Mermaid-Diagramm.
2. Klicken Sie unten im bereitgestellten Editor auf eine der Beispieloptionen.
3. Der Code wird automatisch dem Editor für den ausgewählten Beispieltyp hinzugefügt.
4. Bearbeiten Sie den Beispielcode ganz nach Bedarf.

Das Diagramm wird auf der Arbeitsfläche erstellt, während Sie den Code hinzufügen und bearbeiten.

Ganz neu erstellen mit Mermaid

Um ein Diagramm ganz neu mit Mermaid-Code zu erstellen, führen Sie die folgenden Schritte aus dem Menü „Diagramm als Code“ aus:

1. Wählen Sie +Neues Mermaid-Diagramm.
2. Geben Sie Ihren Code in den bereitgestellten Editor ein.
3. Klicken Sie auf Generieren.

Das Diagramm wird auf der Arbeitsfläche erstellt, während Sie den Code hinzufügen und bearbeiten.

Ein Diagramm bearbeiten

Ein aus Code generiertes Diagramm muss durch Öffnen und Bearbeiten des Codes aktualisiert werden. Um dies zu tun:

1. Öffnen Sie den zugehörigen Code-Editor auf eine der folgenden Weisen:
   • Klicken Sie auf das Diagramm auf der Arbeitsfläche.
   • Navigieren Sie zum Menü „Diagramm als Code“, blättern Sie es durch und wählen Sie das Diagramm aus, das Sie bearbeiten möchten.
2. Klicken Sie in den Editor und nehmen Sie Ihre Änderungen vor.
   • Während der Bearbeitung wird das Diagramm auf der Arbeitsfläche in Echtzeit aktualisiert.

Das Diagramm wird auf der Arbeitsfläche aktualisiert.

Unterstützte Diagrammtypen

Die folgenden Diagrammtypen werden mit Mermaid-Code unterstützt:

• Klasse: Bildet die Struktur eines bestimmten Systems ab, indem ihre Klassen, Attribute, Vorgänge und die Beziehungen zwischen Objekten modelliert werden.
• C4: Nutzen Sie die vier Ebenen der Modelle (Kontext, Container, Komponenten und Code) je nach Ihrer Zielgruppe.
• Entitätsrelation: Stellen Sie eine Datenbank visuell dar, um Relationen zwischen Feldern zu zeigen.
• Flussdiagramm: Erstellen Sie leicht nachvollziehbare Flussdiagramme, die komplexe Systeme und Prozesse abdecken.
• Gantt: Stellen Sie den Zeitplan und den Fortschritt bei der Verwaltung eines Projekts visuell dar.
• Ishikawa: Erstellen Sie Fischgrätendiagramme, um bei der Ursachenanalyse Relationen zwischen Ursache und Wirkung visuell darzustellen.
• Verschachtelte Treemap: Visualisieren Sie hierarchische Datenstrukturen mithilfe verschachtelter Rechtecke.
• Netzdiagramm: Erstellen Sie ein Diagramm, um mehrere quantitative Variablen auf einem radialen Raster zu vergleichen.
• Sequenz: Stellt die Prozesse und Objekte dar, die gleichzeitig existieren, und die Nachrichten, die zwischen ihnen ausgetauscht werden, um eine Funktion auszuführen, bevor die Lebenslinie endet.
• Zustand: Erstellen Sie ein Verhaltensdiagramm, um Übergänge zwischen verschiedenen Objekten darzustellen.
• XY-Diagramm: Erstellen Sie umfassende Linien-, Balken- oder Streudiagramme, um Relationen zwischen Datenpunkten zu visualisieren.

FAQ

Welche Version von Mermaid wird in Lucidchart unterstützt? 
Lucidchart wurde dazu optimiert, die Version 11.14 von Mermaid zu unterstützen. 

Geben Sie Feedback zu diesem Artikel