How to Use

Method 1 — Write Mermaid Code

1. 1. 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.

2. 2. 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

3. 3. 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.

   Tip: Drag the splitter bar between the two panels to resize them to your preference.

4. 4. 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.

Method 2 — Visual Canvas Editor

1. 1. 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.

2. 2. 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.

3. 3. 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.

4. 4. 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.

5. 5. 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.

   Tip: Import a Mermaid flowchart from the code editor into the canvas by clicking Canvas → — great for tweaking existing diagrams visually.

File Manager

1. 1. Open the file manager

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

2. 2. 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.

3. 3. 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.

Keyboard Shortcuts