一句話生成各種風格技術圖，分享一個“生產級”Claude技能：fireworks-tech-graph

作者：惡人筆記
日期：2026年5月13日 上午7:11
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

一句話生成專業技術圖：fireworks-tech-graph Skill，用自然語言畫出可編輯嘅系統架構圖

整理版摘要

呢篇文係由一位技術作者根據公開 GitHub 倉庫整理出嚟嘅工具介紹。佢發現平時畫系統架構圖有好大煩惱：用 Mermaid 語法搞半日，出嚟嘅圖好單調；用 draw.io 又逐個元件拖，效率低；叫 AI 直接畫又成日佈局亂、錯曬。佢嘅核心問題係想揾一個又快又專業嘅方法嚟畫技術圖。整體結論係：fireworks-tech-graph 呢個 Claude Skill 可以解決呢個問題，靠自然語言描述就能秒級生成生產級 SVG+PNG 圖，仲有 7 種風格同 14 種 UML 支援，特別係 AI/Agent 領域嘅圖畫得好好。

呢個工具嘅突破在於唔係單純用 AI 生成圖片，而係一個「智能繪圖引擎」，內置語義形狀（例如 LLM 用雙邊框矩形、Agent 用六邊形）同語義箭頭（用顏色同虛實線區分讀寫、異步等）。加上 7 種精選風格，包括 Flat Icon、Dark Terminal、Blueprint、Notion Clean、Glassmorphism、Claude Official、OpenAI Official，直接可以用喺文檔、PPT、產品官網等場景。輸出係可編輯 SVG 同 1920px 無損 PNG，方便微調同嵌入。

安裝好簡單，一行命令就加落 Claude Code 度，之後用中文描述就得，例如「畫一張 RAG 管道流程圖」或者「用玻璃態風格畫一個 Mem0 記憶架構」。佢哋嘅 Stable Prompt Re…

  • 結論：fireworks-tech-graph 係一個生產級 Claude Skill，可以將自然語言描述秒級轉換成專業嘅 SVG+PNG 技術圖，支援 7 種風格同多種 UML 圖。
  • 方法：安裝只需一行命令（npx skills add yizhiyanhua-ai/fireworks-tech-graph），之後直接用中文描述圖嘅內容同風格就得，仲可以指定輸出位置。
  • 差異：相比 Mermaid 畫風單一、draw.io 效率低、純 AI 生成佈局亂，呢個 Skill 透過內置語義形狀、箭頭系統同風格約束，生成嘅圖邏輯清晰、視覺專業。
  • 啟發：呢類「描述即所得」嘅工具代表咗 AI 輔助創作嘅方向，尤其係技術可視化領域，開發者可以專注喺內容而唔係工具操作。
  • 可行動點：建議安裝試用，參考倉庫嘅 Stable Prompt Recipes，並配合 Mermaid 或 draw.io 互補使用，特別適合 AI/Agent 架構圖同產品文檔。
值得記低
Skill github.com

fireworks-tech-graph

一行命令安裝：npx skills add yizhiyanhua-ai/fireworks-tech-graph。之後用自然語言描述即可生成技術圖，支援 7 種風格、14 種 UML 圖同 AI/Agent 專用模式。輸出可編輯 SVG 同 1920px PNG。

開啟
整理重點

傳統繪圖工具嘅侷限同呢個 Skill 嘅核心價值

平時想畫一張似樣嘅系統架構圖，無論係 Mermaid 語法、draw.io 抑或純 AI 生成，總有各種煩惱：Mermaid 視覺風格單一、複雜圖容易亂；draw.io 要手動調整，效率低；AI 直接畫又成日佈局亂、元素碰撞，專業度唔夠。

呢個 Skill 嘅核心價值在於將約束 + 語義 + 風格系統結合埋一齊。佢內置咗語義形狀詞彙（例如 LLM 用雙邊框矩形、Agent 用六邊形、Vector Store 用帶環圓柱），同埋語義箭頭系統（用唔同顏色同虛實線區分讀／寫／異步／循環）。呢啲設計令到生成嘅圖唔單止靚，仲好符合技術語義。

整理重點

