[Question]: 使用 importXML 导入报错 “no diagram to display”

[miyuesc]

遇到了什么问题？

bpmn-js 版本

18.0.0

技术栈基础库版本

~

[miyuesc]

在 bpmn-js v7.0 之前，importXML 的定义是 ：

/**
 * Parse and render a BPMN 2.0 diagram.
 *
 * Once finished the viewer reports back the result to the
 * provided callback function with (err, warnings).
 *
 * ## Life-Cycle Events
 *
 * During import the viewer will fire life-cycle events:
 *
 *   * import.parse.start (about to read model from xml)
 *   * import.parse.complete (model read; may have worked or not)
 *   * import.render.start (graphical import start)
 *   * import.render.complete (graphical import finished)
 *   * import.done (everything done)
 *
 * You can use these events to hook into the life-cycle.
 *
 * @param {string} xml the BPMN 2.0 xml
 * @param {ModdleElement<BPMNDiagram>|string} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
 * @param {Function} [done] invoked with (err, warnings=[])
 */

即接受一个字符串必要参数 xml string，和两个可选参数 bpmnDiagram 以及 done。

其中 bpmnDiagram 是一个符合 BpmnModdle 定义的实例对象或者实例对象 id，done 则是一个回调函数，在整个 xml string 解析结束之后执行。

而常用文档中一般省略第二个参数，只说明传递一个 xml 字符串和回调函数即可（方法中会有第二个参数的类型校验，如果是 Function 类型，则默认为回调函数）。

而在 v7 之后，bpmn-io 团队将大部分使用回调函数的核心方法替换为了 Promised 形式，去掉了回调函数参数，同时也去掉了第二个参数的类型校验。

v7 更新包涵以下方法调整

Viewer#importXML

Viewer#saveXML

Viewer#saveSVG

Moddle#fromXML

Moddle#toXML

所以，在之后的版本中，如果传递了第二个参数，那么就会将这个回调函数作为 bpmnDiagram 使用，此时无法找到 id 属性以及和这个回调函数对应的元素对象，就会抛出 no diagram to display 的异常。

正确的使用方法应该是：

const { warnings } = await modeler.importXML(xmlString);
// or
modeler.importXML(xmlString).then(({ warnings }) => {
  console.log(warnings)
})