infobase/Programmieren/Mermaid/Mermaid.md

Mermaid ist ein Javascript welches es erlaubt, im Webbrowser eine Vielzahl verschiedener Diagramme zu rendern.

Dazu wird eine Mermaid-eigene interne Markupsprache verwendet um das Aussehen des Diagramms zu formulieren.

Beispiele finden sich hier: https://mermaid.js.org/syntax/examples.html

Mermaid bietet seit kurzem außerdem einen Webeditor an: https://www.mermaidchart.com/

Obsidian unterstützt Mermaid.js nativ. Man kann Mermaid-Diagramme direkt in sein Markdown einbinden in dem man einen Codeblock mit Mermaid versieht:

Beispiel

---
config:
  theme: redux
  flowchart:
    curve: basis
  layout: elk
title: Simple PC Error Diagnosis Flowchart
---
flowchart TB
    Start(["Start Diagnosis"]) --> PowerOn{"Does the PC power on?"}
    PowerOn -- No --> PowerCable["Check power cable and outlet"]
    PowerCable --> Retry["Try powering on again"]
    Retry --> PowerOn
    PowerOn -- Yes --> Display{"Is there display output?"}
    Display -- No --> Monitor["Check monitor and cable connections"]
    Monitor --> Display
    Display -- Yes --> Errors{"Are there error messages or beeps?"}
    Errors -- Yes --> ErrorMsg["Note error message/beep pattern"]
    ErrorMsg --> Search["Search for error code meaning"]
    Search --> Solution["Apply suggested solution"]
    Solution --> End(["End"])
    Errors -- No --> Peripherals{"Are keyboard/mouse working?"}
    Peripherals -- No --> CheckPeripherals["Check keyboard/mouse connections"]
    CheckPeripherals --> Peripherals
    Peripherals -- Yes --> OtherIssues{"Any other issues?"}
    OtherIssues -- No --> End
    OtherIssues -- Yes --> FurtherDiag["Seek further diagnosis or technical help"]
    FurtherDiag --> End

     Start:::lightgreen
     PowerOn:::sky
     PowerCable:::lightgreen
     Retry:::lightgreen
     Display:::sky
     Monitor:::lightgreen
     Errors:::sky
     ErrorMsg:::lightgreen
     Search:::lightgreen
     Solution:::lightgreen
     End:::lightgreen
     Peripherals:::sky
     CheckPeripherals:::lightgreen
     OtherIssues:::sky
     FurtherDiag:::lightgreen
    classDef sky fill:#d0f0ff,stroke:#3399cc,stroke-width:2px,font-weight:bold
    classDef lightgreen fill:#ccffcc,stroke:#339966,stroke-width:2px