Mermaid Flowchart Online — Write and Render in Your Browser

Mermaid flowchart syntax is widely used in README files, wikis, and documentation — but rendering it usually requires a local install, a VS Code extension, or a platform that supports it natively. The flowchart editor on this page renders Mermaid flowchart syntax in the browser with no setup. Paste in your Mermaid code, see the diagram, export PNG or SVG. Works on any device with a browser.

Mermaid Flowchart Syntax Quick Reference

A Mermaid flowchart starts with a direction declaration followed by node and edge definitions:

flowchart TD
    A[Process step] --> B{Decision?}
    B -- Yes --> C[Outcome A]
    B -- No --> D[Outcome B]
    C --> E([End])
    D --> E

Direction options:

• flowchart TD — top to bottom
• flowchart LR — left to right
• flowchart BT — bottom to top
• flowchart RL — right to left

Node shapes:

• A[text] — rectangle (standard process box)
• A{text} — diamond (decision/gateway)
• A(text) — rounded rectangle
• A([text]) — stadium/pill (start and end terminals)
• A((text)) — circle (connector)

Edge types:

• A --> B — arrow
• A -- label --> B — labeled arrow
• A -.-> B — dashed arrow
• A --- B — line without arrow

Common Mermaid Flowchart Patterns

Linear process:

flowchart LR
    A([Start]) --> B[Collect input] --> C[Process] --> D[Output] --> E([Done])

Decision with merge:

flowchart TD
    A[Review request] --> B{Approved?}
    B -- Yes --> C[Process payment]
    B -- No --> D[Send rejection]
    C --> E[Send confirmation]
    D --> E

Loop with exit condition:

flowchart TD
    A[Check connection] --> B{Connected?}
    B -- No --> C[Retry after 5s] --> A
    B -- Yes --> D[Proceed]

Parallel paths (simplified):

flowchart TD
    A[Start] --> B[Task A]
    A --> C[Task B]
    B --> D[Join]
    C --> D

Sell Custom Apparel — We Handle Printing & Free Shipping

Where Mermaid Flowcharts Are Supported

Mermaid is supported natively in several platforms — you write the code in a code block and the platform renders the diagram:

• GitHub — Markdown files, issues, and PRs render Mermaid code blocks
• GitLab — Markdown renderer supports Mermaid natively
• Notion — Code blocks support Mermaid rendering
• Confluence — Via the Mermaid for Confluence marketplace app
• Obsidian — Supports Mermaid in markdown notes
• VS Code — Via the Markdown Preview Mermaid Support extension

For platforms that don't support Mermaid natively, use this online editor to render and export. Then embed the PNG or SVG image instead.

Fixing Common Mermaid Syntax Errors

If your diagram doesn't render, these are the most common causes:

• Missing direction declaration: The first line must be flowchart TD or flowchart LR (not just graph TD — that is the older syntax)
• Special characters in node labels: Parentheses, quotes, and angle brackets inside node labels can break parsing. Wrap the label in quotes: A["Label with (parens)"]
• Duplicate node IDs: Each node identifier (the letter or word before the bracket) must be unique. If you reuse A for two different nodes, only one renders
• Missing indentation: While not strictly required, consistent indentation makes errors easier to spot
• Spaces in node IDs: Node IDs cannot contain spaces. Use underscore: start_node not start node

Using the Online Editor for Docs Workflows

A practical workflow for documentation teams:

1. Write your Mermaid flowchart code in your markdown file or wiki
2. When you need a PNG or SVG (for a platform that doesn't render Mermaid), paste the code into this editor
3. Export the image and attach it to your document
4. Keep the Mermaid code as the source of truth — stored in your repo or doc, not as an image

This approach means your flowchart is both version-controlled (the text) and portable (the exported image). When the process changes, update the Mermaid code, re-export the image, and update the embedded version.

For building flowcharts from scratch using this syntax, see the text-to-flowchart guide.

Frequently Asked Questions

Does this tool support all Mermaid diagram types?

This editor is optimized for Mermaid flowchart syntax specifically. For other Mermaid diagram types (sequence, class, Gantt, ER diagrams), use the corresponding specialized tools — see the ERD maker and sequence diagram maker.

What is the difference between "graph" and "flowchart" in Mermaid syntax?

"graph" is the older Mermaid syntax. "flowchart" is the current preferred keyword and supports additional features. This editor uses the flowchart keyword. If you paste older code using "graph TD", update the first line to "flowchart TD".

Can I use this to preview Mermaid diagrams before pasting them into GitHub?

Yes — paste your code, verify the rendering looks correct, then put it in your GitHub markdown file inside a code fence with the mermaid language tag. GitHub will render it natively.

Does the tool work on mobile for editing Mermaid syntax?

Yes — the editor works on mobile browsers. The text input and real-time rendering function on phone and tablet, though a keyboard is helpful for the syntax.