quartz/docs/features/Mermaid diagrams.md

Quartz supports Mermaid which allows you to add diagrams and charts to your notes. Mermaid supports a range of diagrams, such as flow charts, sequence diagrams, and timelines. 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!
```

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!