Graph Editor

Every chapter of your work has a flow graph: the panels are the stations of your story, and edges are the arrows that tell the reader (and the player) which panel comes next. A chapter with one straight line of edges reads like a classic comic. As soon as a panel has two or more outgoing edges, your story branches.

The Graph Editor is where you see and shape that flow visually — as a map of connected nodes on a zoomable canvas.

Opening the Graph Editor

Reading the map

Each node on the canvas is one panel of the chapter, labeled with the panel's title — wrapped onto up to three lines, with … only when it is longer than that. Every panel of the chapter is shown — including brand-new panels that have no connections yet — so you can draw the first edge of a fresh chapter right away. From 80% zoom on, each node also shows its panel's picture (the background image's thumbnail) above a two-line title, so you can find a scene at a glance. The Legend (top right) explains the color coding:

A panel of another chapter that an edge leads to — a chapter transition, a jump into an endings chapter — is shown as its own node, titled ↗ Title (Chapter).

The entry panel is additionally marked with a star and an orange border. It is determined by the chapter itself (the panel where the chapter starts — normally the first panel in reading order); the Graph Editor displays it but you do not pick it here.

Two more helpers live on the canvas:

• Minimap (bottom right) — a bird's-eye view of the whole graph with your current viewport marked.
• Footer — a live count of nodes and edges, plus Fit to View and Close buttons.

Moving around

Auto-Layout arranges the graph left-to-right by story depth, minimizing crossing lines — ideal after a chapter has grown messy. Node positions (both auto-laid-out and hand-dragged) are remembered per chapter in your browser, so the map looks the same the next time you open it.

Selecting and arranging

• Click a node to select it. Ctrl+Click adds or removes nodes from a multi-selection; Ctrl+A selects all.
• Drag a node to reposition it (layout only — this never changes the story).
• Click an edge to select it; the Edge panel appears (see below). Node and edge selection are mutually exclusive.
• Esc clears the selection; Delete / Backspace removes what is selected.

When nodes are selected, an info panel (bottom left) lists them and reminds you of the keyboard commands.

Creating branches (connecting panels)

The quickest way is the selected panel's Outgoing list:

Each outgoing edge in the list shows its target, a condition field (empty means always; see Edge conditions) and a delete button — so you can edit and remove edges without hitting a thin line on the canvas. An edge into another chapter is stored with this chapter, like any other.

With the mouse, hold Shift and drag from a node onto the target node.

With the keyboard, use connect mode:

New edges start out unconditional (solid green). Give a panel a second outgoing edge and you have a branch — then use conditions to decide which path each reader takes.

Connections are persisted as you make them; the Save button in the toolbar re-saves any connection that could not be stored right away (you'll see Saving… and then "Graph saved successfully").

Edge conditions

Select a single edge and the Edge panel opens (bottom left) — or edit the condition right in the source panel's Outgoing list. The panel shows the route (source → target) and one field:

Condition (JSON Logic; empty = always follow)

Leave it empty for an unconditional edge — clearing the field removes an existing condition. Type a condition to make the edge conditional (it turns dashed orange). The condition is saved with the edge and shows up again the next time you open the graph; if the text isn't valid JSON, nothing is saved and the editor says "Edge condition must be valid JSON Logic" with an example. Conditions are written in JSON Logic — a small, safe rule format that reads almost like a sentence once you know the pattern. A rule always asks a question about your story variables:

{"==": [{"var": "choice"}, "A"]}

"Is the variable choice equal to "A"?" — if yes, the reader follows this edge.

More examples you can adapt:

{">": [{"var": "trustLevel"}, 50]}

Follow this edge when trustLevel is greater than 50.

{"and": [
  {"==": [{"var": "hasKey"}, true]},
  {">=": [{"var": "score"}, 100]}
]}

Follow this edge when hasKey is true and score is at least 100.

Transitions and edge effects

The PanelWave format also lets an edge carry a transition (how the switch to the next panel is animated) and variable mutations. In the CMS you configure panel-to-panel transitions on the Navigate (Go To Panel/Page) action of a hotspot — with a Transition Effect of None, Fade, Slide, Zoom, or Crossfade — rather than in the Graph Editor. See Hotspots.

Variable changes stored on an edge — for example on choices created through the MCP server or imported from a manifest — are exported as the edge's action, so the reader applies them when it follows that path. Before, they were kept only as editor data and never changed a variable in the reader.

Simulating the flow

Press the Simulate button in the toolbar to walk through your story the way a reader would:

• The simulation starts at the entry panel and shows your path so far as a breadcrumb.
• Under "Where to next?" every outgoing edge of the current panel is listed as a button — conditional edges show their condition inline (if …).
• Click an option to follow it (the canvas selects that node), use Step back to retrace, and press Esc or the close button to stop.
• When you reach a panel with no outgoing edges, the panel reports "End of flow — no outgoing edges."

The view follows the simulation: when the current panel is off screen (or under the simulation panel), the canvas pans to it, keeping your zoom. A long path scrolls inside the simulation panel — the newest step stays in view — while Where to next? and Step back always stay visible.

Prefer a text view? The List toggle renders the whole graph as a nested list in reading order (with entry and end badges) — every entry is clickable and it is fully screen-reader friendly.

Validation

The Graph Editor checks your flow continuously and shows a Validation panel (press V to re-run it, including deeper server-side checks). Issues come in three levels:

Findings from the local check and the deeper server-side check are shown together, with panel titles in place of internal ids. Each issue is a button — click it (or focus it and press Enter) to highlight the affected nodes on the canvas. Some issues offer one-click quick fixes: Auto-layout graph (for unreachable nodes, so you can see them) and Connect to entry node (creates an edge from the entry to an orphaned panel).

When everything is clean you'll see: "No issues found - graph is valid!"

An edge into another chapter of the work is valid, and a panel that is entered from another chapter (the endings of a story reached from its last chapter, say) counts as reachable. An edge whose target is no panel of the work at all is an error.

Work-wide checks (including unreachable flow nodes across the whole work) also run in Validation / Preflight before publishing.

The whole work

Choose Whole work (all chapters) in the Chapter: dropdown to see the entire story in one graph — every chapter's panels and edges, the links between chapters included:

• One labelled row per chapter, top to bottom in reading order; within a row the chapter is laid out left to right like a single chapter. Auto-Layout restores that arrangement.
• Chapter ends that continue. A panel without an outgoing edge ends its chapter, and the reader goes on with the next chapter's entry panel. Such a step is drawn as a dashed grey link. It is not an edge of your graph: it can't be selected, edited or deleted, and it disappears as soon as you give that panel a real edge.
• Editing works as in a chapter. New edges — from the Outgoing list, by Shift+drag or in connect mode — are stored in the chapter of their source panel. Nodes show their chapter's name in place of the panel id.
• Validation checks every chapter and lists the findings together; chapter ends that continue are not reported as dead ends.
• Simulate walks across chapter boundaries.

A story of a few hundred panels gets a wide graph: use Fit to View, the minimap and the wheel zoom toward the pointer to move around.

Keyboard shortcuts

The full editor-wide reference lives on the Keyboard Shortcuts page.

Related pages