Mermaid diagrams in Markdown

How do I use Mermaid in Markdown?

Put Mermaid source inside a fenced code block whose language is mermaid. A compatible Markdown renderer reads the diagram definition and renders it beside or instead of the source. mdedit.ai previews Mermaid blocks and provides separate tools to validate and export them.

```mermaid
flowchart LR
  Draft --> Review
  Review --> Publish
```

The opening fence, mermaid language tag, diagram type, and closing fence are all required. Mermaid syntax support can differ by renderer, so validate the exact diagram before publishing it elsewhere.

Mermaid timeline syntax example

```mermaid
timeline
  title Documentation workflow
  Draft : Write source
  Review : Resolve feedback
  Publish : Update destination
```

The first line selects timeline; indented entries define periods and events. Use the docs reference for syntax and the Mermaid editor guide (opens in a new tab) for a broader authoring workflow.

Mermaid diagram types supported in mdedit.ai

mdedit.ai supports Mermaid flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, Git graphs, user journeys, mind maps, quadrants, timelines, and C4 diagrams when supported by the bundled Mermaid renderer.

```mermaid
sequenceDiagram
  User->>mdedit.ai: Share document
  mdedit.ai-->>Reviewer: Invitation
  Reviewer->>mdedit.ai: Add suggestion
```

Fix a rendering error

Use the preview error to locate the failing line. Check the diagram type, arrows, quoting, and reserved punctuation. The official Mermaid syntax documentation (opens in a new tab) is the source for the full grammar. mdedit.ai can validate the syntax its bundled renderer accepts, but it cannot guarantee identical output in another product or Mermaid version.

Validate and export

For Graphviz, PlantUML, and Markmap, see Diagrams. For failures, see Diagram troubleshooting.

Diagram Tools Frontmatter