Slickflow Coding Graphic Model User Manual

besley

4.20/5 (6 votes)

Dec 1, 2019

CPOL

6 min read

9124

Process diagram can be generated by C# code rather than GUI interface

Introduction

When the business personnel draws the process, they usually use the GUI interface interaction operation to complete it. However, for system management users who need frequent operation or management of more processes, they need an auxiliary tool to help them quickly complete the process creation, editing and updating. Slickflow.graph graphic coding modeling tool directly writes code through the command line to create graphics, which realizes the rapid improvement of the efficiency of drawing process graphics.

Background

The open source project slickflow.engine can be downloaded from http://github.com/besley/slickflow.

The code text HTML page can be accessed from http://demo.slickflow.com/sfd/model.

Using the Code

1. Graphic Creation Code Text

First of all, it is explained by a code snippet, which creates a simple sequence flow. The code is as follows:

using Slickflow.Graph;
using Slickflow.Engine.Common;

//firstly, create a process model builder
var pmb = ProcessModelBuilder.CreateProcess("BookSellerProcess", "BookSellerProcessCode", "3");
var process = pmb.Start("Start")
    .Task("Package Books", "003") //task name, code
    .Task("Deliver Books", "005") //task name, code
    .End("End")
    .Store();

The screenshot is as follows:

sequence flow chart

1.1 Process Creation Command

Example command:

var pmb = ProcessModelBuilder.CreateProcess("BookSellerProcess", "BookSellerProcessCode", "3");

Parameters: (processname, processcode, processversion)

1.2 Active Node Creation Command

1.2.1 Start Node Creation: Start()

Example command:

pmb.Start("Start")

Parameters: (activityname, activitycode)

1.2.2 End Node Creation: End()

Example command:

pmb.End("End")

Parameters: (activityname, activitycode)

1.2.3 Task Node Creation: Task()

1.2.3.1 Basic Methods

Example command:

pmb.Task("Package Books", "003")

Parameters: (activityname, activitycode)

1.2.3.2 Extension Method

Example command:

