---
title: "mermaid-draw"
url: "https://claudemods.dev/ja/builds/mermaid-draw-5f700a"
source: "https://github.com/galElmalah/claude-mods/tree/main/claude-mermaid"
source_type: "github"
repo: "https://github.com/galElmalah/claude-mods/tree/main/claude-mermaid"
author: "galElmalah"
author_handle: "galElmalah"
stars: 4
category: "テーマ・外観"
categories: ["themes"]
tags: ["diagrams", "hooks", "mermaid", "plugin", "rendering", "terminal"]
permission_level: 2
scan_complete: true
install: "claude plugin marketplace add galElmalah/claude-mods\nclaude plugin install mermaid-draw@gal-mods"
added: "2026-10-12T04:04:56.414Z"
updated: "2026-10-10T12:54:13Z"
locale: "ja"
content_locale: "ja"
---

# mermaid-draw

Claude Code での Mermaid 図: Claude が書くすべての ```mermaid ブロックは、トランスクリプト内のフェンスがあった場所に、カラーのボックスアートとして描画されます。関数フック（早期アクセス）と対話型ターミナルが必要です。

## Description

# mermaid-draw

Claude Code での Mermaid 図。Claude が書くすべての ```` ```mermaid ```` ブロックは、
トランスクリプト内のフェンスがあった場所に、カラーのボックスアートとして描画されます。
トークンは一切消費しません。プラグインはローカルで描画し、画面上に他のものは現れません
— ペインもボタンもありません。

```
❯ how does a prompt become a reply?

⏺ A prompt flows through understanding and a decision point before a reply.

  ┌────────┐     ┌────────────┐     ◇────────────◇     ┌───────┐
  │        │     │            │     │            │     │       │
  │ Prompt ├────►│ Understand ├────►│ Use Tools? ├─Yes►│ Reply │
  │        │     │            │     │            │     │       │
  └────────┘     └────────────┘     ◇────────────◇     └───────┘
```

フローチャート、状態図、シーケンス図、クラス図、ER 図、xy チャートが描画されます。
その他の種類（ガント、円グラフ、マインドマップなど）はフェンスを保持します。
トップダウンのフローチャートまたは状態図は、適合して何も失わない場合、
左から右にレイアウトされます（ターミナルでは行が貴重です。30 行ではなく 5 行）。
また、状態図の `[*]` の開始と終了は、レンダラーが空のボックスとして描画するため、
省略されます。

Mod: Claude Code の **関数フック** 上に構築されたプラグインで、TypeScript が
Claude Code 自身のプロセス内で実行されます。早期アクセスであるため、
以下の環境変数が必要で、API はリリース間で変更される可能性があります。

## 要件

- Claude Code 2.1.270 以降、`CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1` 付き。
- ボックス描画文字を持つフォントを備えた対話型ターミナルセッション
  （持たない場合は `/mermaid ascii on`）。`claude -p` では何も描画されません。

## クイックスタート

1. `~/.claude/settings.json` で関数フックを有効にします:

   ```json
   { "env": { "CLAUDE_CODE_ENABLE_FUNCTION_HOOKS": "1" } }
   ```

   または 1 つのセッションの場合: `CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1 claude`。

2. クローンからプラグインをロードします（リポジトリ自身の `.claude/settings.json`
   は、その中で開始されたセッションの変数を設定します）:

   ```sh
   git clone https://github.com/galElmalah/claude-mods
   cd claude-mods
   claude --plugin-dir claude-mermaid
   ```

   または、リポジトリのマーケットプレイス `gal-mods` からインストールします:

   ```sh
   claude plugin marketplace add galElmalah/claude-mods
   claude plugin install mermaid-draw@gal-mods
   ```

3. Claude に図を依頼します。返信で描画されます。

