tl;dr
if not sure use mermaid.
basic mermaid syntax can be rendered almost everywhere.
Diagramme
Diagramme helfen komplexe Zusammenhänge anschaulich zu machen.
mit einem codeblock ( umschlossen von 3 backticks) können diagramme direkt im Markdown Dokument generiert werden
"ˋ ˋ ˋmermaid
codeblock
ˋˋˋ"
Bei unerklärlichen Syntaxfehlern auf dem Tablet ist zu prüfen ob die onscreen Tastatur die falschen - Zeichen ausgibt .
populäre Varianten
Die populärsten Optionen sind Mermaid und Plantuml
Mermaid und PlantUml sind Anwendungen um aus Code Diagramme zu generieren. Coden statt malen.
im folgenden soll untersucht werden welche Option wann am besten geeignet ist
Im [[Onboarding]] Konzept habe ich einmal beide Formate verwendet um den jeweiligen Vor- und Nachteilen auf den Grund zu gehen.
Mermaid
Der grösste Vorteil von Mermaid ist das viele Anwendungen die Markdown rendern auch nativ Mermaid rendern können.(javascript )
Mermaid Documentation
Here is an Example from the Onboarding project.
sequenceDiagram participant Grafitti participant Matrix Bot actor Nextcloud User participant Nextcloud participant Dagster participant Openproject actor "Onboarding Admin" as Admin Grafitti->>Nextcloud: write onboarding.csv Matrix Bot->>Nextcloud: write onboarding.csv Nextcloud User-->>Nextcloud: edit onboarding.csv Dagster -> Nextcloud: get onboarding.csv Dagster -> Dagster: get openproject accounts Dagster -> Dagster: get nextcloud accounts Dagster -> Nextcloud: write accounts.csv Dagster -> Openproject: write onboarding tasks Dagster -> Nextcloud: update onboarding.csv Admin -> Openproject: authorize account creation Dagster -> Openproject: get authorized tasks Dagster -> Nextcloud: create authorized accounts Dagster -> Openproject: create authorized accounts Dagster -> Nextcloud: update accounts.csv Dagster -> Openproject: update tasks Dagster -> Grafitti: update data Dagster -> Dagster: send Welcome Mail
Allerdings ist das Default Rendering in Obsidian so eingeschränkt (kein scrollen), dass es zumindest bei Sequenz Diagrammen eigentlich nicht zu gebrauchen ist. Abhilfe schafft hier ein Plugin toms obsidian setup#community plugins
Allerdings funktioniert das wohl nicht in einer Standard Slide Präsentation.
mermaid can be customized with this css code
you can use the css editor plugin to manage your snippets.
Plantuml
Obwohl UML ziemlich aus der Mode gekommen ist, erfreut sich PlantUml noch immer großer Verbreitung.
Das liegt vor allem wohl daran, dass so viele Diagramm Typen zur Verfügung stehen.
Innerhalb dieser Diagramme bietet PlantUml mehr Gestaltungsmöglichkeit (Farben, Symbol..) als zb. Mermaid.
in mermaid ist mit class definitions und css in neueren Versionen
nun auch viel mehr möglich, es ist aber aufwändiger und funktioniert
mglw. nicht mit allen renderings.
Dokumentation PlantUml
Um jjson und yaml Definitionen zu dokumentieren habe ich nichts geeignetes in Mermaid gefunden (ER Diagram?). Hier ein Beispiel in PlantUml
Plantuml wird auf einem externen server gerendert. (java)
Das Ergebnisse ist Mermaid oft etwas überlegen und ist in den Formaten png, svg und ascii verfügbar.
Hier das selbe Sequenz Diagramm mit PlantUml
Der Nachteil ist Plantuml erfordert entweder ein Plugin oder einen proxy server.
https://stackoverflow.com/questions/32203610/how-to-integrate-uml-diagrams-into-gitlab-or-github
Fazit
Wenn es darum geht schnell ein paar "boxes and arrows" zu skizzieren ist Mermaid eine gute Wahl.
Die Syntax ist einfach, die Dokumentation einsteigerfreundlich und das Diagram kann in nahezu jedem Markdown Renderer direkt angezeigt werden. (javascript)
Bei größeren Diagrammen oder speziellen Diagrammtypen ist PlantUml teilweise besser geeignet. Es scheint aber, daß Mermaid hier schnell aufholt. Insbesondere bei den modernen Diagramm Typen.
Soll PlantUml genutzt werden, ist zu klären ob der Code auf allen Zielplatformen inline durch ein Plugin gerendert werden kann oder ob ein proxy server verwendet werden muss. Wenn es ein proxy server sein soll lohnt es sich kroki zu testen.
Eine Konvertierung in das jeweils andere Format ist nicht allzu aufwändig und kann gut einem LLM überantwortet werden. Mit beiden Optionen lassen sich hilfreiche Diagramme erstellen. Persönlich finde ich ist die Lernkurve bei Mermaid etwas flacher.