# 🧜‍♀️ Mermaid```mermaid xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] ``` Mit Mermaid lassen sich Daten visualisieren. Hier eine (unvollständige) Übersicht über verschiedene Arten von Diagrammen, die erzeugt werden können. Die Farben unterscheiden sich je nach gewähltem Obsidian-Theme, können aber auch für ein jeweiliges Diagramm mit CSS angepasst werden. ```mermaid stateDiagram a --> b a --> c b --> d c --> d ````   ```mermaid gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2021-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2021-01-12 , 12d another task : 24d ````   ```mermaid graph TD A[Birthday] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[Phone] C -->|Three| F[Bike] ````   ```mermaid pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 155 "Bats" : 115 "Otters" : 239 ```   ```mermaid journey title A Day in the life section Go do some work Make tea: 4: Mary Go upstairs: 2: Mary Read: 5: Mary, Cat section Go home Go downstairs: 5: Mary Watch TV: 3: Mary ```