- Topical Drift

0 Nodes 0 Edges 0 Topics 0 Subtopics 0 FAQs 0 Hubs 0 Pages 0 Sections 0 Comparisons Depth 0 Confidence 0.00

Macro

Seed

Topic (Page)

Topic (Section)

Subtopic (Page)

Subtopic (Section)

FAQ

Comparison

Hub

Node Properties

Label

Slug

Parent Node Changing parent updates the hierarchy and redraws edges.

Confidence

Entities (pipe-separated)

Aliases (pipe-separated)

Topical Map Fields

Node Type

URL Role

Hub Role

Tier

Canonical URL

Concept Type

Description

Group

What is the Topical Map Editor?

The Topical Map Editor is a visual tool for building, editing, and exporting structured content plans. It operates in two modes: Topical mode represents your site architecture as a graph of nodes (pages, sections, FAQs) connected by edges (links). Concept mode represents your subject domain as an entity relationship graph with labelled semantic connections. You can load a generated map, edit it interactively, visualize it in four layouts, and export it as CSV, JSON, PNG, or SVG.

Core Concepts

Map Modes — Topical vs Concept

The editor operates in two modes. The mode is detected automatically when you load a JSON file and can be switched at any time using the Mode dropdown in the toolbar.

Topical Mode

Nodes = pages, sections, FAQs
Edges = internal links with anchor text
Answers: what pages do I build?
Drives URL architecture and content plan
Node colors by type (Macro, Seed, Topic…)
Hub nodes shown with gold ring
Section-only nodes shown with dashed border

Concept Mode

Nodes = entities, concepts, conditions
Edges = semantic relationships with labels
Answers: what does Google need to understand?
Drives semantic depth and entity coverage
Node colors by concept type (Core, Entity…)
Node size scales to fit label inside the circle
Edge labels rendered on every connecting line

Switching modes does not clear the graph. It changes how nodes and edges are rendered and which fields appear in the Properties panel. Topical fields are hidden in concept mode and concept fields are hidden in topical mode.

The Topical Hierarchy

Every topical map has a hierarchy of node types. Each level has a fixed position, color, and default URL role.

Node Type	Tier	Color	Purpose	Example
Macro	0	Rose-red	The broadest category the seed belongs to	Dog Breeds
Seed	1	Violet	The primary topic the map is built around	Golden Retriever
Topic	2	Cyan	Main pillar areas under the seed	Golden Retriever Health
Subtopic	3+	Emerald	Supporting pages under a topic	Hip Dysplasia
FAQ	2–4	Orange	Question-based section or page	Are Golden Retrievers Hypoallergenic?
Comparison	2–3	Fuchsia	Versus or comparison content	Golden Retriever vs Labrador

URL Role — Page vs Section

Every topical node is classified as either a Standalone page (has its own URL) or a Section (lives inside a parent page).

Standalone (urlRole = 1)

Has its own canonical URL
Appears in sitemaps
Shown in full color
Example: /golden-retriever/health/

Section Only (urlRole = 0)

No URL — lives inside a parent page
Shown in muted color with dashed border
Can be hidden via View → Hide Section-Only

Hub Role

A Hub page is a standalone page that also acts as a navigation centre for its child pages. Hub nodes are shown with a gold ring.

Characteristics of a Hub:

Has two or more child topic or subtopic pages
Contains a summary section for each child
Links out to all child pages
Has its own canonical URL

Example Hub Structure:

Golden Retriever Health (Hub)
├── Summary: Hip Dysplasia ──→ /health/hip-dysplasia/
├── Summary: Cancer       ──→ /health/cancer/
└── Summary: Lifespan     ──→ (section on hub page)

Topical Edge Types

Edge Type	Visual	Meaning
Parent → Child (1)	Grey	Hierarchy link — parent page to child page
FAQ Attachment (3)	Orange dashed	FAQ node attached to its parent page
Related (4)	Purple	Related topic link — optional, not required

Confidence Score

Each node has a confidence score (0–1) reflecting how strongly the AI pipeline believes this topic belongs in the map.

