Write Mermaid in your browser and see the diagram as you type
Mermaid describes diagrams as text. A code block turns into a flowchart or a sequence diagram exactly as written, so you never drag shapes around. This editor does that in the browser, with nothing to install and no account to create.
How to write it
Flowchart
```mermaid
flowchart TD
A[Write the draft] --> B{Need a diagram?}
B -- yes --> C[Add a mermaid block]
B -- no --> D[Publish as is]
C --> D
```flowchart TD runs top to bottom. --> is an arrow, { } is a decision, [ ] is a step. A label placed on an arrow (-- yes -->) is drawn as the branch condition.
Sequence diagram
```mermaid
sequenceDiagram
participant B as Browser
participant S as Server
B->>S: save request
S-->>B: saved revision
```participant declares who takes part, ->> is a solid call and -->> a dashed reply. The order of the declarations decides the left-to-right order in the diagram.
What this editor gives you
The diagram lives in the document
A diagram is a code block inside the Markdown, not a separate file. Prose and picture travel together, so neither one quietly goes stale.
Rendered inside your browser
Mermaid rendering happens locally. Your diagram code is not sent to any server to be drawn.
Still plain Markdown when you leave
What you get back is ordinary Markdown containing a mermaid code block. Download it, or push it to GitHub or Google Drive — the syntax never turns into a proprietary format.
Frequently asked questions
Do I need to install anything?
No. You can start writing the moment this page loads, and no account is required.
Will GitHub render the diagram too?
Yes. GitHub renders `mermaid` code blocks as diagrams, so what you write here can be pasted straight into a README or an issue.
Which diagram types can I write?
Flowcharts and sequence diagrams, plus the other types Mermaid supports. For class or deployment diagrams, PlantUML is often easier — you can switch to a PlantUML code block in the same document.
You can try this syntax right now.
Open the editor