Utilio

Mermaid Diagram Editor

Free

Write Mermaid syntax → diagrams render live. Export as SVG or PNG.

Mermaid Code

Preview

Rendering…

Diagram Types

flowchart TDFlowchart (top-down)
sequenceDiagramSequence diagram
classDiagramClass diagram (UML)
erDiagramEntity-Relationship
ganttGantt chart
piePie chart
stateDiagram-v2State machine
mindmapMind map

What is Mermaid?

Mermaid is a JavaScript-based diagramming tool that renders text-based definitions into SVG diagrams — flowcharts, sequence diagrams, ER diagrams, Gantt charts and more.

Why Use Mermaid?

Mermaid lets you create diagrams in code, making them version-controllable, diffable and easy to update. No drag-and-drop tools needed.

Features

  • Live rendering with debounced updates
  • 8 diagram types: flowchart, sequence, ER, class, gantt, pie, state, mindmap
  • Template library for quick start
  • Split, code-only and preview-only view modes
  • Export as SVG or high-resolution PNG

Reviews

Sign in to write a review