📊 Diagram
✅ 100% Free
⚡ Instant
Flowchart Generator
Type plain-text steps and get a clean, professional flowchart instantly. Supports process steps, decisions, loops, start/end nodes. Export as SVG or PNG — all in-browser, nothing uploaded.
Your flowchart will appear here
Type steps in the panel on the right
or load a template to get started
or load a template to get started
How the Flowchart Generator Works
Plain Text Input
Write your process as simple bullet-point steps. No special syntax to memorize — start a line with spaces + YES/NO to create decision branches automatically.
Smart Shape Detection
Lines ending in ? become diamond decisions. "Start" and "End" become rounded terminals. YES/NO indented lines become coloured branch nodes.
6 Built-in Themes
Choose from Blue, Purple, Green, Dark, Minimal or Warm themes. Adjust node size, font, and arrow style to match your document or presentation.
SVG & PNG Export
Download as crisp scalable SVG for presentations and docs, or PNG for embedding anywhere. Everything renders in your browser — nothing is sent to any server.
What is a Flowchart Generator?
A flowchart generator converts a simple text description into a rendered flowchart diagram. Instead of manually drawing shapes and arrows, you write a few lines describing your process flow — and the diagram renders instantly. Flowcharts document business processes, algorithm logic, decision trees, troubleshooting guides, and system workflows used in development and project planning.
This tool runs entirely in your browser using Mermaid.js — your diagram data never leaves your device.
Flowchart Node Shapes
- Rectangle [ ] — standard process step or action.
- Rounded rectangle ( ) — start or end of the flow (terminal node).
- Diamond { } — decision point with Yes/No or True/False branches.
- Parallelogram [/ /] — input or output operation.
- Circle (( )) — connector node for joining or splitting flows.
- Hexagon {{ }} — preparation or initialisation step.
How to Create a Flowchart
- Choose flow direction — Top-Down (TD), Left-Right (LR), Bottom-Up (BU), or Right-Left (RL).
- Write your nodes and connections using the Mermaid flowchart syntax shown in the cheatsheet.
- The flowchart renders live as you type.
- Download as SVG or PNG for presentations or documentation.
Frequently Asked Questions
A flowchart shows the logical flow of a process or algorithm — steps, decisions, and branches. A sequence diagram shows chronological interactions between multiple actors — who sends what message to whom. Use flowcharts for process documentation; use sequence diagrams for API interactions and multi-system workflows.
Yes — Mermaid supports subgraphs for grouping related nodes:
subgraph GroupName ... end. Subgraphs render as a bordered group within the main flowchart, useful for showing system boundaries or logical phases of a process.Use the
style directive: style nodeId fill:#f96,stroke:#333. To apply a style to multiple nodes, define a class with classDef className fill:#f96 and apply it with class node1,node2 className. This lets you colour-code different types of steps.Yes — GitHub natively renders Mermaid diagrams in Markdown. Wrap your diagram in a fenced code block with the language set to "mermaid". The diagram renders automatically when viewed on GitHub, GitLab, and Notion.
For documentation-as-code, Mermaid (which this tool uses) is best — diagrams live alongside code in your repository and render natively in GitHub, GitLab, and Notion. For collaborative visual drawing, Lucidchart, draw.io, and Figma FigJam are popular options.
Done!