About this mod

mermaid

A function-hook plugin that renders ```mermaid code blocks in Claude responses as Unicode box diagrams in the terminal transcript. Targets mermaid code emitted by skills like /show-me.

Installation

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

During development, load it with claude --plugin-dir <this folder>.

Behavior

• Hooks AssistantMessage in ui.render and replaces closed ```mermaid fences with the output of the beautiful-mermaid ASCII renderer. Saved messages (ctrl+o) stay unchanged; only the screen changes.
• Cases where the original is kept: parse failure, diagram width exceeds terminal width, or the fence is not yet closed (streaming in progress).
• Literal \n inside labels is replaced with a space (if the renderer draws it as a line break, the box breaks).
• Supported diagrams follow the scope supported by the beautiful-mermaid ASCII renderer (flowchart, sequence, class, ER, state, etc.).

Options

In /config under plugin items, or settings pluginConfigs.mermaid.options:

• useAscii (boolean, default false): Draw with pure ASCII (+-|>) instead of box characters. Turn this on when the terminal or font renders ambiguous-width characters like ─│▶ as 2 cells, causing lines to misalign.

Development

hooks/hooks.js is the esbuild bundle of src/hooks.js plus the beautiful-mermaid ASCII path, and is committed (marketplace installs use it as-is without a build).

npm i
npm test   # build + test/hooks.test.mjs