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>

      //va.........完整代码请登录后点击上方下载按钮下载查看