weichieh0204/ccmermaid

How weichieh0204/ccmermaid works

ccmermaid is a Claude Code mod that replaces supported Mermaid code blocks in assistant replies with colored terminal text diagrams. Its main workflow is the ui.render hook splitting replies, dispatching each diagram to a type-specific renderer, and preserving unsupported diagrams as code; users can copy source, plain art, or PNG. PNG copying uses platform-specific helpers. Renderer and hook relationships are shown where the excerpts or source index establish them; platform utility discovery is documented, but its full implementation is not sampled.

Main entry points: render.ts Type dispatcher · common.ts Text and art helpers · register.tsx Render hook · state.ts State renderer

Components 17

Claude Code integration

Render hook hooks/register.tsx

Parsing and dispatch

Fence splitting hooks/render.ts
Type dispatcher hooks/render.ts
Text and art helpers hooks/common.ts

Diagram renderers

Flowchart renderer hooks/diagrams/flowchart.ts
Sequence renderer hooks/diagrams/sequence.ts
State renderer hooks/diagrams/state.ts
Gantt renderer hooks/diagrams/gantt.ts
Git graph renderer hooks/diagrams/gitgraph.ts
Pie renderer hooks/diagrams/pie.ts
Mindmap renderer hooks/diagrams/mindmap.ts
Timeline renderer hooks/diagrams/timeline.ts

Copy and image

PNG conversion hooks/png.ts
macOS clipboard helper hooks/clip_png_mac.js
Windows clipboard helper hooks/clip_png.ps1

Other components

Claude Code
Assistant reply

Connections 24

Claude Code → Render hook: fires hooks hooks/register.tsx
Assistant reply → Render hook: provides text hooks/register.tsx
Render hook → Fence splitting: splits reply hooks/register.tsx
Render hook → Type dispatcher: renders blocks hooks/register.tsx
Type dispatcher → Flowchart renderer: dispatches flowcharts hooks/render.ts
Type dispatcher → Sequence renderer: dispatches sequences hooks/render.ts
Type dispatcher → State renderer: dispatches states hooks/render.ts
Type dispatcher → Gantt renderer: dispatches Gantt hooks/render.ts
Type dispatcher → Git graph renderer: dispatches git graphs hooks/render.ts
Type dispatcher → Pie renderer: dispatches pies hooks/render.ts
Type dispatcher → Mindmap renderer: dispatches mindmaps hooks/render.ts
Type dispatcher → Timeline renderer: dispatches timelines hooks/render.ts
State renderer → Flowchart renderer: rewrites for drawing hooks/diagrams/state.ts
Flowchart renderer → Text and art helpers: uses text helpers hooks/diagrams/flowchart.ts
Sequence renderer → Text and art helpers: uses text helpers hooks/diagrams/sequence.ts
State renderer → Text and art helpers: uses text helpers hooks/diagrams/state.ts
Gantt renderer → Text and art helpers: uses text helpers hooks/diagrams/gantt.ts
Git graph renderer → Text and art helpers: uses text helpers hooks/diagrams/gitgraph.ts
Pie renderer → Text and art helpers: uses text helpers hooks/diagrams/pie.ts
Mindmap renderer → Text and art helpers: uses text helpers hooks/diagrams/mindmap.ts
Timeline renderer → Text and art helpers: uses text helpers hooks/diagrams/timeline.ts
Render hook → PNG conversion: copies diagram image hooks/register.tsx
PNG conversion → macOS clipboard helper: invokes on macOS hooks/png.ts
PNG conversion → Windows clipboard helper: invokes on Windows hooks/png.ts

Drawn by GitDiagram on November 12, 2026 from the repository's file tree, README and source files. Read as Markdown ·