"Simple Drawing": Integrating SVG, Mermaid, Graphviz, and ASCII Diagrams into a Single 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

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

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

Xiaoye