diagram-pane Claude Code mod: a Claude Code diagram pane for mermaid charts

diagram-pane is a community mod by Ray Amjad (ray-amjad) from his claude-code-mods collection. It is a Claude Code diagram pane: Claude often explains things with mermaid charts, but in a terminal you only see the raw code, and it scrolls away. This pane pins each chart and draws it as boxes and arrows.

According to the author's README, the pane has two parts:

• Pinned diagrams: every mermaid block or ASCII box diagram in one of Claude's replies is pinned, newest first (five are kept by default).
• Live work map: a small graph of the files, components and steps Claude is working on, with a ▶ on the box it is on now. Square boxes are files, round ones components, double ones steps.

You can also go into a box. The first nine boxes of a level are numbered, a number key opens that box's detail, b goes back and t returns to the top. A box with no detail yet gets one drawn by a fork of your session. Press c, or Tab to the field, and type a change such as "split auth into login and token refresh". Claude can do the same through two tools.

The install block above adds the author's marketplace and installs the plugin from it. On a terminal narrower than 144 columns, type /diagram once to open the pane. Restart Claude Code or run /reload-plugins after installing.

Everything is in one function-hooks module, hooks/register.js, plus two pure helpers: draw.js (finds diagrams in replies, parses mermaid, lays boxes out) and graph.js (the editable tree). On turn.complete the plugin reads the transcript, pins new diagrams and, every N turns, runs the map check. This is the gate and the fork, from register.js:

const gate = await $.model.complete({
  model: 'haiku',
  system: GATE_SYSTEM,
  prompt: `CURRENT MAP: ${mapSummary()}\n\nFILES TOUCHED SINCE, NOT ON THE MAP: ...`,
  maxTokens: 5,
  timeoutMs: 20000,
})
...
const r = await $.model.fork({ prompt: FORK_PROMPT + (base ? basePrompt(base) : '') })

The fork is asked for a JSON object with 3 to 8 nodes and at most 10 edges, which parseMap validates and trims before drawing. The map, edited pins and open view are saved per session in $.store (the newest 20 sessions), so they survive a reload or --resume. /clear starts the pane fresh, and a fork still running from before it is discarded.

Two options, set with /plugin configure diagram-pane@claude-code-mods: everyTurns (turns between work-map checks, default 3) and maxPins (pinned diagrams kept, default 5). The environment variable DIAGRAM_PANE_EVERY overrides everyTurns for one session, for example DIAGRAM_PANE_EVERY=1 claude. The commands are /diagram (run the gate now), /diagram force (skip the gate and redraw from scratch, dropping edits) and /diagram open (give the pane the keyboard).

We read every file the plugin loads: plugin.json, hooks/hooks.json, register.js, draw.js and graph.js, about 60 KB of readable JavaScript with no build step, no package.json and no binaries. The repository also holds PNG screenshots and test files, which the plugin does not load. Here is what we found:

• Network: none in the plugin code. No fetch, sockets or $.http. The model calls below go through Claude Code, the same way your session does.
• Processes: none. No $.process, child_process or shell strings.
• Model calls cost tokens and send context. $.model.complete asks Haiku about a short digest (tool names, file names, the last 40 lines of activity, the first 160 characters of each user prompt). $.model.fork asks a copy of your own session, so it sees the whole conversation, but it is told not to call tools and cannot.
• File writes: $.fs.write is used in one place, to write the pane's text to the path in DIAGRAM_PANE_DUMP, a test aid that does nothing unless you set that variable. Everything else is saved with $.store, the plugin's own store. Nothing is written under ~/.claude, to settings, shell files or LaunchAgents.
• Background services and telemetry: none, and nothing keeps running after Claude Code exits.
• Secrets: it reads only DIAGRAM_PANE_DUMP, DIAGRAM_PANE_EVERY and DIAGRAM_PANE_SYNC. No keychain or credential access.
• Prompt influence: it registers two tools whose descriptions tell Claude to call diagram_get before diagram_set and to re-read, because the user can edit the pane too. The prompts it sends to forks are marked as side requests. We found no hidden or zero-width text and no instructions aimed at the model beyond that.
• Gating hooks: the two tool.call hooks only answer the plugin's own diagram_get and diagram_set tools, with a .catch that denies and leaves the pane unchanged. They do not touch other tools or prompts.
• Obfuscation: none. License is MIT (LICENSE present).

claude plugin validate passed with no errors; its only warning is that the plugin has no icon, which does not affect use. claude plugin test ran 32 tests across 7 files on Claude Code 2.1.307, all passing.

We loaded the plugin on Claude Code 2.1.307 and ran the author's test suite there. If the pane does not appear, type /diagram (the automatic open needs 144 columns). If the map says "not drawn yet", the first check runs after everyTurns turns, or run /diagram. Before the first reply there is nothing to fork, and the pane says so.

Limits from the README: only flowcharts are redrawn; every chart is drawn top to bottom, even graph LR; edges that skip a row or point back up are listed under the drawing with ⇢ and ↺ instead of routed; a fork's detail holds only what the session has already seen. Reinstalling or moving the plugin to another marketplace starts with no saved maps. To remove it, run /plugin disable diagram-pane.