Pmb.Task(
    VertexBuilder.CreateTask("Task-001", "task001")
      .SetUrl("http://www.slickflow.com")
      .AddRole("TestRole")
      .AddAction(
    VertexBuilder.CreateAction(ActionTypeEnum.Event,
            FireTypeEnum.Before,
            "Slickflow.Module.External.OrderSubmitService"
     )
)

CreateTask(): Create task node
Parameters: (task) task is an vertex object
SetUrl(): Set node URL page properties
Parameter: (pageurl) page address string
AddRole(): Set node binding role data
Parameter: (rolecode) role code
AddAction(): Add action action details
Parameter: (action) object
CreateAction(): Create action action action detail object
Parameters: (actiontype, firetype, methodname)

1.2.4 Branch Node Creation: Split()

Branches and merges are usually created as a whole code snippet, as shown in the following figure. A flow chart of two branches is created, and each branch has two task nodes. A complete code snippet example is as follows:

pmb.Split("split")
    .Parallels(
      ()=>pmb.Branch(
      ()=>pmb.Task("task-010", "task010"),
      ()=>pmb.Task("task-011", "task011")
     )
     ,() => pmb.Branch(
      () => pmb.Task("task-020", "task020"),
      () => pmb.Task("task-021", "task021")
     )
     )
     .Join("join")

The screenshot is as follows:

parallel flow chart

Split(): Create branch node
Parameters: (activityname, activitycode)
Parallels(): External method to create multiple branches
Parameters:
```
(params Func<ProcessModelBuilder>[] branches)
```
Description: Parameter branches refer to the combination of branch lists. A parallel mode can be composed of multiple branches. Params refers to the keyword of variable parameter list.
Branch(): Branch specific creation method
Parameters:
```
(params Func<ProcessModelBuilder>[] nodes)
```
Description: Parameter nodes refer to the combination of node lists. A branch can be composed of multiple nodes. Params refers to variable parameter list keywords.
Join(): Create merge node
Parameters: (activityname, activitycode)

Note: Merging and branching usually occur in pairs to express the branch selection mode of decision type.

1.3 Graphic Storage Command

Example command:

Pmb.Store();

The storage command will serialize the above graph as XML and store it as a record in the database.

2. Graphic Maintenance Command

2.1 Process Loading Command

Command:
```
var pmb = ProcessModelBuilder.LoadProcess("BookSellerProcessCode", "3");
```
Parameters: (processcode, processversion)

Description: The unique key identifier consisting of process code and version is used to uniquely determine the process record.

2.2 Graphic Node Edit Code

Command:

using Slickflow.Graph;
using Slickflow.Engine.Common;

//firstly load a process model builder
var pmb = ProcessModelBuilder.LoadProcess("BookSellerProcessCode", "3");
//execute different task operation once together
pmb.Add("003", ActivityTypeEnum.TaskNode, "zzz", "zzz-code")
   .Insert("003", ActivityTypeEnum.TaskNode, "task004", "004")
   .Set("003", (a) => pmb.GetBuilder(a).SetUrl("slickflow.com").SetName("mer-sss-ryxmas"))
   .Replace("004", ActivityTypeEnum.TaskNode, "task222", "222")
   .Exchange("222", "zzz-code")
   .Fork("zzz-code", ActivityTypeEnum.TaskNode, "yyy", "555")
   .Remove("222", true)
   .Update ();

Note: All update operations such as adding, inserting, exchanging, replacing, branching, editing and deleting graphic node elements can be completed through the chain service interface at one time.

2.3 Node Editing Command Details

2.3.1 Add Node: Add()

Command:
```
//add a new task node zzz after task with code 003(Package Books)
pmb.Add("003", ActivityTypeEnum.TaskNode, "zzz", "zzz-code")
```
Parameters: (currentactivitycode, addactivitytype, addactivityname, addactivitycode)

Note: The add() method is to add a new node after the current node, and keep the newly added node on the process connection.
Figure example after command execution:

2.3.2 Insert Node: Insert()

Command:
```
//insert a new task node named task004 before task 003(Package Books)
pmb.Insert("003", ActivityTypeEnum.TaskNode, "task004", "004")
```
Parameters: (currentactivitycode, addactivitytype, addactivityname, addactivitycode)

Note: The insert() method is to add a new node in front of the current node, and keep the newly added node on the process connection.
Figure example after command execution:

2.3.3 Update Node Attribute: Set()

Command:
```
//set task 003(Package Books) property url and name
pmb.Set("003", (a) => pmb.GetBuilder(a).SetUrl("slickflow.com").SetName("mer-sss-ryxmas"))
```
Parameters: (currentactivitycode, vertexbuilder)

Description: According to the code representation of the current node, get the current node object, and then update the URL property and name property.
Figure example after command execution:

2.3.4 Replacement Node: Replace()

Command:
```
//replace task 004(task004) by the new task named task222
pmb.Replace("004", ActivityTypeEnum.TaskNode, "task222", "222")
```
Parameters: (currentactivitycode, replacedbyactivitytype, replacedbyactivityname, replacedbyactivitycode)

Note: You can replace the current node with a new node. The new node is replacedbyactivity, which is equivalent to performing the remove operation first and then the add operation.The unique ID Guid of the original connection transition will also change after the node is replaced.
Figure example after command execution:

2.3.5 Exchange Node: Exchange()

Command:
```
//exchange task 222 to zzz
pmb.Exchange("222", "zzz-code")
```
Parameters: (firstactivitycode, secondactivitycode)

Note: In this method, the position of two nodes is changed, and the attributes of other nodes remain unchanged. What's more, after the exchange, the connection transition between nodes is given a unique ID guid again, because the node of the connection has changed, so the value of the connection ID guid needs to be changed.
Figure example after command execution:

2.3.6 Branch Node: Fork()

Command:
```
//fork a new Task 555 from task zzz
pmb.Fork("zzz-code", ActivityTypeEnum.TaskNode, "yyy", "555")
```
Parameters: (currentactivitycode, forkactivitytype, forkactivityname, forkactivitycode)

Note: This method is to add a branch path to the current node. If there is no subsequent node in the current node, it is the same as adding an add method.If the current node already has a subsequent node, a new node is added in the adjacent location.
Figure example after command execution:

2.3.7 Delete Node: Remove()

Command:
```
//remove the task 222, and afterward nodes will be caught up
pmb.Remove("222", true)
```
Parameter: (currentactivitycode, iscaughtup)

Note: Delete the current node. If the current node already has a subsequent node, you need to advance the subsequent node to the location of the currently deleted node, including adding new connections.
Figure example after command execution:

2.3.8 Add Branch / Merge: Cover()

Command:

//cover a split/join pattern into canvas
pmb.Cover("003", "005",
      VertexBuilder.CreateSplit(GatewayDirectionEnum.AndSplit,"AndSplit", 
      "AndSplicCode"), VertexBuilder.CreateJoin(GatewayDirectionEnum.AndJoin, 
      "AndJoin", "AndJoinCode"), VertexBuilder.CreateTask("branchTask001", "b001"),
      VertexBuilder.CreateTask("branchTask002", "b002")
   )
   .Update();

Figure example after command execution:

2.3.9 Delete Branch / Merge: Uncover()

Command:

//uncover a split/join pattern from canvas
pmb.Uncover("003", "005")
   .Update ();

Figure example after command execution:

2.3.10 Connection Node: Connect()

Command:

//connect two task node
pmb.Connect("003", "005")
   .Update ();

Figure example after command execution:

2.3.11 Disconnect Node: Disconnect()

Command:

//disconnect two task node
pmb.Disconnect("003", "005")
   .Update ();

Figure example after command execution:

2.4 Process Update Command Update()

Command:
```
pmb.Update();
```
Note: The process node and connection data will be XML serialized again, and the data will be saved to the database.

3. Programming Environment

At present, the code programming modeling tool has provided online use experience tool, the left side is the plain text code input area, and the right side is the updated graphic display area. Each time the code text is executed, the graphic display on the right is updated.

code editor

4. Online Address

In order to facilitate process enthusiasts to learn and master the slickflow process graphics language model, an example environment for online code writing is specially provided. Please visit according to the following address:

http://demo.slickflow.com/sfd/model

5. Summary

The implementation of the code programming modeling tool facilitates users to create and update graphs quickly, and the code commands are easy to learn. It is suggested that process technicians, process management users and system analysts invest time in learning and mastering, so as to improve the efficiency of process development.

Points of Interest

The beginner is advised to read this manual and practice programming on the online editor page. Then you can grasp some functions with a high level adminstration of process diagram management. Finally, you will like to create and update diagram by code. But it depends on which style you like to choose. Thanks for your suggestions here.

History

01: The almost tutorial for slickflow.graph project. 2019/12/01
02: Fixed Image Link Lost Issue