Mermaid

Add a diagram

Use a code block with the language mermaid (mmd is also recognized by the editor). Edit its source to update the diagram preview. The diagram remains a code block in the saved document.

Edit in Visual

Edit the diagram source in place, then switch to Source to inspect the Mermaid code block.

mermaid.md

Generic

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

```mermaid
flowchart LR
  Draft --> Review
  Review --> Git
```

Correct a preview error

If the diagram cannot be rendered, check its syntax in the code editor. Preview support depends on the editor’s Mermaid renderer; a diagram that works in your website may use syntax the editor does not preview.

Mermaid preview in Prosefly does not enable Mermaid on your website. Your existing website build needs its own diagram support. Check the website preview before publishing a diagram you have not used there before.