「簡易繪圖」:把 SVG、Mermaid、Graphviz 和 ASCII 繪圖收進一個 Skill

前言

寫文檔、寫設計稿、寫週報時,經常需要一張圖:一張流程圖說明分支,一張架構圖說明組件關係,一個圖標或插畫撐起版面,或者只是終端裏一張對齊的 ASCII 示意圖。

這些圖現在要分散在多個工具裏完成:SVG 要手寫標籤,Mermaid 要記語法,Graphviz 要裝環境,ASCII 要手工敲空格對齊。每換一個場景就要換一套心智。

下面介紹的 Skill 嘗試把這幾類繪圖統一到一個入口:給一句需求,由模型選擇合適的輸出形式生成圖。

這是什麼

「簡易繪圖」是一個基於通用 SKILL.md 格式的 Agent Skill,座標 @user_248a06c6/simple-drawing,由社區發佈者 user_248a06c6 維護,當前版本 1.0.0,來源標記爲 community,分類屬於 design-media。

它解決的問題是:在對話式或 Agent 環境中,把「我要一張圖」這類模糊需求落成具體可讀的圖形,而不需要用戶自己切換到繪圖軟件或查語法手冊。

核心功能

官方簡介列出的能力是四類繪圖技術的覆蓋,可以按輸出形式劃分:

  1. SVG 繪圖:生成插畫、圖標和圖表,屬於矢量輸出,可嵌入 HTML 或 Markdown。
  2. Mermaid 圖表:創建流程圖和示意圖,語法是 Mermaid 的文本方言。
  3. Graphviz 繪圖:繪製架構圖、網絡圖,基於 DOT 描述。
  4. ASCII / Unicode 盒繪圖:生成終端友好的示意圖,用字符拼出框和連線。

此外它覆蓋了第五類訴求:爲文檔製作視覺輔助,即上述任意形式的配圖輸出。

標籤裏有一條 requires_api_key=false,說明啓用該 Skill 不需要額外配置 API Key,沒有密鑰側的前置成本。

安裝與啓用

官方地址與座標:

官方頁面: https://api.skillhub.cn/user_248a06c6/simple-drawing
SkillHub 頁面: https://www.skillhub.cn/skills/user_248a06c6/simple-drawing
座標: @user_248a06c6/simple-drawing
版本: 1.0.0

需要說明的是:寫作時上述兩個頁面均抓取失敗,因此官方安裝命令、Skill 目錄位置和配置文件字段沒能從一手頁面覈對到。下面的安裝步驟留空,不臆造命令。

安裝命令: 未覈實(官方頁面抓取失敗)
配置字段: requires_api_key=false,未發現其他必填項

如果你手上有可訪問的 SkillHub 頁面,先以頁面上的安裝說明爲準。

典型用法

按官方簡介的五類訴求,一次調用大致落在這些形態上。下面的代碼塊展示的是「期望產出的形態」,不是官方示例,用於說明每類能力的輸出長相。

1、SVG 圖標或插畫。產出是一段可直接嵌入的 SVG 文本:

<svg viewBox="0 0 64 64" width="64" height="64">
  <circle cx="32" cy="32" r="28" fill="#eef" stroke="#4477aa"/>
</svg>

2、流程圖和示意圖。產出是 Mermaid 文本:

graph TD
  A[需求] --> B{是否多步驟}
  B -->|是| C[分步繪製]
  B -->|否| D[單圖輸出]

3、架構圖、網絡圖。產出是 Graphviz 的 DOT 文本,交給本機 dot 渲染。

4、文檔視覺輔助。上述任意形式,按文檔語境選擇最輕的一種,通常優先 SVG 或 Mermaid,因爲可以隨文檔一起版本管理。

5、終端 ASCII 示意圖。產出是純文本框圖,用 +、-、| 拼框,適合在終端直接閱讀:

+-------+      +-------+
| 入口  |----->| 校驗  |
+-------+      +-------+

調用方式就是給出需求本身,例如「畫一張三層架構圖」或「用 ASCII 畫個請求鏈路」,Skill 負責選擇具體形式。

適用場景與注意

適合這幾類人:需要頻繁給文檔配圖的作者、要在對話裏快速出架構圖的工程師、在終端環境工作且不方便開圖形工具的場景。

需要注意的限制:

  • 能力上限偏向「簡易」。SVG 適合圖標和簡單插畫,複雜插畫、精細排版不在這個 Skill 的範圍內,硬用會得到粗糙的結果。
  • Mermaid 需要宿主環境能渲染它(例如支持 Mermaid 的 Markdown 渲染器或前端),Graphviz 需要本機已安裝 dot 命令,否則 DOT 文本只是一段文本。
  • ASCII 框圖依賴終端等寬字體。含中文的框線對齊容易偏移,因爲中日韓字符在等寬終端裏通常佔兩列,跨行寬度不一致。
  • 社區來源意味着更新節奏由發佈者決定。寫作時抓取到的記錄顯示評分爲 100000、下載 943、安裝 0,安裝數爲 0 說明還沒有公開的安裝統計,實際可用性建議先在小範圍試用。

結尾

「簡易繪圖」的價值在於把四類繪圖技術的調用入口收斂到一個 Skill,讓「我要一張圖」變成一句需求而不是一次工具切換。它不追求精細插畫或複雜渲染,覆蓋的是文檔配圖、架構示意和終端框圖這些高頻輕量場景。

官方地址:https://api.skillhub.cn/user_248a06c6/simple-drawing

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