Click here to Skip to main content
14,391,240 members

Slickflow Coding Graphic Model User Manual

Rate this:
4.14 (5 votes)
Please Sign up or sign in to vote.
4.14 (5 votes)
1 Dec 2019CPOL
Process diagram can be generated by C# code rather than GUI interface


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.


The open source project slickflow.engine can be downloaded from

The code text HTML page can be accessed from

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

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:


Parameters: (activityname, activitycode)

1.2.2 End Node Creation: End()

Example command:


Parameters: (activityname, activitycode)

1.2.3 Task Node Creation: Task() Basic Methods

Example command:

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

Parameters: (activityname, activitycode) Extension Method

Example command:

    VertexBuilder.CreateTask("Task-001", "task001")
  1. CreateTask(): Create task node
    Parameters: (task) task is an vertex object
  2. SetUrl(): Set node URL page properties
    Parameter: (pageurl) page address string
  3. AddRole(): Set node binding role data
    Parameter: (rolecode) role code
  4. AddAction(): Add action action details
    Parameter: (action) object
  5. 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.Task("task-010", "task010"),
      ()=>pmb.Task("task-011", "task011")
     ,() => pmb.Branch(
      () => pmb.Task("task-020", "task020"),
      () => pmb.Task("task-021", "task021")

The screenshot is as follows:

parallel flow chart

  1. Split(): Create branch node
    Parameters: (activityname, activitycode)
  2. Parallels(): External method to create multiple branches
    (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.

  3. Branch(): Branch specific creation method
    (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.

  4. 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:


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

  1. 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

  1. 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("").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()

  1. 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.

  2. Figure example after command execution:

    add new activity

2.3.2 Insert Node: Insert()

  1. 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.

  2. Figure example after command execution:

    insert new activity

2.3.3 Update Node Attribute: Set()

  1. Command:
    //set task 003(Package Books) property url and name
    pmb.Set("003", (a) => pmb.GetBuilder(a).SetUrl("").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.

  2. Figure example after command execution:

    Image 5

2.3.4 Replacement Node: Replace()

  1. 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.

  2. Figure example after command execution:

    replace an activity using a new activity

2.3.5 Exchange Node: Exchange()

  1. 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.

  2. Figure example after command execution:

    exchange two activity

2.3.6 Branch Node: Fork()

  1. 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.

  2. Figure example after command execution:

    for a new branch

2.3.7 Delete Node: Remove()

  1. 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.

  2. Figure example after command execution:

    remove an activity

2.3.8 Add Branch / Merge: Cover()

  1. Command:
    //cover a split/join pattern into canvas
    pmb.Cover("003", "005",
          "AndSplicCode"), VertexBuilder.CreateJoin(GatewayDirectionEnum.AndJoin, 
          "AndJoin", "AndJoinCode"), VertexBuilder.CreateTask("branchTask001", "b001"),
          VertexBuilder.CreateTask("branchTask002", "b002")
  2. Figure example after command execution:

    Cover a split/join block

2.3.9 Delete Branch / Merge: Uncover()

  1. Command:
    //uncover a split/join pattern from canvas
    pmb.Uncover("003", "005")
       .Update ();
  2. Figure example after command execution:

    uncover a split/join block

2.3.10 Connection Node: Connect()

  1. Command:
    //connect two task node
    pmb.Connect("003", "005")
       .Update ();
  2. Figure example after command execution:

    connect two activity

2.3.11 Disconnect Node: Disconnect()

  1. Command:
    //disconnect two task node
    pmb.Disconnect("003", "005")
       .Update ();
  2. Figure example after command execution:

    disconnect two activity

2.4 Process Update Command Update()

  1. Command:

    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:

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.


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Program Manager Slickflow
China China
Besley has rich experience about workflow engine system, and finaly make the slickflow become an open source project. He likes to contribute much program to implement complicate business process requirement from the customers.

When he is not working in office, he will like to walk out, play Taichi program or stay at home to teach daughter math. If you have any intersting to the Slickflow product, you can contact him by

Comments and Discussions

QuestionInteresting, but demo link keeps failing. Pin
victorbos4-Dec-19 7:55
Membervictorbos4-Dec-19 7:55 
AnswerRe: Interesting, but demo link keeps failing. Pin
Shai Cohen4-Dec-19 8:15
MemberShai Cohen4-Dec-19 8:15 
AnswerRe: Interesting, but demo link keeps failing. Pin
besley6-Dec-19 18:02
Memberbesley6-Dec-19 18:02 
QuestionPictures did not show Pin
Southmountain1-Dec-19 6:50
MemberSouthmountain1-Dec-19 6:50 
AnswerRe: Pictures did not show Pin
besley1-Dec-19 21:18
Memberbesley1-Dec-19 21:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 1 Dec 2019

Tagged as


1 bookmarked