📊
Flowchart Designer
Browser-based flowchart and diagram editor with 10 node types, orthogonal connection routing, snap-to-grid, and PNG/SVG/JSON export.
Design
v1.0.0
27 uses
100%
Nodes
Shortcuts
V Select mode · C Connect mode
Del Delete selected
Ctrl+Z Undo · Ctrl+Y Redo
Ctrl+A Select all
Ctrl+S Save project
Arrows Nudge selected
Esc Deselect all
Space+Drag Pan canvas
Scroll Zoom in/out
Del Delete selected
Ctrl+Z Undo · Ctrl+Y Redo
Ctrl+A Select all
Ctrl+S Save project
Arrows Nudge selected
Esc Deselect all
Space+Drag Pan canvas
Scroll Zoom in/out
Click palette to add node · Drag to move · Hover for ports · Drag port-to-port to connect
Double-click text to edit inline
Double-click text to edit inline
Click a node or edge to edit its properties.
Node Properties
14
100%
Edge Properties
2
About This App
A professional, browser-based flowchart and diagram editor built entirely with SVG. Create polished flowcharts using 10 standard node types — Process, Decision, Terminal, Data, Document, Database, Predefined Process, Manual Input, Connector, and Comment. Connect nodes with orthogonal (right-angle) edges featuring filled, open, or hidden arrow heads and solid, dashed, or dotted line styles. Customize every element with fonts from 15 Google Fonts families, fill and border colors, opacity, and sizing. Drag nodes to reposition, resize with handles, and double-click to edit text inline. Multi-select with Shift+click or rubber-band selection. Navigate large diagrams with pan and zoom. Toggle snap-to-grid for precise alignment. Full undo/redo history, keyboard shortcuts, and auto-save to browser storage. Save your work as a project file to continue later. Export finished diagrams as PNG, SVG, or JSON. Runs entirely in your browser — your diagrams never leave your device.
How to Use
- 1 Click a node type in the left palette to add it to the canvas
- 2 Drag nodes to reposition them — they snap to the grid automatically
- 3 Double-click a node to edit its text inline
- 4 Hover a node to reveal connection ports (blue dots on each side)
- 5 Drag from one port to another to create a connection with orthogonal routing
- 6 Click a node or edge to select it and edit properties in the right panel
- 7 Shift+click or drag a selection box to select multiple nodes at once
- 8 Use the toolbar to toggle grid, snap, zoom in/out, and switch between Select and Connect modes
- 9 Use Ctrl+Z / Ctrl+Y to undo and redo changes
- 10 Save your flowchart as a project file (.json) to continue editing later
- 11 Export your finished diagram as PNG, SVG, or JSON