代码拉取完成，页面将自动刷新
同步操作将从 kentz/bpmn-dataflow-diagram-editor 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
其它语言：English
本项目是一个集成流程编辑器的例子。它基于定制的 bpmn-js 和 Vue.js 开发。你需要知道 Vue.js 的知识来阅读和理解源代码。
git clone https://github.com/Pingren/BPMNFlowEditor
cd BPMNFlowEditor
yarn & yarn serve
components]
PanelLeft]
index.vue] Panel 包含 PanePaneDatabase.vue] list style node pickerPaneOperator.vue] tree style node pickerPanelRight]
index.vue] Panel 包含 PanePaneNodeInfo.vue] 节点信息预览PaneProperty.vue] 可扩展的节点属性编辑面板PanelTop]
index.vue] Panel 包含编辑、保存等功能的按钮DiagramEditor.vue] 包含了所有的 vue 组件，负责在其生命周期内创建 diagram 对象和 vuex 状态ZoomSlider.vue] 缩放滑块module]
xxx.js...] 自定义 bpmn.js 模块，自定义的内容注释在文件中index.js] 自定义 bpmn.js 模块帮助文件，禁用了部分模块store]
module.js] vuex 重用模块index.js] vuex 根状态，控制模块动态注册App.vue] app 入口，包含了 el-tabs，每个 tab 拥有一个 DiagramEditorDiagram.js] Diagram 类mock.js] 模拟后端返回的数据Diagram 是表示数据流图的类。它在 constructor 里创建了 bpmn-js 相关对象并且将它们绑定到实例上。它提供了 importXML 和 exportXML 方法，以及其它图操作方法（比如 createNode）。
当一个 tab，即 DiagramEditor 组件 mounted 时，它会创建一个 diagram 对象。接着它会将其用 provided/injected API 注入到其所有子组件中。如此一来，所有的 vue 子组件都可以使用 diagram 对象来控制图。
Diagram 也有一些“私有”方法：evaluateNodeData、evaluateNodeInput、evaluateNodeOutput 等等。 它们在 bpmn-js EventBus 回调中调用，不应该被外部使用。
一些流程图的状态应该是响应式的，所以需要使用 vuex。每个 diagram 对象都伴随着一个 vuex 状态 store，并使用一个 key 跟踪它。
因为可能有多个 tab 和多个图，本项目 重用了相同的 vuex 模块。当一个 tab，即 DiagramEditor 组件 created 时，vuex 模块将被注册，并在组件销毁前卸载。
vuex 模块包含了流程图的基本状态比如 currentNodeId、isRunning 等等。它也包含了三个节点数据模型对象：inputModel、transferModel、outputModel。
每个节点有着它的属性，保存在 transferModel 中。用户可以在节点属性编辑面板中改变属性。
一个节点还可以有输入和输出数据，保存在 inputModel 和 outputModel 中。输入和输出数据由节点属性，图的拓扑结构以及节点的输入输出的配置共同决定：
节点输入配置：决定了一个节点如何使用其所有父节点的输出(outputModel) 生成该节点的输入。
节点输出配置：决定了一个节点如何使用其属性(transferModel) 生成该节点的输出。
inputModel 和 outputModel 都将自动更新。 核心逻辑在 Diagram.js 之中，使用广度优先遍历。
以下是一些使用类似数据流图编辑器的工程和项目：
代码曾经重构并且有了很大的变化，你可以在分支 archive-codebase 上查看旧版本。请注意它的设计和结构与现在的主分支大相径庭。
暂时没有，欢迎问题和建议！
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。