Are my diagrams uploaded to a remote server?

No. The Mermaid engine runs entirely client-side inside your browser. No diagrams, code, or proprietary architecture designs are transmitted over the network.

Can I export diagrams to vector SVG and raster PNG?

Yes. You can copy the clean SVG vector code or directly download crisp SVG and PNG files for embedding in GitHub repositories, wikis, or presentations.

Editors/Mermaid Diagram Editor

Mermaid Diagram Editor

Q: What is Mermaid.js and how does it work?

Mermaid.js is a JavaScript-based diagramming and charting tool that uses Markdown-like text definitions to dynamically render complex diagrams and flowcharts in SVG.

Write declarative text and render flowcharts, sequence diagrams, class models, state machines, and Gantt charts in real time. Export crisp vector SVGs or high-resolution PNGs without leaving your browser.

Templates:

Mermaid Syntax7 lines223 chars

Live Preview100%

Enter Mermaid code on the left to render diagram

Supported diagram types and syntax

Mermaid lets you produce clean diagrams directly from simple text. This eliminates the friction of manual drag-and-drop tools and keeps your diagrams version-controllable in Git.

Flowcharts (graph TD / LR)

Decision trees, pipelines, and logic branches.

graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Success]

Sequence Diagrams

API handshakes, authentication, and service messaging.

sequenceDiagram
Alice->>Bob: Hello Bob
Bob-->>Alice: Hi Alice

State Machines (stateDiagram-v2)

Order states, workflow transitions, and lifecycle.

stateDiagram-v2
[*] --> Pending
Pending --> Active

Entity-Relationship (erDiagram)

Database schemas, primary/foreign keys, and relations.

erDiagram
USER ||--o{ POST : writes

FAQ

Is my diagram sent to any external server?

No. The entire Mermaid rendering pipeline operates locally on your machine. Your proprietary system architectures and logic flows remain 100% private.

What is Mermaid.js and how does it work?

Mermaid.js is a JavaScript-based diagramming tool that uses Markdown-like text definitions to dynamically render complex diagrams and flowcharts as SVG in the browser.

Can I export diagrams to SVG and PNG?

Yes. Copy the clean SVG vector code or download crisp SVG and PNG files for embedding in GitHub repositories, wikis, or presentations.

Can I use these diagrams in GitHub READMEs and Notion?

Yes. GitHub natively supports Mermaid code blocks inside Markdown files using ```mermaid. You can also download the rendered SVG or PNG and embed it directly into any document.

How do I fix Mermaid syntax errors?

The editor validates your syntax as you type. If an arrow, node identifier, or delimiter is malformed, a red diagnostic alert displays the exact line error.

Looking to write documentation with embedded diagrams? Open the Markdown Editor with Mermaid Support →