bpmn.js实现流程图设计绘制工具代码-html代码-BFW代码库

bpmn.js实现流程图设计绘制工具代码

代码语言：html

所属分类：图表

代码描述：bpmn.js实现流程图设计绘制工具代码,包含打开与导出流程图数据。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <!-- required modeler styles -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bpmn-js.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/diagram-js.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bpmn.css">

    <!-- modeler distro -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bpmn-modeler.development.js"></script>

    <!-- needed for this example only -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <!-- example styles -->
    <style>
      html, body, #canvas {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      .diagram-note {
        background-color: rgba(66, 180, 21, 0.7);
        color: White;
        border-radius: 5px;
        font-family: Arial;
        font-size: 12px;
        padding: 5px;
        min-height: 16px;
        width: 50px;
        text-align: center;
      }

      .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
        stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
      }

      #save-button {
        position: fixed;
        bottom: 20px;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div id="canvas"></div>

    <button id="save-button">print to console</button>

    <script>

      //var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';

      // modeler instance
      var bpmnModeler = new BpmnJS({
        container: '#canvas',
        keyboard: {
          bindTo: window
        }
      });

      /**
       * Save diagram contents and print them to the console.
       */
      async function exportDiagram() {

        try {

          var result = await bpmnModeler.saveXML({ format: true });

          alert('Diagram exported. Check the developer tools!');

          console.log('DIAGRAM', result.xml);
        } catch (err) {

          console.error('could not save BPMN 2.0 diagram', err);
        }
      }

      /**
       * Open diagram in our modeler instance.
       *
       * @param {String} bpmnXML diagram to display
       */
      async function openDiagram() {
 var diagramXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\"\r\n             xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\"\r\n             xmlns:omgdc=\"htt.........完整代码请登录后点击上方下载按钮下载查看