`claude-mermaid@claude-mods` からアップグレードしますか？
[移行手順](../README.md#migrating-from-the-old-names) に従ってください。

## 使用

| コマンド | 機能 |
| --- | --- |
| `/mermaid` | 現在の設定を表示します |
| `/mermaid ascii on\|off` | ボックス描画グリフの代わりにプレーンな `+--|` アートを使用します（デフォルトはオフ） |
| `/mermaid color on\|off` | 境界線はシアン、矢印は黄色、線は薄暗くします（デフォルトはオン） |
| `/mermaid lr on\|off` | 何も失わない場合、トップダウンのフローチャートと状態図を左から右にレイアウトします（デフォルトはオン） |
| `/mermaid reset` | デフォルトに戻します |

設定は、すでに画面上にある図を再描画します。設定はセッションをまたいで
プラグインのストアに保持されます。

## 仕組み

- `hooks/register.ts` はフックモジュールです。`AssistantMessage` の `ui.render` をフックします。ターミナル上でカラーが有効な場合、独自のツリーを返します（散文には `Markdown`、図の各行には 1 つの `Text`、その span の props として色）。Claude Code 2.1.287 以降、書き換えられた `props.text` にはエスケープシーケンスが含まれない可能性があるためです。そうでない場合は、閉じられた各 mermaid フェンスをプレーンアートのテキストフェンスに置き換えます。また、`/mermaid` の `command.run` もフックします。
- `hooks/diagrams.ts` は純粋な部分です。フェンスの検出、レンダリング、横向きレイアウトの選択（上から下へのレンダリングのすべての単語が生き残る場合にのみ保持されます。レンダラーが逆方向に走るエッジのラベルを上書きする可能性があるため）、幅へのフィッティング、シリアライズを行います。`bun test` がこれをカバーします。
- `hooks/vendor/mermaid-ascii.js` は [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) の ASCII レンダラーで、`scripts/build-vendor.mjs` によってバンドルされています（フックモジュールは Node なしで実行され、パッケージをインポートできません）。レンダラーは ANSI のみを出力するため、センチネルカラーのテーマに対して truecolor で実行され、エスケープは役割（ボーダー、線、矢印、テキスト）にデコードされ、その後ターミナル自身の 16 色パレット用に着色されるので、ライトテーマとダークテーマの両方で読めます。
- バンドルは 1 つのことをパッチします。上流の A* エッジルーターは無制限のグリッドを検索するため、エッジのターゲットをフェンスで囲むグラフは約 25 秒実行され、`Map maximum size exceeded` で死にました。これはフックの予算全体を焼き尽くすでしょう。ベンダー版のコピーは検索を制限し、直線セグメントにフォールバックするので、同じグラフが約 60 ms で描画されます。レンダリングされたアートはソースとグリフセットごとにキャッシュされます。フックは最初の描画の数ミリ秒後に落ち着きます。

## 開発

```sh
npm install                 # esbuild, beautiful-mermaid, aimock, bun types
npm run build:vendor        # rebuilds hooks/vendor/mermaid-ascii.js
npm test                    # unit tests of hooks/diagrams.ts
npm run test:plugin         # render-hook tests in Claude Code's plugin test kit
npm run test:e2e            # the plugin inside a real Claude Code (below)
npm run typecheck           # against ../.claude/types (run /plugin-types first)
npm run validate            # what the engine sees the module hook and call
```

型チェックにはあなたの Claude Code ビルドの宣言が必要です。リポジトリのルートで関数フックを有効にしてセッションを開き、`/plugin-types` を実行すると、git に無視される `.claude/types/` が書き込まれます。

プラグインテストキットと Bun は異なるランタイムを使用します。`test:plugin` はフックとキットのテストを一時的なプラグインフォルダーにコピーするので、Claude のランナーが Bun テストをロードしようとしません。`npm run test:all` は両方のスイートとエンドツーエンドテストをそれぞれのランナーで実行します。

### エンドツーエンドテスト

`tests/e2e` は tmux ペインで実際の対話型 Claude Code を動かし、その
返信は [aimock](https://github.com/CopilotKit/aimock)（ローカルポート上の
Anthropic-API モックで、`ANTHROPIC_BASE_URL` をそこに向ける）によって
スクリプト化され、プラグインはチェックアウトから `--plugin-dir` で
読み込まれます。各テストはプロンプトを送信し、画面に何かが表示されるのを待ち、
キャプチャしたテキストに対してアサートし、色が重要な場合は `-e` を
使います。描画されるすべての種類、色、1 つの返信内の 2 つの図、
描画されない種類、以前ハングしていた高密度グラフ、リスト項目内のフェンス、
横向きレイアウト、すべての `/mermaid` 形式、そしてアートに対して狭すぎる
ターミナルをカバーします。PATH 上に `tmux` と `claude` が必要で、チェックアウトが
Claude Code の信頼するフォルダーである必要があります。それ以外はスキップされます。約 10 秒。

`hooks/` への編集は実行中の `--plugin-dir` セッションにホットリロードされます。
`--debug-file /tmp/mermaid.log` で Claude を起動すると、エンジンが何を
拒否したかを確認できます。

## 制限

- beautiful-mermaid が描画しない種類（gantt、pie、mindmap、gitGraph、
  journey、timeline、quadrant、C4、…）はフェンスを保持します。
- トランスクリプトより幅の広いアートは右側で `…` で切り取られ、どれだけ
  超えているかを示す行が付きます。ターミナルを広くしてください。
- 色はターミナル上でのみ描画されます。デスクトップ、VS Code、モバイルでは
  プレーンなアートが表示されます。図の間の散文が 10000 文字（1 つの `Markdown`
  要素の上限）を超える返信もプレーンで描画されます。

## ライセンス

MIT。

## Install

```
claude plugin marketplace add galElmalah/claude-mods
claude plugin install mermaid-draw@gal-mods
```

## Original README

# mermaid-draw

Mermaid diagrams in Claude Code. Every ```` ```mermaid ```` block Claude writes
is drawn as box art, in colour, right where the fence was in the transcript.
Nothing costs a token: the plugin draws locally, and nothing else appears on
screen — no pane, no buttons.

```
❯ how does a prompt become a reply?

⏺ A prompt flows through understanding and a decision point before a reply.

  ┌────────┐     ┌────────────┐     ◇────────────◇     ┌───────┐
  │        │     │            │     │            │     │       │
  │ Prompt ├────►│ Understand ├────►│ Use Tools? ├─Yes►│ Reply │
  │        │     │            │     │            │     │       │
  └────────┘     └────────────┘     ◇────────────◇     └───────┘
```

Flowcharts, state, sequence, class and ER diagrams and xy charts are drawn;
other kinds (gantt, pie, mindmap, …) keep their fence. A top-down flowchart
or state diagram is laid out left to right when that fits and loses nothing
(rows are dear in a terminal: 5 rows instead of 30), and a state diagram's
`[*]` start and end, which the renderer draws as empty boxes, are left out.

A mod: a plugin built on Claude Code **function hooks**, TypeScript that runs
inside Claude Code's own process. Early access, so it needs the environment
variable below and the API can change between releases.

## Requirements

- Claude Code 2.1.270 or later with `CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1`.
- An interactive terminal session with a font that has box-drawing
  characters (`/mermaid ascii on` for one that does not). Nothing draws in
  `claude -p`.

## Quick start

1. Turn function hooks on, in `~/.claude/settings.json`:

   ```json
   { "env": { "CLAUDE_CODE_ENABLE_FUNCTION_HOOKS": "1" } }
   ```

   Or for one session: `CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1 claude`.

2. Load the plugin from a clone (the repo's own `.claude/settings.json`
   sets the variable for sessions started inside it):

   ```sh
   git clone https://github.com/galElmalah/claude-mods
   cd claude-mods
   claude --plugin-dir claude-mermaid
   ```

   Or install it from the repo's marketplace, `gal-mods`:

   ```sh
   claude plugin marketplace add galElmalah/claude-mods
   claude plugin install mermaid-draw@gal-mods
   ```

3. Ask Claude for a diagram. It is drawn in the reply.

Upgrading from `claude-mermaid@claude-mods`? Follow the
[migration instructions](../README.md#migrating-from-the-old-names).

## Use

| command | what it does |
| --- | --- |
| `/mermaid` | shows the current settings |
| `/mermaid ascii on\|off` | plain `+--|` art instead of box-drawing glyphs (default off) |
| `/mermaid color on\|off` | borders cyan, arrows yellow, lines dim (default on) |
| `/mermaid lr on\|off` | lay top-down flowcharts and state diagrams out left to right when nothing is lost (default on) |
| `/mermaid reset` | the defaults again |

A setting redraws the diagrams already on screen. Settings are kept in the
plugin's store across sessions.

## How it works

- `hooks/register.ts` is the hooks module. It hooks `ui.render` of
  `AssistantMessage`: with colour on, on the terminal, it returns a tree of its
  own (`Markdown` for the prose, one `Text` per diagram line, the colours as
  props on its spans), since a rewritten `props.text` may carry no escape
  sequence from Claude Code 2.1.287 on; otherwise it swaps each closed mermaid
  fence for a text fence of plain art. It also hooks `command.run` for
  `/mermaid`.
- `hooks/diagrams.ts` is the pure part: finding fences, rendering, choosing
  the sideways layout (kept only when every word of the top-down render
  survives, since the renderer can overwrite the label of an edge that runs
  back the other way), fitting to a width, serializing. `bun test` covers it.
- `hooks/vendor/mermaid-ascii.js` is [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid)'s
  ASCII renderer bundled by `scripts/build-vendor.mjs` (hooks modules run
  with no Node and cannot import packages). The renderer only emits ANSI, so
  it is run in truecolor against a theme of sentinel colours and the escapes
  are decoded back into roles (border, line, arrow, text), then coloured for
  the terminal's own 16-colour palette so light and dark themes both read.
- The bundle patches one thing: upstream's A* edge router searches an
  unbounded grid, so a graph that fences an edge's target in ran for ~25 s
  and died on `Map maximum size exceeded`, which would burn the hook's whole
  budget. The vendored copy caps the search and falls back to a straight
  segment, so the same graph draws in ~60 ms. Rendered art is cached per
  source and glyph set; a hook settles in a few ms after the first draw.

## Develop

```sh
npm install                 # esbuild, beautiful-mermaid, aimock, bun types
npm run build:vendor        # rebuilds hooks/vendor/mermaid-ascii.js
npm test                    # unit tests of hooks/diagrams.ts
npm run test:plugin         # render-hook tests in Claude Code's plugin test kit
npm run test:e2e            # the plugin inside a real Claude Code (below)
npm run typecheck           # against ../.claude/types (run /plugin-types first)
npm run validate            # what the engine sees the module hook and call
```

Typechecking needs the declarations of your Claude Code build: open a
session in the repository root with function hooks on and run `/plugin-types`,
which writes the git-ignored `.claude/types/`.

The plugin test kit and Bun use different runtimes. `test:plugin` copies the
hooks and kit tests into a temporary plugin folder so Claude's runner does
not try to load the Bun tests. `npm run test:all` runs both suites and the
end-to-end tests with their respective runners.

### End-to-end tests

`tests/e2e` drives a real interactive Claude Code in a tmux pane, its
replies scripted by [aimock](https://github.com/CopilotKit/aimock) (an
Anthropic-API mock on a local port, `ANTHROPIC_BASE_URL` pointed at it), the
plugin loaded from the checkout with `--plugin-dir`. Each test sends a
prompt, waits for the screen to show a thing, and asserts on the captured
text, with `-e` where colour matters. It covers every drawn kind, colours,
two diagrams in one reply, an undrawn kind, the dense graph that used to
hang, a fence inside a list item, the sideways layout, every `/mermaid` form, and a terminal too
narrow for the art. Needs `tmux` and `claude` on PATH, and the checkout to
be a folder Claude Code trusts; skipped otherwise. About 10 s.

Edits to `hooks/` hot-reload into a running `--plugin-dir` session. Start
Claude with `--debug-file /tmp/mermaid.log` to see what the engine refused.

## Limits

- Kinds beautiful-mermaid does not draw (gantt, pie, mindmap, gitGraph,
  journey, timeline, quadrant, C4, …) keep their fence.
- Art wider than the transcript is cut at the right with `…` and a line
  saying by how much; make the terminal wider.
- Colours are drawn on the terminal alone; desktop, VS Code and mobile show
  plain art. A reply whose prose between diagrams runs past 10000 characters
  (one `Markdown` element's cap) is drawn plain too.

## License

MIT.