让 AI 替你画 UML：CodeBuddy + DrawIO 工作流
作者是 在线疯狂 发布于 2026年8月22日 在 LLM, Python, 碎碎念.

为什么用 AI 画 UML

软件工程中，UML（统一建模语言）是沟通需求、设计与实现的通用语言。但传统手绘 UML 有两大痛点：绘图工具学习成本高，以及代码演进后图容易过时。本文介绍一套工作流：用 CodeBuddy（AI 编程助手）生成 drawio（.drawio / .xml）源码，再导入 app.diagrams.net 可视化编辑与导出，快速产出类图、时序图、用例图等软件工程 UML 图。

整体工作流

1. 描述需求：向 CodeBuddy 说明要画什么图、包含哪些元素。
2. 生成源码：让 CodeBuddy 直接输出符合 drawio XML 格式的 .drawio 文件。
3. 导入查看：打开 app.diagrams.net，File → Open 加载该文件。
4. 微调导出：在界面里拖拽排版，导出 PNG/SVG/PDF 嵌入文档。

示例一：类图（Class Diagram）

假设我们有一个简单的订单系统，包含 User、Order、OrderItem 三个类。让 CodeBuddy 生成的 drawio 源码如下：

<mxfile host="app.diagrams.net">
  <diagram name="OrderClass" id="cls1">
    <mxGraphModel>
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="User" value="User|+id:int;+name:str;+email:str" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="40" width="160" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="Order" value="Order|+id:int;+total:float;+create()" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="160" width="160" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="OrderItem" value="OrderItem|+id:int;+qty:int" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="260" y="160" width="160" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;endArrow=none;html=1;" edge="1" parent="1" source="User" target="Order">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e2" style="edgeStyle=orthogonalEdgeStyle;endArrow=none;html=1;" edge="1" parent="1" source="Order" target="OrderItem">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

保存为 order_class.drawio，在 app.diagrams.net 打开即可看到三个类及其关联关系。

示例二：时序图（Sequence Diagram）

展示「用户下单」的跨对象交互：

<mxfile host="app.diagrams.net">
  <diagram name="OrderSeq" id="seq1">
    <mxGraphModel>
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="Actor" value="User" style="shape=actor;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="40" width="40" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="Ctrl" value="Controller" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="160" y="40" width="120" height="40" as="geometry"/>
        </mxCell>
        <mxCell id="Svc" value="Service" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="340" y="40" width="120" height="40" as="geometry"/>
        </mxCell>
        <mxCell id="m1" value="submitOrder()" style="endArrow=block;html=1;" edge="1" parent="1" source="Actor" target="Ctrl">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="m2" value="createOrder()" style="endArrow=block;html=1;" edge="1" parent="1" source="Ctrl" target="Svc">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="m3" value="result" style="endArrow=open;html=1;dashed=1;" edge="1" parent="1" source="Svc" target="Ctrl">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Prompt 技巧

• 明确图类型：直接说「生成 drawio 类图」「生成时序图」，避免模糊。
• 给出领域模型：列出类名、方法、关系，AI 才能画得准。
• 要求可运行：强调「输出完整 .drawio XML，可直接在 app.diagrams.net 打开」。
• 迭代修正：第一版后追加「把 Order 和 OrderItem 的位置对调」「加上基数 1..*」等指令。

小结

CodeBuddy + app.diagrams.net 的组合，把「写图」变成「写需求」。AI 负责生成符合规范的 drawio 源码，可视化工具负责排版与导出，既降低了 UML 的入门门槛，也让图随代码同步演进成为可能。对于追求效率的软件工程师，这是一套值得纳入日常工具链的工作流。

本文链接：https://bookshadow.com/weblog/2026/08/22/ai-uml-codebuddy-drawio/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。