# Mermaid Diagram Editor — Free Online Tool
https://mermaid.usetool.org/

> Mermaid Diagram Editor is a free, privacy-first online tool for creating diagrams from code using Mermaid.js syntax. Live preview, 11 starter templates, 5 themes, SVG/PNG export. No signup, no ads, no server — everything runs in your browser.

## Supported Diagram Types
- Flowchart: process flows, decision trees, algorithms
- Sequence Diagram: actor interactions over time
- Class Diagram: OOP structures with inheritance and composition
- State Diagram: state machines and transitions
- ER Diagram: entity-relationship models for database design
- Gantt Chart: project timelines with tasks and dependencies
- Pie Chart: proportional data visualization
- Mindmap: hierarchical idea maps
- Timeline: chronological events
- User Journey: UX workflow maps with satisfaction ratings
- Git Graph: branching workflows with commits and merges
- Plus: C4 context, quadrant charts, Sankey diagrams, Kanban, and all other Mermaid types

## Features
- Live preview: diagram renders as you type (debounced 500ms)
- 11 starter templates with real examples
- 5 themes: Default, Dark, Forest, Neutral, Base
- Export: SVG (vector), PNG (1x, 2x, 4x resolution)
- Copy: SVG markup or Mermaid source to clipboard
- Real-time syntax validation with error messages
- Auto-save to browser local storage
- Dark mode support (syncs with system preference)
- Mobile responsive with tabbed Code/Diagram view
- Offline capable after first load
- Transparent PNG background option

## Use Cases
Software engineers documenting architecture, product managers creating user flows, database designers modeling schemas, students learning data structures and UML, DevOps teams mapping CI/CD pipelines, agile teams planning sprints with Gantt charts, technical writers embedding diagrams in documentation.

## Limitations
No collaboration or multi-user editing. No drag-and-drop visual editor (code-only). No server-side rendering or API. No file import. Maximum 100,000 characters. No version history beyond browser auto-save.

## Technical
Built with Astro 5 (SSG), Preact + Signals (~4KB island), Mermaid.js v11 (loaded asynchronously). Tailwind CSS v4. Zero server dependencies. Text never leaves the browser. Security: securityLevel strict, DOMPurify sanitization, maxTextSize 100K.

## Comparison
- vs mermaid.live: lighter (~4KB vs ~3MB initial), cleaner UI, 5 one-click themes, no Monaco overhead
- vs draw.io: code-based (diagrams-as-code) vs drag-and-drop GUI, better for version control
- vs Excalidraw: structured Mermaid syntax vs freehand drawing, professional auto-layout