我做了 5 個圖表 Skill，覆蓋所有你的圖表繪製場景
整理版優先睇
作者自製5個圖表Skill，涵蓋邏輯圖、架構圖、Mermaid代碼及通用圖表，30秒出圖，大幅提升寫作與溝通效率。
呢篇文章係由空格（AI產品思考與實踐分享者）所寫，佢平時需要用圖表去表達文章入面嘅邏輯關係同系統架構。每次都要開Figma手動畫圖，覺得好浪費時間，於是諗到將自己之前嘅產品「文To圖」做成Skill，再順手做多幾個，最後整咗5個圖表Skill出來。整體結論係：呢5個Skill可以覆蓋曬所有繪製圖表嘅場景，由簡單嘅Mermaid代碼到精美嘅HTML架構圖，一句話就搞掂。
第一個Skill係text-logic-diagram，支援6種邏輯關係，例如遞進、循環、對比，可以將文字自動轉成多張SVG邏輯圖。第二個係architecture-diagram，參考開源項目優化，支援8種組件類型，有深色同淺色主題，輸出獨立HTML。第三個係mermaid-generator，用於 Obsidian 呢類平台，直接生成 Mermaid 代碼，輕量快速。第四個係chart-craft同chart-craft-plus，分別支援10種同35種圖表類型，內置三種風格，仲可以自訂品牌風格。
所有Skill都放咗喺GitHub倉庫，安裝好簡單，複製地址叫Agent安裝就得。作者仲話呢個倉庫仲有其他圖像生成嘅Skill，可以按需安裝。如果想系統學習Skill同生產力提升，可以訂閲佢嘅專欄同加入社羣。
- 結論：5個圖表Skill可覆蓋文字邏輯、系統架構、Mermaid代碼及35種通用圖表，一句指令即出圖。
- 方法：每個Skill針對特定場景，安裝到全局目錄後用自然語言調用，無需手動構圖。
- 差異：從輕量Mermaid到精美HTML，從6種邏輯關係到35種圖表，風格可切換，滿足不同需求。
- 啟發：將重複性設計工作工具化，AI Agent可以變成生產力中心，唔使再開多個軟件。
- 可行動點：上GitHub倉庫安裝呢5個Skill，試下30秒出圖；如果想進階可以訂閲專欄。
Draw-Skill 倉庫
包含5個圖表Skill及其他圖片繪製Skill的GitHub倉庫
點解要整呢5個Skill？
上週準備寫AI Agent文章，需要系統架構圖。原本想開Figma畫，但一想到要新建畫布、揾組件、調顏色、對齊就覺得好煩。
佢話：「我天天用Claude Code，點解唔可以叫佢幫手畫圖？」於是將之前做嘅web產品「文To圖」改成Skill，順便做多幾個，最後整咗5個。
30秒出圖
而家只要同Claude Code講一句『畫一個AI Agent工作流架構圖』，30秒就出到圖，截圖貼落文章就得。
邏輯圖同架構圖：從文字到圖表
text-logic-diagram專為概念關係而設，支援6種邏輯關係：遞進、流程、循環、層次、對比、矩陣。佢會分析文字結構，自動生成多張SVG圖。
6種邏輯關係
案例：分析Anthropic嘅Agent文章時，自動拆出遞進、對比、循環三張圖。
architecture-diagram參考開源項目，支援8種組件類型，有深色同淺色主題。調用時講『畫一個微服務架構圖』，佢會問幾個問題，然後生成獨立HTML。
8種組件類型
深色模式切換
案例：將五種Agent工作流模式畫喺同一張圖，底層係增強型LLM，頂層係自主Agent循環。
輕量Mermaid同通用圖表
- mermaid-generator：直接輸出Mermaid代碼，適合Obsidian、飛書等平台，快速記錄架構思路。
- chart-craft：基礎版10種圖表，流程圖、SWOT、用戶旅程圖等，內置三種風格。
- chart-craft-plus：增強版35種圖表，新增桑基圖、甘特圖、C4模型等，仲可以自訂品牌風格。
35種圖表
三種內置風格
案例：用chart-craft-plus的Claude暖色風格，整咗一張『四種失敗模式』對照圖，暖色卡片式佈局，信息密度高。
點樣安裝同使用？
複製GitHub倉庫地址，話畀Agent『安裝呢個skill』，佢就會自動下載到~/.claude/skills/。
~/.claude/skills/
仲有其他圖片繪製嘅Skill，例如用Gemini生圖、製作logo等，可以按需安裝。
作者空格，持續分享AI產品思考與實踐，有需要可以訂閲專欄加入社羣。
就諗到打開 Figma 畫嘅流程：新建畫布...揾組件...調顏色...對齊……
然後就覺得唔對路，我日日用 Claude Code ，點解唔可以叫佢幫我畫圖？
諗起我舊年就做過一個web 產品「文To 圖」，可以將文字轉成有對比、遞進、循環嘅邏輯圖。
於是我將呢個產品做成咗 Skill。又順手做埋架構圖、流程圖、通用圖表，總共 5 個 skill。
可以話能夠覆蓋你所有繪製圖表嘅場景。
而家我同 Claude Code 講一句「畫一個 AI Agent 嘅工作流架構圖」
30 秒出圖，截圖，貼到文章入面，搞掂。
呢 5 個 Skill 分別係：
呢篇文章將 5 個 Skill 嘅效果同用法過一次，穿插幾個我實際用嘅案例。
唔想睇嘅可以直接去呢個倉庫安裝：github.com/zephyrwang6/draw-skill
呢個 Skill 解決嘅問題係配圖。我成日寫完一篇文章，想用圖表將邏輯關係可視化。但架構圖 Skill 只可以畫系統組件，畫唔到概念之間嘅遞進、循環、對比呢啲抽象關係。
所以我就做咗呢個。
佢支援 6 種邏輯關係：遞進、流程、循環、層次、對比、矩陣。
你掉一段文字畀佢，佢先分析文本嘅邏輯結構，然後判斷每一段適合用邊種關係圖嚟表達，生成多張 SVG 圖。
案例：上星期分析 Anthropic 嗰篇 "Building Effective Agents" 博客，我將五種 Agent 工作流模式嘅文字描述掉入去，佢自動拆出咗三張圖——一張遞進關係圖（由提示鏈到自主 Agent 嘅複雜度階梯），一張對比圖（工作流 vs Agent），一張循環圖（Agent 嘅 OODA 執行循環）。
地址：github.com/zephyrwang6/draw-skill/tree/main/text-logic-diagram
呢個參考咗一個 GitHub 開源項目：github.com/Cocoon-AI/architecture-diagram-generator
我將佢嘅樣式進行咗優化，並改咗做中文。
而家支援 8 種組件類型嘅語義化配色。雙主題切換。深色模式科技感爆燈。
㩒一下右上角掣切到淺色模式，貼到文檔入面一啲都唔突兀。
調用嘅時候講：畫一個 AI 客服平台嘅微服務架構圖
然後佢會問你幾個問題，確認之後生成一個獨立 HTML 檔案，瀏覽器直接打開，截圖就用得。
案例：同樣係 Agent 嗰篇文章，我話「畫一個 AI Agent 工作流架構圖」。
佢將五種模式（提示鏈、路由、並行化、編排-工作者、評估-優化）全部畫喺一張圖入面，底層係增強型 LLM，頂層係自主 Agent 循環。
有時我唔需要精美嘅 HTML，只需要一段 Mermaid 代碼。
喺 Obsidian 入面、飛書入面就可以直接渲染，唔使打開瀏覽器，唔使截圖。輕量、快速、夠用。
呢個 Skill 支援三種 Mermaid 圖表：流程圖、序列圖、類圖。
只需要講：將呢個轉做流程圖：用戶打開頁面、瀏覽商品、加入購物車、結算支付
佢直接輸出：
貼落 Obsidian，就可以渲染。
或者喺 mermaid.live、excalidraw.com 渲染效果重好啲。
適合喺 Obsidian 筆記入面快速記錄一個架構思路，或者畀同事發一個流程示意。唔使追求靚，睇得明就得。
地址：github.com/zephyrwang6/draw-skill/tree/main/mermaid-generator
呢兩個係通用嘅圖表生成器。
chart-craft 係基礎版，支援 10 種圖表類型，覆蓋最常見嘅場景：流程圖、架構圖、ER 圖、商業模式畫布、用戶旅程圖、思維導圖、競品分析、SWOT、產品路線圖、組織架構圖。
chart-craft-plus 係增強版，直接擴展到 35 種圖表，5 大類別：技術架構、流程邏輯、業務戰略、數據可視化、資訊展示。
新增咗桑基圖、漏斗圖、熱力矩陣、OKR 對齊樹、甘特圖、C4 模型、威脅建模圖、BPMN 圖等等。
兩者嘅共同特點：
三種內置風格：黑白簡約（Notion 風）、深色暗調（科技感）、Claude 暖色（預設）。
仲支援品牌風格擴展，講一句「Stripe 風格」，佢會自動去拉設計規範，應用落圖表入面。
全部輸出做獨立 HTML 檔案，冇外部依賴。截圖清晰，打印友好。
案例：用 chart-craft-plus 嘅 Claude 暖色風格，幫 Anthropic 嗰篇 "Effective Harnesses" 做咗一張「四種失敗模式」對照圖。
無限循環、發散偏移、環境破壞、上下文遺失，每種失敗模式左邊寫症狀、右邊寫 Harness 對策。暖色卡片式佈局，貼到文章入面資訊密度高，睇落都唔攰。
地址：github.com/zephyrwang6/draw-skill/tree/main/chart-craft-plus
複製上面嘅地址，話畀你嘅 Agent 聽，幫我安裝呢個 skill，就可以用，最好安裝喺~/.claude/skills/全局目錄下面。
github.com/zephyrwang6/draw-skill 呢個倉庫入面仲有好多圖片繪製嘅 skill，例如調用 Gemini3 pro 生圖模型幫文章配圖、製作 logo、看板、數據分析嘅，可以按需要安裝。
關於 skill 同生產力提升嘅系統學習，如果有需要，可以訂閲專欄加入社羣：
我係空格，持續分享 AI 產品嘅思考與實踐。
就想到打開 Figma 畫的流程： 新建畫布... 找組件... 調顏色... 對齊……
然後就覺得這不對啊，我天天用 Claude Code ，為什麼不能讓它幫我畫圖？
想起我去年就做過一個web 產品“文To 圖”，可以把文字轉成有對比、遞進、循環的邏輯圖。
於是我把這個產品做成了 Skill。又順手做了架構圖、流程圖、通用圖表，共 5 個 skill。
可以說能夠覆蓋你所有繪製圖表的場景。
現在我跟 Claude Code 說一句「畫一個 AI Agent 的工作流架構圖」
30 秒出圖，截圖，貼到文章裏，完事。
這 5 個 Skill 分別是：
這篇文章把 5 個 Skill 的效果和用法過一遍，穿插幾個我實際用的案例。
不想看的可以直接去這個倉庫安裝：github.com/zephyrwang6/draw-skill
這個 Skill 解決的問題是配圖。我經常寫完一篇文章，想用圖表把邏輯關係可視化。但架構圖 Skill 只能畫系統組件，畫不了概念之間的遞進、循環、對比這種抽象關係。
所以我就做了這個。
它支持 6 種邏輯關係：遞進、流程、循環、層次、對比、矩陣。
你丟一段文字給它，它先分析文本的邏輯結構，然後判斷每一段適合用哪種關係圖來表達，生成多張 SVG 圖。
案例：上週分析 Anthropic 那篇 "Building Effective Agents" 博客，我把五種 Agent 工作流模式的文字描述丟進去，它自動拆出了三張圖——一張遞進關係圖（從提示鏈到自主 Agent 的複雜度階梯），一張對比圖（工作流 vs Agent），一張循環圖（Agent 的 OODA 執行循環）。
地址：github.com/zephyrwang6/draw-skill/tree/main/text-logic-diagram
這個參考了一個 GitHub 開源項目：github.com/Cocoon-AI/architecture-diagram-generator
我把它的樣式進行了優化，並改成了中文。
現在支持 8 種組件類型的語義化配色。雙主題切換。深色模式科技感拉滿。
點一下右上角按鈕切到淺色模式，貼到文檔裏一點不突兀。
調用時候說：畫一個 AI 客服平台的微服務架構圖
然後它會問你幾個問題，確認後生成一個獨立 HTML 文件，瀏覽器直接打開，截圖就能用。
案例：同樣是 Agent 那篇文章，我說「畫一個 AI Agent 工作流架構圖」。
它把五種模式（提示鏈、路由、並行化、編排-工作者、評估-優化）全部畫在一張圖裏，底層是增強型 LLM，頂層是自主 Agent 循環。
有時候我不需要精美的 HTML，只需要一段 Mermaid 代碼。
在 Obsidian 裏、飛書裏就能直接渲染，不用打開瀏覽器，不用截圖。輕量、快速、夠用。
這個 Skill 支持三種 Mermaid 圖表：流程圖、序列圖、類圖。
只需要說：把這個轉為流程圖：用戶打開頁面、瀏覽商品、加入購物車、結算支付
它直接輸出：
粘貼到 Obsidian，就能渲染。
或者在 mermaid.live、excalidraw.com渲染效果更佳。
適合 在 Obsidian 筆記裏快速記錄一個架構思路，或者給同事發一個流程示意。不用追求好看，能看懂就行。
地址：github.com/zephyrwang6/draw-skill/tree/main/mermaid-generator
這兩個是通用的圖表生成器。
chart-craft 是基礎版，支持 10 種圖表類型，覆蓋最常見的場景：流程圖、架構圖、ER 圖、商業模式畫布、用戶旅程圖、思維導圖、競品分析、SWOT、產品路線圖、組織架構圖。
chart-craft-plus 是增強版，直接擴展到 35 種圖表，5 大類別：技術架構、流程邏輯、業務戰略、數據可視化、信息展示。
新增了桑基圖、漏斗圖、熱力矩陣、OKR 對齊樹、甘特圖、C4 模型、威脅建模圖、BPMN 圖等等。
兩者的共同特點：
三種內置風格：黑白簡約（Notion 風）、深色暗調（科技感）、Claude 暖色（默認）。
還支持品牌風格擴展，說一句「Stripe 風格」，它會自動去拉設計規範，應用到圖表裏。
全部輸出為獨立 HTML 文件，無外部依賴。截圖清晰，打印友好。
案例：用 chart-craft-plus 的 Claude 暖色風格，給 Anthropic 那篇 "Effective Harnesses" 做了一張「四種失敗模式」對照圖。
無限循環、發散偏移、環境破壞、上下文丟失，每種失敗模式左邊寫症狀、右邊寫 Harness 對策。暖色卡片式佈局，貼到文章裏信息密度高，看着也不累。
地址：github.com/zephyrwang6/draw-skill/tree/main/chart-craft-plus
複製上面的地址，告訴你的 Agent，給我安裝這個 skill，就能使用了，最好安裝在~/.claude/skills/全局目錄下。
github.com/zephyrwang6/draw-skill 這個倉庫裏還有很多圖片繪製的 skill，比如調用 Gemini3 pro 生圖模型給文章配圖、製作 logo、看板、數據分析的，可以按需安裝。
關於 skill 和生產力提升的系統學習，如果需要，可以訂閲專欄加入社羣：
我是空格，持續分享 AI 產品的思考與實踐。