Mermaid Diagrams
NocoDocs renders Mermaid diagrams directly in code blocks. Write the diagram as text, and NocoDocs draws the SVG. Supported diagrams include flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, user journeys, and more.
Insert a Mermaid Diagram
- Insert a code block (type
/codeor```). - In the top-right of the code block, click the language selector.
- Select Mermaid.
- Type or paste your Mermaid source. The diagram renders while you type.
View Modes
When the language of the block is Mermaid, a view-mode picker shows in the toolbar. Open it to change between the three modes:
Show code
Shows the source only. Use it while you edit.
Split view
Shows the source on top and the rendered diagram below. You can edit and preview in the same block.
Show diagram
Shows the diagram only. This is the cleanest view for reading.
NocoDocs saves the current mode on the block. All readers see the view that the author selected last. New blocks use these defaults:
| User | Default mode |
|---|---|
| Editing | Show code |
| Read-only viewers | Show diagram |
Expand & Download
When the diagram is visible, two more actions show in the toolbar:
| Action | What it does |
|---|---|
| Expand diagram | Opens the diagram in a full-screen modal. You can also click the diagram to expand it. |
| Download image | Downloads the rendered diagram as an .svg file. |
Theme
Diagrams use a palette that matches NocoDB. They change automatically between light and dark variants to match the editor theme.
Errors
If the Mermaid source is not valid, an inline error message shows in place of the diagram. The message gives the reason from the parser. NocoDocs keeps the source. To fix it, change back to Show code.
Supported Diagram Types
NocoDocs supports all diagram types of Mermaid. The most common types are below.
Flowchart
Show processes, decisions, and branching logic.
Sequence Diagram
Show interactions between participants over time.
Class Diagram
Model object-oriented structures, attributes, and relationships.
State Diagram
Show state transitions and finite-state machines.
Entity Relationship Diagram
Describe database schemas and table relationships.
Gantt Chart
Plan project timelines, dependencies, and milestones.
Pie Chart
Show proportional breakdowns of a whole.
User Journey
Map user steps and satisfaction across a workflow.
Git Graph
Illustrate branches, commits, and merges.
Mind Map
Organize hierarchical ideas around a central topic.
Timeline
Track events along a chronological axis.
Sankey Diagram
Show flows and proportions between categories.
XY Chart
Plot data series on cartesian axes (line, bar).
C4 Diagram
Document software architecture at different levels of detail.
Exports
Mermaid diagrams stay in the document when you export the document:
- HTML and PDF exports embed the rendered SVG diagram inline.
- Markdown exports keep the source as a
```mermaidfenced code block. GitHub, Obsidian, and other viewers that support Mermaid render it automatically.
Related
Last updated on