Mermaid online editor

Write, Run & Share Mermaid code online using OneCompiler's Mermaid online editor for free. It's one of the robust, feature-rich online editors for Mermaid. Getting started with the OneCompiler's Mermaid online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Mermaid' and start writing code to learn and test online without worrying about tedious process of installation.

About Mermaid

Mermaid turns plain text into diagrams. You write the structure of a flowchart, sequence diagram, or gantt chart in a short, readable syntax, and Mermaid draws it as SVG. It's handy for keeping diagrams in version control and inside Markdown, since the source is just text.

Syntax help

Setup

Import Mermaid from a CDN and call initialize. With startOnLoad: true, it finds every element with the mermaid class and renders the diagram inside it.

<pre class="mermaid">
flowchart LR
  A[Start] --> B{Works?}
  B -- Yes --> C[Ship it]
  B -- No --> D[Debug]
</pre>

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Flowcharts

Declare a direction (LR left-to-right, TD top-down) then connect nodes with arrows. Node shapes come from the bracket style: [] box, () rounded, {} diamond.

flowchart TD
  A[Request] --> B{Cache hit?}
  B -- Yes --> C[Return cached]
  B -- No --> D[(Database)]
  D --> E[Return fresh]

Sequence diagrams

Show how participants message each other over time. ->> is a call, -->> a response.

sequenceDiagram
  participant User
  participant API
  User->>API: GET /profile
  API-->>User: 200 OK

Gantt charts

Lay out a schedule with sections and dated tasks.

gantt
  title Project plan
  dateFormat YYYY-MM-DD
  section Build
  Design   :a1, 2026-01-01, 7d
  Develop  :after a1, 14d

Pie and class diagrams

Mermaid covers many diagram types from the same text-first approach.

pie title Traffic sources
  "Search" : 55
  "Direct" : 30
  "Social" : 15

classDiagram
  class Animal {
    +String name
    +makeSound()
  }
  Animal <|-- Dog

Rendering on demand

If you add diagrams after the page loads, skip startOnLoad and call run yourself once the new .mermaid elements are in the DOM.

await mermaid.run();