,
additionalModules: [
MoveModule,
ModelingModule,
MoveCanvasModule
其渲染的图形效果如下图所示：
其中绿色节点表示流程当前所运行的节点位置，红色连线表示已经运行过的路径。
三：BpmnJS 属性扩展面板开发
虽然BpmnJS提供了标准BPMN2的XML定义，但是作为流程引擎的高级特性实现，还是需要各个厂商来定制开发的，这样就增加了extensionElements节点的配置，其中的xml片段示例如下：
<bpmn2:task id="Activity_1kcsr5d" sf:guid="cf13dd79-df24-4503-92fe-88556238bf7e" name="Dept Manager Approval">
<bpmn2:extensionElements>
<sf:performers>
<sf:performer name="部门经理" outerId="2" outerCode="depmanager" outerType="Role" />
</sf:performers>
</bpmn2:extensionElements>
<bpmn2:incoming>Flow_149y4hy</bpmn2:incoming>
<bpmn2:outgoing>Flow_0oks1po</bpmn2:outgoing>
</bpmn2:task>
示例代码中，增加了执行角色的定义，而执行角色一般又和业务系统的组织机构数据关联，所以需要灵活定义，要实现跟业务系统的对接便利性。属性面板的数据配置如下：
四：Slickflow流程定义描述器
在实现BPMN2标准时候，流程引擎核心需要负责对流程的解析和执行，一套稳定的，规范良好的软件产品，更容易被客户接受和认可，毕竟客户也是需要在此基础上做二次开发。Slickflow产品组在考虑自定义特性实现时候，更加关注产品是否精简易读，所以其定义方式也容易被程序开发人员掌握和接受。考虑到流程设计的复杂性，尤其是不同节点类型的详细属性，几乎每个客户的考量都是不同的，所以采用了整体-分离模式，将各个离散的细节特性，通过不同的组装模式组合到一起。
1) BpmnJS属性面板默认模块
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';
2) 扩展属性的描述器
Slickflow引擎核心需要对自定义的流程节点特性进行处理，通过描述器可以固定特性名称和限制条件等，加载描述的程序代码如下：
import sfModdleDescriptor from './slickflow/descriptors/sf';
import magicModdleDescriptor from './slickflow/descriptors/magic';
import identityModdleDescriptor from './slickflow/descriptors/identity';
import actionModdleDescriptor from './slickflow/descriptors/action';
import sectionModdleDescriptor from './slickflow/descriptors/section';
import boundaryModdleDescriptor from './slickflow/descriptors/boundary';
import transitionModdleDescriptor from './slickflow/descriptors/transition';
import performersModdleDescriptor from './slickflow/descriptors/performers';
import gatewayModdleDescriptor from './slickflow/descriptors/gateway';
import multisignModdleDescriptor from './slickflow/descriptors/multisign';
import servicetaskModdleDescriptor from './slickflow/descriptors/servicetask';
import scripttaskModdleDescriptor from './slickflow/descriptors/scripttask';
sfModdleDescriptor.types.push(identityModdleDescriptor.identity);
sfModdleDescriptor.types.push(transitionModdleDescriptor.transition);
sfModdleDescriptor.types.push(gatewayModdleDescriptor.gateway);
sfModdleDescriptor.types.push(multisignModdleDescriptor.multisign);
sfModdleDescriptor.types = sfModdleDescriptor.types.concat(actionModdleDescriptor.action);
sfModdleDescriptor.types = sfModdleDescriptor.types.concat(sectionModdleDescriptor.section);
sfModdleDescriptor.types = sfModdleDescriptor.types.concat(boundaryModdleDescriptor.boundary);
sfModdleDescriptor.types = sfModdleDescriptor.types.concat(servicetaskModdleDescriptor.service);
sfModdleDescriptor.types = sfModdleDescriptor.types.concat(scripttaskModdleDescriptor.script);
sfModdleDescriptor.types = sfModdleDescriptor.types.concat(performersModdleDescriptor.performers);
3）属性维护提供器
对增加的每一个属性映射到相应的界面控件，读写属性的数值，并用于维护。
import actionPropertiesProviderModule from './slickflow/provider/action';
import transitionPropertiesProviderModule from './slickflow/provider/transition';
import sectionPropertiesProviderModule from './slickflow/provider/section/';
import boundaryPropertiesProviderModule from './slickflow/provider/boundary/';
import gatewayPropertiesProviderModule from './slickflow/provider/gateway/';
import multisignPropertiesProviderModule from './slickflow/provider/multisign/';
import triggerPropertiesProviderModule from './slickflow/provider/trigger/';
import servicetaskPropertiesProviderModule from './slickflow/provider/servicetask/';
import scripttaskPropertiesProviderModule from './slickflow/provider/scripttask/';
import performersPropertiesProviderModule from './slickflow/provider/performers/';
import identityPropertiesProviderModule from './slickflow/provider/identity';
4）bpmnModeler的初始化加载
var bpmnModeler = new BpmnModeler({
container: '#js-canvas',
propertiesPanel: {
parent: '#js-properties-panel'
moddleExtensions: {
sf: sfModdleDescriptor,
magic: magicModdleDescriptor
additionalModules: [
BpmnPropertiesPanelModule,
SfCommandInterceptor,
SfCommandExtension,
identityPropertiesProviderModule,
actionPropertiesProviderModule,
transitionPropertiesProviderModule,
sectionPropertiesProviderModule,
boundaryPropertiesProviderModule,
gatewayPropertiesProviderModule,
multisignPropertiesProviderModule,
triggerPropertiesProviderModule,
servicetaskPropertiesProviderModule,
scripttaskPropertiesProviderModule,
performersPropertiesProviderModule
/* expressionPropertiesProviderModule,*/
/* customContextModule*/
五：Demo体验
为了方便各类用户的流程设计需求，可以在官网设计器地址进行体验，设计器本身提供XML和SVG文件的下载，便于流程设计人员体验和文件交互。
http://demo.slickflow.com/sfd/
1）基本绘制操作
一个非常典型的企业业务过程之请假流程示例如下：
2）模板创建
企业中有一些常见的业务流程，也可以通过流程模板来配置创建，Demo中提供了常见的序列，分支和多实例会签等模式模板，方便用户创建流程。
Slickflow产品流程设计器的特色之一就是可以通过Slickflow.Graph类库，使用C#代码语法来创建流程图，其中主要包括了节点集合以及节点在画布上布局和位置关系。尤其是分支结构的图形中，需要计算分支节点和合并节点的位置关系，详细使用可以参考前期博客文章(https://www.cnblogs.com/slickflow/p/11936786.html)，模板创建代码示例如下：
pmb.Start("start")
.Task(
VertexBuilder.CreateTask("Task-001", "task001")
.AndSplit("and-split", "andsplit001")
.Parallels(
() => pmb.Branch(
() => pmb.Task("task-010", "task010")
, () => pmb.Branch(
() => pmb.Task("task-020", "task020")
.AndJoin("and-join", "andjoin001")
.Task("task-100", "task100")
.End("end")
.Serialize();
3) 流程模板创建动画演示
集成BpmnJS流程设计器，得到了客户的好评和认可，这是一款业界公认的优秀流程设计器，希望更多的企业客户可以使用。
Slickflow开源项目网站地址：https://github.com/besley/slickflow
欢迎下载使用！
