| | |
|---|
| | | Quartz supports Mermaid which allows you to add diagrams and charts to your notes. Mermaid supports a range of diagrams, such as [flow charts](https://mermaid.js.org/syntax/flowchart.html), [sequence diagrams](https://mermaid.js.org/syntax/sequenceDiagram.html), and [timelines](https://mermaid.js.org/syntax/timeline.html). This is enabled as a part of [[Obsidian compatibility]] and can be configured and enabled/disabled from that plugin. |
|---|
| | | |
|---|
| | | By default, Quartz will render Mermaid diagrams to match the site theme. |
|---|
| | | |
|---|
| | | > [!warning] |
|---|
| | | > Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is _after_ `Plugin.SyntaxHighlighting()`. |
|---|
| | | |
|---|
| | | ## Syntax |
|---|
| | | |
|---|
| | | To add a Mermaid diagram, create a mermaid code block. |
|---|
| | | |
|---|
| | | ```` |
|---|
| | | ```mermaid |
|---|
| | | sequenceDiagram |
|---|
| | | Alice->>+John: Hello John, how are you? |
|---|
| | | Alice->>+John: John, can you hear me? |
|---|
| | | John-->>-Alice: Hi Alice, I can hear you! |
|---|
| | | John-->>-Alice: I feel great! |
|---|
| | | ``` |
|---|
| | | ```` |
|---|
| | | |
|---|
| | | ```mermaid |
|---|
| | | sequenceDiagram |
|---|
| | | Alice->>+John: Hello John, how are you? |
|---|
