Installation und Verwendung von Mermaid, einer JavaScript-Bibliothek für Modellierung

Mermaid ist eine DSL (Domain-Specific Language), die Diagramme wie Erklärungsdiagramme, Systemflussdiagramme und Visualisierungsdiagramme aus Textdaten erstellen kann. Dieser Artikel erklärt Methoden und Tutorials für die Diagrammmodellierung mit der Mermaid-Bibliothek unter Verwendung der JavaScript-Implementierung von Mermaid.

Usage - mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

Befehlszeilentools sind verfügbar, also verwenden wir sie.

mermaidjs/mermaid.cli: Command-line interface for mermaid

cat > mermaid.mmd
graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);

npm install mermaid.cli
./node_modules/.bin/mmdc -i mermaid.mmd -o output.png
# or
# ./node_modules/.bin/mmdc -i mermaid.mmd -o output.svg

Es scheint auch etwas namens mermaid-live-editor zu geben.

mermaidjs/mermaid-live-editor: Edit, preview and share mermaid charts/diagrams.

Sie können es mit yarn wie folgt installieren und verwenden.

# install yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
export PATH="$PATH:$(yarn global bin)"

# install
git clone https://github.com/mermaidjs/mermaid-live-editor.git
cd mermaid-live-editor
yarn install

# start with browser
yarn dev

Da sowohl die CLI als auch der Live-Editor puppeteer verwenden, funktionieren sie nicht auf WSL und ähnlichen Umgebungen.

Schnelles Beispiel

Unter Bezugnahme auf den Standard-Beispielcode und die folgenden Referenzen habe ich Code geschrieben, um ein Flussdiagramm zu zeichnen, das den Fluss von Bash-Code darstellt, den ich derzeit plane.

• Flowchart - mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

• mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

graph TD
A[Implementieren Sie Befehle mit res-Präfix an alle Data-Befehle angehängt] --> B[res-data-hogehoge]
subgraph res-data-hogehoge
  B --> C[Eigene Funktion abrufen und res-Präfix entfernen, um data-hogehoge zu erhalten]
    C --> CLa[Fügen Sie pre und post jeweils hinzu und prüfen Sie, ob Befehle existieren]
      subgraph while
        CLa --no--> CAa[Prompt]
          CAa --> CAb[init-note-data ausführen]
            CAb --while--> CLa
      end
      CLa --yes--> D[Führen Sie pre, data, post der Reihe nach aus, legen Sie data in content usw. und geben Sie das Ergebnis aus]
        D --> E(and more..)
end

Da auch if und while ausgedrückt werden können, scheint es nützlich für das Zeichnen von Flussdiagrammen von Programmcode zu sein.