News

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/)

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:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Johannes
Johannes

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

Antworten
Kevin

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

Danke dafür!

Antworten
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

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung