Skip to main content

Flowchart

Control and process logic, drawn from text.

Flowchart

What it's for​

An interactive React-Flow canvas with seven node types — Start/End terminals, Process, Decision, SubRoutine, Data I/O and Connector. Every node has North/South/East/West anchors for clean edges, and decision branches carry outcome labels (Yes/No).

When to use it​

Control logic, decision trees, and manufacturing or test workflows.

How it works​

  1. Generate Flowchart from a prompt (or start blank). → A React-Flow canvas renders with a minimap and zoom controls; nodes are typed and colour-coded.
  2. Add nodes from the in-canvas toolbar and wire them. → The “Add:” toolbar has a button per node type; drag anchor→anchor to connect (arrows auto-added); decision branches take Yes/No labels. Editing needs Follow-on mode on a generated doc.
  3. Double-click a label to rename; drag to reposition; hover to delete. → Inline text edit commits on Enter/blur, and the layout is yours to fine-tune.
  4. Open “View JSON” to edit the graph directly, then Export. → The JSON editor round-trips elements + connections; export to PDF, stamped PDF, PNG, JPEG, SVG or JSON (vector-rebuilt so it stays crisp at any zoom).

Mechanics​

  • React-Flow canvas · minimap · 7 node types · N/S/E/W anchors
  • Decision-branch edge labels · in-canvas Add-node toolbar
  • Inline label edit · drag layout · JSON round-trip editor
  • Follow-on-gated editing · revisions · review
  • Export: PDF · stamped PDF · PNG · JPEG · SVG · JSON (vector-rebuilt)

Open Flowchart in the app