Roadmap & Knowledge Graph Builder

A general-purpose planning and knowledge-graph tool. Click a node, zone or relationship to edit it; add your own nodes, zones and links directly in the browser. Use it for research, projects, business plans, story and screenplay structure, or any work that benefits from grouped, connected ideas. All graph data is exposed as window.GRAPH_DATA, autosaved locally, and exportable as JSON or a standalone HTML file.

Editor guide

Node
Click any bubble, then edit its name, title, note, category, colour, size, zone, lock and position.

Zone
Click a zone boundary or open the Zones tab to rename it, recolour it, move it or delete it. A zone groups the nodes that sit inside it.

Relationship
Click a line or open the Relationships tab. Link any node to any other — including nodes in different zones.

Add
Use the toolbar to add nodes, zones and relationships. New nodes drop into the active zone; change a node's zone any time in its editor.

Save
Changes autosave in this browser. Export JSON or a standalone HTML file to share your board.

Category colours

Add nodes to see categories here.

Public data variable

Open Developer Tools and type:

window.GRAPH_DATA

Local autosave

Ready.

Created by Cathy Choi

Scroll: zoom · drag background: pan · drag node: reposition · drag zone hub or zone boundary: move whole group · click line: edit relationship · Delete key: remove selected

Node editor

Select a node

Click a graph bubble to edit it.

🐱 A note to Cathy