【标签】 工作学习
【标题】 【学习工作赛道】 | DrillUML交互式 UML 编辑器
0. 先和大家打个招呼吧 
-
你是谁： 内部工具开发工程师/汽车仪表项目经理；
-
你是怎么用 TRAE 把 Demo 做出来的： 想法→spec→ralph plan→原型代码→debug调优
1. Demo 简介
-
是什么：一个支持「节点钻取子图」的交互式 UML 编辑器网站。用户用 Mermaid 语法编写 UML 图，点击任意节点即可展开其下挂的子图（支持多层嵌套），在一张画布上同时表达系统全貌与局部细节。
面向谁：软件开发者、系统架构师、技术文档编写者——任何需要用 UML 图分层描述复杂系统的人。
主要功能：
- Mermaid 实时渲染：输入 Mermaid 代码即时渲染 14 种 UML 图（状态图、流程图、时序图、类图等），支持语法高亮和错误提示。
- 节点钻取子图：右键节点挂载子图，左键节点展开/收起子图。子图以独立卡片形式组合到主画布外围，带 L 形 / Z 形连接线和箭头，支持多层嵌套和碰撞检测防遮挡。
- 图表保存与管理：图表列表支持多图表切换，代码和子图映射自动持久化到 localStorage，刷新不丢失。
2. Demo 创作思路
-
灵感来源：在实际工作中画架构图时常遇到一个矛盾——一张图放太多节点看不清全局，拆成多张图又丢失了上下文关联。Mermaid 语法简洁但生成的图是「扁平」的，无法表达「这个节点里面还有什么」的层次关系。如果能像地图一样「缩放看全局、点击看细节」，就能在一幅图中同时承载宏观和微观。
想解决的问题：复杂系统的 UML 建模存在「粒度两难」——
- 粒度太粗：一张图只有 5 个节点，看不出实现细节；
- 粒度太细：一张图 50 个节点，密密麻麻无法阅读；
- 拆多张图：图与图之间的关联只能靠文字描述，阅读时需要反复跳转。
节点钻取子图正是解决这个痛点的方案：顶层图保持简洁概览，需要细节时点击节点展开子图，子图还可以继续嵌套子图，形成自然的层次结构。
为什么做这个方向：
- 市面上的 UML 工具分两类：重型图形工具（Visio、Draw.io）操作繁琐；轻量文本工具（Mermaid、PlantUML）缺少交互层。
- 本项目取两者之长：用 Mermaid 语法快速生成图 + 用交互层补充钻取能力，面向「想快速画图但又需要分层表达」的开发者。
- 技术上选择 SVG 组合而非 Canvas，是因为 SVG 的 DOM 可操作性天然适合「在渲染后的图上叠加交互层和子图卡片」。
3. Demo 体验地址
4. TRAE 实践过程
-
清晰展示用 TRAE 完成 Demo 开发的完整流程；
-
附开发关键步骤截图（不少于 3 张）；
-
附关键任务对话的 Session ID（不少于 3 个），用于证明作品由 TRAE 开发完成。
-
4263232377470468:81ad3a7a4e7276a2cddccbfd8bcc82a6_6a3a34132b98ca15a5e70554.6a3a34132b98ca15a5e70557.6a3a34132b98ca15a5e70555:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/23 15:21:55)
-
4263232377470468:7561111a2a1d6d933602f61ddef97877_6a3a34132b98ca15a5e70554.6a3cc50aefc7c05037fa60b5.6a3cc50aefc7c05037fa60b3:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/25 14:04:58)
-
4263232377470468:fffc9e620bbd9c8bff668f890b8e597a_6a3a34132b98ca15a5e70554.6a3cccb6efc7c05037fa6157.6a3cccb6efc7c05037fa6155:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/25 14:37:42)
-
4263232377470468:19b03050fae86aa49b348e2523cd2258_6a3a34132b98ca15a5e70554.6a3ce1aeefc7c05037fa6302.6a3ce1aeefc7c05037fa6300:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/25 16:07:10)
-
4263232377470468:dfdec2d69e5e7d6d28ac3e54b8f8a7f1_6a3a34132b98ca15a5e70554.6a5450f96ff9c3341407d42f.6a5450f96ff9c3341407d42d:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/13 10:44:09)
5. 对应的报名审核通过的帖子链接