源自 GitHub系统架构与流程图绘制
根据用户提供的软硬件架构、数据流动、业务步骤或概念关系，自动提取实体节点与依赖关系，并选择由左至右、自上而下或泳道等拓扑布局，生成标准独立的 SVG/HTML 文件或 Excalidraw 白板文件。图表严格遵循排版规范，包括连接线置底防遮挡、文本安全边距、语义化配色和无外部依赖，既能用于技术文档与报告展示，也便于在线白板协作二次调整。
常见场景
它能帮你做什么？
01
技术架构拓扑与微服务关系图生成：输入云原生服务、数据库、消息队列与访问信任区等拓扑描述，自动排版并生成独立无依赖的架构 SVG/HTML 矢量图。
02
业务处理流程与泳道逻辑绘制：将跨部门业务流转步骤或软件生命周期转化为自上而下或泳道式流程图，直接嵌入技术方案、产品文档或演示报告中。
03
可二次编辑的白板手绘草图制作：将概念关系或原型交互步骤输出为 Excalidraw 原生格式，方便团队在在线白板中进一步拖拽微调与协同修改。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“把包含 API 网关、Redis 缓存、订单微服务和 Kafka 消息队列的系统拓扑画成 architecture-svg 架构图，保存为 diagram.html。”
“根据用户提交退款到原路到账的审核流转规则，生成一个支持在网页中二次拖拽编辑的 Excalidraw 白板文件。”
“用 clean-svg 模式绘制一套包含五个关键节点的细胞有丝分裂生命周期图，采用从左到右布局并标注各阶段特征。”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
