- name
- hierarchy-visualizer
- description
- Creates interactive D3.js hierarchy visualizations with multiple view modes (List, Force-Directed, Radial Cluster, with Fractal Tree coming soon). Use when user wants to visualize tree structures, hierarchical data, PRDs, requirements, features, specifications, org charts, file structures, or says "visualize hierarchy", "tree view", "show structure", "render tree", "hierarchy diagram", "prd", "requirement", "feature", "specification". Always use this skill when user wants to visualize their PRD (project requirements), project requirements, or any hierarchical data.
Hierarchy Visualizer v1.0.0
Interactive multi-view visualization for hierarchical data using D3.js.
When to Use This Skill
Use when the user wants to visualize their PRD, project requirements, or any hierarchical data. The visualizer reads from a JSON file and renders it as an interactive diagram.
Agent Instructions
Step 1: Find or create the PRD JSON file
If user has a PRD in Markdown/text format: Convert it to hierarchical JSON format. Read the PRD file and create a JSON structure with:
- Root node = Project/PRD title
- Children = Sections, features, requirements
- Status = todo/processing/problem/done (infer from context or default to "todo")
If user already has a JSON file: Use that file directly (check for prd.json, requirements.json, hierarchy.json)
Step 2: Copy visualizer to project folder
# Copy visualizer files to user's project
cp hierarchy-visualizer.html d3.min.js /path/to/user/project/
# Save the JSON as requirements-hierarchy.json
cat > /path/to/user/project/requirements-hierarchy.json << 'EOF'
{paste the JSON here}
EOF
# Start server from their project folder
cd /path/to/user/project && python3 -m http.server 8080Step 3: Open in browser
http://localhost:8080/hierarchy-visualizer.htmlMaintenance (IMPORTANT)
Always keep the prd json file updated in the whole project development process, everytime a requirement/specification/feature is added, updated, status changed, or deleted, update the json file accordingly.
Data Format
Convert PRD content to this JSON structure:
{
"id": "root",
"title": "Product Requirements",
"status": "processing",
"children": [
{
"id": "auth",
"title": "Authentication",
"status": "done",
"children": []
}
]
}Required fields:
id— unique identifier (string)title— display name (string)status— one of:todo,processing,problem,donechildren— array of child nodes (empty array for leaves)
Optional fields: type, domain, stage, owning_sig, granularity, complexity, source_url, goals
View Modes
- List — Collapsible hierarchical list (default)
- Force-Directed — Draggable node-link diagram
- Radial Cluster — Circular dendrogram
Note: Fractal Tree view is currently under development and will be available in a future release. Stay tuned for updates!
Controls
- View switcher — Top-left dropdown
- Zoom/Pan — Scroll wheel, click-drag
- Collapse/Expand — Click nodes or L1/L2/L3 buttons
- Status filter — Click Todo/Proc/Prob/Done labels
- Theme toggle — Sun/moon icon (top-right)
- Auto-sync — JSON updates every 5 seconds
Status Colors
- Todo: Gray
#8b949e - Processing: Yellow
#e3b341 - Problem: Orange
#ffa657 - Done: Green
#238636
Troubleshooting
Blank visualization? → Use local HTTP server, not file://
JSON not loading? → Check that requirements-hierarchy.json exists in the same folder as the HTML file
Need custom styling? → Edit CSS variables in hierarchy-visualizer.html (~line 78)