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
ˋˋˋ"

Warning

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.

Dokumentation PlantUml
Um jjson und yaml Definitionen zu dokumentieren habe ich nichts geeignetes in Mermaid gefunden (ER Diagram?). Hier ein Beispiel in PlantUml

uml diagram

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

uml diagram

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)

Newer features might get rendering errors on older mermaid.js versions

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.