isketch Home Open the editor

The .flow format

Every isketch diagram can be written as plain text that reads well, diffs cleanly, and that a coding agent reads exactly — and can edit back.

Every rule

• id = shape "Name" -- description declares a node. The name and description are optional. Shapes: process, terminal, decision, data, database, document, note, table, text; for wireframes screen, button, input, card, list, image.
• note: ... under the title is a note for the whole diagram, and id note: ... a note for one shape, one line each: instructions for whoever builds from it, person or agent.
• a -> b : label connects two nodes. The label is optional, and a line may refer to a node defined further down. a --> b is dashed, a <-> b has an arrow at each end, and a <--> b is both.
• lines: curved or lines: straight under the title changes how every connection runs; the default is steps.
• @layout starts the positions, one id x,y per line, with  WxH after it for a resized shape. A node with no position is laid out automatically, so a hand-written diagram needs no layout block at all.
• Pen strokes are id = ink shapes, with their points in an @ink block after the layout, so they never clutter the lines that say what the system is.
• style: sketch under the title draws the diagram by hand. Leave it out for clean lines.
• # starts a comment. A newline inside a description or label is written \n.

A wireframe, sketched

Try it

Open the example in the editor, edit the text, and watch the drawing follow: Open this diagram