## Mermaid charts in Claude Code's terminal: what a mod could do that my VS Code harness couldn't _prismantis is a Claude Code mod that redraws replies with colored tables, highlighted code and mermaid charts, and nudges Claude to actually draw them. A year ago I tried the same thing as a VS Code extension and dropped it._  _One reply on the Dracula theme. Everything here is text the mod redrew._ Every day I watch two terminals. In one, Codex prints a table with a colored header, a rule under it, versions in green. In the other, Claude Code prints the same table as pipes and dashes. prismantis is the fix: a Claude Code mod that redraws every reply with colored tables, highlighted code and mermaid diagrams, right inside the terminal. ### What did I try first? What I wanted was small: mermaid charts and some basic HTML rendering in Claude's replies. About a year ago I built a harness around Claude Code as a VS Code extension to get them. It was bad. I dropped it, and the tables stayed pipes and dashes. ### What changed on 1 Oct? Claude Code 2.1.287 shipped [mods](https://claude.com/blog/claude-code-mods). A mod is a plugin made of TypeScript function hooks that run inside Claude Code. One hook is `ui.render`. Claude Code calls it for every piece of the transcript it is about to draw, hands you the props, and asks what to draw instead. For an assistant reply, the props are the reply's markdown. You return a tree of `Box` and `Text` elements, and that is what lands on screen. No extension. No second window. The next day prismantis went from 0.1.0 to 0.3.2. Four versions, all dated 2 Oct in the changelog. I read the announcement in the morning and had a working table by lunch. The name is prism plus mantis. The mantis shrimp has 12 to 16 kinds of color receptors. Your terminal had 8. ### Why did I delete the best-looking feature? Version 0.2 drew real mermaid diagrams. It shelled out to mermaid-cli, rendered a PNG, and showed it in terminals that speak the kitty graphics protocol. Mods run in-process, inside Claude Code, and they aren't sandboxed. A mod that spawns programs and writes image files is a mod you have to trust a lot more than one that only moves text around. 0.3 removed image mode and the mermaid-cli dependency. Diagrams draw as colored box art now. The mod runs no external programs, writes no files, reads no files and makes no network calls. ### What did a second reviewer find? I built it with Claude Code, in Claude Code. I described what I wanted, Claude read the API declarations the engine writes next to every mod, and I looked at screenshots and said "almost" a lot. Then I asked a second model, Codex, to review it. It flagged 12 issues. The worst one was quiet. The copy button on a table gave back my redrawn table instead of the markdown Claude wrote, so a pasted table came back reformatted. The other bad one: a fence of four backticks closed on the first three-backtick line inside it, which broke every code example nested in a code example. I fixed most of them, documented one and skipped two as rare. The fixes came with 10 regression tests, and I ran them against the old code first. 7 failed there, which is the only way I trust a regression test. ### Why didn't Claude draw any charts? Once the charts rendered, I noticed something annoying. Claude almost never wrote one. It doesn't know the terminal can draw a mermaid block, so it writes a table or a paragraph instead. The obvious fix is one line in the system prompt. Plugins can't do that. Claude Code's built-in `sec-default` policy keeps the system prompt for the organization, not for whatever you installed. So 0.3.2 added `diagramHints`. The mod attaches a short note to each prompt you type, read by the model and never shown, saying tables, code, mermaid diagrams and `xychart-beta` charts render here. It costs about 80 tokens per prompt. It is off whenever mermaid is off, and skipped for headless `claude -p` runs. After that, charts started showing up without anyone asking for them. > Drawing the chart was the easy part. Getting Claude to write one was the work. ### What does it draw? Tables get a colored header, rules, column alignment from `:---:` and colored numbers, sized to the terminal. Code gets a language header and Prism highlighting in 24 languages. Mermaid covers flowcharts, sequence, state, class and ER diagrams, plus bar and line charts, one color per box, participant and bar. Every code block, table, list and quote has a copy button; diagrams have two, one for the mermaid source and one for the drawn art. Tool calls shrink to one line, `Ran gh pr view 12`, and collapsed groups to a summary like `Ran 3 commands, read 2 files`. 15 MIT themes ship, plus `mono`, and each of the 20 color slots can be overridden in `/config`. ### What did the mod API teach me? 1. **Hooks run without Node.** No `require`, no package imports, no dynamic `import()`. Every library has to be bundled into one ESM file. I bundle two, beautiful-mermaid and Prism, 206 KB together, both MIT. 2. **The engine handle can't cross a file import.** `claude plugin validate` doesn't notice. `claude plugin test` does, with "hooks module did not load". All my code that touches `$` lives in one file now. 3. **The built-in Markdown element takes no colors.** So a mod that themes replies has to parse markdown itself. Mine is regex, not CommonMark. It covers what Claude writes. 4. **There is no font size, and the clipboard takes text only.** Headings get bold, underline or a rule instead. A diagram can't be copied as a picture. The whole thing is about 950 lines of TypeScript and 52 tests. CI runs them on Linux, macOS and Windows against the newest Claude Code, and on Linux against 2.1.287, the oldest with mods. It also type-checks, rebuilds the bundled libraries byte for byte, fails if a bundled package isn't MIT, and installs the plugin into a clean config. ### What doesn't work yet? The parser is not CommonMark, so nested quotes and HTML draw as plain text. CJK and emoji count as two columns in tables, and terminals disagree on a few emoji, so those can still be off by one. Pie charts don't render. I've hand-tested it in the macOS terminal only. All of it is reversible. Press ctrl+o on any reply to see the original, or turn the mod off in `/plugin` and Claude Code's own renderer comes back. ### How do I try it? ```text /plugin marketplace add NahumLitvin/prismantis /plugin install prismantis@prismantis ``` Needs Claude Code 2.1.287 or later. Then ask Claude to print `docs/demo.md` from the repo verbatim as its whole reply. Every feature is in that one file. Pick a theme in `/config`. MIT licensed, source at https://github.com/NahumLitvin/prismantis. ### Credits Diagrams come from [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid), highlighting from [Prism](https://github.com/PrismJS/prism). The palettes belong to their authors: Catppuccin, Dracula, Nord, Tokyo Night, Gruvbox, Rosé Pine, Everforest, GitHub Primer, One Dark and Solarized, all credited in the repo's [third-party notices](https://github.com/NahumLitvin/prismantis/blob/main/docs/THIRD_PARTY_NOTICES.md). _Nahum Litvin, Lead Platform Engineer._