# Diagram

Use the smallest visual when prose must carry structure, control flow, call depth...

- Repository: https://github.com/Yeachan-Heo/oh-my-claudecode (40492 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -g -a claude-code -y`
Codex: `npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -g -a codex -y`
Cursor: `npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -g -a cursor -y`
Gemini CLI: `npx skills add Yeachan-Heo/oh-my-claudecode --skill diagram -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Yeachan-Heo/oh-my-claudecode`

## Description

Use the smallest visual when prose must carry structure, control flow, call depth, module ownership, or change shape: pseudocode, call tree, component/file tree, Mermaid diagram, or diff. Skip it when prose already answers the question.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

**Diagrams are load-bearing, not decoration.** Reach for one only when prose forces the reader to hold a whole shape in their head at once, then pick the smallest view that lets them see the shape instead of reconstructing it from sentences. Everything here renders in the conversation as text blocks or Mermaid; at most one artifact file is ever written.

## The vocabulary

Pick one view; two at most. More is noise.

**Pseudocode**, logic without language noise. Reduces a decision to its branching shape:

```text
on(request)
  if state file locked by another writer
    queue and return pending
  acquire lock
  write
  release
```

**Call tree**, runtime control flow. Depth shows who owns the flow; annotate where the interesting edge is:

```text
acquireStateFileLockSync()
  resolveLockPath()
  openExclusive()
  writePid()
```

**Component tree**, UI or module structure, with the boundaries that matter annotated inline:

```tsx
<SettingsPage> (src/routes/settings)
  <SessionList> (owns its fetches)
  <DangerZone>
    <ConfirmButton> (disabled until typed confirmation)
```

**File tree**, where responsibility lives; keep it shallow, one annotation per directory:

```text
src/
├── hooks/        # hook registry + types
├── tools/        # MCP tool handlers
└── workflow/     # registry + projections
```

**Mermaid**, interaction between parties, dataflow, or state transitions:

```mermaid
sequenceDiagram
    participant CLI
    participant Hook
    participant State
    CLI->>Hook: PreToolUse
    Hook->>State: read mode
    Hook-->>CLI: allow / deny + facts
```

**Diff**, the shape of a change when the surrounding structure already exists. Match the diff to the topic:

a component change:

```diff
 <SettingsPage>
   <SessionList />
   <DangerZone>
+    <ConfirmButton />
   </DangerZone>
```

a file-layout change:

```diff
 src/tools/
-└── state-tools.ts
+└── state-tools/
+   ├── handlers.ts
+   └── schema.ts
```

a control-flow change:

The rest: https://github.com/Yeachan-Heo/oh-my-claudecode/blob/HEAD/skills/diagram/SKILL.md