0.00–0.64

Low — review

0.65–0.74

Moderate

0.75–0.84

Good

0.85–1.00

High

Starter Maps

The editor includes two built-in starter maps that demonstrate all node types, edges, entities, aliases, and confidence scores.

🗺 Topical Starter Map

Golden Retriever topical map — all node types, hub pages, sections, FAQs, and a full edge set.

Load via File → 🗺 Import Starter Map

🧠 Concept Starter Map

Golden Retriever concept map — entity relationship graph with labelled edges, groups, and descriptions.

Load via File → 🧠 Import Concept Starter Map

Loading a starter map replaces the current graph — save your work first.

Concept Mode

What is concept mode? Concept mode renders the graph as an entity relationship map. Nodes represent real-world entities and concepts. Edges carry visible relationship labels. This answers "what does Google need to understand about this subject?" rather than "what pages do I build?"

Concept Node Types

Node size scales to fit the label inside the circle. Color identifies the concept type at a glance.

Type	Color	Role	Example
Core	Soft rose	Central subject — always the graph root	Golden Retriever
Entity	Cyan	Named real-world entity — org, person, standard	AKC, OFA
Condition	Red	Medical condition, risk, or problem	Hip Dysplasia
Process	Green	Activity, method, or behaviour	Positive Reinforcement
Attribute	Purple	Physical or behavioural characteristic	Double Coat
Category	Orange	Classification or group membership	Sporting Dog
External	Slate	External context — location, origin	Scotland

Macro and Seed nodes retain their topical colors (rose-red and violet) even in concept mode so they are immediately identifiable as structural anchors within the concept graph.

Concept Edge Relationship Types

Every edge in a concept map carries a visible label on the connecting line and a relationship type that determines its color.

Type	Meaning	Example
0 — Is A	Classification / taxonomy	is a type of Sporting Dog
1 — Has Part	Composition / anatomy	has Double Coat
2 — Causes	Causal relationship	causes Hip Dysplasia
3 — Affects	Impact / susceptibility	is prone to Cancer
4 — Requires	Dependency / need	requires Daily Exercise
5 — Diagnosed By	Screening / diagnosis	is screened by OFA
6 — Treated By	Treatment / remedy	is treated by Surgery
7 — Performed By	Agency / role	is registered by AKC
8 — Associated With	General association	originated in Scotland
9 — Opposite Of	Contrast / antonym	opposite of Aggressive
10 — Custom	User-defined	Any custom label

Concept Mode Visual Features

Inside-circle labels

In concept mode all node labels are rendered inside the circle. The circle radius scales automatically so the text always fits. Long labels wrap across multiple lines. Font size reduces slightly if needed to prevent overflow.

Edge label pills

Every concept edge with a relationship label shows a small pill at the midpoint of the connecting line. The pill rotates to follow the edge angle. Nodes are spaced apart so the full label is always readable. Pills use dark/light backgrounds that match the active theme.

Top-down force layout

In concept mode the Force layout pins the Seed node at the top centre and fans nodes outward by BFS depth. Each depth level occupies a horizontal band so the graph reads top-to-bottom like a hierarchy while still using physics for horizontal spread.

Connection highlight

Clicking a node highlights that node, all directly connected neighbours, and all connecting edges. All other elements dim. The viewport zooms to fit the selected neighbourhood. Closing the panel restores the previous zoom position.

Concept Node Properties

When a concept node is selected the Properties panel shows concept-specific fields instead of topical URL fields.

Field	Description
Concept Type	Core / Entity / Condition / Process / Attribute / Category / External
Description	One-sentence definition shown in the hover tooltip
Group	Category label for grouping related concepts (e.g. Health Conditions)
Label, Slug, Confidence, Entities, Aliases	Shared with topical mode — same fields, same behaviour

Macro and Seed nodes in concept mode show their topical fields (Node Type, URL Role, Tier, URL) rather than concept fields, since they are topical structural nodes not concept entities.

Concept Map JSON Structure

{
  "Metadata": {
    "Seed":    "Golden Retriever",
    "MapType": "concept"
  },
  "Nodes": [
    {
      "Id":          "concept-golden-retriever",
      "Label":       "Golden Retriever",
      "ConceptType": 0,
      "Description": "A large-sized retriever-gun dog bred in Scotland.",
      "Group":       "Core",
      "Confidence":  1.0,
      "Entities":    ["AKC", "UKC"],
      "Aliases":     ["golden", "goldie"]
    }
  ],
  "Edges": [
    {
      "Id":                "rel-gr-hip",
      "SourceId":          "concept-golden-retriever",
      "TargetId":          "concept-hip-dysplasia",
      "RelationshipLabel": "is prone to",
      "RelationshipType":  3,
      "Weight":            0.92
    }
  ]
}

Field	Values
`ConceptType`	0 Core · 1 Entity · 2 Condition · 3 Process · 4 Attribute · 5 Category · 6 External
`RelationshipType`	0 IsA · 1 HasPart · 2 Causes · 3 Affects · 4 Requires · 5 DiagnosedBy · 6 TreatedBy · 7 PerformedBy · 8 AssociatedWith · 9 OppositeOf · 10 Custom
`MapType`	"concept" — triggers concept mode on load

Layout Options

Switch between four layouts using the buttons in the toolbar. All four show the same data from a different perspective. Press F at any time to fit the full map in the viewport.

⬡ Force Graph

What It Shows:

A physics-based simulation. Nodes repel each other, edges pull connected nodes together. In concept mode the seed is pinned at the top and nodes fan downward by BFS depth. Nodes with labelled edges are spaced to keep relationship labels readable.

Best For:

Exploring overall structure and spotting clusters
Seeing concept relationships radiate from the Core node
Identifying hub nodes — they attract many edges
Finding disconnected nodes

Interaction:

Drag nodes freely — simulation restarts gently
Zoom with scroll wheel, pan by dragging background
Nodes settle after a few seconds — wait before fitting view

Concept mode tip: After switching to Force layout in concept mode, wait 1–2 seconds for the simulation to settle before pressing F to fit view.

⟶ Horizontal Tree

What It Shows:

Left-to-right hierarchy. The Macro or Seed node is on the left. Depth maps to horizontal position — Tier 1 leftmost, deeper tiers further right.

Best For:

Reviewing parent-child hierarchy
Auditing URL structure — depth = URL depth
Client presentations in org-chart style

Each column = one URL depth level. Press F after switching to centre the map.

⬇ Vertical Tree

What It Shows:

Top-to-bottom hierarchy. Root at top, siblings spread horizontally. Each tier row shows all nodes at that depth side by side.

Best For:

Classic org-chart style presentation
Wide maps with many siblings at the same tier
Reviewing how topic breadth expands at each level

vs Horizontal Tree:

	Horizontal	Vertical
Root	Left	Top
Tier axis	x = depth	y = depth
Spread	Vertical	Horizontal
Best for	URL depth audit	Wide maps, org-chart

Best for maps with 2–5 Topics and many Subtopics under each. Press F after switching.

◎ Radial Tree

What It Shows:

Concentric rings per tier. Seed at centre, Topics on the first ring, Subtopics on the second. Faint dashed guide circles with tier labels mark each level.

Best For:

Client presentations and full-map exports
Checking topical balance — are all areas equally developed?
The most visually distinctive export format

Switch to Radial Tree + Fit View before exporting PNG Full Map for the best presentation image.

📊 Layout Comparison

Feature	Force	Horizontal Tree	Vertical Tree	Radial Tree
Style	Physics simulation	Left-to-right	Top-to-bottom	Concentric rings
Tier visible?	Indirectly	Column position	Row position	Ring position
Concept mode?	✓ Best — top-down BFS	✓	✓	✓
Best for export?	Moderate	Good (URL depth)	Good (org-chart)	Best (presentations)
Edge labels?	✓ Fully visible	✓	✓	✓
Edge style	Straight lines	Horizontal bezier	Vertical bezier	Curved radial

Node Styles and Visual Encoding

Node Display Styles

Switch between Circular and Rectangular styles via View → Circular Nodes / Rectangular Nodes.

● Circular Nodes

Compact — works well for large maps
Topical mode: label to the right of circle
Concept mode: label inside circle, wraps to fit
Circle size scales by node type in topical mode
Circle size scales by label length in concept mode
Hub ring = gold circle outline
Section-only = dashed border, muted color

▭ Rectangular Nodes

Full label text — wraps automatically
Icon + divider + label inside each rect
Width auto-sizes to label length
Hub ring = gold dashed border
Section-only = dashed border, muted color

Color Encoding — Topical Mode

Standalone pages (full color):

Macro — Rose-red

Seed — Violet

Topic — Cyan

Subtopic — Emerald

FAQ — Orange

Comparison — Fuchsia

Section-only (muted + dashed border):

Macro section

Seed section

Topic section

Subtopic section

Gold ring = Hub page regardless of node type. Yellow highlight = currently selected node.

Node Click — Connection Highlight

When you click a node the editor:

Highlights the selected node and all directly connected neighbours
Dims all other nodes and edges
Zooms the viewport to fit the selected node and its neighbourhood
Slightly lightens the canvas background so the active neighbourhood stands out

Closing the Properties panel restores the previous viewport position and clears all highlights. The original zoom level and pan position are preserved exactly.

Hover Tooltip

Hover over any node to see a tooltip with full details.

Topical mode tooltip shows:

Label and node type badge
Hub indicator if applicable
Tier and confidence score
Canonical URL
Child count and edge count
Entities and aliases

Concept mode tooltip shows:

Label and concept type badge
Confidence score
Description
Group
Entities and aliases

Map Control Panel

A compact control panel in the top-right corner of the canvas provides navigation controls without using the toolbar.

Control	Action	Hold?
＋	Zoom in toward centre	✓ Continuous
－	Zoom out from centre	✓ Continuous
⤢	Fit full graph in viewport	—
▲ ▼ ◀ ▶	Pan in that direction	✓ Continuous

Editing Nodes

Selecting a Node

Click any node to select it. The Properties panel opens on the right. The node is highlighted with a yellow border and the viewport zooms to fit the node and its neighbours.

Click the background or press Escape to deselect and restore the previous zoom
Click a different node while the panel is open to jump directly to that node
The minimap highlights the selected node in gold

Node Properties Panel

The edit panel shows all properties of the selected node. Edit any field and click Apply Changes to save. The fields shown depend on the active mode and node type.

Shared fields — always shown:

Field	Description
Label	Display name shown in the graph
Slug	URL-safe version of the label
Parent Node	Change to re-parent the node. Triggers full layout redraw.
Confidence	0.00–1.00 AI confidence score
Entities	Named entities (pipe-separated)
Aliases	Keyword variants (pipe-separated)

Topical-only fields:

Field	Description
Node Type	Macro / Seed / Topic / Subtopic / FAQ / Comparison
URL Role	Standalone = own page with URL · Section Only = no URL
Hub Role	Hub Page = gold ring, acts as navigation centre
Tier	Hierarchy depth (0 = Macro)
Canonical URL	Auto-generated from parent URL + slug

Concept-only fields (shown for concept satellites):

Field	Description
Concept Type	Core / Entity / Condition / Process / Attribute / Category / External
Description	One-sentence definition shown in tooltip
Group	Category label for grouping (e.g. Health Conditions)

In-place updates: Editing any field except Parent Node updates the node visuals in place — positions are preserved. Only changing Parent Node triggers a full layout redraw.

URL Auto-Generator

When the Canonical URL field is empty, typing a label automatically builds the URL from parent URL + slug:

Parent URL: /dog-breeds/golden-retriever/health/
Slug:       hip-dysplasia
Result:     /dog-breeds/golden-retriever/health/hip-dysplasia/

Changing URL Role to Section Only clears the URL field
Changing the Parent Node regenerates the URL if the field is still empty
Manually typing in the URL field disables auto-generation for that node

Adding Nodes

Click Node → ＋ Add Child Node to add a node under the selected node.

Topical mode — type is inferred:

Selected	New Type
Nothing	Topic (under Seed)
Macro	Seed
Seed	Topic
Topic	Subtopic
Subtopic	Subtopic

Concept mode:

Every new node is a generic concept node with the next concept type in sequence from the parent. Edit the Concept Type field in the Properties panel to change it.

Spawn position:

Vertical Tree — spawns below parent
Horizontal Tree — spawns right of parent
Force — spawns nearby
Radial — spawns outward

Deleting Nodes

Select a node and click Node → Delete Node, the Delete button in the panel, or press Delete.

Deleting removes all edges. Children become orphaned — re-parent them using the Parent Node dropdown.

Re-parenting

Change the Parent Node dropdown and click Apply. The old edge is removed, a new edge is created. The dropdown excludes the node itself and all descendants to prevent cycles.

Re-parenting is the only edit that triggers a full layout redraw.

Keyboard Shortcuts

Key	Action
`/`	Focus the search input
`F`	Fit view to all nodes
`Escape`	Close panel and restore previous zoom · clear search
`Delete` / `Backspace`	Delete selected node (when not typing in a field)

Toolbar Reference

📁 File Menu

Item	Description
🗺 Import Starter Map	Load the built-in Golden Retriever topical map example
🧠 Import Concept Starter Map	Load the built-in Golden Retriever concept map example
📂 Load JSON	Load any topical or concept map JSON. Mode is auto-detected from MapType field.
📋 Import CSV	Import a CSV file of nodes via the server-side CSV importer (topical mode only)
⬇ Export CSV	Export all nodes as CSV in the browser. Topical and concept modes export different columns.
📋 Copy JSON	Copy the full graph JSON to clipboard. Falls back to download if clipboard unavailable.
🖼 Export PNG — Viewport	Export what is visible on screen at 4× resolution
🖼 Export PNG — Full Map	Export entire graph. Minimum 4800px. Nothing clipped.
📐 Export SVG — Viewport	Vector export of current viewport with inlined styles
📐 Export SVG — Full Map	Vector export of entire graph. Scalable to any size.
💾 Save	Post JSON to server and download a local copy simultaneously

⬡ Node Menu

Item	Description
＋ Add Child Node	Add a new node under the selected node. Type is inferred in topical mode. Concept mode always creates a generic concept node.
⧉ Duplicate Node	Copy the selected node with all its properties. Gets a new ID, spawns near the original, labelled with "(Copy)".
🗑 Delete Node	Delete the selected node and all its edges. Children become orphaned.

👁 View Menu

Item	Description
↺ Reset Positions	Clear all manual drag offsets and recompute layout from scratch
⤢ Fit View	Zoom and pan to fit all nodes in the viewport. Also `F`. Accounts for node width and label overhang.
🗺 Toggle Minimap	Show or hide the minimap overview. Hidden by default.
📋 Toggle Legend	Show or hide the color legend overlay. Legend persists across mode switches if visible.
▭ Rectangular Nodes	Switch to pill-shaped rectangular nodes with icon and label
● Circular Nodes	Switch back to circular node style (default)
⟷ Full Labels / Short Labels	Toggle between full label text and truncated labels
🔗 Hide Section-Only Nodes	Hide nodes with urlRole = 0 from the graph. Data preserved — toggle off to restore. (Topical mode only)
☀ Light Theme / 🌙 Dark Theme	Toggle between dark (default) and light canvas themes. Edge label pills update automatically.

Mode Dropdown

Switch between Topical and Concept mode without clearing the graph data.

Mode	What Changes
Topical Map	Node colors by type, topical fields in panel, topical legend shown, section-only toggle visible
Concept Map	Node colors by concept type, inside-circle labels, edge labels rendered, concept fields in panel, concept legend shown, Force layout defaults

Mode is auto-detected when loading JSON from the Metadata.MapType field. Set to "topical" or "concept" to control which mode opens automatically.

Search

Press / to focus the search box. Searches label, slug, URL, description, entities, and aliases across all nodes in both modes.

Matching nodes highlighted in gold — non-matching nodes dimmed
View pans to the first matching node
Match count shown next to the search box
Press Escape to clear and restore all nodes

Minimap

Toggle via View → 🗺 Toggle Minimap. Shows a bird's-eye view of the entire graph with a purple dashed viewport indicator.

Click anywhere on the minimap to pan the main view to that position
Selected node appears as a gold dot
Legend position adjusts automatically when minimap is toggled

Stats Bar

Live counts below the toolbar. Stats change depending on the active mode.

Topical mode stats:

Nodes
Total

Edges
Total

Topics
nodeType=2

Subtopics
nodeType=3

FAQs
nodeType=4

Hubs
hubRole=1

Pages
urlRole=1

Sections
urlRole=0

Depth
Max tier

Confidence
Average

Concept mode stats:

Nodes
Total

Edges
Total

Groups
Distinct groups

Confidence
Average

Exporting Your Map

PNG Export

Viewport PNG

Exports exactly what is visible on screen
Rendered at 4× screen resolution
Best for sharing a specific zoom level
File: topical-map-[seed]-viewport.png

Full Map PNG

Captures the entire graph regardless of zoom
Minimum 4800px on the longer side
Node widths and label overhang fully accounted for
Status bar shows pixel dimensions after export
File: topical-map-[seed]-full.png

Best PNG export workflow: Switch to Radial Tree → press F → Export PNG Full Map. For concept maps use Force layout → wait for simulation to settle → F → Export PNG Full Map.

SVG Export

Vector format — scalable to any size without quality loss. All styles, colors, and arrow markers are inlined so the file is fully self-contained.

Open in Inkscape, Figma, or Illustrator for editing
Embed directly in web pages
Print at any size without pixelation
Same Viewport / Full Map options as PNG
Concept edge labels and pills are included

CSV Export

Built entirely in the browser from the current graph data. No server call required. Columns exported differ by mode.

Topical mode columns:

Id Label Slug Node Type Tier URL Role Hub Role Canonical URL Parent URL Parent Id Architecture Type Confidence Entities Aliases

Concept mode columns:

Id Label Slug Concept Type Group Description Confidence Entities Aliases

JSON Copy and Save

Copy JSON writes the full graph to your clipboard. Save posts to the server and downloads a local copy.

The JSON is compatible with:

Reload into the editor via File → Load JSON
Neo4j as a node/edge graph
D3.js for custom visualisations
CMS or internal linking automation pipelines

Both PascalCase and camelCase are accepted on import. The MapType field in Metadata controls which mode opens automatically.

Export Quick Guide

Goal	Layout	Format
Client presentation — topical map	Radial Tree → `F`	PNG — Full Map
Client presentation — concept map	Force → settle → `F`	PNG — Full Map
Org-chart style image	Vertical Tree → `F`	PNG — Full Map
URL depth audit image	Horizontal Tree → `F`	PNG — Full Map
Print-quality vector	Any → `F`	SVG — Full Map
Figma or Illustrator editing	Any	SVG — Full Map
Content calendar spreadsheet	Any	Export CSV
Concept entity inventory	Any (concept mode)	Export CSV
Reload or continue editing	Any	JSON — Save
Neo4j / D3.js import	Any	JSON — Copy

Tips and Workflows

Common Workflows

🎯 Review a Generated Topical Map

Load JSON via File → Load JSON
Switch to Horizontal Tree to review hierarchy
Hide Section-Only to see only pages
Click each Topic node and verify children
Fix labels, URLs, and hub assignments
Switch to Radial to check balance
Export PNG Full Map for client review

🎯 Review a Concept Map

Load JSON — editor opens in concept mode automatically
Wait for Force layout to settle
Press F to fit the full graph
Click the Core node to highlight all direct connections
Check edge labels — verify relationship types are correct
Click each Entity/Condition node to review its connections
Add missing entities via Node → Add Child Node
Export PNG Full Map for semantic review

🎯 Build a Map from Scratch

Load starter map as a reference template
Select the Seed node and add Topics
Select each Topic and add Subtopics
Add FAQs under the Seed or relevant Topic
Mark Topics with 3+ children as Hub
Use Rectangular + Full Labels to review all text
Export CSV for content planning handoff

🎯 Present to a Client

Switch to Radial Tree layout
Press F to fit view
Switch to Rectangular Nodes + Full Labels
Hide Section-Only Nodes
Export PNG — Full Map
Also export SVG — Full Map for print
Use Light Theme if client prefers white backgrounds

🎯 Audit URL Structure

Switch to Horizontal Tree
Switch to Rectangular + Full Labels
Column position = URL depth
Click nodes with incorrect URLs and edit
Verify Section-Only nodes have no URL
Export CSV with corrected URL column

🎯 Review Topic Breadth — Vertical Tree

Switch to Vertical Tree
Press F to fit
Each row = one tier level
Narrow rows = thin topic coverage
Very wide rows = possible over-expansion
Switch to Rectangular Nodes to read all labels
Add missing subtopics directly from this view

Best Practices

Pattern	What to Do
Topic with 3+ subtopics	Mark as Hub. Add summary sections for each child on the hub page.
FAQ with no parent	Assign to Seed or most relevant Topic using Parent Node dropdown.
Low confidence nodes (<0.70)	Review whether the topic genuinely belongs. Delete if off-topic.
Concept map missing relationship labels	Every concept edge should have a RelationshipLabel — check JSON and add labels manually if missing.
Concept map with too many nodes	Use the Group field to categorise nodes. Filter by group when reviewing to avoid visual overload.
Nodes clipped in export	Press `F` before exporting. Bounding box accounts for node width and label overhang.
Force layout still moving on export	Wait 2–3 seconds for simulation to settle before pressing `F` and exporting.

Common Mistakes to Avoid

Mistake	Fix
Standalone node with no URL	Type a label — URL auto-generates from parent URL + slug
Section-only node with a URL	Change URL Role to Section Only — URL field clears automatically
Deleting a parent that has children	Re-parent children first or they become orphaned
Switching layout without Fit View	Press `F` immediately after switching — map may be off-screen
Exporting before Force layout settles	Wait for simulation to stabilise — nodes still moving = wrong positions in export
Concept edge with no RelationshipLabel	No label pill will appear on the line — add via JSON or rebuild the edge
All nodes same confidence in concept mode	Review low-confidence entities — they may be too peripheral to the Core topic

Quick Reference Card

Layouts

⬡ Force — clusters, concept maps
⟶ Tree H — URL depth audit
⬇ Tree V — org-chart, wide maps
◎ Radial — presentations, export
F — fit view at any time

Topical Node Colors

● Macro — Rose-red
● Seed — Violet
● Topic — Cyan
● Subtopic — Emerald
● FAQ — Orange
● Comparison — Fuchsia
⬤ Ring = Hub

Concept Node Colors

● Core — Soft rose
● Entity — Cyan
● Condition — Red
● Process — Green
● Attribute — Purple
● Category — Orange
● External — Slate

Keyboard

/ — focus search
F — fit view
Esc — close panel / restore zoom
Del — delete selected node

Topical Edge Colors

Grey = Parent-Child
Orange dashed = FAQ
Purple = Related

Concept Edges

11 relationship types — each with its own color
Label pill rendered at line midpoint
See Concept Mode tab for full list

Map Controls

＋ / － — zoom in / out
⤢ — fit view
▲ ▼ ◀ ▶ — pan (hold to repeat)

Export Quick Guide

Client review
Radial → Full PNG

Concept map
Force → Full PNG

Org-chart
Tree V → Full PNG

Content plan
Export CSV

Print / vector
Full Map SVG

Pipeline reload
Copy JSON / Save

Neo4j / D3.js
Copy JSON

Explore example
File → Starter Map