Frequently Asked Questions
Does this Mermaid editor send my diagram code to a server?
No. The Mermaid diagram editor renders all diagrams entirely in your browser using the Mermaid.js library. Your diagram source code never leaves your device, making it safe for proprietary architecture diagrams or internal system designs.
What diagram types does Mermaid.js support?
Mermaid supports Flowcharts, Sequence Diagrams, Class Diagrams, State Diagrams, Entity-Relationship (ER) Diagrams, Gantt Charts, Pie Charts, Git Graphs, and Mindmaps. The editor includes a live preview that updates as you type.
Can I export my Mermaid diagram as an image or SVG?
Yes. Once your diagram renders, you can download it as a PNG or SVG file directly from the editor. SVG format is ideal for technical documentation since it scales without quality loss.
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.
Personalised history, favourites & saved settings — coming soon for logged-in users