Skip to main content
OwnDocs

Mermaid

1 min readStableIntermediate

Mermaid diagrams are written in standard Markdown code fences and rendered as SVG, sanitized through DOMPurify.

Quick Start

Use a mermaid code fence.

Adding Options

Add a decision node to the flowchart.

Advanced

Diagram types are auto-detected even without the mermaid language tag. This sequence diagram has no fence language, so it renders because its first line starts with sequenceDiagram.

Options

languagestringDefault: mermaid

The code fence language. Use mermaid, or omit it and let auto-detection infer the diagram from the first line of the code block.

diagram typestring

The Mermaid diagram kind, taken from the first line of the code block. Auto-detected keywords are erDiagram, graph, flowchart, sequenceDiagram, classDiagram, stateDiagram, gantt, pie, gitGraph, journey, requirementDiagram, C4Context, mindmap, timeline, quadrantChart, and sankey.

Was this page helpful?