Flowchart & Diagram Maker

Create flowcharts, sequence diagrams, state diagrams, and more from simple text. Paste diagram syntax on the left and see a live preview on the right, then share a link or download SVG — all in your browser. Powered by Mermaid, so you can also paste existing Mermaid diagrams from docs and READMEs.

Diagram preview will appear here.

When to use this tool

You want a quick online flowchart without a design tool.

You need to preview or share a text-based diagram (including Mermaid).

Examples

Left-to-right flowchart

Input

flowchart LR
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship]
  B -->|No| D[Fix]

Output

Rendered flowchart with decision branch

flowchart LR draws left to right; use TD for top-down.

Sequence diagram

Input

sequenceDiagram
  Client->>API: Request
  API-->>Client: Response

Output

Rendered sequence diagram

Developer use cases

Draft a process flowchart for a README or wiki.

Sketch a sequence diagram for an API handshake.

Share a state diagram with teammates via URL.

Common mistakes to avoid

Forgetting the diagram type line (e.g. flowchart LR).

Using spaces in node IDs instead of camelCase or quoted labels.

Format and behavior notes

Uses Mermaid syntax for flowcharts, sequence, state, ER, and related diagram types.

Rendering runs entirely in your browser.

Download SVG to embed the diagram elsewhere.

Frequently Asked Questions

Do I need to know Mermaid?

Not required. Start from the flowchart example and edit the boxes and arrows. If you already use Mermaid in docs, you can paste that syntax here too.

What diagram types are supported?

Flowcharts (LR/TD), sequence diagrams, state diagrams, ER diagrams, class diagrams, mindmaps, and other types supported by Mermaid.

Can I share a diagram?

Yes. Use Share to copy a URL that restores your diagram source.

Can I export the diagram?

Yes. Download SVG from the preview once the diagram renders successfully.

Is my diagram uploaded to a server?

No. Diagram rendering runs locally in your browser.