核心功能一覽：7 種風格 + 14 種 UML + AI 專用模式

  • 7 種視覺風格：Flat Icon（默認扁平圖標風，文檔首選）、Dark Terminal（暗黑終端風）、Blueprint（工程藍圖風）、Notion Clean（極簡風）、Glassmorphism（毛玻璃產品演示）、Claude Official（温暖專業）、OpenAI Official（現代極簡）。
  • 支援全部 14 種 UML 圖，仲有 AI/Agent 專用架構圖、流程圖、對比矩陣、概念圖等。
  • 額外內置 40+ 產品品牌圖標（OpenAI、Anthropic、Pinecone、PostgreSQL 等），支援泳道分組同自動佈局優化。

呢啲風格唔係單單換顏色咁簡單，而係成套視覺系統，包括線條粗幼、陰影、圓角、字體等細節，真係做到「生產級」水準。你仲可以用特定觸發詞（例如「畫圖」「架構圖」「流程圖」）自動激活 Skill，非常方便。

整理重點

安裝與使用方法：一行命令就搞掂

程式內容 bash 
# 安裝 Skill
npx skills add yizhiyanhua-ai/fireworks-tech-graph

# 更新（用 --force -g -y 強制重新安裝）
npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y

# 安裝 PNG 渲染器（建議 cairosvg）
pip install cairosvg

# 驗證安裝
python3 -c "import cairosvg; print(cairosvg.__version__)"
  1. 1 安裝完之後，直接用自然語言描述就得，例如「畫一張 RAG 管道流程圖」或者「用玻璃態風格畫一個 Mem0 記憶架構」。
  2. 2 進階用法可以指定輸出目錄，例如「生成 XX 圖，輸出到 ~/Desktop/」。
  3. 3 如果想更加穩定，可以參考倉庫嘅 Stable Prompt Recipes，每種風格都有對應嘅模板提示詞。

中文支援非常之好，直接用中文描述就得，唔使記任何特殊 syntax。不過要注意 PNG 導出需要安裝 cairosvg 或者 rsvg-convert，呢個係唯一嘅依賴，但係裝一次就搞掂。

整理重點

實際使用分析：優點同埋要留神嘅地方

顯著優點有幾個：效率飛躍，從描述到可用圖秒級完成；視覺專業度高，7 種風格直接拎去用；語義理解強，尤其係 AI 技術棧；輸出 SVG 可以導入編輯器微調，PNG 直接嵌入。

需要注意嘅侷限包括：依賴 Claude Code 環境；極複雜圖可能會出現少少元素重疊（但作者建議可以用 visual self-review 迭代修正）；PNG 導出要裝 rsvg-convert，但係本地環境搞一次就得。整體嚟講，佢係喺「夠用」同「驚豔」之間揾到咗一個好好嘅平衡。

整理重點

使用建議同總結：值得一試嘅生產力工具

  • 善用 Stable Prompt Recipes：倉庫 README 入面有每種風格嘅模板，可以顯著提高一次成功率。
  • 進階用法：熟悉語義詞彙同佈局規則之後，輸出質量會再提升；項目 scripts 目錄有驗證工具，適合批量生產。
  • 替代方案互補：簡單 inline 圖可以繼續用 Mermaid，手動極致美化用 draw.io，呢個 Skill 主打「描述即所得」嘅中高端場景。

呢篇文嘅作者（根據公開 GitHub 資訊整理）認為呢個係一個典型嘅高質量 Skill 案例，將模糊需求轉化為結構化、可視化資產，體現咗「讓 AI 懂技術、懂審美」嘅方向。對於開發者、架構師、技術作家同 AI 產品經理嚟講，值得安裝試用，尤其係寫 AI 相關內容嘅時候，效率同輸出質量提升好明顯。

一句講曬：效率提升，從一張好圖開始。

平時要畫一張似樣嘅系統架構圖，一係就手打Mermaid語法調好耐，一係就開draw.io㩒嚟㩒去搞半日，出嚟嘅效果仲成日係「是但啦」，而家靠AI工具都可以生成Mermaid語法預覽圖，但輸出嘅結果成日都唔係幾滿意，一係太樣衰，一係錯漏百出仲要冇得編輯。

最近發現一個好正嘅Claude Skill技能：fireworks-tech-graph。淨係靠自然語言描述（支援中文），就可以生成生產級SVG + 高清PNG技術圖，而且支援7種精美風格、14種UML圖，同埋大量AI/Agent領域專用模式。

圖片

