據 AlphaMoat 統計,截至 2026-09,Mermaid Diagrams 累計下載 3,899 次、獲 1 個星標,在全部 5,078 個 AI 技能中排名第 2,665 位,在「開發程式設計」分類(577 個)中排名第 349 位。

累計安裝

153

累計下載

3899

星標

全站排名

#2,665

全站前 53% · 「開發程式設計」前 61%

平台	累計安裝	累計下載	星標	評論
ClawHub ↗	97	3438	1	-
SkillHub ↗	153	3899	1	—

各平台的計數口徑不同,統計時間不一致。

這個技能是做什麼的

流程是編寫 .mmd 檔案並使用 Mermaid CLI 產生 PNG、SVG 或 PDF。卡片指出安裝說明要求全域性安裝未固定版本的第三方 CLI；應優先使用固定版本的本機安裝。發布或據此決策前，需檢查 Mermaid 原始碼及渲染結果。需可用相容的 mmdc，並核對該版本支援的語法；不設定 PTY，使用受控暫存及輸出路徑，不再需要時清理。

資料釋出於 2026-10-27

可以用來做什麼

將流程或架構描述繪製為 Mermaid 圖
輸出 PNG、SVG 或 PDF 格式圖表

什麼時候用

Mermaid CLI 已透過可信方式安裝，且圖表內容和渲染結果已核對時

示例提示詞

以下是根據技能文件生成的示例,不代表實際執行結果。

根據這段文字起草 Mermaid 圖程式碼，但不要安裝 CLI 或渲染檔案。

審閱這張圖的原始碼，確認它準確表達了工作流後再匯出。

月度資料趨勢

累計下載3899

星標1

2026-09 起統計方法調整:同名技能按作者分別統計,並覆蓋全部技能。圖中虛線為調整前的月份,與之後的資料不直接比較,也不計算跨越調整的增長。

月份	累計下載	環比	星標
2026-09	3899	—	1
2026-08	3412	+9.4%	1
2026-07	3120	+14.6%	1
2026-06	2722	+9.8%	1
2026-05	2478	—	1
2026-03	1614	—	-

SKILL.md 原文

以下是作者釋出的原始檔案,按純文字顯示,本站未做修改或稽核;其中的連結不可點選,命令請核實後再執行。抓取於 2026-10-23。

2.6 KB · ClawHub v1.0.0

# Mermaid Diagrams Skill

Generate diagrams from text using [Mermaid](https://mermaid.js.org/).

## Requirements

- `@mermaid-js/mermaid-cli` (`npm install -g @mermaid-js/mermaid-cli`)

## Usage

展開全部(共 109 行)

1. Write Mermaid syntax to a `.mmd` file
2. Run `mmdc` to render PNG/SVG
3. Return the image to the user

### Basic Command

```bash
mmdc -i input.mmd -o output.png -t dark -b transparent
```

### Options

| Flag | Description |
|---|---|
| `-i` | Input `.mmd` file |
| `-o` | Output file (`.png`, `.svg`, `.pdf`) |
| `-t` | Theme: `default`, `dark`, `forest`, `neutral` |
| `-b` | Background color (`transparent`, hex) |
| `-w` | Width in pixels (default: 800) |
| `-H` | Height in pixels |
| `-s` | Scale factor (default: 1, use 2-3 for high-res) |
| `-c` | Config JSON file for advanced theming |

### Supported Diagram Types

- **Flowchart**: `graph TD` / `graph LR`
- **Sequence**: `sequenceDiagram`
- **Class**: `classDiagram`
- **State**: `stateDiagram-v2`
- **ER**: `erDiagram`
- **Gantt**: `gantt`
- **Pie**: `pie`
- **Mindmap**: `mindmap`
- **Timeline**: `timeline`
- **Git graph**: `gitGraph`
- **Quadrant**: `quadrantChart`
- **Block**: `block-beta`

### Workflow

1. Determine the best diagram type for what the user wants
2. Write the `.mmd` file to `/tmp/mermaid-<name>.mmd`
3. Render: `mmdc -i /tmp/mermaid-<name>.mmd -o /tmp/mermaid-<name>.png -t dark -b transparent -s 2`
4. Show the image to the user via `Read` tool
5. Clean up temp files if not needed

### Example: Architecture Diagram

```mermaid
graph TD
    A[Client] -->|HTTPS| B[API Gateway]
    B --> C[Auth Service]
    B --> D[App Server]
    D --> E[(PostgreSQL)]
    D --> F[(Redis Cache)]
```

### Example: Sequence Diagram

```mermaid
sequenceDiagram
    participant U as User
    participant A as API
    participant DB as Database
    U->>A: POST /login
    A->>DB: Validate credentials
    DB-->>A: User record
    A-->>U: JWT token
```

### Tips

- Use `graph LR` for left-to-right flow, `graph TD` for top-down
- Keep node labels short — detail goes in tooltips or notes
- Use subgraphs to group related components
- For dark backgrounds, use `-t dark -b transparent`
- Scale `-s 2` or `-s 3` for sharp images on retina displays
- **Always use `pty: false`** when calling `mmdc`

### Theming

For custom colors, create a config JSON:

```json
{
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#f59e0b",
    "primaryTextColor": "#1a1a1a",
    "primaryBorderColor": "#d97706",
    "lineColor": "#6b7280",
    "secondaryColor": "#10b981",
    "tertiaryColor": "#3b82f6"
  }
}
```

Then: `mmdc -i input.mmd -o output.png -c config.json`