Flowchart Maker

Building a diagram

1. Add shapes. Each shape maps to a standard flowchart symbol; a rounded terminator for start and end points, a rectangle for a process step, a diamond for a decision, and a parallelogram for input or output.
2. Position nodes. Drag any node to reposition it; the diagram scales responsively to your screen.
3. Rename. Double-click a node, or select it and type in the label box, to change its text. Long labels wrap automatically.
4. Connect. Click Connect, then click a source node followed by a target node; an arrow is drawn between them.
5. Export. Save the finished diagram as a crisp vector SVG or a high-resolution PNG.

Auto-routing arrows

Arrows attach to the nearest edges of the two nodes they connect and bend orthogonally, so the path stays tidy as you move nodes around. The dominant direction between two node centers decides whether an arrow leaves from a horizontal side (left/right) or a vertical side (top/bottom), and a single elbow keeps the connector clean.

Private by design

All rendering, layout, and exporting happen locally with SVG and the HTML canvas API. No diagram data ever leaves your device, so it is safe for confidential process maps and internal workflows.

Standard flowchart symbols

• Terminator (rounded). Marks where a process starts or ends.
• Process (rectangle). A single action or operation.
• Decision (diamond). A branch point with yes/no or true/false outcomes.
• Input / Output (parallelogram). Data entering or leaving the process.

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.