Agent Skills
返回列表
动态技术图生成器

动态技术图生成器

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_ab5ae6ee/dynamic-archify-unclecheng。

技能介绍

解决的问题

画技术图常被自动布局拖住：组件重叠、标签压线、泳道和边界不统一，导出后还无法跟随浅色/深色主题。dynamic-archify 把架构图、工作流、时序、数据流和生命周期图变成一组带校验的 JSON 渲染任务，输出自包含 HTML。

工作方式

技能先识别图表类型：architecture 适合系统组件、云资源与安全边界；workflow 适合流程、审批和 CI/CD；sequence 适合调用链；dataflow 适合管道、ETL 和 PII 隔离；lifecycle 适合状态机。核心流程是读对应 example、写 JSON、用 Node 渲染成 HTML，出错时提示 JSON 路径或布局问题，例如节点重叠、标签过宽、越界。它内置深浅主题切换、localStorage 记忆、PNG/JPEG/WebP/SVG 导出，支持动画 GIF/WebM。

边界与注意

生成 HTML 不依赖前端库，但渲染器需要 Node.js ≥18。Mermaid 只作为结构参考，不应机械解析；复杂图要控制列数、行高、标签长度和边界内边距。

使用场景

  • 设计新服务边界时，把 API、网关、数据库和安全组画成可嵌入文档的架构图。
  • 复盘一次发布事故时，把审批、人工确认、自动回滚步骤整理成工作流泳道图。
  • 排查超时问题时，把服务调用链、缓存命中和异步返回画成时序图用于评审。
  • 梳理 PII 数据管道时，用数据流图标出采集、清洗、入库和消费方及敏感边界。

适合人员

  • 负责系统架构评审的后端工程师，需要把组件依赖和安全边界快速画成可分享图。
  • 写故障复盘文档的 SRE，需要把事件时间线、调用链和状态变化转成评审图。
  • 准备数据合规材料的平台工程师，需要标注 PII 数据流、处理阶段和权限边界。
  • 维护技术文档的开发者，需要生成带深浅主题和 SVG 导出的 HTML 图嵌入 README。