Menu
生成和编辑 draw.io（diagrams.net）XML 格式的架构图、流程图、时序图、ER 图、类图等，支持创建新图、修改现有图、添加/删除元素，输出可直接在 draw.io 中打开的 .drawio 文件。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | drawio-designer |
| description | 生成和编辑 draw.io（diagrams.net）XML 格式的架构图、流程图、时序图、ER 图、类图等，支持创建新图、修改现有图、添加/删除元素，输出可直接在 draw.io 中打开的 .drawio 文件。 |
生成和编辑 draw.io XML 格式的各类技术图表，输出 .drawio 文件可直接在 draw.io 桌面版或 VS Code Draw.io 插件中打开编辑。
使用方式：在聊天中输入 #drawio-designer 并描述你需要的图表内容。
#drawio-designer
帮我画一个订单系统的架构图，包含 Controller、Service、Repository、数据库 四层
#drawio-designer
根据 order-server 的代码结构，生成一个类图
#drawio-designer
画一个订单创建的流程图：用户下单 → 参数校验 → 费用计算 → 创建订单 → 推送消息
#drawio-designer
帮我画一个 ER 图，包含 tb_order、tb_order_fees_record、tb_order_fill_detail 三张表的关系
#drawio-designer
修改 doc/design/order-flow.drawio，在"费用计算"节点后面增加一个"风控检查"节点
#drawio-designer
画一个订单消息处理的时序图：OrderController → OrderService → FeeCalculationService → KafkaProducer
| 图表类型 | 说明 | 适用场景 |
|---|---|---|
| 架构图 | 系统分层、模块关系 | 系统设计、技术方案 |
| 流程图 | 业务流程、审批流程 | 需求分析、流程梳理 |
| 时序图 | 模块间调用时序 | 接口设计、问题排查 |
| ER 图 | 数据库表关系 | 数据库设计 |
| 类图 | 类继承、依赖关系 | 代码设计、重构 |
| 部署图 | 服务部署拓扑 | 运维部署 |
| 思维导图 | 知识梳理、方案对比 | 头脑风暴、文档整理 |
生成的 draw.io XML 必须遵循以下结构：
<mxfile host="app.diagrams.net" modified="2026-04-27T00:00:00.000Z" agent="Kiro" version="24.0.0" type="device">
<diagram id="diagram-id" name="图表名称">
<mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- 图表元素从这里开始 -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
mxCell 必须有唯一的 idnode-controller、edge-ctrl-to-svc0，第一层 parent 固定为 1<mxCell id="node-1" value="OrderController" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=14;fontStyle=1;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="200" height="60" as="geometry" />
</mxCell>
<mxCell id="node-db" value="MySQL" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;" vertex="1" parent="1">
<mxGeometry x="100" y="400" width="120" height="80" as="geometry" />
</mxCell>
<mxCell id="edge-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" source="node-1" target="node-2" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="edge-2" value="调用" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;" edge="1" source="node-1" target="node-2" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
| 层级/类型 | 填充色 | 边框色 | 用途 |
|---|---|---|---|
| Controller | #dae8fc | #6c8ebf | 蓝色系，接入层 |
| Service | #d5e8d4 | #82b366 | 绿色系，业务层 |
| Repository/DAO | #fff2cc | #d6b656 | 黄色系，数据层 |
| Database | #f5f5f5 | #666666 | 灰色系，存储 |
| External/RPC | #e1d5e7 | #9673a6 | 紫色系，外部依赖 |
| MQ/Kafka | #f8cecc | #b85450 | 红色系，消息队列 |
| Config/Job | #fff2cc | #d6b656 | 黄色系，配置/任务 |
| 决策/判断 | #fff2cc | #d6b656 | 菱形，流程分支 |
| 开始/结束 | #d5e8d4 | #82b366 | 圆角，流程起止 |
edgeStyle=orthogonalEdgeStyle）<mxCell id="start" value="开始" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;arcSize=50;" vertex="1" parent="1">
<mxGeometry x="200" y="20" width="120" height="40" as="geometry" />
</mxCell>
<mxCell id="decision-1" value="参数校验通过？" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
<mxGeometry x="175" y="160" width="170" height="80" as="geometry" />
</mxCell>
当用户提供现有 .drawio 文件路径时：
.drawio（不是 .xml）doc/design/ 目录下order-flow.drawio、system-architecture.drawio基于 Playwright MCP 的浏览器自动化测试，支持页面交互、录制回放、接口验证、结合后端代码做端到端测试。当用户提到浏览器测试、页面测试、UI测试、录制操作、自动化测试、playwright 时激活。
Use JADX to decompile JAR/APK/DEX/AAR files. Especially good for Android apps. Supports CLI batch decompilation and GUI browsing.
通过 Apache SkyWalking MCP Server 查询和分析应用性能指标，支持服务拓扑、链路追踪（Trace）、日志查询、MQE 指标表达式、告警查询、实例/端点分析等，帮助开发者快速定位性能瓶颈、异常链路和线上问题。当用户提到 skywalking、APM、链路追踪、trace、性能分析、慢接口、拓扑图、服务指标、P99、响应时间、吞吐量、错误率、告警 时激活。
通过 Apache SkyWalking MCP Server 查询和分析应用性能指标，支持服务拓扑、链路追踪（Trace）、日志查询、MQE 指标表达式、告警查询、实例/端点分析等，帮助开发者快速定位性能瓶颈、异常链路和线上问题。当用户提到 skywalking、APM、链路追踪、trace、性能分析、慢接口、拓扑图、服务指标、P99、响应时间、吞吐量、错误率、告警 时激活。
通过 Grafana Loki MCP Server 查询线上/测试环境日志，支持按服务名和关键词搜索、日志量统计、上下文日志获取、服务列表查询等，帮助开发者快速定位线上问题。当用户提到查日志、看日志、log、error、exception、线上报错、排查问题、Loki、Grafana 或具体服务名时激活。
基于 JProfiler 的 Java 性能与内存深度分析 Skill，支持 Heap Snapshot（.jps）、CPU Snapshot、Thread Dump、Allocation Recording 等离线分析，结合 JProfiler 命令行工具链实现自动化诊断，覆盖内存泄漏、CPU 热点、线程瓶颈、数据库慢查询、锁竞争等全方位性能问题。