Mermaid: Flowcharts aus Textbeschreibungen erstellen

Wenn man mal schnell ein einfaches Flowchart oder ein Gant Diagram in einer Jekyll Site braucht ist es meistens notwendig irgendein Grafikprogramm zu starten um dort ein Bild zu erstellen und dies dann abzuspeichern.

Mit Mermaid und dem Jekyll Plugin geht das für mich einfache in dem man einfach die Grafik durch eine Textbeschreibung darstellt und diese wird dann beim Aufruf durch JavaScript in ein SVG Bild umgewandelt

Der Text sieht z.B. so aus:

gantt
  dateFormat  YYYY-MM-DD
  title Ein Gantdiagramm in Jekyll
  section Einführung
  Abgeschlossene Aufgabe            :done,    des1, 2018-05-06,2018-05-08
  Aktive Aufgabe               :active,  des2, 2018-05-09, 3d
  Zukünftige Aufgabe               :         des3, after des2, 5d
  Nochen eine zukünftige Aufgabe               :         des4, after des3, 5d
  section Rollout
  Abgeschlossene Aufgabe auf kritischem Pfad :crit, done, 2018-05-06,24h
  Implementierung              :crit, done, after des1, 2d
  Testerstellung             :crit, active, 3d
  Zukünftige Aufgabe auf kritischem Pfad        :crit, 5d
  Abschlusstest                      :1d '
gantt dateFormat YYYY-MM-DD title Ein Gantdiagramm in Jekyll section Einführung Abgeschlossene Aufgabe :done, des1, 2018-05-06,2018-05-08 Aktive Aufgabe :active, des2, 2018-05-09, 3d Zukünftige Aufgabe : des3, after des2, 5d Nochen eine zukünftige Aufgabe : des4, after des3, 5d section Rollout Abgeschlossene Aufgabe auf kritischem Pfad :crit, done, 2018-05-06,24h Implementierung :crit, done, after des1, 2d Testerstellung :crit, active, 3d Zukünftige Aufgabe auf kritischem Pfad :crit, 5d Abschlusstest :1d

Oder so

  graph TD
  A[Geschenke kaufen ] -->| Geld besorgen | B(Einkaufen gehen)
  B --> C{Welche Geschenke?}
  C -->|Micheal| D[Laptop]
  C -->|Frida| E[iPhone]
  C -->|Sonja| F[Brettspiel]
  D -->|Gut|G[Lenovo]
  D -->|Billig|H[Aldi]
  D -->|Teuer|I[HP]
graph TD A[Geschenke kaufen ] -->| Geld besorgen | B(Einkaufen gehen) B --> C{Welche Geschenke?} C -->|Micheal| D[Laptop] C -->|Frida| E[iPhone] C -->|Sonja| F[Brettspiel] D -->|Gut|G[Lenovo] D -->|Billig|H[Aldi] D -->|Teuer|I[HP]
24.5.18 Weitere Beiträge zu: Jekyll Mermaid

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License