Wireflows

Building a flow

Press W and click — the stamp drops a starter card. Then:

• Enter (with a free card selected) adds another free card beside it and drops you into naming; ⇧Enter adds to the left. Copy/duplicate a card and the copy joins as another free card.
• Drag any free card exactly where you want it. The map's container hugs along; nothing else ever moves. If the card has a tree under it, the whole tree rides with it.
• Drag across the map's empty space to rubber-band cards into a multi-selection — the map stands still. Moving the map wants it selected first: click the margin, then drag.
• Dragging a tree card away from the other cards detaches it — it becomes a free card right where you dropped it.
• Cards share the wiremap anatomy: titles, labeled colorable section bricks, wireframe styles, and the map's form factor (desktop / tablet / mobile).
• Tidy (in the inspector) re-lays each tree under its root and hugs the container — it never repositions a card you placed.

Drawing the transitions

Arm the interaction tool (C) and drag from a screen — or from a specific section of a screen — to another card. Element-level arrows are first-class: an arrow from the "CTA" section to the Home card reads exactly like the diagrams it replaces. (Arrows anchor to sections and cards, deliberately never to the shapes inside a wireframe drawing — those regenerate when you restyle, and your arrows survive.)

Between cards of the same map, arrows route with care: orthogonal elbows through the gutters between cards, never across one, arrowheads flush on the edge they enter, and arrows sharing a corridor space themselves apart. Prefer a curve? Switch any arrow to Curved in its inspector.

The full vocabulary applies: trigger gestures on the arrow's face, dashed Dotted styling for return paths, YES/NO/IF/OR chips, success/failure marks, text labels, and the IX annotation card.

Decisions and branches

Place a Decision on any arrow (Marks → Logic) and it becomes a real junction, wearing the arrow's own ink. A decision is binary — one question, two ways out — and the geometry says so:

• On a dead-straight arrow, the arrow itself pivots at the diamond — in one vertex, out the top — a fork, not a bead on a line.
• Hover or select it and small handles appear on its free vertical corners. Drag one and a branch pulls out of the diamond, leaving through exactly the corner you grabbed — down for a "No" path, up for an alternate route. Branches always leave vertically (top or bottom); the side vertices belong to the arrow's own travel. (With the interaction tool armed, the whole diamond glows as a port too.)
• The moment a branch rides it, the diamond moves to the joint — the elbow corner its paths split from — so the arrow enters one vertex, continues out another, and the branch drops from a third: three arrows, the classic flowchart junction, never a fourth. A taken diamond grows no more handles; fork wider by marking a decision on the branch and branching again.
• Label each exit with a YES/NO chip — chips placed on a decision's arrow seat themselves just past the diamond, a text label placed at the diamond tucks neatly beneath it ("first launch?"), and every label wears a plate of the canvas ground so lines break under words instead of striking through them.
• Branches belong to their diamond: move a card and the diamond re-projects along its arrow, towing every branch. Remove the diamond — or its arrow, or the element the arrow starts from — and the branches go with it, one undo step. Branches can carry their own decisions and fan out further; loops back into themselves are refused.

Export

Export HTML ships the arrows: every interaction whose two ends live in the exported map is drawn into the file as real inline SVG — same routes, same colors, same labels — so the flow survives leaving the app.

For agents

One MCP surface serves both grips. Create the whole flow in one call — top-level cards take x/y to place each screen by hand (omit them to pack in a row) — then wire the transitions with add_connectors (sections and cards both anchor; decision diamonds and branches come from the connector marks), and reposition cards with the generic move verb. See the MCP guide.