graphit

graphit

Render an interactive node-link graph of recent conversation context in a separate Electron window. Drill into any node or edge to grow the graph in place.

Designed for planning, architecture, and process-explanation conversations that benefit from a visual layer the terminal can't provide.

1 · Render Initial graph drawn from recent conversation context.

2 · Inspect Click any node or edge to see its details and the exact /graphit:expand invocation.

3 · Expand /graphit:expand grows the graph in place; new nodes animate into the layout.

Setup

These are Claude Code commands — run claude to start a session first.

1. Add the marketplace and install:

/plugin marketplace add FetzerJack/fetzerjack-plugins
/plugin install graphit@fetzerjack-plugins

2. First /graphit:render triggers a one-time dependency install (~200 MB Electron + Cytoscape) inside the plugin cache. You'll see [graphit] First-time setup: installing dependencies… in CC's debug log. Subsequent renders are instant.

Versioning is by git commit SHA — there's no pinned version in plugin.json, so every push to main is a new installable version. Run /plugin marketplace update fetzerjack-plugins then /plugin update graphit to pull the latest.

Usage

> describe the OAuth login flow for an iOS app
... claude responds ...

> /graphit:render the auth flow
... viewer window opens ...

> /graphit:expand auth service failures
... subgraph showing error branches animates in ...

> /graphit:expand e3 alternatives
... edge e3 is replaced by a chain showing alternative paths ...

Click any node or edge in the viewer to open a side panel with its details and the exact /graphit:expand invocation that targets it.

Slash commands

Command	Purpose
/graphit:render [focus]	Generate an initial graph from recent conversation. Optional [focus] narrows scope (e.g. the auth flow).
/graphit:expand <id-or-label> [intent]	Drill into a node or edge in the active graph. Reference the target by id (n3, e7) or by label (auth service, verifies). Optional intent: failures, alternatives, or a free-form prompt.

Tools exposed to the assistant

Tool	Purpose
render_graph	Build the initial graph from a JSON payload of nodes and edges. Validates against the graphit schema; returns a graph_id. Spawns the viewer window.
get_graph	Return the active graph's nodes and edges with ids and labels. Used by /graphit:expand to resolve the user's target.
expand	Apply a subgraph mutation. For nodes, attach new children to a parent_id. For edges, replace edge_id with a chain of new nodes/edges that forms a path from the original src to dst.

Architecture

Three processes:

• Claude Code session hosts the slash commands and MCP client.
• MCP server (Node, stdio child of CC) validates graph JSON against an Ajv schema, spawns the viewer, and forwards expansion mutations.
• Electron viewer (per /graphit:render) renders graphs with Cytoscape + Dagre. Connects back to the MCP server over a loopback WebSocket on an ephemeral port to receive expand mutations.

The viewer is purely presentational. All mutation goes through the slash commands and is driven by Claude.

Development

git clone https://github.com/FetzerJack/graphit-cc.git
cd graphit-cc
npm install
npm test                                            # 16 Ajv schema tests
npx electron viewer viewer/fixtures/showcase.json   # standalone viewer
claude --plugin-dir .                               # load plugin without marketplace install

To regenerate the dock icon from viewer/assets/icon.svg:

npm run build:icon --workspace viewer

License

MIT — see LICENSE.