HackyHour UDE #2

Mermaid

Sarah Ann Stock hat das Tool Mermaid vorgestellt

Was ist Mermaid

Mermaid erlaubt mit Codesprache Flowchart, Diagramme und mehr. Nicht mehr irgendwo Linien hin und her schieben und gucken, dass alles passt Code wird in Markdown geschrieben und wenn Mermaid unterstützt wird (bspw. in Github), wird es automatisch gerendert und in eine Grafik übersetzt. Beispiele:

• Simple Flowchart
• Flowcharts with lots of connections
• Flowcharts with some colors and shapes and stuff
• Flowcharts with lots of options and neatly arranged code
• Simple gantt (or with more options)
• Pie charts
• Sankey diagrams
• Simple gitGraph diagrams
• Mindmaps
• Timelines
• Journeys
• Sequence diagram

Mermaid-Live-Editor: https://mermaid.live/

Beispiele in GitHub

PetterTech hat schöne Beispiele auf GitHub, was Mermaid kann: PetterTech

Wofür / wofür nicht?

Mermaid ist limitiert. Für einfache Grafiken ist es sehr nützlich, für komplexere Grafiken benötigt es ggf. ein stärkeres Tool wie bspw. Lucid chart

Diskussion

Wir spraachen über weitere (Open Source) Tools wie beispielsweise draw.io, welche ebenfalls eine Mermaid Integration hat oder auch das GPT Diagrams (ChatGPT 4), wo Mermaid hinter steckt.