Flowcharts mit Mermaid

Mermaid ist eine einfache Beschreibungssprache. In Form von einfachem Text. Man erstellt sich einfach Objekte mit gewünschtem Shape Typ, und dann verbindet man diese. Das alles als simpler Text, leicht zu ändern, ggf. per KI erstellbar.

Im Intellij gibt es ein extra Plugin dafür, das leider die modernen Shapes noch nicht versteht, aber sonst recht brauchbar ist.

• https://mermaid.js.org/syntax/flowchart.html Dokumentation
• https://plugins.jetbrains.com/plugin/20146-mermaid
  • https://mermaid.js.org/syntax/flowchart.html#expanded-node-shapes-in-mermaid-flowcharts-v11-3-0 Diese Erweiterung versteht das Plugin nicht, aber Github kennt die schon. Echt praktisch.

Mermaid lässt sich einfach in Markdown mit einbinden. Einfach hinter 3 Backticks das Wort mermaid schreiben, schon wird es als Mermaid interpretiert, zumindest bei Github. Wo man es einfach in den README Markdowns verwenden könnte.

    ```mermaid
    ---
    title: "ein Flowchart"
    ---
    flowchart LR
    %% Objekte
        A["ein Ah!"]
        A@{Shape: cloud}
        B["hier B"]
    %% Verbindungen
        A -->|das ist der Weg| B
    ```

Schon hat man innerhalb seiner README.md ein Mermaid Flowchart. Die doppelten Prozente '' sind Kommentare. Man kann das Mermaid einfach editieren, die Verbindungen sind klar zu verstehen. Schade, dass das Intellij-Plugin die 'A@' Syntax noch nicht versteht.

Des Weiteren muss man darauf achten, hinter dem "Shape: " ein Space zu setzen.

BTW: Vergesst hier WYSIWYG, man beschreibt nur seine Objekte und wie diese verknüpft sind. Zu einem Bild zusammenfummeln, das macht ein Algorithmus. Manchmal hilft es die Objekte etwas anders zu sortieren. Aber der Algorithmus ist da recht gut. Evtl. hilft auch die Verbindungspfeile '-->' zu verlängern '--->' oder '---->'...

Links

• https://mermaid.js.org/syntax/flowchart.html
• https://mermaid-drawing.com/docs
• https://mermaid-drawing.com/ Online Editor