Loading the diagram editor…

🧭 Online Diagram Maker

Describe a process or a system and get a cleanly laid-out flowchart or architecture diagram — rounded orthogonal connectors, no overlaps, ready to keep editing in draw.io.

What it does

Describe it, don't drag it

Type the nodes and connections; a deterministic layout engine assigns positions, spacing and connector routing — no hand-placing boxes.

Two recipes to start

Flowcharts get layered DAG layout with return edges routed around the perimeter; architecture diagrams get zone columns for trust boundaries.

Editorial visual rules

One or two accent focal nodes, dashed lines for async paths, labelled connectors with clean masks — the rules are checked by code, not by eye.

Export where you work

Download .drawio to keep editing in draw.io, or SVG / PNG sized for docs and slides. Everything renders in your browser.

How to use it

Pick a recipe
Flowchart for decisions and steps, architecture for systems grouped into zones.
List nodes and edges
One node per line: id, label, and an optional role like store, external or security.
Connect them
Reference node ids to draw arrows; mark edges async or return, and label the important ones.
Export
Grab the .drawio file for draw.io, or SVG / PNG right from the preview.

Frequently asked questions

Is my data uploaded anywhere?

No. Parsing, layout and rendering all happen in your browser; nothing leaves the page.

Can I keep editing the result?

Yes. The .drawio export opens in draw.io / diagrams.net with every node and connector editable and properly grouped.

What diagram types are supported?

Flowcharts and architecture diagrams at launch, with more layouts (sequence, swimlane) planned. For data charts like bar or line, use the Chart Maker instead.

Why does the layout look tidy by default?

Layout is computed by a deterministic engine: 4px grid, layered flow, fan-out attach points and label-avoidance masks — the same rules a designer would apply, applied by code.

Can I control where nodes go?

You describe order and grouping; the engine decides exact coordinates so edges stay orthogonal and nothing overlaps. Edit the exported file in draw.io for pixel-level control.