Skip to main content

Mermaid

Mermaid creates diagrams with compact, Markdown-friendly text.

Use this type​

Use Mermaid for flowcharts, sequence diagrams, class diagrams, state diagrams, timelines, and many other diagram forms.

Source format​

The source format is Mermaid text. Enter the source in the diagram.zip editor.

Syntax essentials​

  • Put the diagram keyword on the first line.
  • Declare nodes, participants, or data after the keyword.
  • Use the syntax for the selected Mermaid diagram form.
  • diagram.zip rejects frontmatter settings that reduce renderer security.

Example​

flowchart LR
  Idea[Idea] --> Agent[Agent]
  Agent --> Diagram[Shared diagram]
Rendered exampleDrag to pan. Use the wheel or controls to zoom.
100%
This view uses the live diagram.zip renderer.

Limitations​

  • diagram.zip removes active content and unsafe external resources from the SVG.
  • Security configuration values cannot reduce the renderer security level.

Upstream reference​

Mermaid documentation