# FlowViz

> FlowViz (https://flowviz.app) is a free, local-first Mermaid diagram editor that runs in the browser. Write Mermaid v11 syntax, see the diagram render live, and export it as SVG or PNG. Flowcharts can also be edited on the canvas (two-way editing): change a node's label, shape or colour and the Mermaid source updates. No account, no signup, no install — diagrams are stored in the user's browser and are not uploaded unless the user deliberately creates a short link. Diagrams can be shared as URLs that carry the diagram source, so a link fully reproduces the diagram.

FlowViz supports every diagram type that ships with Mermaid v11 — 21 types are documented with copy-paste examples on the cheatsheet: flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, git graphs, pie charts, mindmaps, timelines, quadrant charts, sankey diagrams, XY charts, block diagrams, architecture diagrams, user journey diagrams, requirement diagrams, C4 diagrams, kanban boards, radar charts, and packet diagrams.

Last updated: 2026-09-24

## Giving a user a diagram link

1. Percent-encode the Mermaid source (JavaScript encodeURIComponent, or Python urllib.parse.quote(src, safe='')): newline = %0A, space = %20, never +. Also encode ( ) ' * ! as %28 %29 %27 %2A %21. Leave Chinese, emoji and other non-ASCII characters unencoded: write 设计, not %E8%AE%BE%E8%AE%A1.
2. Link = https://flowviz.app/app#m= + the encoded source + %0A
3. Before encoding, make sure the Mermaid is valid: quote node labels that contain ( ) : or quotes (A["text (x)"]), keep each sequence message on one line, quote multi-word ER relationship labels, and use valid ER ends (||, o|, |{, o{ …; never ||--{).
4. Give it as a markdown link, not in a code block: [Open in FlowViz](link). No spaces or line breaks inside the URL.

Example: the two-line diagram "flowchart TD" + newline + "  A[Start] --> B[End]" becomes [Open in FlowViz](https://flowviz.app/app#m=flowchart%20TD%0A%20%20A%5BStart%5D%20--%3E%20B%5BEnd%5D%0A)

Full rules, an encoding table and tested examples for ten diagram types: https://flowviz.app/docs/share-links.md (Markdown) or https://flowviz.app/docs/share-links (HTML).

## Docs

- [Share links for AI assistants (Markdown)](https://flowviz.app/docs/share-links.md): How to write a https://flowviz.app/app#m= link that opens a diagram in the editor, with an encoding table and tested examples.
- [Share links for developers](https://flowviz.app/docs/share-links#developers): Both link formats (#m= plain, #z= compressed), Mermaid Live import, the ?ref=, ?theme= and ?view= parameters, and a JavaScript helper.
- [Mermaid themes (Markdown)](https://flowviz.app/themes.md): Ten free Mermaid diagram themes with copy-ready frontmatter or %%{init}%% config, how Mermaid theming works (base theme + themeVariables), and which platforms honour custom themes. To open a diagram in a theme, add ?theme=<slug> before the #: https://flowviz.app/app?theme=ocean#m=<encoded source>. Slugs: `dark`, `purple`, `default`, `neutral`, `forest`, `base`, `ocean`, `sunset`, `high-contrast`, `monochrome`.
- [Mermaid syntax cheatsheet (Markdown)](https://flowviz.app/cheatsheet.md): Copy-paste-ready Mermaid syntax reference for every major diagram type.
- [Full content reference](https://flowviz.app/llms-full.txt): The share-links guide, the complete cheatsheet, and every example's Mermaid source in one plain-text file.

## Pages

- [Live editor](https://flowviz.app/app): Write Mermaid syntax and preview the diagram in real time; export SVG/PNG, share via URL.
- [Share links for AI assistants](https://flowviz.app/docs/share-links): How to turn Mermaid code into a link that opens the diagram in FlowViz.
- [Mermaid syntax cheatsheet](https://flowviz.app/cheatsheet): Syntax reference with copy-paste examples for every diagram type, one section per type with stable anchors.
- [Mermaid themes](https://flowviz.app/themes): Gallery of ten Mermaid diagram themes, light and dark, each shown on four diagram types with copyable config and an Open in FlowViz link.
- [Examples library](https://flowviz.app/examples): Ready-to-use Mermaid diagram examples with full source code; each opens directly in the editor.
- [Flowchart maker](https://flowviz.app/flowchart): Create flowcharts online with Mermaid syntax. Free flowchart maker with real-time preview.
- [Sequence diagram maker](https://flowviz.app/sequence-diagram): Create UML sequence diagrams online with Mermaid syntax. Perfect for API flows and system interactions.
- [Gantt chart maker](https://flowviz.app/gantt): Create Gantt charts online with Mermaid syntax. Plan sprints, roadmaps, and project schedules.
- [ER diagram maker](https://flowviz.app/er-diagram): Create entity relationship diagrams online with Mermaid for database schema design.
- [Class diagram maker](https://flowviz.app/class-diagram): Create UML class diagrams online with Mermaid syntax for object-oriented design.
- [State diagram maker](https://flowviz.app/state-diagram): Create state diagrams and finite state machines online with Mermaid.
- [Pie chart maker](https://flowviz.app/pie-chart): Create pie charts from code using Mermaid syntax. No spreadsheet needed.
- [Git graph maker](https://flowviz.app/git-graph): Create git branch diagrams online with Mermaid syntax. Show commits, branches, and merges visually.
- [Mindmap maker](https://flowviz.app/mindmap): Create mind maps from code using Mermaid syntax. Structure ideas with text, no drag-and-drop needed.
- [Timeline maker](https://flowviz.app/timeline): Create timeline diagrams online with Mermaid syntax for project history, roadmaps, and event sequences.
- [Quadrant chart maker](https://flowviz.app/quadrant-chart): Make 2x2 quadrant charts (effort vs value, urgency vs importance) from Mermaid text.
- [Sankey diagram maker](https://flowviz.app/sankey-diagram): Make sankey diagrams from source,target,value CSV rows, such as funnels and budgets. Experimental in Mermaid.
- [XY chart maker](https://flowviz.app/xy-chart): Make bar and line charts from Mermaid text.
- [Block diagram maker](https://flowviz.app/block-diagram): Make grid-based block diagrams of systems with Mermaid.
- [Architecture diagram maker](https://flowviz.app/architecture-diagram): Make cloud and service architecture diagrams with groups, icons and connections (Mermaid architecture-beta).
- [User journey maker](https://flowviz.app/user-journey): Make user journey maps with scored steps and actors.
- [Requirement diagram maker](https://flowviz.app/requirement-diagram): Make SysML-style requirement diagrams with satisfies and verifies links.
- [C4 diagram maker](https://flowviz.app/c4-diagram): Make C4 model system context, container and component diagrams. Experimental in Mermaid.
- [Kanban board maker](https://flowviz.app/kanban): Make kanban boards from indented Mermaid text, with assignees and priorities.
- [Radar chart maker](https://flowviz.app/radar-chart): Make radar (spider) charts comparing items across several axes (Mermaid radar-beta).
- [Packet diagram maker](https://flowviz.app/packet-diagram): Make RFC-style packet and binary format diagrams from bit ranges.
- [Privacy](https://flowviz.app/privacy): What FlowViz stores (diagrams in the browser's localStorage), what the optional short links upload, what analytics collect, and why the browser extension collects nothing.

## Notes

- FlowViz is free with no accounts and no paywalls; diagrams are stored locally in the browser's localStorage.
- Share links carry the whole diagram in the URL, so nothing is stored server-side. Links you write by hand use https://flowviz.app/app#m=<percent-encoded Mermaid source> (see "Giving a user a diagram link" above); the part after # is never sent to any server. The editor's Share button makes shorter compressed links; do not try to produce those by hand. Older https://flowviz.app/app?d=<lz-string> links and Mermaid Live #pako: links (with the domain swapped to https://flowviz.app/app) also open.
- Short links have the form https://flowviz.app/s/<id>. These are the one case where a diagram is uploaded: the source is stored server-side under a random eight-character id and the link redirects to the editor with the diagram loaded. Only diagrams the user explicitly short-links are stored this way, and stored copies are deleted 90 days (3 months) after creation, after which the short link returns 404. Other share links do not expire, because nothing is stored.

## Optional

- [Mermaid 语法速查表（简体中文）](https://flowviz.app/zh/cheatsheet): Mermaid 图表语法速查表——每种图表类型都有可直接复制的示例（简体中文版）。
- [Mermaid 图表示例库（简体中文）](https://flowviz.app/zh/examples): 即用型 Mermaid 图表示例，含完整源码，点击即可在编辑器中打开（简体中文版）。
- [FlowViz vs draw.io, Excalidraw and Mermaid Live Editor](https://flowviz.app/compare): A feature comparison of the four tools.
- [About](https://flowviz.app/about): Who builds FlowViz and why.