Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Open Source: Mit Mermaid erstellt ihr Diagramme per Markdown

    Open Source: Mit Mermaid erstellt ihr Diagramme per Markdown

(Grafik: Knut Sveidqvist)

Mit der Open-Source-Library Mermaid könnt ihr Diagramme über eine Markdown-ähnliche Sprache erstellen. Das geht auch online über den webbasierten Editor des Projekts.

Mermaid: Diagramme einfach beschreiben

Markdown hat sich in vielen Texteditoren durchgesetzt. Der Vorteil der Auszeichnungssprache liegt darin, dass damit formatierte Texte auch ohne Umwandlung leicht lesbar sind. Mermaid will dieses Konzept auf Diagramme übertragen. Dazu wurde eine an Markdown orientierte Syntax geschaffen.

Selbst einigermaßen komplexe Flussdiagramme, die mit Mermaid erstellt wurden, lassen sich auch in Textform noch recht gut verstehen. Dazu hier ein Beispiel aus der offiziellen Dokumentation:

%% Sequence diagram code
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

Von Mermaid gerendert wird aus dem Text das folgende Diagramm:

Mermaid: Dieses Diagramm entsteht aus dem obigen Textbeispiel. (Screenshot: knsv.github.io/mermaid/)
Mermaid: Dieses Diagramm entsteht aus dem obigen Markdown-Beispiel. (Screenshot: knsv.github.io/mermaid/)
Anzeige

Mermaid: Open-Source-Projekt bietet auch einen Online-Editor

Mermaid wurde ursprünglich von Knut Sveidqvist entwickelt und steht unter der MIT-Lizenz. Den Quellcode der Open-Source-Software findet ihr auf Github. Außerdem gibt es auch einen Live-Editor im Web. Über den könnt ihr euch mit der Mermaid-Syntax vertraut machen und eigene Diagramme erstellen. Die könnt ihr dann als SVG-Datei herunterladen oder euren Diagramm-Entwurf per Link mit einem Kollegen teilen. Der kann dann auch selbst Hand anlegen und gegebenenfalls Verbesserungen vornehmen.

Ebenfalls interessant:

Finde einen Job, den du liebst

3 Reaktionen
Frank
Frank

Ahm, was soll das erste Beispiel bzw. Diagramm für eine Sinn ergeben? Oder ist das Beispiel in Sachen Sinn- und Nutzenhaftigkeit etwas unglücklich uasgefallen?

Antworten
Kevin

Sehr coole Sache - vor allem weil es per Markdown läuft und ich Markdown liebe.

Danke dafür!

Antworten
Johannes
Johannes

Ich nutze seit Jahren http://plantuml.com/

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden