How to visualize a codebase as a graph
· 3 minute read
To visualize a codebase graph, parse the repository into nodes and edges, then render them. Graphify, an open-source CLI, does both. One command builds the graph locally and writes an interactive graph.html. Export flags produce SVG, GraphML, an Obsidian vault, or Neo4j Cypher.
Why visualize a codebase graph?Link to Why visualize a codebase graph?
A picture shows shape that text hides. Clusters reveal modules that work together. A node with many lines is a hub that many parts depend on. A long thin chain can be a fragile path. When you join an unfamiliar project, the view is a fast first map.
How do you build the graph?Link to How do you build the graph?
uv tool install graphifyy
graphify update .graphify update . parses code with tree-sitter and writes graphify-out/. That folder holds graph.json, GRAPH_REPORT.md, and graph.html. No model is used for code. To include docs and images, run /graphify . inside your coding assistant.
How do you use the interactive view?Link to How do you use the interactive view?
Open graphify-out/graph.html in any browser. The README describes it plainly: click nodes, filter, search. Nodes are coloured by community, the clusters Graphify detects. Click a node to see its connections. For very large graphs, skip the HTML with --no-viz and use an export instead.
Which export fits your tool?Link to Which export fits your tool?
| Flag | Output | Open with |
|---|---|---|
| none | graph.html | Any browser |
| --svg | graph.svg | Docs, slides, browsers |
| --graphml | GraphML file | Gephi, yEd |
| --obsidian | Markdown vault | Obsidian graph view |
| --neo4j | cypher.txt | Neo4j |
| --neo4j-push | Writes to a running Neo4j | Neo4j Browser |
Pass the flag to the skill, for example /graphify . --graphml. To push to a local database, use /graphify . --neo4j-push bolt://localhost:7687.
How do you read a large graph?Link to How do you read a large graph?
Start with the report, not the picture. GRAPH_REPORT.md lists god nodes, the most connected symbols, and the communities. Then open the view and search for those names. In Gephi, a force-directed layout spreads clusters apart, and a degree filter hides leaf nodes.
Is there a tree view?Link to Is there a tree view?
Yes. graphify tree writes graphify-out/GRAPH_TREE.html, a collapsible tree built with D3. It suits a top-down view of files and their symbols.
How do you see what a change will affect?Link to How do you see what a change will affect?
Pair the picture with a query. Find the node you plan to change in the view, then run graphify affected "name" in the terminal. It lists the nodes that reach it through calls, imports and similar edges, with file and line. The view shows the neighbourhood. The command gives the exact list.
Use --depth to widen or narrow how far back it looks.
FAQLink to FAQ
Does visualization need an API key?Link to Does visualization need an API key?
No. Building a code graph and its HTML view runs locally.
Can I visualize only part of a repo?Link to Can I visualize only part of a repo?
Yes. Pass a subfolder, such as graphify update ./src, or exclude paths with .graphifyignore.
Why is the HTML slow on a huge repo?Link to Why is the HTML slow on a huge repo?
Browsers struggle with many thousands of nodes. Use --no-viz and export GraphML for Gephi.
Can I query the graph in Neo4j?Link to Can I query the graph in Neo4j?
Yes. Load cypher.txt or use --neo4j-push, then query with Cypher.
Does the view update when code changes?Link to Does the view update when code changes?
Run graphify update . again. graphify watch . rebuilds on code changes.
Get startedLink to Get started
Graphify is open source on GitHub. Install it with uv: uv tool install graphifyy. Read the exports docs and the community glossary entry. Related: code knowledge graph examples. See also the knowledge graph glossary.