前言¶

需求評審、技術方案或數據庫設計裏，經常要把文字邏輯落成圖：流程怎麼走、模塊怎麼拆、表怎麼關聯。自己在 ProcessOn 裏拖節點可以，但從零搭骨架往往佔掉不少時間；讓模型只輸出 Mermaid 或 ASCII，又常常還要再導入、再改樣式。

下面介紹的是 SkillHub 上的 ProcessOn Diagram Generator（@user_697d94c5/processon-diagramgen，當前版本 v2.5.2）。它由 ProcessOn 官方研發，掛在社區技能（community）的 design-media 分類下，標籤標明 requires_api_key=false，安裝時無需單獨配置 API Key。技能目標是：把自然語言（以及 Mermaid 數據）轉成 精美、專業、可在線編輯 的 ProcessOn 圖表，而不是停留在對話裏的靜態示意。

這是什麼¶

一句話：面向 Agent 的 ProcessOn 官方繪圖技能，在用戶提出「畫圖 / 生成圖表 / 可視化業務流程」等需求時，由模型調用技能完成出圖。

• 座標：@user_697d94c5/processon-diagramgen
• 維護方：ProcessOn 官方（SkillHub 頁面與已抓取資料一致）
• 解決的問題：結構化圖表從描述到可編輯成品之間的手工搭建成本

與「只在回覆裏貼 Mermaid 代碼」相比，本技能強調產出 ProcessOn 專業可視化圖表，並支持 Mermaid 數據直接繪製（資料原文表述）。

核心功能¶

以下能力均來自 SkillHub 簡介與頁面說明，不展開未在資料中出現的接口細節。

1. 自然語言一鍵成圖
   用口語描述業務或系統，生成可編輯的在線圖表。

2. 多類圖表類型（資料列舉）
   - 流程圖：含業務流程圖、泳道圖、標準流程
   - 時序圖：系統交互、API 調用順序
   - 架構圖：軟件架構、雲架構、系統模塊劃分
   - ER 圖：數據庫建模
   - 組織結構圖：團隊層級
   - 時間軸、信息圖

3. Mermaid 直連
   已有 Mermaid 描述時，可走「mermaid 數據直接繪製」路徑，減少重複排版。

4. Agent 側觸發語義（技能說明中的強制觸發場景）
   當用戶要求生成、繪製、重繪、渲染或可視化結構化圖表，或出現「自動畫圖」「在線製作流程圖」「生成系統架構」「把這段邏輯畫出來」「轉成可編輯圖」「重繪草圖」等表達時，應優先調用本技能，而不是跳過技能僅用純文本描述圖。

目標用戶畫像在官方文案中爲：開發者、產品經理、設計師。

安裝與啓用¶

1. 安裝 SkillHub CLI（若尚未安裝）¶

先檢查是否已有 skillhub：

command -v skillhub && skillhub --version

未安裝時，可按 SkillHub 官方安裝文檔執行完整安裝（CLI + 默認 Skill）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

僅 CLI：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

說明文檔：https://skillhub.cn/install/skillhub.md。

2. 安裝本技能¶

安裝時必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認落在 ./skills/，Agent 可能識別不到。

skillhub install user_697d94c5/processon-diagramgen --dir <你的 skills 目錄>

SkillHub 頁面亦提供「交給 AI 安裝」的提示：讓 Agent 根據 https://skillhub.cn/install/skillhub.md 安裝 @user_697d94c5/processon-diagramgen。

3. 常見 Agent 的 skills 目錄¶

（摘自 SkillHub 安裝文檔，按你實際使用的客戶端選擇路徑。）

安裝後若 Agent 未立刻加載新技能，按所用客戶端說明重啓或刷新技能列表（安裝文檔提到 OpenClaw 等場景需指向正確目錄）。

典型用法¶

資料未給出逐步截圖教程，可復現的用法是：在已啓用技能的 Agent 裏，用自然語言或 Mermaid 提出繪圖需求，由模型調用 @user_697d94c5/processon-diagramgen 完成生成。

自然語言示例（意圖對齊官方觸發語）

1. 向 Agent 說明：「請用 ProcessOn 畫一張訂單支付業務流程圖，包含創建訂單、支付回調、發貨三個主階段。」
2. Agent 應識別爲圖表生成請求並調用本技能，而不是隻輸出文字步驟。
3. 在技能返回的 ProcessOn 鏈接或編輯入口中繼續微調版式與節點文案。

Mermaid 示例（能力來自「支持 mermaid 數據直接繪製」）

1. 先寫好 Mermaid 源碼（例如 flowchart TD 或 sequenceDiagram）。
2. 說明：「用 ProcessOn Diagram Generator 把下面 Mermaid 畫成可編輯圖」，並附上代碼塊。
3. 由技能完成導入式繪製，再在 ProcessOn 中編輯。

搜索技能時也可在 CLI 中檢索：

skillhub search processon

再按第三節命令安裝到對應 --dir。

適用場景與注意¶

適合

• 需要 在線、可協作、可繼續編輯 的流程圖、架構圖、ER 圖等，且希望從描述快速起稿。
• 團隊已使用 ProcessOn，希望 Agent 產出與現有工具鏈一致的圖表，而非孤立圖片。
• 不想爲繪圖技能單獨申請 API Key（requires_api_key=false）。

注意

• 技能歸屬 community 源，安裝前可按 SkillHub 慣例確認版本（當前頁面爲 v2.5.2）與來源說明。
• 頁面展示的統計爲評分 100000、下載 18261、安裝 433（以 SkillHub 頁面實時數據爲準，寫作時自資料覈對）。
• 具體返回形式（鏈接、嵌入方式等）以技能包內 SKILL.md 與運行時代碼爲準；本文未寫入資料中未出現的配置項或環境變量。
• 複雜草圖重繪、路線圖、金字塔圖等也在技能觸發說明範圍內，但細節能力仍以官方簡介列舉的類型爲主，不宜假定未列出的專有圖表引擎。

結尾¶

ProcessOn Diagram Generator 把「描述 / Mermaid → ProcessOn 可編輯專業圖」封裝成 Agent Skill，適合在寫方案、對齊流程、畫架構時減少從零排版。無需 API Key 即可按 SkillHub 流程安裝到 Cursor、Claude Code、Codex 等環境的 skills 目錄。

• SkillHub 頁面：https://www.skillhub.cn/skills/user_697d94c5/processon-diagramgen
• API 座標頁：https://api.skillhub.cn/user_697d94c5/processon-diagramgen
• 安裝說明：https://skillhub.cn/install/skillhub.md