BPMN 2.0 XML 是流程的序列化描述而非图形文件，需用 bpmn-js 等支持 DI 的渲染引擎解析并生成 SVG/Canvas 图形；必须包含完整命名空间及 bpmndi:BPMNDiagram 布局信息，否则渲染失败或坍缩。
不能直接“画”，BPMN 2.0 XML 是流程的**序列化描述**，不是图形文件；要生成可视化的流程图，必须用支持 BPMN 渲染的工具解析该 XML 并渲染为 SVG 或 Canvas 图形。
用 bpmn-js 在浏览器里渲染 XML
这是最常见、可控性最强的前端方案。bpmn-js 不是绘图工具，而是一个 BPMN 2.0 解析 + 渲染引擎，它能将标准 BPMN XML 加载成可交互的流程图。
-
bpmn-js只负责渲染，不提供拖拽建模（那是bpmn-js-properties-panel和bpmn-js-modeler的事） - XML 必须符合 BPMN 2.0 XSD 规范，否则
importXML()会失败并抛出unhandledError或missing element - 需确保 XML 根节点是
<definitions></definitions>，且命名空间声明完整（如xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"） - 加载后默认缩放适配容器，但若节点坐标异常（如全为
(0,0)），图会坍缩成一个点——此时需检查 XML 中bpmn:process内是否包含bpmndi:BPMNDiagram及其bpmndi:BPMNPlane，否则只有语义结构，没有布局信息
import BpmnViewer from 'bpmn-js';
const viewer = new BpmnViewer({ container: '#canvas' });
fetch('/process.bpmn')
.then(res => res.text())
.then(xml => viewer.importXML(xml))
.catch(err => console.error('渲染失败:', err));
用 Camunda Modeler 导出带布局的 XML
很多手写或旧系统导出的 BPMN XML 缺少 bpmndi: 命名空间下的图形坐标信息，导致无法正常渲染。Camunda Modeler 是目前对 BPMN 2.0 支持最完整、导出最规范的桌面建模工具。
- 打开 Modeler → 新建 BPMN Diagram → 拖拽绘制 → 保存为
.bpmn文件 - 该文件本质就是带完整
bpmndi:BPMNShape和bpmndi:BPMNEdge的 XML，可直接被 bpmn-js 渲染 - 避免用 draw.io / Lucidchart 等通用绘图工具“画 BPMN”：它们导出的 XML 多数仅含语义，无标准 DI（Diagram Interchange）信息
- 如果已有无布局 XML，可用
bpmn-moddle+ 自定义布局算法补全，但成本高，不推荐
服务端解析（Java/Python）生成图片？慎选
想把 BPMN XML 转成 PNG/SVG 静态图？技术上可行，但实际限制多：
- Java 方案常用
activiti-bpmn-converter或camunda-bpm-platform，但它们不内置渲染器，需配合batik或Apache PDFBox二次处理，且对复杂样式（如泳道折叠、事件子流程）支持弱 - Python 几乎没有可靠库：
bpmn-python只做语法解析，graphviz只能生成简化流程图（丢失 BPMN 语义，如边界事件类型、补偿机制） - 真正稳定的方案仍是：用 bpmn-js 渲染到 Canvas →
canvas.toDataURL()截图 → 后端接收 base64 存储或转 PNG
关键点在于：BPMN XML 本身不含“画法”，只含“是什么”和“怎么连”；真正决定流程图长什么样的，是 bpmndi: 下的坐标、大小、连线路径。漏了这部分，就只剩一堆看不见的节点。
