套用官方的一句話，使用bpmn.js，一步一步來，嘿嘿。

BNPM.js介紹

bnmp.js是一個BNPM2.0渲染工具箱和web建模器，我們能夠很簡單的嵌入BPMN2.0的圖示到到我們的瀏覽器器裡面（不需要藉助後端）。

bnpm.js的引入

1.通過npm的方式引入，非常簡單，參考官網http://bpmn.io/toolkit/bpmn-js/就能非常簡單的搭建。 2.通過本地預打包的方式     首先就是引入必要的JS檔案。bpmn-modeler.min.js(可以去官方例子找，下載到本地)     載入必要的css檔案，diagram-js.css，bpmn-embedded.css（去官方例子找，下載到本地）

bnpm.js的容器

因為通過視覺化的方式，因此需要新增一個包含元素渲染圖表到我們的瀏覽器裡面     <div id=“canvas”></div>

例項

通過JS例項，在瀏覽器上面例項一個基本的工作流。

			<script>
			  // the diagram you are going to display
			  var bpmnXML;
			  // BpmnJS is the BPMN viewer instance
			  var viewer = new BpmnJS({ container: '#canvas' });
			  //  微信： Stan33579  QQ:932918850
 

			  // import a BPMN 2.0 diagram
			  viewer.importXML(bpmnXML, function(err) {
			    if (err) {
			      // import failed :-(
			    } else {
			      // we did well!
			      var canvas = viewer.get('canvas');
			      canvas.zoom('fit-viewport');
			    }
			  });
			</script>

##最終效果圖如下： ##歡迎各位大佬指正，技術交流，歡迎加微信Stan33579