Mermaid Diagram Generator n Editor

Free Online Flowchart Maker

A flowchart shows how a process moves from one step to the next, including the points where it branches. This editor builds one from text: you describe the nodes and the arrows between them, and the diagram renders as you type.

Because the diagram is text, it lives in version control next to your code and diffs like code. Nothing is uploaded — the whole editor runs in your browser.

A basic decision flow

Mermaid source
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Ship it]
    B -->|No| D[Debug]
    D --> A
A basic decision flowOpen in editor →

graph TD sets the direction to top-down. Square brackets make a rectangle, curly braces make a decision diamond, and the text between pipes labels the arrow leaving a decision.

A deployment pipeline, left to right

Mermaid source
graph LR
    A[Commit] --> B[CI build]
    B --> C{Tests pass?}
    C -->|Yes| D[(Registry)]
    C -->|No| E[Notify author]
    D --> F[Deploy to prod]
A deployment pipeline, left to rightOpen in editor →

graph LR flows left to right, which suits pipelines. [(Round brackets inside square)] draws a cylinder, the conventional shape for a datastore.

Questions

What is the difference between graph TD and graph LR?

TD lays the diagram out top-down and LR lays it out left to right. TB is a synonym for TD. Pick whichever fills the space you are pasting the diagram into — tall flows suit TD, pipelines suit LR.

How do I change the shape of a node?

The brackets around the label choose the shape: [rectangle], (rounded), ((circle)), {diamond}, [(cylinder)], and [/parallelogram/].

Related tools