Flowchart maker
Build flowcharts by describing nodes and arrows as simple text. Diagram.RS renders your flowchart live as you type, using the Mermaid flowchart syntax – great for documenting processes, algorithms and decision logic.
Diagram code
Preview
Theme
Default
Try an example
How to make a flowchart online
- Start your code with graph TD (top-down) or graph LR (left-right) to set the flow direction.
- Define nodes with a label, e.g. A[Start], and connect them with arrows, e.g. A --> B.
- Add decision branches using curly braces and labelled arrows, e.g. B{Yes or No?} -->|Yes| C.
- Export the finished flowchart as SVG or PNG.
Flowchart FAQ
- How do I make a flowchart online for free?
- Type your steps using the Mermaid flowchart syntax (e.g. graph TD followed by nodes connected with arrows like A --> B) and the diagram updates instantly in the preview panel. When you're done, download it as SVG or PNG.
- What do TD and LR mean in a flowchart?
- They set the direction of the flowchart: TD (top-down) draws the chart vertically, while LR (left-right) draws it horizontally.
- Can I add decision boxes (yes/no branches)?
- Yes. Use curly braces for a decision node, e.g. B{Is it working?}, then label each outgoing arrow, e.g. B -->|Yes| C and B -->|No| D.