# weichieh0204/ccmermaid architecture

> Architecture diagram of the GitHub repository weichieh0204/ccmermaid, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/weichieh0204/ccmermaid
- Repository: https://github.com/weichieh0204/ccmermaid

## Overview

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: [`hooks/render.ts`](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/render.ts) (Type dispatcher), [`hooks/common.ts`](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/common.ts) (Text and art helpers), [`hooks/register.tsx`](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/register.tsx) (Render hook), [`hooks/diagrams/state.ts`](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/state.ts) (State renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["Claude Code integration"]
  node_register["Render hook<br/>[register.tsx]"]
end

subgraph group_dispatch["Parsing and dispatch"]
  node_split["Fence splitting<br/>[render.ts]"]
  node_dispatcher["Type dispatcher<br/>[render.ts]"]
  node_common["Text and art helpers<br/>[common.ts]"]
end

subgraph group_renderers["Diagram renderers"]
  node_flowchart["Flowchart renderer<br/>[flowchart.ts]"]
  node_sequence["Sequence renderer<br/>[sequence.ts]"]
  node_state["State renderer<br/>[state.ts]"]
  node_gantt["Gantt renderer<br/>[gantt.ts]"]
  node_gitgraph["Git graph renderer<br/>[gitgraph.ts]"]
  node_pie["Pie renderer<br/>[pie.ts]"]
  node_mindmap["Mindmap renderer<br/>[mindmap.ts]"]
  node_timeline["Timeline renderer<br/>[timeline.ts]"]
end

subgraph group_copy["Copy and image"]
  node_png["PNG conversion<br/>[png.ts]"]
  node_macclip["macOS clipboard helper<br/>[clip_png_mac.js]"]
  node_winclip["Windows clipboard helper<br/>[clip_png.ps1]"]
end

node_claude(("Claude Code"))
node_reply["Assistant reply"]

node_claude -->|"fires hooks"| node_register
node_reply -->|"provides text"| node_register
node_register -->|"splits reply"| node_split
node_register -->|"renders blocks"| node_dispatcher
node_dispatcher -->|"dispatches flowcharts"| node_flowchart
node_dispatcher -->|"dispatches sequences"| node_sequence
node_dispatcher -->|"dispatches states"| node_state
node_dispatcher -->|"dispatches Gantt"| node_gantt
node_dispatcher -->|"dispatches git graphs"| node_gitgraph
node_dispatcher -->|"dispatches pies"| node_pie
node_dispatcher -->|"dispatches mindmaps"| node_mindmap
node_dispatcher -->|"dispatches timelines"| node_timeline
node_state -->|"rewrites for drawing"| node_flowchart
node_flowchart -->|"uses text helpers"| node_common
node_sequence -->|"uses text helpers"| node_common
node_state -->|"uses text helpers"| node_common
node_gantt -->|"uses text helpers"| node_common
node_gitgraph -->|"uses text helpers"| node_common
node_pie -->|"uses text helpers"| node_common
node_mindmap -->|"uses text helpers"| node_common
node_timeline -->|"uses text helpers"| node_common
node_register -->|"copies diagram image"| node_png
node_png -->|"invokes on macOS"| node_macclip
node_png -->|"invokes on Windows"| node_winclip

click node_register "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/register.tsx"
click node_split "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/render.ts"
click node_dispatcher "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/render.ts"
click node_common "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/common.ts"
click node_flowchart "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/flowchart.ts"
click node_sequence "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/sequence.ts"
click node_state "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/state.ts"
click node_gantt "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/gantt.ts"
click node_gitgraph "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/gitgraph.ts"
click node_pie "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/pie.ts"
click node_mindmap "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/mindmap.ts"
click node_timeline "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/timeline.ts"
click node_png "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/png.ts"
click node_macclip "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/clip_png_mac.js"
click node_winclip "https://github.com/weichieh0204/ccmermaid/blob/main/hooks/clip_png.ps1"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_register toneBlue
class node_split,node_dispatcher,node_common toneAmber
class node_flowchart,node_sequence,node_state,node_gantt,node_gitgraph,node_pie,node_mindmap,node_timeline toneMint
class node_png,node_macclip,node_winclip toneRose
class node_claude,node_reply toneIndigo
```

## Components

### Claude Code integration

- [Render hook](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/register.tsx): `hooks/register.tsx`

### Parsing and dispatch

- [Fence splitting](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/render.ts): `hooks/render.ts`
- [Type dispatcher](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/render.ts): `hooks/render.ts`
- [Text and art helpers](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/common.ts): `hooks/common.ts`

### Diagram renderers

- [Flowchart renderer](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/flowchart.ts): `hooks/diagrams/flowchart.ts`
- [Sequence renderer](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/sequence.ts): `hooks/diagrams/sequence.ts`
- [State renderer](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/state.ts): `hooks/diagrams/state.ts`
- [Gantt renderer](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/gantt.ts): `hooks/diagrams/gantt.ts`
- [Git graph renderer](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/gitgraph.ts): `hooks/diagrams/gitgraph.ts`
- [Pie renderer](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/pie.ts): `hooks/diagrams/pie.ts`
- [Mindmap renderer](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/mindmap.ts): `hooks/diagrams/mindmap.ts`
- [Timeline renderer](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/diagrams/timeline.ts): `hooks/diagrams/timeline.ts`

### Copy and image

- [PNG conversion](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/png.ts): `hooks/png.ts`
- [macOS clipboard helper](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/clip_png_mac.js): `hooks/clip_png_mac.js`
- [Windows clipboard helper](https://github.com/weichieh0204/ccmermaid/blob/main/hooks/clip_png.ps1): `hooks/clip_png.ps1`

### Other components

- **Claude Code**
- **Assistant reply**

## Connections

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