在浏览器中查看和编辑 BPMN 2.0 图表。
使用库 pre-packaged 或者把它经由 npm 到您的节点式web应用程序中.
首先,创建一个bpmn-js 实例 和渲染 BPMN 2.0 diagrams 在浏览器中:
开始
const xml = '...'; // my BPMN 2.0 xml
const viewer = new BpmnJS({
container: 'body'
});
try {
const { warnings } = await viewer.importXML(xml);
console.log('rendered');
} catch (err) {
console.log('error rendering', err);
}
查看我们的examples 以获得更多支持的使用场景.
您也可以将查看器动态附加或分离到页面上的任何元素:
const viewer = new BpmnJS();
// 将它附加到某个元素
viewer.attachTo('#container');
// 拆下面板
viewer.detach();
通过安装所有依赖项来准备项目:
npm install
然后,根据您的用例,您可以运行以下任何命令:
# 构建库并运行所有测试
npm run all
# 启动单个本地建模器实例
npm start
# 运行完整的开发设置
npm run dev
你可能需要开发 额外的项目设置 当构建最新的开发快照时。
Bpmn-js构建在几个强大的工具之上:
- bpmn-moddle: 浏览器中对BPMN 2.0 XML的读写支持
- diagram-js: 图表呈现和编辑工具包