Themen für 26.11.25 VM

Programmieren/Mermaid/Mermaid.md

@@ -0,0 +1,62 @@
+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
+```
+
+