Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions to generate diagrams. Instead of using a visual drag-and-drop editor, you write simple text code, and Mermaid renders it into beautiful SVG charts. This online tool provides a live split-screen editor: write your Mermaid code on the left, and see the rendered diagram instantly on the right. It supports flowcharts, sequence diagrams, class diagrams, Gantt charts, pie charts, ER diagrams, user journeys, Git graphs, mindmaps, and more.

This tool supports all major Mermaid diagram types available in Mermaid v10:

• Flowchart — process flows, decision trees
• Sequence Diagram — interactions between participants
• Class Diagram — UML class structures
• State Diagram — state machines and transitions
• Gantt Chart — project timelines and schedules
• Pie Chart — proportional data visualization
• ER Diagram — entity-relationship models
• User Journey — UX flow mapping
• Git Graph — Git branch/commit visualization
• Mindmap — hierarchical brainstorming maps

Exporting is simple! Once your diagram is rendered, use the toolbar buttons:

Export SVG — Downloads a clean, scalable vector file perfect for further editing in tools like Illustrator, Figma, or Inkscape. SVG files are resolution-independent and ideal for print.

Export PNG — Downloads a high-resolution (2x) raster image with a transparent background, ready to use in presentations, documents, or web pages.

You can also use Copy SVG to copy the raw SVG code to your clipboard and paste it directly into HTML or other applications.

If your diagram fails to render, check these common issues:

• Syntax errors — Misspelled keywords, missing arrows (-->), or incorrect node definitions. The error message will typically indicate the problematic line.
• Unclosed brackets — Ensure all [, {, ( have matching closing brackets.
• Invalid characters — Special characters inside labels may need to be wrapped in quotes, e.g., A["Label with special chars"].
• Direction conflicts — In flowcharts, ensure the direction (TD, LR, etc.) is specified correctly on the first line.
• Empty diagram — Make sure your code contains actual diagram definitions, not just comments.

The error panel will show a detailed message to help you pinpoint the issue.

Yes! GitHub and GitLab both natively support Mermaid in Markdown files, issues, PR descriptions, and wikis. Simply wrap your Mermaid code in a fenced code block with the mermaid language identifier:

```mermaid
graph TD
A --> B
```

For Notion, you can use the "Mermaid" embed block or paste your code into a code block and use a third-party integration. Our tool helps you preview and refine your diagrams before embedding them anywhere.

Mermaid offers several ways to customize your diagram's appearance:

• Node styling — Use style NodeID fill:#color,stroke:#color to style individual nodes.
• Class definitions — Define CSS-like classes with classDef className fill:#f9f,stroke:#333 and apply them with class NodeID className.
• Theme selection — Although this tool uses the default theme, you can add %%{init: {'theme':'dark'}}%% at the top of your code for dark-themed diagrams.
• Custom colors — Use hex codes, named colors, or RGB values for precise brand-matching.

Your data never leaves your browser. All Mermaid rendering happens entirely client-side using JavaScript. Your diagram code is not uploaded to any server, stored, or logged. The tool works offline once the page is loaded. For sensitive or proprietary diagrams, you can use this tool with complete confidence — no data is ever transmitted or saved externally.

The tool supports these keyboard shortcuts for faster workflow:

• Ctrl+Enter / Cmd+Enter — Force re-render the diagram immediately (bypasses the auto-render debounce).
• Tab — Insert 2 spaces in the editor for indentation.

The editor auto-renders 400ms after you stop typing, so you rarely need to manually trigger rendering.

The preview panel includes zoom controls in the top-right corner. You can zoom in (up to 300%) to inspect details of complex diagrams, or zoom out (down to 25%) to see the full structure at a glance. Click the reset button (↺) to return to 100%. When zoomed in, the preview area becomes scrollable so you can pan around. Zoom is purely visual and does not affect export quality — exports always render at full resolution.

This tool works on all modern browsers including Chrome 80+, Firefox 75+, Safari 14+, and Edge 80+. Mobile browsers on iOS and Android are also fully supported with a responsive stacked layout. Mermaid uses standard SVG rendering, which is universally supported. If you experience issues, ensure JavaScript is enabled and your browser is up to date. The tool requires no plugins or extensions.