Flow Forge

Describe the system — a laid-out, editable .drawio diagram out.

Back to SkillSafe
Or pick a file: read locally, nothing uploads until you run. A .docx or .pdf cannot be read in a browser — copy the text out instead.

Every type is drawn with one geometry: labelled boxes on tiers, joined by orthogonal connectors, with groups as dashed boundaries. The type changes what the diagram contains — which shape kinds are used, how it is layered and grouped, what each connector means, and which gaps the free scan raises. It does not switch to notation-specific geometry: a sequence gets no lifelines or activation bars, an ER diagram carries its cardinality as connector labels rather than crow’s feet, and a UML class is a named box without an attribute or method compartment.

How it works

Nothing to hand? Load the — an order-fulfilment flow with two failure exits — the , a checkout stack written as arrow lines, or the , which is deliberately too vague to diagram honestly and comes back saying so.

1

Paste the description — the scan is free

The browser scores your text against the six diagram types using weighted lexicons and reports the margin between the top two, because a description that reads equally as an architecture and as a sequence has not decided what it is asking for. It numbers every entity it can find — bullet items, quoted and back-ticked names, capitalised phrases, arrow expressions — and parses arrow syntax into a real graph. Then it raises a numbered gap for each thing a diagram of this type needs and your text never said: no cardinality in an ER description, no failure branch in a process, no trust boundary in an architecture. Nothing uploads and nothing is charged.

2

Draw it free, or let the AI decide what it contains

If your description already states its arrows, press Draw the skeleton now and the browser builds the whole diagram itself — laid out, validated, downloadable as .drawio — with no model and no cost. The metered run is for the judgement the browser cannot make: which kind of diagram this should be, what kind of shape each part is, which layer it belongs on, which parts share a boundary, which connections the text implies but never states, and what each connection means. The model returns the graph only; layout, mxGraph XML, SVG and Mermaid all happen here. Pricing is honest: a worst-case amount is reserved before the run and only what the run uses is charged.

3

Open it, edit it, re-run it

The structural check runs in your browser on whatever came back: duplicate ids, edges pointing at shapes that do not exist, shapes connected to nothing, cycles. Every entity the scan numbered is reconciled against the diagram, so “you named nine things, the diagram draws seven” is on the page rather than something you have to spot. Exports are the real artifacts, and they go where the diagram is actually going: the .drawio download opens in draw.io, the desktop app and the VS Code extension, SVG drops into a document or a deck, Mermaid for a README, and node and edge CSVs for a spreadsheet. Past diagrams are saved to your account, not just this browser, each showing its size against the run before — so when you add the retry path and re-run, the list tells you exactly what the diagram gained.

The shape vocabulary

A derived work of @github/draw-io-diagram-generator, the draw.io diagram skill from GitHub's awesome-copilot collection (MIT). draw.io is a trademark of its owners; this app is not affiliated with it.