Mermaid Diagram Generator n Editor

Mermaid is an open-source, text-based diagramming language. You describe your diagram structure in plain text and Mermaid renders it as an SVG image. It's widely used for:

• Software architecture and system design
• Process and workflow documentation
• Database schema (ER diagrams)
• Project planning (Gantt charts)
• Git branching visualisation

Yes — completely free, with no sign-up required. There are no usage limits, watermarks, or premium tiers. The tool runs entirely in your browser.

No. The tool runs entirely in your web browser. Just open the URL and start diagramming. No extensions, plugins, or software downloads are needed.

The Mermaid rendering library is loaded from a CDN on first visit. Once loaded, diagrams render without an active internet connection. However, the initial page load requires connectivity. A service-worker offline mode is not currently implemented.

The tool supports all diagram types provided by Mermaid v10, including:

• Flowchart (graph TD / LR / BT / RL)
• Sequence diagram
• Class diagram
• Gantt chart
• Entity Relationship diagram
• State diagram
• Pie chart
• User Journey
• Quadrant chart
• Gitgraph
• Mindmap

The visual canvas editor currently supports flowchart-style diagrams with nodes (shapes) and directed edges (arrows). For other diagram types such as sequence or Gantt, use the code editor — they render beautifully in the preview panel.

No. All diagram data is stored exclusively in your browser's local storage and session storage. Nothing is sent to any server, and no data ever leaves your device. See our Privacy Policy for full details.

No account is required. Your files are saved locally in the browser. If you clear your browser data or use a different browser / device, your saved files will not be available there.

Yes, the site uses Google Analytics (G-M0GCVQRDDS) to understand aggregate usage patterns such as page views and browser types. Diagram content is never sent to analytics. You can block Google Analytics using a browser extension such as uBlock Origin if you prefer.

You can export your diagram as:

• SVG — lossless vector, scales to any resolution, ideal for documentation
• PNG — transparent background raster image
• JPEG — compressed raster for general use

The file manager stores named diagrams in your browser's localStorage. You can create multiple files, switch between them, rename, and delete them. Your active file is auto-saved every time you make a change (500 ms debounce). Ctrl+S also saves explicitly.

Files are local to your browser — they are not synced to the cloud or other devices.

SVG exports preserve the diagram exactly as rendered. PNG/JPEG exports capture the rendered SVG at the current display size. If you need a higher-resolution export, try zooming in your browser before exporting PNG/JPEG, or use SVG for print-quality output.

Make sure you're in Select mode (press V or click the Select button). Hover over a node — four blue dots appear at its edges. Drag from one of those dots to another node to create a directed arrow.

Double-click the node or arrow. An inline text input appears directly on the canvas. Edit the label and press Enter to confirm, or Escape to cancel.

Undo/redo is not currently implemented in the visual canvas editor. For undoing accidental deletions, try loading a previously auto-saved version via the File Manager if the file was already saved.