Build technical architectures and business processes. Drag shapes from the palette, connect them, and download a .flow.json file you can re-upload later to pick up exactly where you left off.
Runs in your browser
Drawing engine: Fabric.js (MIT). PDF export by jsPDF (MIT). · Open-source acknowledgements
Pick a starter. This replaces the current chart.
Copy to clipboard renders the chart with a transparent background — paste straight into PowerPoint, Google Slides, Word, or Figma.
PNG and SVG render the chart at its native size. PDF uses a single page sized to the chart.
To re-edit later, use Save (top-left toolbar) — it produces a .flow.json file that round-trips perfectly.
| Ctrl+S | Save chart as .flow.json |
| Ctrl+O | Open a saved .flow.json |
| Ctrl+N | New chart |
| Ctrl+Z / Ctrl+Y | Undo / redo |
| Ctrl+D | Duplicate selection |
| Ctrl+C / Ctrl+V | Copy / paste |
| Ctrl+Shift+C | Copy chart as transparent PNG to clipboard (paste into PowerPoint, Slides, etc.) |
| Delete / Backspace | Delete selection |
| Ctrl+Wheel | Zoom in/out |
| Space+drag | Pan the canvas |
| Double-click a shape | Edit its label inline |
| Hover a shape | Reveals 4 connector anchors — drag to draw a connector |
| Drag a connector style from the palette | Drops a detached arrow onto the canvas — drop its endpoints on shapes to connect them |
| Select a shape | Drag the corner or side handles to resize — connected arrows reroute automatically |
| Click a connector | Edit arrowheads, line style, label, color in the right panel |
| Drag a connector endpoint into empty space | Detach the arrow — drag its body to move, or drop the endpoint on a shape to reconnect |