Mermaid Diagram Editor

Q: What is Mermaid.js and where can I use it?

Mermaid.js is a JavaScript library that renders text-based diagram definitions into SVG diagrams. It is natively supported in GitHub Markdown, GitLab, Notion, Confluence, Obsidian, and many documentation generators like MkDocs and Docusaurus. You write a simple text definition and the diagram is rendered automatically.

Q: What is the difference between graph TD and graph LR in Mermaid?

graph TD (top-down) renders the flowchart with nodes flowing from top to bottom, making it ideal for hierarchical structures like org charts or process flows. graph LR (left-right) renders nodes from left to right, which works better for pipelines, timelines, or decision trees where you want to convey a horizontal progression.

Q: How do I create a diamond decision node in a Mermaid flowchart?

Use curly braces around the label: A{Decision?}. This renders as a diamond shape, conventionally used for decision points where the flow branches based on a yes/no or true/false condition. You then add labeled arrows like A -->|Yes| B and A -->|No| C to show the two branches.

Q: How do I show inheritance in a Mermaid class diagram?

Use the <|-- arrow from the parent class to the child class: Animal <|-- Dog. This renders as a hollow arrowhead pointing toward the parent, representing the standard UML inheritance (generalization) relationship. For interface implementation, use a dashed version: Interface <|.. ConcreteClass.

Q: Can I use Mermaid in GitHub README files?

Yes, GitHub natively renders Mermaid diagrams in Markdown files. Wrap your Mermaid definition in a fenced code block with the language identifier "mermaid" (three backticks followed by mermaid). The diagram will render as an SVG image when viewed on GitHub, while remaining readable as plain text in editors that do not support Mermaid.

Q: What diagram types does Mermaid support beyond flowcharts?

Mermaid supports sequenceDiagram, classDiagram, erDiagram, gantt, pie, stateDiagram-v2, mindmap, gitgraph, journey (user journey maps), and timeline. The mindmap, timeline, and gitgraph types are newer additions in Mermaid v9+ and are increasingly used in engineering documentation and project planning.

Free reference guide: Mermaid Diagram Editor

27 results

About Mermaid Diagram Editor

The Mermaid Diagram Reference is a comprehensive, searchable syntax guide for Mermaid.js — the text-based diagramming library used in GitHub README files, Notion, Confluence, GitLab, and many documentation platforms. The reference is organized into five categories: Flowchart (graph TD/LR, node shapes, arrow types), Sequence (participants, solid/dashed arrows, notes), Class (class declarations, visibility modifiers, inheritance), ER (entity relationships, cardinality notation), and Others (Gantt, pie charts, state diagrams, mindmaps, git graphs, user journeys, timelines).

Software architects, technical writers, engineering managers, and developers use Mermaid to create system design diagrams, API interaction flows, database schemas, project timelines, and UML class hierarchies directly in Markdown files — no separate drawing tool required. This reference is especially useful when you need the exact syntax for a diamond decision node ({text}), a one-to-many ER relationship (||--o{), a sequence diagram dashed response arrow (-->>), or a state machine transition.

Each entry in the reference shows the Mermaid syntax keyword, a clear description, and a working code block you can paste directly into any Mermaid-enabled editor. The reference covers all major diagram types supported in Mermaid v10+, including the newer mindmap, timeline, and gitgraph types that many developers are less familiar with. Search or filter by diagram type to quickly find the exact syntax you need.

Key Features

Five diagram categories: Flowchart, Sequence, Class, ER, and Others (Gantt, Pie, State, Mindmap, Git, Journey, Timeline)
Flowchart node shapes: rectangle [text], rounded (text), diamond {text}, circle ((text))
Flowchart link types: arrow -->|label|, open link ---, labeled arrow with text
Sequence diagram participants, solid request arrows ->>, dashed response arrows -->>, and notes
Class diagram visibility (+public, -private), inheritance <|--, and method/field declarations
ER diagram cardinality: one-to-many ||--o{, one-to-one ||--||, zero-or-more patterns
Newer diagram types: mindmap, timeline, gitgraph, journey, stateDiagram-v2, pie, gantt
Searchable and filterable — find any Mermaid syntax keyword or diagram type instantly

Frequently Asked Questions

What is Mermaid.js and where can I use it?

Mermaid.js is a JavaScript library that renders text-based diagram definitions into SVG diagrams. It is natively supported in GitHub Markdown, GitLab, Notion, Confluence, Obsidian, and many documentation generators like MkDocs and Docusaurus. You write a simple text definition and the diagram is rendered automatically.

What is the difference between graph TD and graph LR in Mermaid?

graph TD (top-down) renders the flowchart with nodes flowing from top to bottom, making it ideal for hierarchical structures like org charts or process flows. graph LR (left-right) renders nodes from left to right, which works better for pipelines, timelines, or decision trees where you want to convey a horizontal progression.

How do I create a diamond decision node in a Mermaid flowchart?

Use curly braces around the label: A{Decision?}. This renders as a diamond shape, conventionally used for decision points where the flow branches based on a yes/no or true/false condition. You then add labeled arrows like A -->|Yes| B and A -->|No| C to show the two branches.

How do I add a note to a Mermaid sequence diagram?

Use the Note keyword: Note over Alice,Bob: Both participants or Note right of Alice: Thinking. The "over" variant spans multiple participants and renders above the lifeline, while "right of" and "left of" place the note to one side of a single participant.

What does ||--o{ mean in a Mermaid ER diagram?

||--o{ represents a one-to-many relationship. The || on the left means exactly one, and o{ on the right means zero or more. Mermaid uses crow's foot notation: | for one, o for zero, { for many. So ||--|{ means one-to-one-or-more, and |o--o{ means zero-or-one to zero-or-many.

How do I show inheritance in a Mermaid class diagram?

Use the <|-- arrow from the parent class to the child class: Animal <|-- Dog. This renders as a hollow arrowhead pointing toward the parent, representing the standard UML inheritance (generalization) relationship. For interface implementation, use a dashed version: Interface <|.. ConcreteClass.

Can I use Mermaid in GitHub README files?

Yes, GitHub natively renders Mermaid diagrams in Markdown files. Wrap your Mermaid definition in a fenced code block with the language identifier "mermaid" (three backticks followed by mermaid). The diagram will render as an SVG image when viewed on GitHub, while remaining readable as plain text in editors that do not support Mermaid.

What diagram types does Mermaid support beyond flowcharts?

Mermaid supports sequenceDiagram, classDiagram, erDiagram, gantt, pie, stateDiagram-v2, mindmap, gitgraph, journey (user journey maps), and timeline. The mindmap, timeline, and gitgraph types are newer additions in Mermaid v9+ and are increasingly used in engineering documentation and project planning.