LogicFlow

# BPMN元素 BpmnElement

BPMN 是目前较为著名的 workflow 的建模语言标准之一。LogicFlow 实现了 BPMN 扩展，可以直接使用 LogicFlow 来绘制兼容 BPMN2.0 规范的流程，并且其导出的数据可以在 Activiti 流程引擎上运行。

LogicFlow 提供了自定义节点和自定义边, 可以实现满足 BPMN2.0 规范的节点和边。然后在使用数据转换将生成的数据转换为 Activiti 需要的格式。

注意

在实际项目中，我们推荐开发者完成自定义项目的节点，而不是使用我们提供的bpmnElement和bpmnAdapter插件。我们开发LogicFlow的初衷之一就是希望前端能在代码中体现我们所有的业务逻辑，这样让我们研发更贴近工作流的业务。

# 使用方式

<script src="/logic-flow.js"></script>
<script src="/lib/BpmnElement.js"></script>
<script src="/lib/BpmnAdapter.js"></script>
<script>
  LogicFlow.use(BpmnElement);
  LogicFlow.use(BpmnAdapter);
</script>

# 转换为 XML

BpmnAdapter 支持 bpmnjson 和 LogicFlow data 之间的相互转换，如果希望 LogicFlow data 与 XML 互相转换，可以使用BpmnXmlAdapter。

<script src="/logic-flow.js"></script>
<script src="/lib/BpmnElement.js"></script>
<script src="/lib/BpmnXmlAdapter.js"></script>
<script>
  LogicFlow.use(BpmnElement);
  LogicFlow.use(BpmnXmlAdapter);
</script>

# StartEvent

const data = {
  nodes: [
    {
      id: 10,
      type: 'bpmn:startEvent',
      x: 200,
      y: 80,
      text: '开始'
    }
  ]
}

# EndEvent

const data = {
  nodes: [
    {
      id: 10,
      type: 'bpmn:endEvent',
      x: 200,
      y: 80,
      text: '结束'
    }
  ]
}

# UserTask

const data = {
  nodes: [
    {
      id: 10,
      type: 'bpmn:userTask',
      x: 200,
      y: 80,
      text: '用户任务'
    }
  ]
}

# ServiceTask

const data = {
  nodes: [
    {
      id: 10,
      type: 'bpmn:serviceTask',
      x: 200,
      y: 80,
      text: '系统任务'
    }
  ]
}

# ExclusiveGateway

const data = {
  nodes: [
    {
      id: 10,
      type: 'bpmn:exclusiveGateway',
      x: 200,
      y: 80,
    }
  ]
}

完整的 BPMN 案例工具请到示例中体验。

← 导出 Snapshot →