From visual-project-map
Overlay an implementation plan onto an existing workflow graph. Reads the plan document and existing graph JSON, matches plan tasks to graph nodes and edges, and emits a `plan` field that gets merged into the graph. Opens the graph viewer in Plan view mode.
How this skill is triggered — by the user, by Claude, or both
Slash command
/visual-project-map:visualize-planThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Overlay an implementation plan onto an existing workflow graph, showing which
Overlay an implementation plan onto an existing workflow graph, showing which nodes/edges will be added, modified, or removed.
Parse $ARGUMENTS as follows:
| Argument | Default | Description |
|---|---|---|
| First positional | (required) | Path to the plan document (markdown) |
--graph path | Most recent graph JSON | Path to existing graph JSON to annotate |
Examples:
/visualize-plan docs/plan.md — overlay plan onto default graph/visualize-plan docs/plan.md --graph examples/my-workflow.jsonRead the graph JSON file specified by --graph, or find the most recent
.json file in the examples/ directory.
Validate it has the required top-level fields: title, modules, nodes,
edges.
Build a lookup of all existing node IDs and edge keys (source->target).
Read the plan markdown file. Extract:
For each task in the plan, determine:
Construct the plan object with this structure:
{
"plan": {
"summary": {
"goal": "One-sentence description of what the plan achieves",
"tasks": [
{
"id": "T1",
"title": "Short task description",
"nodeIds": ["node1", "node2"]
}
]
},
"annotations": {
"nodes": {
"existing_node_id": {
"status": "modify",
"description": "What changes about this node"
},
"new_node_id": {
"status": "add",
"description": "What this new node does"
}
},
"edges": {
"source->target": {
"status": "add",
"description": "Why this connection is added"
}
},
"modules": {
"mod_id": {
"status": "modify",
"description": "How this module is affected"
}
}
}
}
}
add annotation. The node ID should follow the
existing naming convention (lowercase, underscores)add: Node/edge does not currently exist and will be createdmodify: Node/edge exists but its behavior, implementation, or
semantics will changeremove: Node/edge currently exists but will be deletedRead the existing graph JSON. Add the plan field to the top level.
Write the result to a new file:
examples/{original-name}-with-plan.json
Do NOT modify the original graph file.
cd tools/graph-viewer
python3 -m http.server 8080 &
sleep 1
open "http://localhost:8080/index.html?graph=examples/{name}-with-plan.json"
Tell the user:
V to cycle through all view modesBefore emitting, verify:
addsource->target format with valid
node IDsstatus field (add, modify, or remove)summary.goal is a single clear sentencesummary.tasks has an id and titlenodeIds in tasks reference valid node IDsnpx claudepluginhub georgegui/visual-project-map --plugin visual-project-mapTransforms text plans into interactive visual plans with diagrams, file maps, code snippets, open questions, and optional UI/prototype review. Use when a plan benefits from being a reviewable artifact rather than a chat paragraph.
Reviews implementation plans as interactive HTML reports with architecture diagrams, blast radius analysis, risk assessment, and gap detection. Activates for plan review requests like 'check my plan' or 'is this feasible'.
Visualizes planned code changes as ASCII diagrams with before/after architecture, risk analysis, execution order, and impact metrics. Use for reviewing plans, migrations, or assessing change impacts.