Diagram-Syntax

Die Syntax von Mermaid wird verwendet, um Diagramme zu erstellen. Sie werden feststellen, dass es nicht zu kompliziert ist und in einem Tag erlernt werden kann. Die nächsten Abschnitte gehen eingehend auf die Syntax jeder Diagrammart ein.

Syntax, zusammen mit Deployment und Konfiguration, bildet das gesamte Mermaid.

Diagrammbeispiele finden Sie im Mermaid Live Editor, der auch ein großartiger Übungsbereich ist.

Syntaxstruktur

Man würde bemerken, dass alle Diagrammdefinitionen beginnen mit einer Deklaration des Diagrammtyps, gefolgt von den Definitionen des Diagramms und seines Inhalts. Diese Deklaration informiert den Parser darüber, welche Art von Diagramm der Code erzeugen soll.

Beispiel: Der folgende Code ist für ein Entitäts-Relationen-Diagramm, das durch die Deklaration erDiagram spezifiziert ist. Was folgt, ist die Definition der verschiedenen Entities, die darin dargestellt sind.

Code:

Die Erste Schritte Sektion kann auch einige praktische Beispiele für die Mermaid-Syntax bieten.

Diagrammbrechen

Man sollte auf einige Wörter oder Symbole achten, die Diagramme brechen können. Diese Wörter oder Symbole sind rar und beeinflussen oft nur spezifische Diagrammtypen. Die Tabelle unten wird kontinuierlich aktualisiert.

Diagrammbrecher	Grund	Lösung
Kommentare
%%{``}%%	Ähnlich wie Direktiven, verwirrt den Renderer.	In Kommentaren mit %%, verwenden Sie keine "{}".
Flow-Charts
'end'	Das Wort "End" kann Flowcharts und Sequenzdiagramme brechen	Einschließen in Anführungszeichen, um Brüche zu verhindern.
Knoten innerhalb von Knoten	Mermaid wird bei verschachtelten Formen verwirrt	Einschließen in Anführungszeichen, um Brüche zu verhindern

Mermaid Live Editor

Jetzt, wo Sie gesehen haben, was Sie nicht zu Ihren Diagrammen hinzufügen sollten, können Sie damit im Mermaid Live Editor experimentieren.

Konfiguration

Die Konfiguration ist der dritte Teil von Mermaid, nach Deployment und Syntax. Sie befasst sich mit den verschiedenen Möglichkeiten, wie Mermaid in unterschiedlichen Deployments angepasst werden kann.

Wenn Sie daran interessiert sind, Ihre Mermaid-Diagramme zu ändern und anzupassen, finden Sie die verfügbaren Methoden und Werte für die Konfiguration hier. Dazu gehören Themen. Dieser Abschnitt stellt die verschiedenen Methoden zur Konfiguration des Verhaltens und des Aussehens von Mermaid-Diagrammen vor. Die folgenden sind die am häufigsten verwendeten Methoden, und sie sind alle mit den Methoden zum Deployment von Mermaid verbunden.

Konfigurationsabschnitt im Live Editor.

Hier können Sie bestimmte Werte bearbeiten, um das Verhalten und das Aussehen des Diagramms zu ändern.

Der initialize() Aufruf

Verwendet, wenn Mermaid über eine API oder durch ein <script>-Tag aufgerufen wird.

Direktiven

Erlauben eine begrenzte Neukonfiguration eines Diagramms kurz bevor es gerendert wird. Es kann den Schriftstil, die Farbe und andere ästhetische Aspekte des Diagramms ändern. Sie können eine Direktive zusammen mit Ihrer Definition innerhalb von %%{ }%% über oder unter Ihrer Diagrammdefinition übergeben.

Themenmanipulation

Eine Anwendung der Verwendung von Direktiven zur Änderung von Themen. Theme ist ein Wert in Mermaids Konfiguration, der das Farbschema für Diagramme bestimmt.

Layout und Aussehen

Wir haben die Art und Weise umstrukturiert, wie Mermaid Diagramme rendert, wodurch neue Funktionen wie das Auswählen von Layout und Aussehen ermöglicht werden. Aktuell wird dies für Flussdiagramme und Zustandsdiagramme unterstützt, mit Planungen, die Unterstützung auf alle Diagrammtypen auszudehnen.

Auswahl des Diagrammaussehens

Mermaid bietet eine Vielzahl von Stilen oder „Aussehen“ für Ihre Diagramme, damit Sie das visuelle Erscheinungsbild an Ihre spezifischen Bedürfnisse oder Vorlieben anpassen können. Egal, ob Sie einen handgezeichneten oder klassischen Stil bevorzugen, Sie können Ihre Diagramme leicht anpassen.

