tooling/mermaid
A Mermaid Live Editor for Diagrams You Write as Text
Write a flowchart, a sequence diagram or a Gantt chart as a few lines of Mermaid text and watch it render to SVG the moment you stop typing, with nothing to install.
flowchart LR
A[Write text] --> B{Valid?}
B -- yes --> C[Render SVG]
B -- no --> D[Point at the line]
D --> A
%% edit a line, the diagram redraws01 platform
What a text-to-diagram editor gets you
A diagram you draw by hand drifts out of date the day after you draw it. A diagram you write as text lives next to the thing it describes and changes with it — which is the whole reason to write diagrams this way.
-
Diagrams that diff
Mermaid is plain text, so a diagram fits in a commit, shows up in a code review, and merges like any other file. A change is a line edit, not a redraw in a separate tool.
-
Render as you type
The editor re-renders the SVG on every save, so the picture and the text never disagree. You watch a flowchart take shape rather than nudging boxes around a canvas.
-
Real Mermaid, all the types
This runs Mermaid.js itself, so flowcharts, sequence, class, state, entity-relationship, Gantt and pie diagrams all parse the way the Mermaid docs describe them.
-
Private and installable
The diagram lives in your browser, never on a server, and XCODX installs as a PWA — so the text and its rendered SVG stay yours and keep working offline.
02 deep dive
Diagrams you write instead of draw
The syntax is small on purpose — a node, an arrow, a label — and the editor turns it into a laid-out diagram so you never place a box by hand.
Nodes and edges are the whole idea. A --> B is a node, an arrow and another node; add A[Label] for text and A -->|yes| B for an edge label. Layout — spacing, routing, arrowheads — is Mermaid's job, not yours.
Direction is one keyword. flowchart LR lays a graph left-to-right, TD top-down; the same nodes re-flow when you change it, so trying a different orientation is a one-word edit.
Every diagram type has its own grammar. sequenceDiagram gives you participant and ->> messages; gantt takes dated tasks; classDiagram takes fields and relationships. The editor renders whichever one your first line declares.
- node
- A[Label]
- edge
- A -->|text| B
- direction
- LR, TD, RL
- declares
- first line picks type
sequenceDiagram
participant U as User
participant S as Server
U->>S: request
S-->>U: response
Note over U,S: rendered live03 features
The diagram types you can render
Everything below is on the moment you open the Mermaid editor, which starts with a worked flowchart you can edit line by line.
-
Flowcharts
Nodes, decisions and subgraphs with labeled edges — the type most people reach for, and the one the starter demonstrates.
-
Sequence diagrams
Participants, messages, activations and notes, laid out down a timeline — for describing how parts of a system talk to each other.
-
Class & ER diagrams
Classes with fields and relationships, or entities with keys and cardinality, drawn from a compact text description of the shape of your data.
-
State diagrams
States and transitions, including composite and concurrent states, for modeling how something moves from one status to the next.
-
Gantt charts
Dated tasks with sections and dependencies, rendered as a timeline — a plan you can keep in the same repo as the work.
-
Pie & more
Pie charts, mindmaps, timelines and Git graphs round out the set, each declared by its own opening keyword.
04 deep dive
When the diagram won't render, and why
A diagram that silently fails to draw is worse than none, so the editor tells you where the text went wrong instead of showing a blank pane.
A parse error names the line. A missing arrow, an unclosed bracket or a stray keyword stops the render and points at the line it happened on, so you fix the text rather than guessing at the picture.
The last good render stays up. While the text is mid-edit and invalid, the previous diagram remains on screen with the error beside it, so you always have a working version to compare against.
Indentation and keywords matter. Mermaid is whitespace- and keyword-sensitive; the editor's monospace gutter and the error message together make a misplaced indent obvious rather than mysterious.
- on error
- line + message
- fallback
- last good SVG kept
- sensitive to
- keywords, indent
- output
- inline SVG
Parse error on line 3:
A --> B -->
^
expected a node after the arrow05 pipeline
How Mermaid text becomes an SVG
Three stages, all client-side, between your text and the picture. Knowing the order is what makes a render error make sense.
-
Parse
Mermaid reads your text against the grammar for the diagram type the first line declared, building a model of nodes, edges and their labels — or stopping at the first line it cannot parse.
-
Lay out
The model is passed to a layout engine that positions every node and routes every edge, so spacing and arrow paths are computed rather than placed by you.
-
Render
The laid-out diagram is drawn as inline SVG in the preview. It is real SVG — selectable text, crisp at any zoom — updated on the next save with no image export in between.
06 workflow
From a few lines of text to a flowchart
No drawing tool, no install, no export step — the whole loop from typing to a rendered, versionable diagram.
- new project → Mermaid
- created diagram.mmd · flowchart starter
- add: A -->|yes| C[Render SVG]
- parsed · re-laid out · SVG redrawn
- switch first line to sequenceDiagram
- same nodes, new grammar · timeline view
- git commit -m "auth flow diagram"
- [main 5b1c9e0] auth flow diagram · 1 file
-
It lives in the repo
Because the diagram is text, it commits and diffs with your code — no binary export to keep in sync by hand.
-
The same loop on a tablet
Mermaid renders client-side, so an iPad draws the diagram the same way a laptop does, with nothing installed.
-
Export the SVG
The rendered SVG is real markup you can copy into a README, a doc or a slide when the text is where you want it.
07 ecosystem
Mermaid beside the rest of the toolkit
Mermaid is one of many things the editor renders — the same tab compiles a framework, runs a language and draws a diagram, per file.
08 languages
What else the editor renders and runs
A Mermaid diagram sits beside everything else the editor compiles in the browser, renders natively, or executes on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
09 questions
Mermaid in the browser — common questions
Is this the real Mermaid.js renderer?
Yes. The editor runs Mermaid.js itself in the browser, so the syntax, the diagram types and the rendered output match the Mermaid documentation exactly. It is not a limited lookalike that supports only flowcharts.
Which diagram types are supported?
The ones Mermaid supports — flowchart, sequence, class, state, entity-relationship, Gantt and pie, plus mindmaps, timelines and Git graphs. The first line of your text declares which type the editor renders.
Does the diagram render live as I type?
It re-renders on save, fast enough that editing feels live. The text and the SVG never drift apart because the picture is generated from the text every time rather than maintained separately.
What happens when my Mermaid syntax is wrong?
The editor shows a parse error pointing at the line that failed and keeps the last good diagram on screen, so you fix the text with the working version still visible rather than staring at a blank pane.
Can I export the diagram as SVG?
Yes. The diagram is rendered as real inline SVG — selectable and crisp at any size — so you can copy the markup into a README, documentation or a slide once the text says what you mean.
Do I need to install anything to use Mermaid?
No. The renderer runs entirely in the browser, so there is no CLI, no build and no node_modules. Opening the editor is the whole setup, and it works offline once loaded as a PWA.
Can I keep Mermaid diagrams in my project with other files?
Yes. A .mmd file sits in the project tree beside your code, commits with Git, and exports in the project zip, so a diagram travels with the thing it documents instead of living in a separate drawing app.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the Mermaid editor now
A flowchart on screen in under a minute — written as text, rendered to SVG, with no account wall and nothing to install.