呢個技能唔係簡單咁用模型生成圖片，而係真正識得技術語義嘅「智能繪圖引擎」，今日就嚟詳細分享呢個項目。

一、呢個項目到底解決咗啲乜嘢痛點？

傳統工具嘅限制好明顯：

  • • Mermaid：語法友善，但視覺風格單一，複雜圖容易亂，匯出PNG質素一般。
  • • draw.io / Excalidraw：手動調整自由，但效率低，風格統一難。
  • • 純AI生成：以前直接叫Claude畫圖，好多時佈局亂、元素撞埋一齊、專業度唔夠。最近GPT模型直接出圖效果雖然唔錯，但係涉及到大量中文等場景時，都仲會有啲小問題。

fireworks-tech-graph嘅核心價值在於約束 + 語義 + 風格系統嘅結合：

  • • 內置語義形狀詞彙（LLM用雙邊框矩形、Agent用六邊形、Vector Store用帶環圓柱）。
  • • 語義箭頭系統（唔同顏色/虛實線區分讀/寫/異步/循環）。
  • • 7種精選視覺風格，直接可以用喺文檔、PPT、博客、產品官網等生產級場景。
  • • 輸出可編輯SVG + 1920px無損PNG，完美適應各種場景。

佢特別擅長AI/Agent相關圖，比如：RAG管道、Mem0記憶架構、多智能體協作、Tool Call流程等，呢啲喺當前AI浪潮之下極其實用。

二、核心功能一覽

  • • 7種風格：
    1. 1. Flat Icon（預設扁平圖標風）—— 文檔/PPT首選。
      圖片
    2. 2. Dark Terminal（暗黑終端風）—— 極客感滿滿。
      圖片
    3. 3. Blueprint（工程藍圖風）—— 架構設計文檔絕配。
      圖片
    4. 4. Notion Clean（極簡風）。
      圖片
    5. 5. Glassmorphism（毛玻璃/玻璃態風）—— 產品演示吸睛。
      圖片
    6. 6. Claude Official（温暖專業風）。
      圖片
    7. 7. OpenAI Official（現代極簡風）。
      圖片
  • • 支援圖類型：全14種UML + AI/Agent專用架構、流程、對比矩陣、概念圖等。
  • • 額外：40+產品品牌圖標（OpenAI、Anthropic、Pinecone、PostgreSQL等）、泳道分組、自動佈局優化。

三、安裝同使用方法（超級簡單）

1. 安裝（一行命令就得）

npx skills add yizhiyanhua-ai/fireworks-tech-graph

更新時可以直接用下面嘅命令：

npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y

2. 環境依賴（匯出PNG需要先安裝PNG渲染器）

# 推薦：cairosvg（CSS 支持最好）
pip install cairosvg

# 備選：rsvg-convert（系統包，可能丟失 CSS / <foreignObject>）
brew install librsvg                   # macOS
sudo apt install librsvg2-bin          # Ubuntu/Debian

# 最高保真：puppeteer（真實 Chromium，體積較大）
npm install puppeteer

# 驗證安裝（任一即可）
python3 -c "import cairosvg; print(cairosvg.__version__)"
rsvg-convert --version

3. 實用提示詞示例（直接複製改改就可以用）

基礎用法：

  • • 「畫一張RAG管道流程圖」
  • • 「生成Multi-Agent協作架構圖」

指定風格：

  • • 「畫一張微服務架構圖，風格2（暗黑終端風）」
  • • 「用玻璃態風格畫一個Mem0記憶架構」

詳細控制（推薦，效果更穩定）：

  • • 「畫一張style 1（Flat Icon）嘅Mem0記憶架構圖。分成Input Layer、Memory Manager、Storage Layer、Output/Retrieval四層。包含User、LLM、Vector Store等，用語義箭頭區分讀寫。」

輸出控制：

  • • 「生成XX圖，輸出到~/Desktop/」

觸發詞：包含「畫圖」「架構圖」「流程圖」「可視化」等關鍵詞，Skill會自動啟動。

中文支援優秀，直接用中文描述就得。

四、實際使用分析：優點同限制

顯著優點：

  • • 效率飛躍：從描述到可用圖，秒級完成，遠超手動。
  • • 視覺專業度高：7種風格直接可以用嚟上生產文檔或彙報，唔使再二次美化。
  • • 語義理解強：對AI技術棧特別識，生成嘅圖邏輯清晰、元素專業。
  • • 可維護性好：SVG可以導入編輯器微調，PNG直接嵌入。

