| 1 | --- |
| 2 | relates: |
| 3 | - Mermaid: https://mermaid.js.org/ |
| 4 | - Mermaid Live Editor: https://mermaid.live/ |
| 5 | - Demo Slide: https://sli.dev/demo/starter/12 |
| 6 | - features/plantuml |
| 7 | tags: [diagram] |
| 8 | description: | |
| 9 | Create diagrams/graphs from textual descriptions, powered by Mermaid. |
| 10 | --- |
| 11 | |
| 12 | # Mermaid Diagrams |
| 13 | |
| 14 | You can also create diagrams/graphs from textual descriptions in your Markdown, powered by [Mermaid](https://mermaid.js.org/). |
| 15 | |
| 16 | Code blocks marked as `mermaid` will be converted to diagrams, for example: |
| 17 | |
| 18 | ````md |
| 19 | ```mermaid |
| 20 | sequenceDiagram |
| 21 | Alice->John: Hello John, how are you? |
| 22 | Note over Alice,John: A typical interaction |
| 23 | ``` |
| 24 | ```` |
| 25 | |
| 26 | You can further pass an options object to it to specify the scaling and theming. The syntax of the object is a JavaScript object literal, you will need to add quotes (`'`) for strings and use comma (`,`) between keys. |
| 27 | |
| 28 | ````md |
| 29 | ```mermaid {theme: 'neutral', scale: 0.8} |
| 30 | graph TD |
| 31 | B[Text] --> C{Decision} |
| 32 | C -->|One| D[Result 1] |
| 33 | C -->|Two| E[Result 2] |
| 34 | ``` |
| 35 | ```` |
| 36 | |
| 37 | Visit the [Mermaid Website](https://mermaid.js.org/) for more information. |
| 38 |