Skip to main content
Craft supports Mermaid diagrams — a way to create visual diagrams by writing simple text syntax. Type a few lines of code, and Craft renders it as a crisp, sharp diagram right inside your document. Diagrams update live as you type, work across all platforms, and render on shared and published pages. A Mermaid flowchart rendered in a Craft document

​
Inserting a Mermaid Diagram

Add a Mermaid diagram using one of these methods:
  • Type /mermaid and select Mermaid Diagram
  • Choose Mermaid Diagram from the Insert panel in the sidebar (under Rich Blocks)
  • Paste markdown containing a ```mermaid code fence — Craft converts it automatically

​
Editing

When you open a Mermaid block, it shows a split view — the rendered diagram on top, your code below. The preview updates live as you type. Split view with diagram preview on top and code editor below
Click the Mermaid block to open it in split view. The diagram preview appears on top with the code editor below. Double-tap the preview to zoom in.
You don’t need to know Mermaid syntax by heart — the Craft AI Assistant can generate diagrams for you. Just describe what you want and it will write the code.

​
Supported Diagram Types

​
Flowcharts

Map out processes, decisions, and workflows. Use graph TD for top-down or graph LR for left-to-right layouts. 
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E

​
Sequence Diagrams

Show interactions between people or systems over time. A sequence diagram showing a food delivery flow 
sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed

​
State Diagrams

Visualize how something transitions between states — perfect for order tracking, workflows, or processes. A state diagram showing an order lifecycle 
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]

​
Class Diagrams

Show the structure of a system — what things exist, their properties, and how they relate. 
classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains

​
ER Diagrams

Model data relationships — great for database design and planning. 
erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has

​
Charts

Create bar charts, line charts, or a combination of both. 
xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]

​
Changing the Theme

Mermaid diagrams adapt to your code editor theme. To change the look, tap the paintbrush icon in the toolbar and choose a theme — options include Tokyo Night, Dracula, Nord, GitHub, and more. The diagram updates instantly. Diagrams also respect your document’s light or dark mode. Mermaid diagram in light theme Mermaid diagram in dark theme

​
Sharing and Publishing

Mermaid diagrams render on shared and published pages — anyone viewing the link sees the rendered diagram, not the code. No special setup needed.

​
Importing and Exporting

  • Markdown import: Paste or import markdown with ```mermaid code fences and Craft creates Mermaid blocks automatically.
  • Markdown export: Mermaid blocks export as standard ```mermaid code fences, compatible with other tools.

​
Tips

This usually means a syntax error in your code. Check for typos or missing arrows. If you’re copying syntax from another tool, note that Craft supports flowcharts, sequence diagrams, state diagrams, class diagrams, ER diagrams, and XY charts — other types like pie charts, Gantt charts, or mindmaps are not currently supported.
Yes. Describe the diagram you want and the Craft AI Assistant will generate the Mermaid code for you. You can also ask it to modify or extend an existing diagram.
On Mac and iPad, double-tap the diagram preview to zoom in. On the web, use the fullscreen view for larger diagrams.
Mermaid is an open standard used across many tools. Visit mermaid.js.org to learn the full syntax for each diagram type.