Javascript: Schnell Diagramme erstellen mit Mermaid

Mit dem freien Javascript-Modul Mermaid lassen sich mit einer einfachen Textsyntax Diagramme erstellen. Sie eignen sich besonders für den Einsatz im Web.

Artikel von Claus Godbersen veröffentlicht am
Meerjungfrau zu werden ist schwer. Mit Mermaid Diagramme zu erstellen, ist hingegen ganz einfach.
Meerjungfrau zu werden ist schwer. Mit Mermaid Diagramme zu erstellen, ist hingegen ganz einfach. (Bild: Joseph Prezioso/AFP via Getty Images))

Wer hin und wieder kleine bis mittelgroße Infografiken wie Fluss-, Torten- oder Gantt-Diagramme im Web veröffentlicht, muss dafür nicht unbedingt Bilddateien mithilfe lizenzpflichtiger Standalone-Software erstellen. Das Javascript-Modul Mermaid reicht in vielen Fällen schon aus.

Inhalt:
  1. Javascript: Schnell Diagramme erstellen mit Mermaid
  2. Gantt- und Tortendiagramme

Mermaid wandelt nach einem bestimmten Muster aufgebaute Texte automatisch in Diagramme um. Dieser Diagramm-Quellcode kann ganz einfach direkt in eine HTML-Datei geschrieben werden.

Das resultierende Diagramm passt sich der HTML-Darstellung im Browser an und verpixelt beispielsweise auch bei starkem Zoom nicht.

Eine Reihe von Diagramm-Typen wird unterstützt. In der aktuellen Version 9.0.0 sind das zunächst die Klassiker wie Fluss- und Tortendiagramme sowie Gantt-Diagramme für Projektmanagement. Außerdem stehen stärker technisch ausgerichtete Sequenz-, Klassen- und Zustandsdiagramme zur Verfügung.

Stellenmarkt
  1. Fachinformatiker*in (m/w/d) für den Benutzerservice
    Landesamt für Finanzen - Zentralabteilung, Weiden
  2. IT Engineer (m/w/d) Anwendungen
    STAHL CraneSystems GmbH, Künzelsau
Detailsuche

Entity-Relationship-Diagramme und Git-Graphen zur Versionsverwaltung werden auch unterstützt, befinden sich den Entwicklern zufolge aber noch im experimentellen Stadium. Für Fans von Design Thinking und agiler Entwicklung wird außerdem eine User-Journey-Illustration angeboten.

Technische Voraussetzungen

Technisch kann Mermaid auf praktisch jedem System eingesetzt werden. Für Testzwecke muss nicht einmal ein Webserver installiert sein. Mehr als ein Texteditor und ein Webbrowser sind nicht nötig.

Mermaid ist in einer einzigen Javascript-Datei enthalten: mermaid.js. Diese Datei muss als Quelle in einem Script-Tag im HTML-Code angegeben werden. Dabei kann sie per URL https://cdn.jsdelivr.net/npm/mermaid@8.13.9/dist/mermaid.js direkt aus dem Content-Delivery-Network JSDelivr heraus eingebunden werden. Sie kann aber auch auf dem eigenen Server gespeichert und von dort aus genutzt werden.

Auf Github gibt es eine ausführliche Dokumentation. Wer Grundkenntnisse in HTML, CSS und Javascript hat, sollte zu Mermaid leicht Zugang finden.

Code-Beispiele

Die Textsyntax, die eingehalten werden muss, damit Mermaid ein Diagramm erzeugen kann, könnte intuitiver kaum sein, wie die folgenden Beispiele zeigen. Leerzeichen und Tabstopps innerhalb der Zeilen können dabei größtenteils nach persönlichem Geschmack gesetzt werden.

Zeilenumbrüche sind dagegen meist Teil der Syntax und können nur bedingt zur Verbesserung der Lesbarkeit eingesetzt werden.

Der Code für ein Diagramm wird stets von einem DIV-Tag mit der Klasse "mermaid" umgeben.

JavaScript: Das umfassende Handbuch. JavaScript lernen und verstehen. Inkl. objektorientierter und funktionaler Programmierung

Flussdiagramm

