Canvas basics

The Flow chart view is YarnDraft’s central editor. Here you place cards, connect them with edges, and navigate nested charts.

Two-row header

1. Top row — breadcrumb: Where you are in the tree (e.g. Main › Research lab). Click to jump; double-click to rename.
2. Bottom row — toolbar: Simulated player, Export/Import dialogue, AI build, grouping, new card buttons.

Canvas controls

Action	How
Pan	Middle mouse button, or modifier + drag (see Settings)
Zoom	Scroll wheel, or bottom-left controls
Select	Left-click a card; drag to select multiple
Delete	Selection + Delete / Backspace
Edge label	Double-click an edge — choice text, notes

Connecting cards

• Drag a handle from a card edge to another card.
• Drop on empty canvas: Create connected card menu — pick the new card type.
• Drag a card onto an edge to insert it into the chain (between two cards).

Context menu

Right-click on the canvas or a card:

• Group / ungroup
• AI branch (between two selected cards)
• Copy, cut, paste (Ctrl+C/X/V)
• Delete

Nested charts

These card types open an inner canvas (breadcrumb goes deeper):

• Flow — child flow
• Dialogue — scene lines and branches
• Task — task steps

The inner canvas uses an Output pin card to signal back to the parent chart.

Best practice: keep Main clean

Use the Main canvas as a readable story map, not as the place for every detail. Put broad beats on Main as enterable Flow, Dialogue, or Task cards, then build the real scene logic inside their nested canvases.

Good Main canvas cards are things like chapters, locations, scenes, objectives, or major state changes. Detailed dialogue lines, conditions, puzzle branches, inventory effects, timers, triggers, and audio cues usually belong inside the nested canvas for that beat.

For dialogue, prefer a single Dialogue scene card on Main with the cast assigned, then open it and place one line per card inside the scene. Use Output pin cards inside the scene when it needs named exits back to the parent flow.

Controls (bottom left)

• Minimap
• Zoom in / out / fit
• Layout — automatic arrangement
• Edges: straight vs. curved; direction animation (in Settings)

Card toolbar

On a selected card (single card, no open panel):

• Edit label, color, image
• Type-specific fields (e.g. speaker, audio)
• AI (for dialogue)
• Change type, delete

Left-click drag

Settings → Flow editor → Cards draggable with left click. Click = select; hold and drag = move.