技能包

design-doc-mermaid:在 Claude Code 裡畫 Mermaid 與設計文件

適合要畫活動圖或從程式碼生成 Mermaid 的人,前提是按官方方式克隆進 ~/.claude/skills,並先在對話裡出圖再寫檔案。

官方來源 · design-doc-mermaid

安裝

git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git

適合誰

適合要在 Claude Code 裡畫 Mermaid 圖、寫設計文件的人。官方寫明:這是一套強大的 Claude Code 技能,用按需載入指南、從程式碼生成圖,以及 Python 工具,來建立 Mermaid 圖和設計文件。

更合適的人,是已經有一段流程(例如註冊加郵箱驗證)或已有程式碼、想先看成圖的人。不適合還沒準備好把倉庫克隆進 ~/.claude/skills 的人。

開始前要能使用 git clone,並接受官方給出的這一條手工安裝路徑。不要一上來混用另一套市場命令。

3 分鐘完成第一次嘗試

只走原文的克隆安裝。第一次先在對話裡出圖,不要先往倉庫寫設計文件。

前置條件:本機已有 git,並且 Claude Code 會從 ~/.claude/skills 載入技能。第一次不要對生產文件做覆蓋。

安裝位置:先進入技能目錄,再克隆官方倉庫。

cd ~/.claude/skills
git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git

官方倉庫頁:

https://github.com/spillwavesolutions/design-doc-mermaid

低風險觸發:安裝後,在對話裡使用原文示例句:Create an activity diagram for user registration with email verification。先要求只在對話中給出 Mermaid,不寫檔案。官方把 SKILL.md 寫成帶決策樹的主協調檔;若助手開始呼叫未點名的腳本,先確認副作用。

成功訊號:~/.claude/skills/design-doc-mermaid 已存在且含 SKILL.md,對話裡出現活動圖的 Mermaid。若要存成文件,先確認路徑再寫。

使用案例

案例一:按官方示例畫活動圖。對助手說 Create an activity diagram for user registration with email verification。適合要描述註冊並驗證郵箱流程的人。證據只給出這一句使用者話,沒有寫出指南檔名。先在對話裡看圖,再決定是否落盤。

案例二:從已有程式碼生成圖。官方能力包括 code-to-diagram generation。適合已經有程式碼、想先看成圖的人。證據沒有說明支援哪些語言、會不會改源碼。只對你自己的程式碼做唯讀生成;若 Python 工具要寫檔案,先確認輸出位置。

使用邊界

主路徑是克隆到 ~/.claude/skills。原文另有 skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid。第一次不要兩條一起做,也不要把市場命令套到未寫明的環境。

點名的檔案只有 SKILL.md(主協調、帶決策樹)。其他指南名、腳本名或技能路徑不要自行補全。

按需載入指南和 Python 工具被提到,但沒有列出清單。不要假設它會自動安裝 Mermaid 執行環境或送出文件。

官方只把這套技能寫成 Claude Code 技能,沒有為其他環境給出步驟。