Is it fully compatible with Mermaid?

It supports the most-used parts of Mermaid flowcharts: graph/flowchart directions, all common node shapes, -->, ---, -.->, ==>, --o, --x and links, both |text| and -- text --> labels, & for multiple nodes, chained links, subgraphs, style colors and %% comments. classDef, class, click and linkStyle lines are ignored without errors. The layout engine is our own, so positions won’t exactly match Mermaid’s renderer.

How do I write labels with special characters or line breaks?

Wrap the text in double quotes when it contains brackets, pipes or other symbols, for example A["Price (USD)"]. Use for a manual line break, such as A["First line Second line"]. Node IDs can be letters, digits, underscores or CJK characters, and long labels wrap automatically at about 220 pixels.

How does the automatic layout work? Can I drag nodes?

It uses a layered (Sugiyama-style) layout: nodes are assigned to layers along the flow direction, links that loop back are detected and routed separately, the order within each layer is refined with the barycenter method to reduce crossings, and nodes are aligned toward the middle of their neighbors. Positions are computed, not dragged — change the link order, use subgraphs or switch between TD and LR to influence the result.

Where can I use the exports, and where is my code saved?

SVG exports are vector graphics that stay sharp at any size, ideal for Word, PowerPoint, Keynote, Notion or web pages; PNG is exported at 2× resolution for chat apps and documents. Your code autosaves in the browser, and you can save a .mmd file to open later here or in any Mermaid-compatible tool such as Markdown editors.

⛓️

⛓️Flowchart Maker - Text to Diagram, Mermaid Compatible

Write a few lines of text and get a neatly laid-out flowchart — no dragging or aligning boxes. The syntax follows common Mermaid flowchart rules: start with graph TD (top-down) or graph LR (left-right), then use A[text] for a rectangle, B(text) for rounded, C{text} for a decision diamond and D((text)) for a circle, plus stadium, subroutine, database, hexagon, parallelogram and flag shapes. Connect nodes with -->, use -.-> for dotted, ==> for thick and --- for no arrow, label links with -->|yes| or -- yes -->, link several nodes at once with A --> B & C, group nodes with subgraph Title … end, and color single nodes with style. The preview updates as you type: nodes are arranged in layers to minimize crossings, loops back are routed cleanly, and syntax errors point to the exact line. Text is measured at its real width, including Chinese, and long labels wrap automatically. Choose from Blue, Forest, Warm, Colorful, Dark and other themes and curved, polyline or straight links, then export an SVG or high-resolution PNG, or save a .mmd file to keep editing later.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Flowchart Maker

1Write flowchart code on the left, or start from one of the examples
2Watch the live preview and adjust theme, link style, font size and spacing
3Click Export PNG or Export SVG, or save the .mmd file

FAQ

Is it fully compatible with Mermaid?: It supports the most-used parts of Mermaid flowcharts: graph/flowchart directions, all common node shapes, -->, ---, -.->, ==>, --o, --x and <--> links, both |text| and -- text --> labels, & for multiple nodes, chained links, subgraphs, style colors and %% comments. classDef, class, click and linkStyle lines are ignored without errors. The layout engine is our own, so positions won’t exactly match Mermaid’s renderer.
How do I write labels with special characters or line breaks?: Wrap the text in double quotes when it contains brackets, pipes or other symbols, for example A["Price (USD)"]. Use <br> for a manual line break, such as A["First line<br>Second line"]. Node IDs can be letters, digits, underscores or CJK characters, and long labels wrap automatically at about 220 pixels.
How does the automatic layout work? Can I drag nodes?: It uses a layered (Sugiyama-style) layout: nodes are assigned to layers along the flow direction, links that loop back are detected and routed separately, the order within each layer is refined with the barycenter method to reduce crossings, and nodes are aligned toward the middle of their neighbors. Positions are computed, not dragged — change the link order, use subgraphs or switch between TD and LR to influence the result.
Where can I use the exports, and where is my code saved?: SVG exports are vector graphics that stay sharp at any size, ideal for Word, PowerPoint, Keynote, Notion or web pages; PNG is exported at 2× resolution for chat apps and documents. Your code autosaves in the browser, and you can save a .mmd file to open later here or in any Mermaid-compatible tool such as Markdown editors.