概述

本设计采用dumi，是一款基于Umi打造、为组件开发场景而生的文档工具，以路由为基础，会自动根据目录结构和FrontMatter生成对应的文档导航、菜单和路由，方便开发组件和展示组件demo，以antd.design中的组件的引入方式一样，供用户使用。

通过引入bpmn.js渲染工具和web建模器，在浏览器内嵌入BPMN2.0流程图，使得它很容易在任何web应用中使用，可以实现拖拽生成工作流图。

先来看一下使用bpmn.js画图都有哪些内容:

左侧工具栏作用: 给图形添加新的节点（CustomPalette）

中间画板：展示流程节点

画板右上角：功能按键

右侧属性栏的作用: 用户在点击画板上的节点, 能获取到该节点的属性信息

bpmn.js的引入

我们使用npm安装到项目中，我们可以使用以下命令进行安装。

npm install --save bpmn-js

在应用程序中使用:

import BpmnViewer from 'bpmn-js';
import testDiagram from './test-diagram.bpmn';

class ModelDesign extends React.Component {
componentDidMount() {
    this.bpmnModeler = new BpmnModeler({
        container: '#canvas',
        //用户挂载右侧属性控制板
        /**propertiesPanel: {
              parent: '#js-properties-panel'
        }, */
        /*moddleExtensions: {
              camunda: camundaModdleDescriptor,
        }*/
        moddleExtensions: {
          flowable: flowableModdle,
        },
      });
   this.bpmnModeler.importXML(testDiagram, function(err) {
     if (!err) {
    console.log('success!');
    viewer.get('canvas').zoom('fit-viewport');
  } else {
    console.log('something went wrong:', err);
  }
 });
}
  render() {
    return (
            {/* 画布 */}
       <div  id="canvas" />
  ）
}
}

如上面的示例所示, 我们使用npm直接下载引入bpmn.js, 在本地指定一个容器(也就是id为canvas的那个div), 接着用bpmn.js提供的方法importXML就可以解析xml字符串生成对应的工作流图了.

上面的testDiagram指的是某个bpmn 文件。