🏪 #TRAE技巧便利店 | AI + Trae 打造 UML MCP，让画流程图不再是负担
📌 项目地址：github.com/icatw/uml-m…
⭐ 欢迎 Star 支持，让更多人发现 AI + Trae 的便利！
🎯 背景与痛点
在研发中，流程图 / 时序图 / 类图 已成日常必备：
传统制图工具问题：
需求：
👉 自然语言描述 → 自动生成 UML 图
👉 IDE 中 AI 对话 → 直接产出 PlantUML 语法
解决方案：AI + Trae + MCP (Model Context Protocol)
⚙️ 实现思路
1️⃣ MCP Server：封装 PlantUML 工具
uml-mcp 是 MCP Server，提供 generate_uml 方法：
输入：自然语言描述
例如：
“用户提交申请 → 系统校验 → 审批人审批 → 通知用户”
输出：PlantUML 语法
@startuml
actor 用户
participant 系统
participant 审批人
用户 -> 系统 : 提交申请
系统 -> 系统 : 校验参数
系统 -> 审批人 : 审批请求
审批人 -> 系统 : 审批结果
系统 -> 用户 : 通知结果
@enduml
2️⃣ Trae 配置调用 MCP
.mcp.config.json 示例：
{
"mcpServers": {
"uml-mcp-renderer": {
"command": "uv",
"args": [
"--directory",
"/path/to/uml-mcp",
"run",
"python",
"server.py"
],
"env": {
"PLANTUML_JAR_PATH": "/path/to/uml-mcp/plantuml.jar",
"JAVA_EXECUTABLE": "java",
"RENDER_TIMEOUT": "30",
"ENABLE_CACHE": "true",
"OUTPUT_DIR": "/path/to/uml-mcp/output"
}
}
}
}
对 AI 说：
“帮我画一个审批流程的时序图：用户提交申请 → 系统校验 → 审批人审批 → 通知用户”
即可返回 PlantUML 语法。
3️⃣ 🛠️ MCP 工具（简化版）
4️⃣ 在线预览（现阶段方案）
- PlantUML 在线渲染器（如 PlantText）
- 本地 PlantUML + Graphviz：
java -jar plantuml.jar xxx.puml
💡 实操体验
自然语言描述接口调用流程，AI 输出 PlantUML 语法：
@startuml
actor 前端
participant 网关
participant 用户服务
database 数据库
前端 -> 网关 : 请求
网关 -> 用户服务 : 调用接口
用户服务 -> 数据库 : 查询数据
数据库 --> 用户服务 : 返回数据
用户服务 --> 网关 : 返回结果
网关 --> 前端 : 响应
@enduml
复制到 PlantUML 渲染器即可生成流程图。
🚀 后续计划
🔑 总结
AI + Trae + MCP 的价值：
- 效率提升：自然语言描述业务 → 快速生成流程图
- 自动化：减少手工绘制，保证文档和代码一致
- 可扩展：未来接入前端，可视化与协作能力增强
流程复杂？直接交给 AI 画图吧～ 🚀
