Mermaid Diagrams
Create visual diagrams from text definitions, right inside your document.
Mermaid is a text-based diagramming language that turns simple definitions into visual diagrams. In Ritemark, fenced mermaid code blocks are rendered as SVG diagrams directly in the editor. You write the definition, and the diagram appears next to it.
How to Create a Mermaid Diagram
There are two ways to insert a mermaid block.
The first is the slash command. Type /mermaid anywhere in your document and press Enter. Ritemark inserts a fenced code block with mermaid as the language. Start typing your diagram definition inside the block.
The second is manual. Write a standard fenced code block and set the language to mermaid:
```mermaid
flowchart LR
A[Start] --> B[Process] --> C[End]
```
Both methods produce the same result. Once the block contains valid mermaid syntax, the diagram renders automatically.
Code and Diagram Toggle
Every mermaid block has a toggle button in its top-right corner. Click it to switch between two views: the rendered diagram and the source code.
When you're editing, you work in the code view. When you want to see the result, switch to the diagram view. The toggle is instant, no save or refresh needed.
This means you can keep the diagram in whichever view suits your current task. If you're writing a document and just want to see the diagram, leave it in diagram view. If you're actively adjusting the definition, stay in code view.
Theme Support
Mermaid diagrams adapt to your current editor theme. In light mode, diagrams render with light backgrounds and dark lines. In dark mode, they switch to dark backgrounds with lighter elements. You don't need to configure anything for this. It follows your theme automatically.
Export
When you export a document to Word (.docx) or PDF, Ritemark converts mermaid diagrams to PNG images. The exported file shows the diagram just as it appears in the editor, so recipients see the visual diagram even without a mermaid renderer.
This happens automatically during export. You don't need to manually convert diagrams before exporting.
Supported Diagram Types
| Diagram Type | Description |
|---|---|
| Flowchart | Process flows with directional arrows (LR, TB, RL, BT) |
| Sequence | Message exchanges between participants over time |
| Class | Object-oriented class structures and relationships |
| State | State machines with transitions |
| Entity-Relationship | Database entity models with relationships |
| Gantt | Project timelines and task scheduling |
| Pie Chart | Proportional data visualization |
Ritemark supports the same diagram types as the Mermaid library. For full syntax reference, see the official Mermaid documentation.
Troubleshooting
If your mermaid syntax contains errors, Ritemark displays a clear error message in place of the diagram. The error tells you what went wrong, so you can fix the definition.
The error state does not lock you out. You can still switch to code view and edit the source. Once the syntax is valid again, the diagram renders normally.
Common issues include missing arrow syntax (--> vs -->), unclosed brackets, and unsupported diagram types. If a diagram worked before and suddenly breaks, check for accidental edits to the opening fence line -- the language tag must be exactly mermaid with no extra spaces.
Related
- Core Editor - Editor features and slash commands
- Export - PDF and Word export options