CodeGraph

CodeGraph

[English](README.md) · [中文](README.zh-CN.md)

> Turn a code flow into a clickable diagram, or a long-form interactive explainer — generated by your AI agent as a single offline HTML file.

CodeGraph is an Agent Skill for Claude Code, DeepSeek Harness, Cursor, Codex, and other Agent Skills-compatible agents. You describe the flow; the agent reads the code, builds the artifact, and keeps every element linked back to the source.

Why CodeGraph

A normal diagram stops at the picture. CodeGraph keeps the connection to the code:

• Click to source — click a node, edge, sequence message, class, or relation to open the exact source line in your editor, or in an in-page panel.
• Review with context — point the agent at a PR, commit, or base..head range and added / modified / removed elements are highlighted in the graph.
• Diagrams or a course — use a flowchart, sequence diagram, or UML class diagram for structure; or switch to CodeWalkthrough for a scrollable explainer page with sections, inline visuals, source links, and an optional self-test.

Everything is generated as one self-contained HTML file. There is no server, CDN, or runtime npm install on the viewer's machine, and the artifact works offline.

Demo

Review-mode flowchart. Green is added, orange is modified, gray is unchanged. Clicking a node opens the referenced source line.

Sequence diagram. Same review colors, with actors, messages, and clickable source locations.

Diagrams

Ask the agent to draw a flow or model classes; it produces a single graph.html:

• flowchart, sequence diagram, or UML class diagram;
• zoom, pan, hover, and click-to-source;
• review mode for PRs, commits, and diffs;
• works in any browser, online or offline.

Class diagrams show classes, members, methods, and UML relations. Hover a

class for its stereotype and responsibility; the rest of the graph dims so its

direct neighbors stay visible. Click a class or a relation line to open source.

By default, keep one artifact focused on one question. When requested, a single

graph.html can combine one flowchart, one sequence diagram, and one class

diagram, each on its own tab. Duplicate diagram types are rejected.

CodeWalkthrough: turn code into a course

CodeWalkthrough is not a summary of a file. It is a small course generated from

the codebase, built around three ideas:

• Shallow to deep — open with a one-paragraph mental model, then a

big-picture diagram, a running example, the mechanisms, the boundaries, and a

recap. Each section makes one point.

• Visual first — data flow, state transitions, and call chains become inline

SVG/CSS/JS diagrams and animations. Code is an exhibit, not the main text.

• Practice to verify — an optional 3–5 question self-test, with multiple

choice or click-to-reveal answers that explain why and link back to source.

One running example is reused across the page, and every key claim links to a

source line. The output is a single walkthrough.html that works offline.

Use it for onboarding, explaining a module, or turning a design review into a

reusable lesson.

Install

Claude Code

claude plugin marketplace add longbowzz/CodeGraph
claude plugin install codegraph@codegraph

Inside a session, /plugin install codegraph@codegraph --marketplace longbowzz/CodeGraph

does both steps.

Any Agent Skills-compatible agent

npx skills add longbowzz/CodeGraph --skill codegraph

Run it from the target project. Add -g to install globally, or

-a claude-code to skip the agent picker.

DeepSeek Harness

DSH profiles are isolated, and the Desktop app's desktop profile is managed by

the Electron application — the dsh plugin --profile desktop … command is

rejected. Use the install path that matches how you run DSH:

Desktop app: open Plugins in the sidebar, choose Add plugin, enter

@longbowzz/dsh-codegraph@0.4.0, install it, and enable the bundle if prompted.

Web / CLI profiles (dsh web uses the web profile):

dsh plugin --profile web add -w @longbowzz/dsh-codegraph

--profile web only affects dsh web; it does not add the plugin to the

Desktop app. If you boot a different CLI-managed profile, replace web with