mirror of
https://github.com/anthropics/claude-plugins-official.git
synced 2026-03-20 23:43:07 +00:00
74 lines
3.6 KiB
Markdown
74 lines
3.6 KiB
Markdown
# 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
|
|
|
|
```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)
|