Flowchart Canvas
The flowchart canvas is the React Flow-based editor where you build, drag, style, and connect nodes — with auto-layout, themes, history, comments, and live multiplayer.
In depth
The canvas supports four core node types out of the box (terminal, process, decision, data) plus extended families (BPMN, swimlane, ERD, sequence) and stickers from Giphy. Drag and drop from the palette, double-click to edit labels, hold a connection point and drag to wire nodes.
Auto-layout (top-to-bottom, left-to-right, radial, force-directed) is one click. Multi-select, copy/paste, snap-to-grid, alignment, undo/redo, and keyboard navigation are all standard.
Examples
- Drag a process box, label it, connect it
Also known as
Want to put this concept to work in OpenCharts?
Build a flowchartRelated terms
Node Palette
The node palette is the side panel of available shapes you drag onto the canvas — terminals, processes, decisions, data, swimlanes, BPMN gateways, ERD entities, stickers, and more.
Auto Layout
Auto layout is the one-click cleanup that arranges your flowchart nodes — pick top-to-bottom, left-to-right, radial, or force-directed, and edges re-route automatically.
Data Table
A data table is a spreadsheet-like grid attached to a flowchart node — with formulas (SUM, AVG, IF, VLOOKUP), conditional formatting, number formats, and CSV import.
Share Link
A share link is a public URL that gives anyone with the link viewer, commenter, or editor access to a project — with optional expiration and password.
Version History
Version history records every change to a project with the user, color, timestamp, and a human-readable summary — so you can see who did what and roll back any time.