claude-gfm-render

Alerts, task lists, strikethrough and Mermaid diagrams, drawn inside Claude Code's replies.

Install · Before / after · What it handles · How it works

---

Claude writes GitHub Flavored Markdown all day: > [!WARNING] callouts, - [ ] checklists, ```mermaid diagrams. The terminal shows them as raw text. This mod draws them, without touching the message itself (ctrl+o still shows the original).

Install

git clone https://github.com/briangtn/claude-gfm-render.git ~/perso/claude-gfm-render
claude --plugin-dir ~/perso/claude-gfm-render

To load it in every session, terminal and desktop app alike, add it to ~/.claude/settings.json:

{
  "env": {
    "CLAUDE_CODE_PLUGIN_DIRS": "~/perso/claude-gfm-render"
  }
}

[!NOTE] Mods (function hooks) are an early-access API of Claude Code and may change between releases. Built and tested on Claude Code 2.1.286 and 2.1.287. No build step: the mod is plain files, and the folder is watched, so an edit reloads it in the running session.

Claude writes GFM on its own

Drawing GFM is half the job: Claude also has to write it. The mod ships GFM.md, a short note on what the transcript can draw (alerts, task lists, strikethrough, the Mermaid types that render), which a SessionStart hook adds to Claude's context at startup, after /clear and after a compaction. No CLAUDE.md to edit.

To turn it off and keep only the rendering, in ~/.claude/settings.json:

{
  "pluginConfigs": {
    "gfm-render": { "options": { "promptHint": false } }
  }
}

Before / after

Real claude sessions (100 columns, captured with tmux); before is the same reply without the mod.

On desktop, VS Code and mobile

Alerts get a little more room, captured in the Claude desktop app (dark theme):

Mermaid becomes a real SVG that follows the light or dark scheme. Below, the mod's own output rendered by Chrome (not a capture of the app):

What it handles

Known glitch: in the terminal, an edge label leaving a {decision} node can show a stray ├ (beautiful-mermaid's ASCII layout, visible in the flowchart above).

How it works

The mod hooks ui.render on AssistantMessage: every text block of a reply goes through it, gets split into markdown, alert and Mermaid segments, and comes back as a tree the surface draws. A block with nothing to draw goes to the native renderer untouched.

graph LR
  A[Reply block] --> B{GFM inside?}
  B -->|no| N[Native renderer]
  B -->|alert| C[Colored box]
  B -->|mermaid| D{Surface}
  D -->|terminal| E[Unicode art, in process]
  D -->|desktop| F[SVG via node]

Mermaid is rendered by beautiful-mermaid, split in two because a hooks module may not import a file over 1 MiB and has no eval, while the ELK layout engine the SVG needs weighs 1.6 MB:

• Terminal: hooks/vendor/mermaid-ascii.js, the ASCII renderer alone (84 KB), imported by the mod.
• Desktop / VS Code / mobile: renderer/svg.mjs run by node, once per diagram, then cached.

Develop

npm test                # claude plugin test .
npm run validate        # claude plugin validate .
npm run build:vendor    # rebuild both Mermaid bundles with bun

Issues and PRs welcome, especially screenshots from other terminals and the desktop app's light theme.

License

MIT. Vendored bundles keep their own licenses: beautiful-mermaid (MIT) and elkjs (EPL-2.0), in renderer/.