---
title: "mermaid"
url: "https://claudemods.dev/zh-tw/builds/mermaid-5a425a"
source: "https://github.com/WhiteKr/claude-plugin-mermaid"
source_type: "github"
repo: "https://github.com/WhiteKr/claude-plugin-mermaid"
author: "WhiteKr"
author_handle: "WhiteKr"
stars: 0
category: "主題與外觀"
categories: ["themes"]
tags: ["diagrams", "hooks", "mermaid", "plugin", "terminal-rendering", "ui-render"]
permission_level: 0
scan_complete: true
install: "claude plugin marketplace add WhiteKr/claude-plugin-mermaid\nclaude plugin install mermaid@whitekr-claude-plugins"
added: "2026-10-13T00:40:35.164Z"
updated: "2026-10-13T00:40:35.164Z"
locale: "zh-tw"
content_locale: "zh-tw"
---

# mermaid

一個 function-hook 外掛，將 Claude 回應中的 ```` ```mermaid ```` 程式碼區塊在終端 transcript 中渲染為 Unicode 方框圖表。對象是 `/show-me` 等技能輸出的 mermaid 程式碼。

## Description

# mermaid

一個 function-hook 外掛，將 Claude 回應中的 ```` ```mermaid ```` 程式碼區塊在終端 transcript 中渲染為 Unicode 方框圖表。對象是 `/show-me` 等技能輸出的 mermaid 程式碼。

## 安裝

```
/plugin marketplace add WhiteKr/whitekr-claude-plugins
/plugin install mermaid@whitekr-claude-plugins
```

開發期間以 `claude --plugin-dir <此資料夾>` 載入。

## 行為

- 掛鉤 `ui.render` 的 `AssistantMessage`，將已閉合的 ```` ```mermaid ```` 圍欄替換為 [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) ASCII 渲染器的繪製結果。已儲存的訊息（ctrl+o）不會改變，只有畫面會改變。
- 保留原文的情況：解析失敗、圖表寬度超過終端寬度、圍欄尚未閉合（串流中）。
- 標籤內的字面量 `\n` 替換為空格（渲染器若將其繪成換行，方框會破裂）。
- 支援的圖表遵循 beautiful-mermaid ASCII 渲染器支援的範圍（flowchart、sequence、class、ER、state 等）。

## 選項

在 `/config` 的 plugin 項目或 settings 的 `pluginConfigs.mermaid.options` 中：

- `useAscii`（boolean，預設 false）：以純 ASCII（`+-|>`）繪製，而非方框字元。當終端或字型將 `─│▶` 等 ambiguous-width 字元繪成 2 格導致行錯位時開啟。

## 開發

`hooks/hooks.js` 是 `src/hooks.js` 加上 beautiful-mermaid ASCII 路徑經 esbuild 打包的產物，且納入提交（marketplace 安裝可直接使用，無需建置）。

```
npm i
npm test   # build + test/hooks.test.mjs
```

## Install

```
claude plugin marketplace add WhiteKr/claude-plugin-mermaid
claude plugin install mermaid@whitekr-claude-plugins
```

## Original README

# mermaid

Claude 응답의 ```` ```mermaid ```` 코드 블록을 터미널 transcript에서 유니코드 박스 다이어그램으로 바꿔 그리는 function-hook 플러그인. `/show-me` 같은 스킬이 내는 mermaid 코드가 대상이다.

## 설치

```
/plugin marketplace add WhiteKr/whitekr-claude-plugins
/plugin install mermaid@whitekr-claude-plugins
```

개발 중에는 `claude --plugin-dir <이 폴더>` 로 로드한다.

## 동작

- `ui.render` 의 `AssistantMessage` 를 훅해 닫힌 ```` ```mermaid ```` 펜스를 [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) ASCII 렌더러로 그린 결과로 치환한다. 저장된 메시지(ctrl+o)는 바뀌지 않고 화면만 바뀐다.
- 원문을 유지하는 경우: 파싱 실패, 다이어그램 폭이 터미널 폭을 넘김, 펜스가 아직 안 닫힘(스트리밍 중).
- 라벨 안의 리터럴 `\n` 은 공백으로 바꾼다(렌더러가 줄바꿈으로 그리면 박스가 깨짐).
- 지원 다이어그램은 beautiful-mermaid ASCII 렌더러가 지원하는 범위(flowchart, sequence, class, ER, state 등)를 따른다.

## 옵션

`/config` 의 plugin 항목 또는 settings `pluginConfigs.mermaid.options`:

- `useAscii` (boolean, 기본 false): 박스 문자 대신 순수 ASCII(`+-|>`)로 그린다. 터미널·폰트가 `─│▶` 같은 ambiguous-width 글자를 2칸으로 그려 줄이 어긋날 때 켠다.

## 개발

`hooks/hooks.js` 는 `src/hooks.js` + beautiful-mermaid ASCII 경로를 esbuild 로 묶은 산출물이며 커밋 대상이다(마켓플레이스 설치는 빌드 없이 그대로 쓴다).

```
npm i
npm test   # build + test/hooks.test.mjs
```