Mermaid Diagram Generator n Editor

Open the editor

Go to mermaid.ranjankumar.in. The left panel is your code editor. The right panel shows a live preview that updates as you type.

Load an example or write your own

Use the Examples dropdown to load a ready-made diagram, or clear the editor and write Mermaid syntax directly. For example, a simple flowchart:

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Ship it!]
    B -->|No| D[Debug]
    D --> B

Preview updates live

The diagram on the right updates automatically as you type. If there's a syntax error, an error message will appear below the preview.

Export your diagram

Click PNG, SVG, or JPEG in the toolbar to download your diagram. SVG is lossless and scales to any size. PNG/JPEG are great for presentations and documents.

Switch to the Visual Editor tab

Click the Visual Editor tab in the right panel. A dot-grid canvas appears with a toolbar at the top.

Add nodes

Click a shape button in the toolbar — Rect, Rounded, Diamond, or Circle — then click anywhere on the canvas to place a node. A label editor opens automatically so you can name it right away.

Connect nodes with arrows

Switch to Select mode (or press V), hover over a node to reveal the blue anchor dots, then drag from a dot to another node to draw an arrow. Use the F/S/T buttons and arrow-type buttons in the properties bar to customise connections.

Edit labels inline

Double-click any node or arrow to edit its label directly on the canvas. Press Enter to confirm or Escape to cancel.

Convert to Mermaid code

Click ← Code to convert your canvas drawing into Mermaid syntax in the code editor, then export or copy it. Or click Canvas → to load existing Mermaid code into the canvas.

Open the file manager

Click the Files button in the top-right header. A panel slides in from the left showing all saved diagrams.

Create a new file

Click + New, enter a name, and a fresh diagram opens. Your work auto-saves to that file every time you make a change.

Rename or delete files

Use the pencil icon to rename a file or the trash icon to delete it. Files are stored in your browser's local storage — no account required.