mermaid-render

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mermaid Diagram Renderer

Mermaid图表渲染器

Render mermaid diagrams to PNG and display them inline. Supports iTerm2 (imgcat) and Ghostty (kitten icat). Built for fast visual iteration.

Workflow
Prerequisites
Rendering
Iteration Rules
Mermaid Syntax Cheatsheet

将Mermaid图表渲染为PNG格式并内联展示，支持iTerm2（imgcat）和Ghostty（kitten icat），专为快速视觉迭代打造。

工作流
前置依赖
渲染
迭代规则
Mermaid语法速查表

Workflow

工作流

Every time you generate or modify mermaid code, immediately render and display it. Never ask "want me to render?" — just do it.

Write the mermaid code:

bash

cat > /tmp/mermaid-diagram.mmd << 'MERMAID'
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
MERMAID

Render:

bash

"${CLAUDE_SKILL_DIR}/scripts/render.sh" /tmp/mermaid-diagram.mmd

The script outputs

Rendered: <path>

and

View: <command>

. Always print the
View:
command for the user so they can copy-paste it to see the diagram inline. Claude Code's Bash tool captures stdout, so inline images won't display automatically.

If the user provides a specific file path, use that instead of

/tmp/mermaid-diagram.mmd

每次你生成或修改Mermaid代码时，立即进行渲染展示，永远不要询问“需要我渲染吗？”，直接执行即可。

编写Mermaid代码：

bash

cat > /tmp/mermaid-diagram.mmd << 'MERMAID'
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
MERMAID

渲染：

bash

"${CLAUDE_SKILL_DIR}/scripts/render.sh" /tmp/mermaid-diagram.mmd

脚本会输出

Rendered: <path>

和

View: <command>

。请务必为用户打印
View:
对应的命令，方便用户复制粘贴后内联查看图表。Claude Code的Bash工具会捕获标准输出，因此内联图片无法自动展示。

如果用户提供了指定的文件路径，请用该路径代替

/tmp/mermaid-diagram.mmd

。

Prerequisites

前置依赖

On first use, check that

mmdc

is available:

bash

which mmdc || echo "MISSING: Run 'npm install -g @mermaid-js/mermaid-cli'"

The display command (

imgcat

kitten icat

) is detected automatically based on

$TERM_PROGRAM

. No manual setup needed — the script falls back to

open

if neither is available.

首次使用时，检查

mmdc

是否可用：

bash

which mmdc || echo "MISSING: Run 'npm install -g @mermaid-js/mermaid-cli'"

展示命令（

imgcat

或

kitten icat

）会根据

$TERM_PROGRAM

自动检测，无需手动配置——如果两个命令都不可用，脚本会自动回退使用

open

命令。

Rendering

渲染

The

render.sh

script handles rendering with sensible defaults. It supports these flags:

--theme <name>

— mermaid theme:

default

dark

forest

neutral

(default:

default

)

```
--width <px>
```
— output width in pixels (default:
```
1200
```
)
```
--bg <color>
```
— background color (default:
```
transparent
```
)
```
--css <path>
```
— custom CSS file for styling
```
--output <path>
```
— custom output path (default: replaces
```
.mmd
```
with
```
.png
```
)

Examples:

bash

"${CLAUDE_SKILL_DIR}/scripts/render.sh" /tmp/mermaid-diagram.mmd --theme dark

bash

"${CLAUDE_SKILL_DIR}/scripts/render.sh" /tmp/mermaid-diagram.mmd --width 2400

bash

"${CLAUDE_SKILL_DIR}/scripts/render.sh" /tmp/mermaid-diagram.mmd --output ~/Desktop/diagram.png

render.sh

脚本采用合理的默认值处理渲染逻辑，支持以下参数：

```
--theme <name>
```
— Mermaid主题：
```
default
```
、
```
dark
```
、
```
forest
```
、
```
neutral
```
（默认值：
```
default
```
）
```
--width <px>
```
— 输出宽度，单位为像素（默认值：
```
1200
```
）
```
--bg <color>
```
— 背景颜色（默认值：
```
transparent
```
）
```
--css <path>
```
— 用于自定义样式的CSS文件路径
```
--output <path>
```
— 自定义输出路径（默认值：将
```
.mmd
```
后缀替换为
```
.png
```
）

