|
|
@@ -0,0 +1,73 @@
|
|
|
+# Concept Map Template
|
|
|
+
|
|
|
+Use this template when the artifact 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 artifacts 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
|
|
|
+
|
|
|
+```javascript
|
|
|
+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)
|
Thariq Shihipar