Diagram 生成器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @zcwl/diagram-generator。
技能介绍
解决什么问题
工程师常要把口头需求、评审结论或文档说明变成可维护的图表,但手写 Draw.io、Mermaid 或 Excalidraw 文件时,容易在节点 ID、容器嵌套、边连接和坐标布局上反复返工。该技能面向这类场景:把自然语言输入先约束为结构化 JSON 规范,再生成三种格式的图表文件,减少从“画一个架构图”到可用文件之间的低层描述成本。
如何工作
- 意图采集:新建图表前确认图类型、输出格式、布局方向、使用场景和文件名;编辑已有文件时只读取目标文件并应用变更。
- Playbook 分派:网络拓扑、系统架构、流程图、泳道、UML、白板手绘分别读取对应策略文档,避免混用格式规则。
- 规范构建:按
elements数组组织节点、容器与边,要求 ID 唯一、边为顶层元素、source/target指向已定义节点,颜色使用#RRGGBB。 - 质量门校验:生成前检查格式、层级、容器边界、边连接与几何字段;复杂
Draw.io和Excalidraw图表需要提供显式geometry。 - 服务调用:通过
mcp__mcp-diagram-generator__generate_diagram提交diagram_spec,由服务校验 schema、创建目录并写入diagrams/{format}/或指定路径。
适用边界与注意
该技能不处理位图、SVG 矢量编辑、PDF 排版、PPT 制作、3D 建模或动画可视化。输出质量受 prompt 描述和 JSON 规范完整度影响;若 connector 工具缺失、输出目录无权限或扩展名不匹配,会直接触发工具、schema 或文件写入错误。
使用场景
- 后端团队评审电商系统时,把微服务分层说明转成垂直 Draw.io 架构图。
- 网络规划人员描述三数据中心双活拓扑,生成含环境、数据中心、区域、设备的 Draw.io 拓扑文件。
- 财务团队把报销审批流转说明转成水平泳道图,标注员工、主管、财务、出纳节点。
- 文档团队在代码仓库中为用户登录流程生成 Mermaid 时序图,便于嵌入 Markdown。
适合人员
- 负责架构文档的后端工程师:需要把服务分层、网关、数据层说明变成可评审的 Draw.io 架构图。
- 维护代码仓库文档的技术写作:需要把登录、订单等流程转成 Mermaid 时序图嵌入 Markdown。
- 做网络规划的网络工程师:需要把数据中心、区域、设备层级转成 Draw.io 拓扑图。
- 财务流程负责人:需要把报销审批、跨部门交接说明转成水平泳道图。