63 lines
2.2 KiB
Markdown
63 lines
2.2 KiB
Markdown
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
|
|
```mermaid
|
|
---
|
|
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
|
|
```
|
|
|
|
|