示例：

bash

"${CLAUDE_SKILL_DIR}/scripts/render.sh" /tmp/mermaid-diagram.mmd --theme dark

bash

"${CLAUDE_SKILL_DIR}/scripts/render.sh" /tmp/mermaid-diagram.mmd --width 2400

bash

"${CLAUDE_SKILL_DIR}/scripts/render.sh" /tmp/mermaid-diagram.mmd --output ~/Desktop/diagram.png

Iteration Rules

迭代规则

After each user edit request, update the
```
.mmd
```
file and re-render immediately
Show the
```
View:
```
command after every change — the user should never have to ask
Keep the
```
.mmd
```
file path consistent within a session so edits accumulate
If
```
mmdc
```
reports a syntax error, show the error message and fix the mermaid code before retrying
Use the cheatsheet below for syntax reference when iterating

每次收到用户的编辑请求后，更新
```
.mmd
```
文件并立即重新渲染
每次修改后都要展示
```
View:
```
命令，永远不要等用户主动询问
同一会话内保持
```
.mmd
```
文件路径一致，方便编辑内容累积
如果
```
mmdc
```
报语法错误，先展示错误信息并修复Mermaid代码再重试
迭代时可参考下方的速查表获取语法说明

Mermaid Syntax Cheatsheet

Mermaid语法速查表

Graph Directions

图表方向

graph TD

(top-down),

graph LR

(left-right),

graph BT

(bottom-top),

graph RL

(right-left)

graph TD

（从上到下）、

graph LR

（从左到右）、

graph BT

（从下到上）、

graph RL

（从右到左）

Node Shapes

节点形状

text

A[Rectangle]    B(Rounded)    C{Diamond}
D((Circle))     E[[Subroutine]]   F[(Database)]
G>Asymmetric]   H{{Hexagon}}  I[/Parallelogram/]

text

A[Rectangle]    B(Rounded)    C{Diamond}
D((Circle))     E[[Subroutine]]   F[(Database)]
G>Asymmetric]   H{{Hexagon}}  I[/Parallelogram/]

Link Styles

连线样式

text

A --> B           Solid arrow
A --- B           Solid line (no arrow)
A -.-> B          Dotted arrow
A ==> B           Thick arrow
A -->|label| B    Arrow with label
A -- text --> B   Arrow with text (alternate)

text

A --> B           Solid arrow
A --- B           Solid line (no arrow)
A -.-> B          Dotted arrow
A ==> B           Thick arrow
A -->|label| B    Arrow with label
A -- text --> B   Arrow with text (alternate)

Subgraphs

子图

text

subgraph Title
    A --> B
end

text

subgraph Title
    A --> B
end

Styling

样式设置

text

style A fill:#f9f,stroke:#333,stroke-width:2px
classDef highlight fill:#ff0,stroke:#333
class A,B highlight

text

style A fill:#f9f,stroke:#333,stroke-width:2px
classDef highlight fill:#ff0,stroke:#333
class A,B highlight

Themes

主题

Set via

--theme

flag:

default

dark

forest

neutral

Or in the diagram:

%%{init: {'theme': 'dark'}}%%

通过

--theme

参数设置：

default

、

dark

、

forest

、

neutral

或直接在图表内声明：

%%{init: {'theme': 'dark'}}%%

Sequence Diagram

时序图

text

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello
    B-->>A: Hi back
    A->>+B: Request
    B-->>-A: Response
    Note over A,B: Handshake complete

text

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello
    B-->>A: Hi back
    A->>+B: Request
    B-->>-A: Response
    Note over A,B: Handshake complete

State Diagram

状态图

text

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Done: finish
    Done --> [*]

text

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Done: finish
    Done --> [*]

Entity Relationship

实体关系图

text

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

text

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

Class Diagram

类图

text

classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    Animal <|-- Dog
    Animal <|-- Cat

text

classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    Animal <|-- Dog
    Animal <|-- Cat