Mermaid Design Mermaid Design

About

mermaid.design is a free online Mermaid diagram editor. Write Mermaid syntax on the left and see a live-rendered diagram on the right. All processing happens entirely in your browser — your diagrams never leave your device.

Key Features

  • Live Preview: Diagrams re-render as you type, with instant syntax validation and error reporting
  • Two Render Modes: Render your diagram as a crisp SVG, or as ASCII art you can paste into code comments, docs, or terminals
  • Diagram Themes: One-click Mermaid themes including Default, Neutral, Forest, Dark, and Base, plus custom background colors or a transparent background
  • ASCII Rendering: Convert flowcharts and sequence diagrams into text-based diagrams with Unicode or plain ASCII charsets and an adjustable font size
  • Pan & Zoom: Drag to pan and Ctrl/⌘ + scroll to zoom, with a floating toolbar for precise control
  • Code Editor: Monaco-based editor (the same engine as VS Code) with Mermaid syntax highlighting
  • Templates: A built-in gallery of flowchart, sequence, class, state, ER, Gantt, pie, Git graph, mind map, and user journey templates
  • Export: Download your diagram as SVG, PNG, JPG, or WebP at 1x, 2x, or 4x resolution — or as plain-text ASCII
  • Client-Side Only: No servers, no uploads — everything runs locally in your browser

Supported Diagram Types

Flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, Git graphs, mind maps, user journeys, C4 diagrams, timelines, and requirement diagrams — anything the Mermaid engine supports.

Feedback

If you have any questions or suggestions about our tool, please feel free to contact us.