# Flowchart Maker - Text to Diagram, Mermaid Compatible

> Free flowchart maker: describe nodes and links in plain text (Mermaid flowchart syntax) for an auto-laid-out diagram with shapes and themes. SVG/PNG export.

- URL: https://qilingtools.com/en/flowchart
- Category: Productivity (https://qilingtools.com/en/office)
- Tags: [Charts & Visualization](https://qilingtools.com/en/tags/chart), [Productivity](https://qilingtools.com/en/tags/office)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

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.

## How to use

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

## Features

- Common Mermaid flowchart syntax — paste existing code
- TD, LR, BT and RL directions
- 11 node shapes including decision, circle and database
- Solid, dotted, thick, plain, circle and cross links with labels
- Subgraph groups and per-node style colors
- Automatic layered layout with crossing reduction and clean back edges
- Real text measurement, auto-wrapping labels, line-level error messages
- 6 themes and 3 link styles; SVG and PNG export

## 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.

## Related tools

- [QiLing Mind](https://qilingtools.com/en/mindmap): QiLing Mind is a free online mind map editor: add nodes with Tab/Enter, drag to restructure, import and export XMind and Markdown, export PNG/SVG/PDF.
- [Password Generator](https://qilingtools.com/en/password): Free online random password generator: choose length, character sets and look-alike exclusions, generate several at once with a strength meter, all locally.
- [QR Code Generator](https://qilingtools.com/en/qrcode): Free online QR code generator: turn URLs, text, Wi-Fi or contact cards into QR codes with custom size, colour and error correction. Crisp PNG or vector SVG.
- [Word Counter](https://qilingtools.com/en/word-count): Free online word counter: live counts of characters with and without spaces, words, CJK characters, lines, paragraphs, sentences, bytes and reading time.
- [Case Converter](https://qilingtools.com/en/case-convert): Free online case and naming converter: get UPPERCASE, lowercase, Title Case, camelCase, PascalCase, snake_case, kebab-case and CONSTANT_CASE at once.
- [Lorem Ipsum Generator](https://qilingtools.com/en/lorem): Free online Lorem Ipsum generator: classic Latin placeholder text or Chinese filler by paragraph, sentence or word, with one-click copy for mockups.
- [Sort & Dedupe Text](https://qilingtools.com/en/text-sort): Free online text tool: sort lines alphabetically or by length, remove duplicate and empty lines, trim whitespace, optionally ignoring case. Runs locally.
- [Sign & Stamp PDF](https://qilingtools.com/en/pdf/sign): Free online PDF signing tool: drop in a handwritten signature or company stamp, drag it into place on a page preview, adjust size and opacity, then export.