Um ein Flussdiagramm zu erzeugen, werden Knoten in der Form "Bezeichner[Text]" definiert und mit Pfeilen der Form "-->"verbunden. Der Code für ein Flussdiagramm mit einer Entscheidung und einer Schleife sieht beispielsweise so aus:

  1. <div class="mermaid">
  2. flowchart TD
  3. A((Prozessauslöser)) --> B(Schritt 01)
  4. B --> C{oder}
  5. C --> D[Zustand 01]
  6. C --> E[Zustand 02]
  7. D --> G((Prozessende))
  8. E --> F(Schritt 02)
  9. F -- optimierte Daten --> B
  10. </div>

In den Knoten des fertigen Diagramms erscheinen die Texte aus den Klammern. Dabei stehen eckige Klammern für Rechtecke, runde Klammern für gerundete Rechtecke, geschweifte Klammern für Rauten und doppelte runde Klammern für Kreise. Das "TD" steht für "Top-Down", also die Verlaufsrichtung. Ersetzt man TD durch LR, verläuft das Diagramm beim nächsten Neuladen der Seite von links nach rechts. In diesem Beispiel erhält außerdem der Pfeil von F nach B den erklärenden Text "optimierte Daten".

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
  • Ausgabe des Codes zum Flussdiagramm (Screenshot: Claus Godbersen)
  • Ausgabe des Codes zum Tortendiagram (Screenshot: Claus Godbersen)
Ausgabe des Codes zum Flussdiagramm (Screenshot: Claus Godbersen)
Gantt- und Tortendiagramme 
  1. 1
  2. 2
  3.  


yumiko 13. Apr 2022 / Themenstart

Optisch kann man ja anpassen. Der Vorteil ist doch, dass man es in Wikis und Foren...

NativesAlter 10. Apr 2022 / Themenstart

mermaid nur mal anschauen (oder damit herumspielen) geht auch mit Joplin. Joplin ist eine...

shoggothe 10. Apr 2022 / Themenstart

PlantUML ist ähnlich, erzeugt Diagramme aus textueller Beschreibung. Allerdings wird bei...

Zeiram 10. Apr 2022 / Themenstart

Wird hier auch genutzt für unsere Dokumentationen innerhalb des DevOps Wiki (eingebettet...

Kommentieren



Aktuell auf der Startseite von Golem.de
Optibike
E-Bike mit 480 km Reichweite kostet 17.000 Euro

Das E-Bike Optibike R22 Everest setzt mit seinen zwei Akkus auf Reichweite.

Optibike: E-Bike mit 480 km Reichweite kostet 17.000 Euro
Artikel
  1. Krypto-Kriminalität: Behörden fahnden nach Onecoin-Betrügerin
    Krypto-Kriminalität
    Behörden fahnden nach Onecoin-Betrügerin

    Deutsche und internationale Behörden suchen nach den Hintermännern und -frauen von Onecoin. Der Schaden durch Betrug mit der vermeintlichen Kryptowährung geht in die Milliarden.

  2. Hassrede: Bayern will soziale Netzwerke bestrafen
    Hassrede
    Bayern will soziale Netzwerke bestrafen

    Der bayrische Justizminister fordert, bei der Verbreitung von Hassrede auch die Betreiber von sozialen Medien stärker zur Verantwortung zu ziehen.

  3. Prehistoric Planet: Danke, Apple, für so grandiose Dinosaurier!
    Prehistoric Planet
    Danke, Apple, für so grandiose Dinosaurier!

    Musik von Hans Zimmer, dazu David Attenborough als Sprecher: Apples Prehistoric Planet hat einen Kindheitstraum zum Leben erweckt.
    Ein IMHO von Marc Sauter

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Samsung 870 QVO 1 TB 79€ • Prime Video: Filme leihen für 0,99€ • Alternate (u. a. Recaro Rae Essential 429€) • Gigabyte RTX 3080 12 GB ab 1.024€ • Mindstar (u. a. AMD Ryzen 5 5600 179€, Palit RTX 3070 GamingPro 669€) • SanDisk Ultra microSDXC 256 GB ab 14,99€ • Sackboy 19,99€ [Werbung]
    •  /