site/docs/features/Mermaid diagrams.md

title	tags
Mermaid Diagrams	feature/transformer

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 ObsidianFlavoredMarkdown is after 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!