mermaid

mermaid redraws the mermaid code blocks in Claude’s replies as Unicode box diagrams, in the Claude Code transcript, right where the fence was. It hooks a single event, renders locally and costs zero tokens. WhiteKr wrote it for the diagrams that skills like /show-me put in a reply.

The plugin is simply called mermaid. This page lives at whitekr-mermaid because claude-mermaid, another mod that draws the same fences, is already in the directory.

What it does

• Renders every closed mermaid fence with the ASCII renderer from beautiful-mermaid, bundled into the hook.
• Covers the kinds that renderer knows: flowcharts, sequence, class, ER and state diagrams among them.
• Leaves the fence as Claude wrote it in three cases: the source does not parse, the diagram is wider than the terminal, or the fence is still open because the reply is streaming.
• Turns a literal \n inside a label into a space, because the renderer would otherwise break the box on it.
• One option, Plain ASCII (useAscii, off by default): draws with +, -, | and > instead of box-drawing glyphs. Turn it on when your terminal or font gives ─│▶ two cells and the lines drift. Set it from the plugin entry in /config or under pluginConfigs.mermaid.options in your settings.

Install

Needs Claude Code 2.1.287 or later and a terminal font with box-drawing characters, or the Plain ASCII option.

claude plugin marketplace add WhiteKr/whitekr-claude-plugins
claude plugin install mermaid@whitekr-claude-plugins

The README, written in Korean, gives these two as /plugin commands typed inside a Claude Code session. The marketplace is the author’s separate whitekr-claude-plugins repository, not this repo, which carries only the plugin. To try a checkout instead, clone it and start claude --plugin-dir ./claude-plugin-mermaid. There is nothing to run afterwards: ask Claude for a diagram and the boxes appear once the closing fence has streamed in.

How it works

The module hooks ui.render for the AssistantMessage component. Each time Claude Code is about to draw a reply, the hook scans it for closed mermaid fences, renders each one and passes the message on with the art in place of the code. Only the screen changes: the saved transcript you open with ctrl+o keeps the original mermaid source, so nothing you copy later is altered.

hooks/hooks.js is plain JavaScript, an esbuild bundle of the author’s src/hooks.js plus beautiful-mermaid’s ASCII path, committed to the repo so a marketplace install needs no build step. Rendering happens inside that bundle. The hook asks the model nothing, so it consumes no tokens, and it keeps no store of its own: the single setting lives in Claude Code’s plugin configuration.

The same renderer powers claude-mermaid, which adds color, a /mermaid command, left-to-right relayout and clipping of wide art. WhiteKr’s mermaid is the minimal take: one event, one option, monochrome, and a diagram that does not fit keeps its fence.

Limitations

• Version 0.1.0, published on 2026-09-16. The author documents it for the terminal transcript only.
• A diagram wider than the terminal is not drawn at all; widen the window and it renders on the next redraw.
• Diagram kinds outside beautiful-mermaid’s ASCII renderer fail to parse and keep their fence.
• Terminals that give box-drawing glyphs two cells misalign the lines. Plain ASCII is the workaround.