Corkboard
The Corkboard is a spatial knowledge graph built on React Flow. Scenes, characters, settings, and worldbuilding entries appear as draggable cards arranged in columns, connected by color-coded edges that show which entities belong to which scenes.
Layout
Nodes are arranged in four columns from left to right:
| Column | Entity type | Node color |
|---|---|---|
| Left | Characters | Violet |
| Center | Scenes | Indigo |
| Right | Settings | Emerald |
| Far right | Worldbuilding | Amber |
Drag any node to rearrange — positions snap to a 20 px grid and auto-save per project. When you reopen the Corkboard, every node returns to where you left it.
Nodes
Scene cards
Scene cards (280 px wide) show:
- Thumbnail image (if set) at the top
- Title and status badge (top right)
- Beat text (3-line preview)
- Entity pills — up to 3 characters, 2 settings, and 2 worldbuilding entries (with "+N" overflow)
- Word count at the bottom
- A 4 px left border colored by status
Hover to reveal the brain icon (brainstorm) and camera icon (add/change image) in the header.
Entity cards
Character, Setting, and Worldbuilding cards are smaller (180–220 px wide) and show:
- Thumbnail image (if set)
- Name
- Role or category badge
- Short description (2-line preview)
Edges
Edges connect scenes to the characters, settings, and worldbuilding entries that appear in them. Each edge type has a distinct color and is animated by default:
| Edge type | Color | Hex |
|---|---|---|
| Character | Violet | #a78bfa |
| Setting | Emerald | #34d399 |
| Worldbuilding | Amber | #fbbf24 |
Edges automatically route to the closest side of each node (top, right, bottom, or left) to minimize crossings.
Selection & Dimming
Click a node to select it. All unconnected nodes and edges dim to 20% opacity so the selected entity's connections stand out. Click the canvas background to deselect.
Quick Create
Double-click any blank area on the canvas to open a radial type picker at your cursor:
- Pick a type — Scene, Character, Setting, or Worldbuilding
- Fill in the form — an inline creation form appears at the same position
- Create — the new entity appears as a node where you clicked
For characters, settings, and worldbuilding entries, click AI fill to generate details from just a name.
Press Escape to dismiss the picker at any step. Press Cmd+Enter (Ctrl+Enter on Windows) to submit the form.
Entity Images
Add visual reference images to any card to turn the Corkboard into a mood board.
- Hover over a card to reveal the camera icon
- Click to open the image dialog
- Choose Upload (from your computer) or Generate (AI-powered)
AI-generated images use the Claude + DALL-E pipeline with five art styles:
| Style | Description |
|---|---|
| Concept Art | Polished digital painting with strong silhouettes |
| Painterly | Classical oil-painting quality with visible brushstrokes |
| Photorealistic | Cinematic photograph with dramatic lighting |
| Sketch | Pencil/charcoal with expressive linework |
| Watercolor | Soft washes with dreamy, atmospheric quality |
Add an optional refinement prompt to guide the generation (e.g., "Show them in moonlight, looking determined").
Click any thumbnail to open the full-size image in a lightbox. To remove an image, open the image dialog and hover over the preview — a red trash button appears.
AI image generation costs 19 credits — the same as cover generation.
Zoom & Navigation
- Zoom controls in the toolbar adjust zoom from 50% to 150% (persisted per session)
- Scroll to pan around the canvas
- A MiniMap in the corner shows an overview of the full graph with color-coded node indicators
Brainstorm
Click the brain icon on any node to trigger a Visual Brainstorm. AI suggestion cards appear in a circular layout around the target node, connected by dashed edges. See Brainstorm — Visual Brainstorm for details.