Diagramm als Code mit Mermaid in Lucidchart

Geschrieben von:  Shanna S
Letzte Aktualisierung:  

Verwenden Sie Diagramm als Code, um mit Mermaid ein Lucidchart-Diagramm zu erstellen. Sobald Sie den Mermaid-Code geschrieben haben, können Sie automatisch ein Diagramm in Ihr Lucid-Dokument generieren.

Der zur Erstellung eines Diagramms eingegebene Mermaid-Code ist nur mit der englischen Sprache kompatibel. Wenn Sie in Lucid mit einer anderen Sprache arbeiten, muss der Code ins Englische übersetzt werden.

Verfügbare Tarife: Individuell, Team und Enterprise.

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 (diagram-as-code-icon-in-lucidchart.jpg) 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.

Hinweis: Falls kein Diagramm generiert wird und die Fehlermeldung „Syntaxfehler“ angezeigt wird. Bitte überprüfen Sie die Syntax." Verwenden Sie stattdessen die bereitgestellten Linien- und Spaltennummern, um sicherzustellen, dass der Mermaid-Code korrekt formatiert ist, und versuchen Sie es erneut.

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.
  5. Klicken Sie auf Generieren.

Das Diagramm wird auf der Arbeitsfläche erstellt.

Diagramm-als-Code-mit-Meerjungfrau-in-Lucidchart-Diagramm-als-Code-mit-Meerjungfrau-in-Lucidchart.gif

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.

manually-build-flowchart-diagram-using-mermaid-code-in-lucidchart.gif

Erfahren Sie mehr: Eine Anleitung für das Beginnen in Mermaid finden Sie in diesem Mermaid-Benutzerleitfaden aus dem Mermaid-Hilfecenter. Der angegebene Link befindet sich außerhalb des Hilfecenters von Lucid und wir können nicht für die Richtigkeit der Inhalte garantieren.

Ein Diagramm bearbeiten

Ein aus Code generiertes Diagramm wird als Bild auf der Arbeitsfläche angezeigt und 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 Sie die Bearbeitung durchführen, wird das Diagramm auf der Leinwand 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 ein Fischgrätendiagramm, um die Ursache-Wirkungs-Beziehung während der Ursachenanalyse visuell darzustellen.
  • Verschachtelte Baumdiagramme: Visualisierung hierarchischer Datenstrukturen mithilfe verschachtelter Rechtecke.
  • Radar-Karte: Erstellen Sie ein Diagramm, um mehrere quantitative Variablen auf einem radialen Gitter 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 aussagekräftige Linien-, Balken- oder Streudiagramme, um die Beziehung zwischen Datenpunkten zu visualisieren.

Mehr erfahren: Um mehr über die Mermaid-Syntax und die Verwendung unterstützter Diagramme in Lucidchart zu erfahren, lesen Sie diesen Beitrag der Lucid Community

FAQ

Welche Version von Mermaid wird von Lucidchart unterstützt? 
Lucidchart ist für die Unterstützung von Mermaid Version 11.14 optimiert. 

Wie kann ich ein Diagramm gestalten und formatieren, das ich mit Mermaid-Code erstellt habe?
Wenn Sie in Lucid ein Diagramm mithilfe von Mermaid-Code generieren, wird es als Bild auf der Arbeitsfläche angezeigt. Um den Stil und das Format Ihres Diagramms zu bearbeiten, können Sie die Mermaid-Styling-Syntax direkt in den Code einfügen.

Geben Sie Feedback zu diesem Artikel

Haben Sie Feedback zu diesem Artikel? Berichten Sie uns hier von Ihren Erfahrungen. 

Haben Sie gefunden wonach Sie gesucht haben?

Haben Sie noch eine Frage oder möchten Sie Ihre Erfahrungen mit anderen teilen? Besuchen Sie unsere Community,   um Hilfe zu bekommen und mit anderen zusammenzuarbeiten.