Features
Everything you need to create, edit, and export beautiful diagrams — directly in your browser, for free.
Editor & Preview
Real-Time Preview
Your diagram renders instantly as you type Mermaid code. No need to click a button — see changes live with zero delay.
Resizable Split Panel
Drag the splitter between the code editor and preview to allocate exactly the screen space you need for each.
Built-In Examples
Load ready-made diagrams — flowchart, sequence, class, Gantt, ER, pie, journey, state, and more — with a single click.
Fullscreen Mode
Expand the canvas or the whole app to fullscreen to focus on your diagram without distractions.
Visual Canvas Editor
Drag-and-Drop Nodes
Add rectangles, rounded boxes, diamonds, and circles by clicking shape tools, then drag them anywhere on the canvas.
Visual Arrow Connections
Hover any node to reveal blue anchor dots. Drag from a dot to another node to draw an arrow. Supports forward, bidirectional, and plain connections.
Inline Label Editing
Double-click any node or arrow to edit its label directly on the canvas — no dialog boxes needed.
Color & Font Controls
Customise fill, stroke, and text colors from a 20-swatch palette. Change font family, size, bold, italic, and underline per element.
Bidirectional Conversion
Convert your Mermaid code to an editable canvas with one click, or export your canvas drawing back to clean Mermaid syntax instantly.
Auto-Save
Your work is automatically saved to the browser session. Ctrl+S saves to persistent local storage so nothing is lost on refresh.
Diagram Types
Flowchart
The classic graph TD/LR diagram for decision trees, process flows, and system architectures.
Sequence Diagram
Model interactions between actors and systems with messages, loops, and activation boxes.
Class Diagram
Design object-oriented class structures with attributes, methods, and relationships — UML-ready.
Gantt Chart
Plan projects with tasks, sections, and date-based timelines rendered as horizontal Gantt bars.
Entity Relationship (ER)
Model database schemas and data relationships with cardinality annotations.
Pie, State, Journey & More
Also supports pie charts, state diagrams, user journey maps, quadrant charts, and Gitgraph diagrams.
File Management & Export
File Manager
Save multiple named diagrams in your browser. Create, rename, open, and delete files — no account or server required.
Export PNG / JPEG
Download your diagram as a high-quality raster image — perfect for presentations, documents, and reports.
Export SVG
Download a lossless vector SVG file that scales to any size — ideal for technical documentation and print.
100% Client-Side
No data leaves your browser. Your diagrams are never sent to any server — complete privacy by design.