Flowchart and Architecture Diagram Generation: Directly Produce Renderable Mermaid / PlantUML Code

前言

写技术文档、做方案评审时,把业务流程或系统架构讲清楚,通常要借助绘图工具。但手绘图形费时间,截图贴到文档里又不好维护:流程一改,图就得重画,版本一多,图和文档经常对不上。

这个 Skill 走另一条思路:不画图,而是生成图的描述代码(Mermaid / PlantUML),代码可以直接渲染成流程图、架构图、时序图、ER 图,改起来就是改几行文本。下面介绍它的具体能力、启用方式和使用上要注意的地方。

这是什么

「流程图架构图生成」(坐标 @kunlungrowth/diagram-as-code,版本 1.0.0)是一个面向大模型 Skill 生态的代码生成 Skill,发布者为「昆仑增长」,来源标注 enterprise,分类 dev-programming。

它解决的问题很明确:用户用自然语言描述业务流程或系统架构,Skill 负责把这些描述转成 Mermaid 或 PlantUML 代码,用户再把代码粘贴到支持渲染的环境里出图。整个过程不需要用户自己掌握绘图语法。

核心功能

根据官方页面提供的资料,已核实的能力有三项:

1、双格式输出:生成 Mermaid 或 PlantUML 代码,两种格式在渲染生态里都比较通用,Mermaid 适合文档、Wiki 类场景,PlantUML 适合更正式的架构建模场景。

2、覆盖四类图:流程图、架构图、时序图、ER 图。流程类、结构类、时间维度和数据关系类图都有对应语法,说明 Skill 内部对这几类图都做了支持,而不是只做流程图。

3、触发词驱动:官方给出的触发词是「流程图、架构图、Mermaid、时序图」。也就是说,对话里出现这些词时,Skill 就会被激活,用户不需要记专门的命令。

另外,页面元数据里标注了 requires_api_key=false,即启用这个 Skill 不需要额外的 API Key。

安装与启用

已抓取的资料中没有给出安装命令,也没有 Cursor / Codex CLI / Claude Code 等具体客户端的接入步骤,页面上显示的安装数为 0,因此这一步只能按现有信息说明,不展开命令。

可核实的入口有两个:

SkillHub 页面:https://www.skillhub.cn/skills/kunlungrowth/diagram-as-code
API 地址:https://api.skillhub.cn/kunlungrowth/diagram-as-code

Skill 坐标是 @kunlungrowth/diagram-as-code,如需在客户端里配置,用这个坐标定位。

典型用法

官方资料给出的用法路径是三步:描述业务流程或系统架构 → Skill 生成 Mermaid / PlantUML 代码 → 代码渲染成图。

举例来说,向 Skill 描述一个订单处理流程,期望得到的是一段 Mermaid 代码。下面这段是 Mermaid 流程图的标准语法,可以说明产出的形式:

graph TD
    A[下单] --> B{支付成功?}
    B -- 是 --> C[发货]
    B -- 否 --> D[取消订单]

把这段代码放进支持 Mermaid 渲染的 Markdown 环境,就会显示成一张流程图。用户改流程时,改的是这段文本,而不是重新画图。

时序图、ER 图同理,产出分别是 Mermaid / PlantUML 里对应的语法块,渲染依赖的是渲染环境本身对这些语法的支持,Skill 只负责把描述转成代码。

适用场景与注意

适合这几类人:经常写技术文档、设计文档的工程师;需要在方案评审里快速出图的人;团队里图和文档维护脱节、想用代码方式管理图的人。

需要注意的点:

1、渲染能力不在 Skill 里。Skill 只产代码,出图要依赖支持 Mermaid / PlantUML 渲染的环境(如各类 Markdown 编辑器、文档平台、PlantUML 服务端)。先确认你要用的文档环境支持哪种语法,再选输出格式。

2、描述质量决定图的质量。Skill 是根据自然语言描述生成代码,架构层级、节点关系这些信息如果描述里没交代清楚,生成的图也会有遗漏。复杂系统建议分模块描述,而不是一次性塞一段长描述。

3、资料有限,落地前建议先试一次。官方资料没有给出安装命令和客户端接入说明,安装数为 0,说明公开的使用案例很少。在把它放进正式流程之前,建议先用一个简单流程验证输出语法和目标渲染环境是否兼容。

结尾

这个 Skill 的价值在于把「画图」变成「写描述 + 渲染代码」,流程改动只体现在文本上,图的维护成本和文档一致。对于已经在用 Mermaid / PlantUML 的团队,它省的是记语法和写代码的时间;对于还没用上的团队,它提供了一个低门槛的入口。

官方地址:https://api.skillhub.cn/kunlungrowth/diagram-as-code,SkillHub 页面:https://www.skillhub.cn/skills/kunlungrowth/diagram-as-code

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

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

Xiaoye