侷限性：

  • • 依賴Claude Code環境（或其他支援Skill嘅工具）。
  • • 極複雜/高度自定義圖可能仲要手動微調SVG。
  • • 佈局間中會有少少碰撞、重疊（作者提供咗visual self-review建議，可以迭代優化）。
  • • PNG匯出依賴rsvg-convert，不過本地環境依賴配置一次就得。

總體嚟講，佢或者唔係「萬能繪圖神器」，但係就極大提升咗80%常見技術圖嘅產出質素同速度。可以話係喺「夠用」同「驚豔」之間，揾到咗比較好嘅平衡。

五、使用建議同最佳實踐

  1. 1. 善用穩定提示模板：倉庫README裏面有7種風格嘅「Stable Prompt Recipes」，強烈建議參考，可以顯著提高一次成功率。
  2. 2. 進階：熟悉語義詞彙同佈局規則之後，輸出質素會進一步提升。項目scripts目錄裏面有驗證工具，可以用嚟批量生產。
  3. 3. 替代方案互補：簡單inline圖可以繼續用Mermaid，手動極致美化就用draw.io，呢個Skill主打「描述即所得」嘅中高端場景。

最後：非常值得一試嘅生產力工具

喺AI Coding工具越來越豐富嘅今日，fireworks-tech-graph係一個典型嘅高質素「Skill」案例。佢將模糊需求轉化為結構化、可視化資產，真正體現咗「讓AI識技術、識審美」嘅方向。

對於開發者、架構師、技術作家、AI產品經理嚟講，安裝試用一下，基本上唔會失望。尤其係寫AI相關內容嘅時候，會發現效率同輸出質素提升非常明顯。效率提升，從一張好圖開始。

項目地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph

（本文基於公開GitHub倉庫資訊整理，工具效果以實際使用為準。）

平時要畫一張像樣的系統架構圖，要麼手敲Mermaid語法調半天，要麼打開draw.io點點點半天，出來的效果還常常是“將就”，現在藉助AI工具也能生成Mermaid語法預覽圖，但輸出的結果卻往往不盡如意，要麼太醜，要麼錯誤百出還無法編輯。

最近發現一個非常棒的Claude Skill技能：fireworks-tech-graph。只靠自然語言描述（支持中文），就能生成生產級SVG + 高清PNG技術圖，而且支持7種精美風格、14種UML圖，以及大量AI/Agent領域專用模式。

圖片

這個技能不是簡單的使用模型生成圖片，而是真正懂技術語義的“智能繪圖引擎”，今天就來詳細分享一下這個項目。

一、這個項目到底解決了什麼痛點？

傳統工具的侷限性很明顯：

  • • Mermaid：語法友好，但視覺風格單一，複雜圖容易亂，導出PNG質量一般。
  • • draw.io / Excalidraw：手動調整自由，但效率低，風格統一難。
  • • 純AI生成：以前直接讓Claude畫圖，往往佈局亂、元素碰撞、專業度不夠。最近GPT模型的直接出圖效果雖然不錯，但涉及到大量中文等場景時，還是會有小問題。

fireworks-tech-graph的核心價值在於約束 + 語義 + 風格系統的結合：

  • • 內置語義形狀詞彙（LLM用雙邊框矩形、Agent用六邊形、Vector Store用帶環圓柱）。
  • • 語義箭頭系統（不同顏色/虛實線區分讀/寫/異步/循環）。
  • • 7種精選視覺風格，直接可用在文檔、PPT、博客、產品官網等生產級場景。
  • • 輸出可編輯SVG + 1920px無損PNG，完美適配各種場景。

它特別擅長AI/Agent相關圖，比如：RAG管道、Mem0記憶架構、多智能體協作、Tool Call流程等，這些在當前AI浪潮下極其實用。

