Diagrams

You can draw diagrams in a page with Mermaid syntax. You write the diagram as text, and the wiki draws it. Diagrams follow the light or dark theme of the wiki.

Add a diagram

1. On an empty line, type /diagram or /mermaid.
2. Press Enter. A Mermaid diagram block opens with a small starter flowchart.
3. Replace the starter text with your diagram in the code pane on the left.

The preview on the right updates as you type. If the text has an error, the preview keeps the last drawing that worked, dims it, and shows the error below it.

The block header has two buttons: Learn about Mermaid opens the Mermaid project, and Remove diagram deletes the block.

Markdown form

A diagram is a code block with the language mermaid:

```mermaid
flowchart LR
  A[Submit expense] --> B{Over 500 EUR?}
  B -- Yes --> C[Manager approval]
  B -- No --> D[Paid with next payroll]
```

When you paste this Markdown as plain text, or when a file syncs from GitHub, the wiki shows it as a diagram block.

Diagram types

The wiki draws diagrams with Pele, a renderer for Mermaid syntax. The first word of the diagram sets its type. These types draw:

Diagrams cannot contain links or images. The wiki removes them for security.

On the published page

Readers see only the drawing, centered on the page. A wide diagram shrinks to fit the page width, and zoom controls show on it.