show-me

show-me draws the mermaid diagrams in Claude’s answers as pictures, in a pane docked on the right of the session. When a turn ends and the answer holds one or more mermaid fences, the pane opens on the first one, rendered by mermaid-cli. /show-me <question> asks Claude to answer in diagrams.

What it does

• Every answer: each mermaid fence in an answer from the main conversation becomes an image once the turn ends. Subagent answers are skipped.
• /show-me <question>: sends your question with a line asking for one or more mermaid diagrams, left-to-right flowcharts where possible, each followed by a short explanation. /show-me alone reopens the pane.
• History: the last 30 diagrams, across turns. A new answer jumps to its first diagram, the header says which turn each one came from, and a diagram whose source is already in the history shows at once, without a second render.
• Keys: the pane never takes the keyboard by itself, so the prompt keeps working while it is open. Click it or press ctrl+x tab, then p and n step through the diagrams, o opens the PNG in the system viewer, and x or Esc closes the pane.
• Errors: a diagram that fails to render shows mmdc’s first error line above its source.

Install

Needs Claude Code 2.1.287 or later, plus mmdc on your PATH and, in the terminal, the kitty graphics protocol, as in Ghostty or kitty. Other terminals show the diagram’s title where the picture would go. The Claude desktop app needs no kitty: the pane shows the same picture there, and the mermaid source until it is ready.

Install mermaid-cli with npm and let puppeteer bring its own browser:

npm i -g @mermaid-js/mermaid-cli

On macOS with Google Chrome installed, skip that browser download instead; the mod points mmdc at your Chrome:

PUPPETEER_SKIP_DOWNLOAD=1 npm i -g @mermaid-js/mermaid-cli

Then the mod:

claude plugin marketplace add arasovic/claude-code-mods
claude plugin install show-me@claude-code-mods

Restart Claude Code and try /show-me how does this request flow through the app. If mmdc is missing, a toast and the pane give you the install command.

The marketplace is the author’s, with 14 mods; skip the first command if you added it for another of them. hamzafer and karanb192 also publish a marketplace named claude-code-mods. When claude plugin marketplace list shows one of theirs, claude plugin marketplace remove claude-code-mods clears the way for this add.

How it works

turn.complete hands the mod each finished answer. It pulls out the mermaid fences and, after the turn has ended so the turn is not held up, writes them to in.md in a folder for that turn under $TMPDIR/show-me/ (/tmp/show-me/ when TMPDIR is unset). It then runs mmdc on that file: one browser launch renders every fence as a PNG, on a dark theme and a transparent background at twice the size, with a two-minute timeout. On macOS, when Google Chrome is in /Applications, it also writes a small puppeteer.json that points mmdc at it. If mmdc cannot start, the mod runs command -v mmdc through sh to tell a missing install from a crash.

Before each render it deletes turn folders under $TMPDIR/show-me/ older than a day, with rm -rf, except those the history still shows. Other sessions share that folder, which is why newer ones stay. The history itself lives in the plugin’s state, and o runs open on the PNG.

/show-me <question> submits your question as your own message with the request for diagrams appended, so it costs what that message costs. Otherwise the mod sends the model nothing and makes no network calls of its own.

Limitations

• The pane opens by itself only in a terminal at least 144 columns wide. Narrower, a toast says how many diagrams are ready and /show-me opens the pane.
• Each new diagram waits for a browser launch, so the pane shows “rendering…” for a moment first.
• Without a kitty-graphics terminal, claude-mermaid draws mermaid fences as box art inside the transcript instead, with no extra binary.