Verfügbare Aussehen:

• Handgezeichnetes Aussehen: Für eine persönlichere, kreative Note bringt das handgezeichnete Aussehen eine skizzenhafte Qualität in Ihre Diagramme. Dieser Stil ist perfekt für informelle Einstellungen oder wenn Sie Ihren Diagrammen ein wenig Persönlichkeit verleihen möchten.
• Klassisches Aussehen: Wenn Sie den traditionellen Mermaid-Stil bevorzugen, behält das klassische Aussehen das ursprüngliche Erscheinungsbild bei, das vielen Benutzern vertraut ist. Es ist großartig für Konsistenz über Projekte hinweg oder wenn Sie die vertraute Ästhetik beibehalten möchten.

So wählen Sie ein Aussehen an:

Sie können ein Aussehen auswählen, indem Sie den Parameter "look" im Metadatenbereich Ihres Mermaid-Diagrammcodes hinzufügen. Hier ist ein Beispiel:

Auswahl von Layout-Algorithmen

Zusätzlich zur Anpassung des Aussehens Ihrer Diagramme ermöglicht Mermaid Chart jetzt die Auswahl verschiedener Layout-Algorithmen, um Ihre Diagramme besser zu organisieren und darzustellen, insbesondere bei komplexeren Strukturen. Der Layout-Algorithmus bestimmt, wie Knoten und Kanten auf der Seite angeordnet sind.

Unterstützte Layout-Algorithmen:

• Dagre (Standard): Dies ist der klassische Layout-Algorithmus, der schon lange in Mermaid verwendet wird. Er bietet ein gutes Gleichgewicht zwischen Einfachheit und visueller Klarheit, was ihn ideal für die meisten Diagramme macht.
• ELK: Für diejenigen, die anspruchsvollere Layoutfähigkeiten benötigen, insbesondere bei großen oder komplexen Diagrammen, bietet das ELK (Eclipse Layout Kernel) Layout fortgeschrittene Optionen. Es bietet eine optimierte Anordnung, die Überlappungen reduzieren und die Lesbarkeit verbessern kann. Dies ist nicht standardmäßig enthalten, muss jedoch hinzugefügt werden, wenn Sie Mermaid für Websites/Anwendungen integrieren möchten, die ELK-Unterstützung wünschen.

So wählen Sie einen Layout-Algorithmus an:

Sie können den Layout-Algorithmus direkt im Metadatenbereich Ihres Mermaid-Diagrammcodes angeben. Hier ist ein Beispiel:

In diesem Beispiel konfiguriert die Zeile layout: elk das Diagramm, um den ELK-Layout-Algorithmus zu verwenden, zusammen mit dem handgezeichneten Aussehen und dem dunklen Thema.

Anpassung des ELK-Layouts:

Bei der Verwendung des ELK-Layouts können Sie die Konfiguration des Diagramms weiter verfeinern, z. B. wie Knoten platziert werden und ob parallele Kanten kombiniert werden sollen:

• Um parallele Kanten zu kombinieren, verwenden Sie mergeEdges: true | false.
• Um die Knotenplatzierungsstrategie zu konfigurieren, verwenden Sie nodePlacementStrategy mit den folgenden Optionen:
  • SIMPLE
  • NETWORK_SIMPLEX
  • LINEAR_SEGMENTS
  • BRANDES_KOEPF (Standard)

Beispielkonfiguration:

---
config:
  layout: elk
  elk:
    mergeEdges: true
    nodePlacementStrategy: LINEAR_SEGMENTS
---
flowchart LR
  A[Start] --> B{Wählen Sie den Pfad}
  B -->|Option 1| C[Pfad 1]
  B -->|Option 2| D[Pfad 2]

#### Verwendung des Dagre-Layouts mit klassischem Aussehen:

Ein weiteres Beispiel:

---
config:
  layout: dagre
  look: classic
  theme: default
---

flowchart LR
A[Start] --> B{Wählen Sie den Pfad}
B -->|Option 1| C[Pfad 1]
B -->|Option 2| D[Pfad 2]

Diese Optionen geben Ihnen die Flexibilität, Diagramme zu erstellen, die nicht nur großartig aussehen, sondern auch so angeordnet sind, dass sie am besten zur Struktur und zum Fluss Ihrer Daten passen.

Bei der Integration von Mermaid können Sie Look- und Layout-Konfigurationen mit dem Initialize-Aufruf einfügen. Hier fügen Sie auch das Laden von ELK hinzu.