What is Mermaid?

Mermaid is a JavaScript-based diagramming tool that renders text definitions into diagrams. It is inspired by Markdown and widely supported in GitHub READMEs, Notion, GitLab, and documentation tools.

Supported Diagram Types

Flowchart (flowchart TD): nodes and directional edges. Sequence Diagram: actor interactions over time. Gantt Chart: project timelines. Class Diagram: OOP relationships. State Diagram: state machines. ER Diagram: database entity relationships. Pie Chart: proportional data.

Flowchart Basics

Nodes: A[Rectangle], B(Rounded), C{Diamond}, D((Circle)). Edges: A --> B (arrow), A --- B (line), A -->|label| B (labeled). Direction: TD (top-down), LR (left-right), BT, RL.

Export Options

Diagrams can be exported as SVG (scalable, best for web and print) or PNG (best for presentations). Rendering happens entirely in your browser — no data is sent to any server.