Mermaid Design

Getting Started

mermaid.design is a free online Mermaid diagram editor. Write Mermaid syntax on the left and watch the diagram render live on the right. Everything runs entirely in your browser — your diagrams never leave your device.

Your first diagram

  1. Open mermaid.design — the editor loads with an example flowchart.
  2. Edit the Mermaid code in the left pane, for example:
flowchart TD
    A[Start] --> B{Ready?}
    B -- Yes --> C[Ship it]
    B -- No --> D[Keep coding]
  1. The preview re-renders automatically as you type (with a short debounce). If the syntax is invalid, the last good diagram stays visible behind an error banner, and the code editor marks the failing line.

The workbench

The editor is a three-pane workbench:

  • Code editor (left) — a Monaco editor (the same engine as VS Code) with Mermaid syntax highlighting, inline error markers, and a format/copy/clear toolbar. You can collapse it to a slim icon strip, or drag the divider to resize it.
  • Preview (center) — the live-rendered diagram. Drag to pan, Ctrl/⌘ + scroll to zoom, double-click to fit. A floating toolbar offers zoom controls and a canvas background switch (dots / white / checker).
  • Theme panel (right) — one-click presets, fine-grained theme variables, and seed-color theme generation. See below.

On narrow screens the workbench becomes a single pane with a bottom Code / Preview / Theme tab bar.

Render modes

Use the segmented control in the navbar to switch how your diagram is rendered:

  • Official — the standard Mermaid SVG output, exactly as the Mermaid engine renders it.
  • ASCII — your diagram converted to text art you can paste into code comments, docs, or terminals. See ASCII Rendering.

The mode is part of the URL, so you can bookmark or share a link to a specific mode.

Themes

Every diagram is rendered with the base theme plus a set of over 70 editable theme variables:

  • Presets — the 11 built-in Mermaid themes (Default, Neutral, Forest, Dark, Base, and more) plus designer presets, each with a mini preview.
  • Theme Variables — tune individual colors, borders, and fonts by group, with search.
  • Generate — derive a complete theme from a single seed color, light or dark.

Your work is saved automatically

The editor persists your code, theme, and layout to your browser’s local storage. Close the tab and come back later — your diagram is still there. Nothing is uploaded to a server.

Next steps