Make the next step visible.

Start with the right example

Flowchart, swimlane and decision-map modes use one shared node-and-connector model. Changing mode immediately loads its example. Undo restores your previous map. Reset example reloads the current mode. New blank map clears the diagram and can also be undone.

Decision-map mode is a useful starting arrangement, not an enforced tree format. The example has no rework loop; the flowchart example includes a Resubmit loop. You can create cycles in any mode.

Add and edit steps

Add Start, Task, Decision or End nodes. Select a node on the canvas or in the step list, then edit its label, type, owner, lane, coordinates and notes. Apply step changes commits those fields. Keep labels short; use notes for longer explanations. Coordinates are model units, not physical measurements. The project supports 150 nodes and 300 connectors.

Drag nodes to reposition them with 10-unit snapping. Fit resets the view; zoom centres the canvas rather than following a pointer. Numeric coordinates provide an alternative to dragging. The editor has no automatic layout, multi-selection, BPMN model or diagram import from other applications.

Connect decisions and handoffs

Choose Connect two nodes, click the source, then click the destination. Self-connectors and repeated source/destination pairs are rejected. Combine labels when branches share the same destination. Select a connector to label it or remove it. For a decision, label the alternatives clearly. Connectors are straight lines, so arrange nodes to reduce crossings. Long connector labels are abbreviated in the image but remain editable in the details panel and available in hover titles.

Delete/Backspace removes the selected item when you are not typing in a field. Removing a node also removes its connectors. Escape cancels connection mode. Undo/redo restores diagram actions, including removed nodes and connectors.

Swimlanes

Up to eight horizontal lanes are supported. Rename them in the sidebar. Assigning a different lane moves a node into that lane. Dragging in swimlane mode updates its lane from the final position. Owner is a separate text field; a lane name does not automatically set the owner or imply an access permission.

Map checks

The checker flags a missing start or end, unconnected nodes, non-end dead ends, decisions with fewer than two outgoing branches, unlabelled branches and cycles. A cycle may be a legitimate rework loop. The checker does not prove completeness, validate routing conditions, assess business controls, calculate cycle time or certify compliance.

Save and share

Save here explicitly keeps one project in browser storage. Download Project makes the editable JSON backup; Open restores it, up to 2 MB. SVG and PNG preserve the visible layout, with no selection outline. Mermaid preserves nodes, edges and labels, not coordinates, owner notes or swimlane layout. Step-register CSV includes owners, lane names and notes.

Print / PDF includes a diagram and step notes through your browser’s print dialog. Native SVG is a better choice for large maps. Browser storage can be cleared; keep downloaded backups. There are no accounts, uploads, analytics, external fonts or remote dependencies.

Structural tests, editing-event checks and exported SVG examples passed. Live pointer dragging, full browser rendering, PNG downloads and actual printing remain unverified.