Mermaid.js Live Diagram Editor

Create and preview Mermaid.js diagrams in real time — flowcharts, sequences, Gantt, ERDs, and more

  1. Home
  2. /
  3. Mermaid.js Live Editor

Preview

Click Render to preview diagram

What Is Mermaid.js?

Mermaid.js is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions into diagrams. It supports flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, pie charts, ER diagrams, mind maps, and more. It's widely used in documentation, wikis, and README files.