bpmn js 显示流程图

BPMN（Business Process Model and Notation）是一种业务流程建模和标注的标准，它提供了一套图形化的表示方法，用于描述业务流程中的各个步骤和它们之间的关系。BPMN JS 是一个基于 JavaScript 的库，用于在网页上渲染 BPMN 2.0 流程图。

基础概念

流程图：流程图是一种图形化表示一系列步骤或任务的图表，用于描述工作流程或业务流程。
BPMN 2.0：这是一个国际标准，定义了业务流程的建模和执行，包括各种形状和符号来表示不同的业务活动。

优势

标准化：BPMN 是一个广泛接受的标准，有助于不同组织和系统之间的沟通。
可视化：通过图形化的方式展示流程，使得非技术人员也能理解复杂的业务流程。
灵活性：支持多种业务流程模型，包括顺序流、并行流、条件分支等。
工具支持：有许多工具和库（如BPMN JS）支持BPMN标准的实现和展示。

类型

事件：如开始事件、结束事件、中间事件等。
任务：如用户任务、服务任务等。
网关：如排他网关、并行网关等，用于控制流程的分支和合并。
连接符：如顺序流，用于连接各个元素。

应用场景

业务流程管理：在企业资源规划（ERP）、客户关系管理（CRM）等系统中定义和管理业务流程。
软件开发：在软件开发过程中，用于设计和沟通软件系统的流程。
自动化：与工作流引擎结合，实现业务流程的自动化执行。

示例代码

以下是一个简单的使用BPMN JS在网页上显示流程图的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BPMN Example</title>
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@10.4.0/dist/assets/diagram-js.css">
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@10.4.0/dist/assets/bpmn-font/css/bpmn-embedded.css">
</head>
<body>
    <div id="canvas" style="height: 100vh;"></div>

    <script src="https://unpkg.com/bpmn-js@10.4.0/dist/bpmn-navigated-viewer.production.min.js"></script>
    <script>
        const viewer = new BpmnJS({ container: '#canvas' });

        viewer.importXML(`
            <?xml version="1.0" encoding="UTF-8"?>
            <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
                id="Definitions_1"
                targetNamespace="http://bpmn.io/schema/bpmn">
              <process id="Process_1" isExecutable="false">
                <startEvent id="StartEvent_1"/>
                <sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1"/>
                <userTask id="Task_1" name="Task 1"/>
                <sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="EndEvent_1"/>
                <endEvent id="EndEvent_1"/>
              </process>
            </definitions>
        `, (err) => {
            if (err) {
                console.error('Failed to import BPMN diagram', err);
            } else {
                console.log('BPMN diagram imported successfully');
            }
        });
    </script>
</body>
</html>