使用 beautiful-mermaid 渲染 Mermaid 圖表
使用 beautiful-mermaid v1.0.2 和 bun 將 Mermaid .mmd 檔案渲染為樣式化的 SVG。
技能內容
| 檔案 | 用途 |
|---|---|
render-mermaid.ts | CLI 工具：將 .mmd 檔案渲染為 SVG |
gemini-diagram-prompt.md | 用於 Gemini 圖片生成的提示詞 |
安裝
只需要 bun。beautiful-mermaid 依賴項會在首次執行時由 bun 自動安裝。
# macOS
brew install oven-sh/bun/bun
# 或通用安裝程式
curl -fsSL https://bun.sh/install | bash
CLI 參考
render-mermaid — 將 Mermaid .mmd 檔案渲染為主題化 SVG
用法：
bun run render-mermaid.ts [選項] <input.mmd...>
echo 'graph TD; A-->B' | bun run render-mermaid.ts -o out.svg
選項：
-o, --output <檔案> 輸出檔案（僅限單一輸入）
--outdir <目錄> 多檔案的輸出目錄
-t, --theme <名稱> 主題（預設：tokyo-night）
--list-themes 列出可用主題
--help 顯示此說明
輸出預設行為： 若未指定 -o 或 --outdir，則在每個輸入檔案旁寫入 <name>.svg（-d 會被 bun run 忽略；請使用 --outdir）。
快速捷徑： 設定 MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts 以縮短命令。
範例
MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts
# 渲染單一檔案（輸出在輸入旁）
bun run $MERMAID diagram.mmd
# 渲染至特定輸出檔案
bun run $MERMAID diagram.mmd -o pretty.svg
# 將所有 .mmd 檔案渲染至輸出目錄
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams
# 使用不同主題
bun run $MERMAID -t dracula diagram.mmd
# 從標準輸入管線處理
echo 'graph TD; A-->B-->C' | bun run $MERMAID -o quick.svg
# 列出主題
bun run $MERMAID --list-themes
專案圖表
Mermaid 原始檔案（.mmd）與渲染輸出（.svg）位於 docs/diagrams/，另有一個原始檔案位於儲存庫根目錄：
| 原始檔案 | 說明 |
|---|---|
docs/diagrams/autofile-policy.mmd | AutoFile 政策流程圖 |
docs/diagrams/three-stage-autorun.mmd | 三階段自動執行流程圖 |
autorun-architecture.mmd | 完整架構（對 beautiful-mermaid 來說過於複雜） |
重新生成：
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams
已知限制
- 深度巢狀子圖的複雜圖表可能觸發 dagre 版面引擎錯誤。失敗的圖表會被回報，但不會阻擋其他渲染。
%%{init:...}%%前置元數據會自動移除（beautiful-mermaid 會套用自己的主題樣式）。
<image_generation>
Gemini 圖片生成
gemini-diagram-prompt.md 包含一個提示詞，用於引導 Gemini 生成以結果為導向的專案概覽圖片。將提示詞複製到 Gemini 對話中。
</image_generation>