graph-viz

Render a codebase knowledge graph JSON file as an offline HTML dependency visualization.

1|Updated Jun 27, 2026
One-click install
npx skills add https://github.com/vickysrawat/AI-Assisted-development --skill graph-viz-vickysrawat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: graph-viz
Source: https://github.com/vickysrawat/AI-Assisted-development/tree/main/skills/graph-viz
Command: npx skills add https://github.com/vickysrawat/AI-Assisted-development --skill graph-viz-vickysrawat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It turns the abstract codebase knowledge graph stored in .claude/graph/graph.json into an interactive visual diagram that developers can open in a browser, without uploading any code or data to external services. ## Core Features & Use Cases - 2D SVG Dependency Graph: Renders nodes grouped and colored by module type, edges styled by confidence level, with hub (god) nodes and stale modules visually flagged. - Interactive Exploration: Hovering a node highlights its neighborhood and shows a tooltip listing its dependencies and dependents. - Offline and Self-Contained: The generated graph.html makes no network calls, uses no CDN or remote fonts, and opens directly over file:// for client-internal deployment. - Optional 3D Mode: Supports a 3D WebGL rendering only when a locally vendored library exists, falling back to 2D otherwise. - Use Case: After running /setup-init or /graph-sync on a large legacy solution, run this Skill to produce graph.html and visually identify hub modules and stale areas before planning a refactor. ## Quick Start Ask the assistant to visualize the knowledge graph, for example by saying "render the dependency graph" or invoking /graph-viz after the graph has been generated.

Frequently Asked Questions about graph-viz

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize a codebase dependency graph offline?

Run the graph-viz command after generating the knowledge graph with /setup-init or /graph-sync. It writes a self-contained graph.html to .claude/graph/ that opens in any browser over file:// with no network calls, CDN, or remote assets.

What input does the graph visualization need?

It reads only .claude/graph/graph.json containing nodes and edges, plus an optional .stale flag file listing stale module ids. It never reads application source code and never modifies the graph data itself.

Can I render the dependency graph in 3D?

Yes, pass the --3d flag, but only if a vendored WebGL library exists at .claude/graph/vendor/3d-force-graph.min.js. The library is never downloaded; if it is absent the Skill warns and falls back to the 2D SVG renderer.

Why does graph-viz say no graph.json found?

The visualization requires an existing knowledge graph. Run /setup-init to create the graph or /graph-sync to refresh it, then retry; the Skill stops with a warning rather than fabricating output.

Should I commit the generated graph.html file?

No. The graph.html output is gitignored by design because it is a cheap, deterministic regeneration from graph.json. Re-run the Skill whenever the underlying graph changes instead of committing the HTML.