Design Md

name: design-md version: 0.1.0 description: 在 Markdown 文件裡插入腦圖或架構圖。使用者說"畫個腦圖"、"畫架構圖"、"插入圖表"、"mind map"、"diagram"時觸發。 argument-hint: [圖表描述，可選] allowed-tools: Write, Bash, Read metadata: openclaw: requires: bins: - mddoc - d2

向 Markdown 文件插入圖表時，始終遵循以下規則。

依賴檢查

開始任何操作前，先檢查依賴是否已安裝：

which mddoc && which d2

若 mddoc 未安裝：

npm install -g mddoc-cli

若 d2 未安裝：

• macOS：brew install d2
• Windows：winget install terrastruct.d2
• Linux / 其他：參考 https://d2lang.com/tour/install

兩個都就緒後再繼續。

規則

• 所有圖表原始檔和 PNG 只放在 .mddoc/ 目錄（與 Markdown 檔案平級）
• 檔名用英文小寫 + 連字元（auth-flow、module-overview），不用中文或序號
• 先寫原始檔，再生成 PNG，再插入 Markdown，順序不可顛倒
• Markdown 正文中永遠不要直接寫 D2 或 markmap 程式碼塊
• .mddoc/ 不存在時先建立

腦圖（.mmd）

1. 寫原始檔 → .mddoc/<name>.mmd，格式為 markmap markdown：

# 根節點標題

## 一級分支
- 葉節點
- 葉節點

## 一級分支
- 葉節點
  - 二級葉節點

2. 生成 PNG：

mddoc mindmap .mddoc/<name>.mmd

3. 插入 Markdown：

![腦圖：<描述>](.mddoc/<name>.png)
*原始檔：[<name>.mmd](.mddoc/<name>.mmd)*

架構圖（.d2）

1. 寫原始檔 → .mddoc/<name>.d2，格式為 D2 語言：

direction: right

client: 客戶端 {shape: rectangle}
gateway: API Gateway {shape: rectangle}
db: Database {shape: cylinder}

client -> gateway -> db

2. 生成 PNG：

mddoc arch .mddoc/<name>.d2

3. 插入 Markdown：

![架構圖：<描述>](.mddoc/<name>.png)
*原始檔：[<name>.d2](.mddoc/<name>.d2)*

批次重新生成

mddoc build

反饋與問題

遇到問題或有建議，請到 GitHub 提 issue： https://github.com/drunkpig/md-of-programer/issues

小蔥技能7w4.net持續更新中。