Zeichnen mit Mermaid

11. April 2022 Ralf Hersel Lesezeit: 6 Minuten 🗪 2 Kommentare

Deklarative Grafiken mit der Javascript-Library Mermaid erstellen.

Die meisten von uns haben ab und zu die Notwendigkeit, eine technische oder geschäftliche Zeichnung zu erstellen. Sei es Gantt-Diagramm, eine Kuchengrafik, ein Sequenz-Diagramm oder ähnliches. Normalerweise kann man dafür eines der bekannten Zeichenwerkzeuge, wie LibreOffice Draw, Dia, Diagrams.net usw. verwenden. Im Gegensatz zu diesem 'what-you-see-is-what-you-draw' Ansatzes, gibt es auch das deklarative Zeichen, bei dem ich nicht zeichne, sondern aufschreibe, was gezeichnet werden soll. Vergleichbar ist das mit Markdown oder LaTeX im Gegensatz zur klassischen Textverarbeitung.

In früheren Beiträgen habe ich über PlantUML, bzw. dessen Einbettung in ZIM geschrieben. Auch bei PlantUML handelt es sich um eine deklarative Sprache, um Zeichnungen zu erstellen. Allerdings hat die Implementierung einige Abhängigkeiten (Graphviz, PlantUML), wodurch sich die Zeichnungen nicht so einfach austauschen lassen. Die Empfängerin benötigt eine PlantUML-fähige Installation. Anders ist das bei einem weiteren Vertreter der deklarativen Zeichnungen, nämlich Mermaid.

Mermaid ist ein Javascript-basiertes Diagramm- und Charting-Tool, das Markdown-inspirierte Textdefinitionen wiedergibt, um Diagramme dynamisch zu erstellen und zu ändern. Der Code zur Umwandlung der Deklaration in eine Zeichnung steckt in einer einzigen JavaScript-Datei: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

Im Vergleich zu PlantUML, sind die unterstützten Diagrammarten bei Mermaid noch überschaubar. Es gibt: Flowchart, Sequence Diagram, Class Diagram, State Diagram, Entity Relationship Diagram, User Journey, Gantt, Pie Chart, Requirements Diagram und GitGraph.

Um ein Mermaid-Diagramm zu erstellen, schreibt man eine HTML-Datei, die die oben genannte JavaScript-Datei einbettet und die Deklaration für das gewünschte Diagramm enthält. Hier ein einfaches Beispiel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
  </div>
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});
</script>
</body>
</html>

Öffnet man diese Seite in einem Webbrowser, sieht das Ergebnis so aus:

Das Beispiel sollte selbsterklärend sein. Auf der Mermaid-Seite findet man viele weitere Beispiele und Anleitungen. Welche Vorteile ergeben sich nun bei der Verwendung von deklarativen Zeichnungen gegenüber den von Hand gemalten?

Syntaktisch korrekte Darstellung
Zeitgewinn beim Erstellen (glaubt ihr nicht, ist aber so)
Gleichartigkeit der grafischen Darstellung
Konzentration auf den Inhalt, anstatt auf das "Malen"
Reproduzierbarkeit
Werkzeugunabhängigkeit

Wer keine HTML-Seite erstellen, sondern die Zeichnungen aus dem Mermaid-Code generieren möchte, kann die CLI-Schnittstelle verwenden. Der Befehl mmdc -i input.mmd -o output.svg erzeugt aus dem Mermaid-Datei 'input.mmd' die SVG-Grafik 'output.svg'. Mehr zur Installation und Verwendung im Terminal erfahrt ihr auf der GitHub-Seite.

Quelle: https://mermaid-js.github.io/mermaid/#/

Zeichnen mit Mermaid

Tags

Community