Concept Map Template

Use this template when the playground is about learning, exploration, or mapping relationships: concept maps, knowledge gap identification, scope mapping, task decomposition with dependencies.

Layout

+--------------------------------------+
|  Canvas (draggable nodes, edges)     |
|  with tooltip on hover               |
+-------------------------+------------+
|                         |            |
|  Sidebar:               | Prompt     |
|  • Knowledge levels     | output     |
|  • Connection types     |            |
|  • Node list            | [Copy]     |
|  • Actions              |            |
+-------------------------+------------+

Canvas-based playgrounds differ from the two-panel split. The interactive visual IS the control — users drag nodes and draw connections rather than adjusting sliders. The sidebar supplements with toggles and list controls.

Control types for concept maps

Decision	Control	Example
Knowledge level per node	Click-to-cycle button in sidebar list	Know → Fuzzy → Unknown
Connection type	Selector before drawing	calls, depends on, contains, reads from
Node arrangement	Drag on canvas	spatial layout reflects mental model
Which nodes to include	Toggle or checkbox per node	hide/show concepts
Actions	Buttons	Auto-layout (force-directed), clear edges, reset

Canvas rendering

Use a <canvas> element with manual draw calls. Key patterns:

Hit testing: Check mouse position against node bounding circles on mousedown/mousemove
Drag: On mousedown on a node, track offset and update position on mousemove
Edge drawing: Click node A, then click node B. Draw arrow between them with the selected relationship type
Tooltips: On hover, position a div absolutely over the canvas with description text
Force-directed auto-layout: Simple spring simulation — repulsion between all pairs, attraction along edges, iterate 100-200 times with damping

function draw() {
  ctx.clearRect(0, 0, W, H);
  edges.forEach(e => drawEdge(e));  // edges first, under nodes
  nodes.forEach(n => drawNode(n));  // nodes on top
}

Prompt output for concept maps

The prompt should be a targeted learning request shaped by the user's knowledge markings:

"I'm learning [CODEBASE/DOMAIN]. I already understand: [know nodes]. I'm fuzzy on: [fuzzy nodes]. I have no idea about: [unknown nodes]. Here are the relationships I want to understand: [edge list in natural language]. Please explain the fuzzy and unknown concepts, focusing on these relationships. Build on what I already know. Use concrete code references."

Only include edges the user drew. Only mention concepts they marked as fuzzy or unknown in the explanation request.

Pre-populating with real data

For codebases or domains, pre-populate with:

Nodes: 15-20 key concepts with real file paths and short descriptions
Edges: 20-30 pre-drawn relationships based on actual architecture
Knowledge: Default all to "Fuzzy" so the user adjusts from there
Presets: "Zoom out" (hide internal nodes, show only top-level), "Focus on [layer]" (highlight nodes in one area)

Example topics

Codebase architecture map (modules, data flow, state management)
Framework learning (how React hooks connect, Next.js data fetching layers)
System design (services, databases, queues, caches and how they relate)
Task decomposition (goals → sub-tasks with dependency arrows, knowledge tags)
API surface map (endpoints grouped by resource, shared middleware, auth layers)

3.6 KiB Raw Blame History