二、核心功能一覽

  • • 7種風格：
    1. 1. Flat Icon（默認扁平圖標風）—— 文檔/PPT首選。
      圖片
    2. 2. Dark Terminal（暗黑終端風）—— 極客感滿滿。
      圖片
    3. 3. Blueprint（工程藍圖風）—— 架構設計文檔絕配。
      圖片
    4. 4. Notion Clean（極簡風）。
      圖片
    5. 5. Glassmorphism（毛玻璃/玻璃態風）—— 產品演示吸睛。
      圖片
    6. 6. Claude Official（温暖專業風）。
      圖片
    7. 7. OpenAI Official（現代極簡風）。
      圖片
  • • 支持圖類型：全14種UML + AI/Agent專用架構、流程、對比矩陣、概念圖等。
  • • 額外：40+產品品牌圖標（OpenAI、Anthropic、Pinecone、PostgreSQL等）、泳道分組、自動佈局優化。

三、安裝與使用方法（超級簡單）

1. 安裝（一行命令就行）

npx skills add yizhiyanhua-ai/fireworks-tech-graph

更新時可以直接用下面的命令：

npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y

2. 環境依賴（導出PNG需要先安裝PNG渲染器）

# 推薦：cairosvg（CSS 支持最好）
pip install cairosvg

# 備選：rsvg-convert（系統包，可能丟失 CSS / <foreignObject>）
brew install librsvg                   # macOS
sudo apt install librsvg2-bin          # Ubuntu/Debian

# 最高保真：puppeteer（真實 Chromium，體積較大）
npm install puppeteer

# 驗證安裝（任一即可）
python3 -c "import cairosvg; print(cairosvg.__version__)"
rsvg-convert --version

3. 實用提示詞示例（直接複製改改就能用）

基礎用法：

  • • “畫一張RAG管道流程圖”
  • • “生成Multi-Agent協作架構圖”

指定風格：

  • • “畫一張微服務架構圖，風格2（暗黑終端風）”
  • • “用玻璃態風格畫一個Mem0記憶架構”

詳細控制（推薦，效果更穩定）：

  • • “畫一張style 1（Flat Icon）的Mem0記憶架構圖。分成Input Layer、Memory Manager、Storage Layer、Output/Retrieval四層。包含User、LLM、Vector Store等，用語義箭頭區分讀寫。”

輸出控制：

  • • “生成XX圖，輸出到~/Desktop/”

觸發詞：包含“畫圖”“架構圖”“流程圖”“可視化”等關鍵詞，Skill會自動激活。

中文支持優秀，直接用中文描述即可。

四、實際使用分析：優點&侷限

顯著優點：

  • • 效率飛躍：從描述到可用圖，秒級完成，遠超手動。
  • • 視覺專業度高：7種風格直接能上生產文檔或彙報，不用再二次美化。
  • • 語義理解強：對AI技術棧特別懂，生成的圖邏輯清晰、元素專業。
  • • 可維護性好：SVG可導入編輯器微調，PNG直接嵌入。

侷限性：

  • • 依賴Claude Code環境（或其他支持Skill的工具）。
  • • 極複雜/高度自定義圖可能仍需手動微調SVG。
  • • 佈局偶爾會有小碰撞、重疊（作者提供了visual self-review建議，可迭代優化）。
  • • PNG導出依賴rsvg-convert，不過本地環境依賴配置一次就好了。

總體來說，它也許不是“萬能繪圖神器”，但卻極大提升了80%常見技術圖的產出質量和速度。可以說是在“夠用”和“驚豔”之間，找到了比較好的平衡。

五、使用建議與最佳實踐

  1. 1. 善用穩定提示模板：倉庫README裏有7種風格的“Stable Prompt Recipes”，強烈建議參考，能顯著提高一次成功率。
  2. 2. 進階：熟悉語義詞彙和佈局規則後，輸出質量會進一步提升。項目scripts目錄裏有驗證工具，可用於批量生產。
  3. 3. 替代方案互補：簡單inline圖可以仍用Mermaid，手動極致美化仍用draw.io，這個Skill主打“描述即所得”的中高端場景。

最後：非常值得一試的生產力工具

在AI Coding工具越來越豐富的今天，fireworks-tech-graph是一個典型的高質量“Skill”案例。它把模糊需求轉化為結構化、可視化資產，真正體現了“讓AI懂技術、懂審美”的方向。

對於開發者、架構師、技術作家、AI產品經理來說，安裝試用一下，基本不會失望。尤其在寫AI相關內容時，會發現效率和輸出質量提升非常明顯。效率提升，從一張好圖開始。

項目地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph

（本文基於公開GitHub倉庫信息整理，工具效果以實際使用為準。）