WorkflowGen features an HTML5 graphical process workflow designer, built on the latest HTML5 and SVG standards. It provides a simple user interface and intuitive behavior for a more fluid design experience and enhanced compatibility with different design environments (such as mobile devices).
Function
Method
Add an element (action, synchronization, endpoint, comment, text)
Drag and drop the element from the toolbar onto the canvas.
Delete an element (action, synchronization, endpoint, comment, text)
Click the element, then click the x
that appears in the top right corner.
Add a transition
Click the action and click the down arrow, then drag and drop it onto the desired action.
Add a transition loop
Click the action and click the down arrow, then drag and drop the transition onto the same action.
Delete a transition
Click the transition, then click the x
that appears in the top right corner.
Add a condition
Double-click the transition.
Add more than one condition to a transition
You cannot add more than one condition to a single transition. Instead, create a new transition between the actions and add the condition here.
Update a condition
Double-click the transition or condition.
Delete a condition
Click the condition, then click the x
that appears in the top right corner.
Delete a participant
Click the participant, then click the x
that appears in the top right corner.
Auto positioning mode
Click the auto positioning mode tool then choose one of the options.
Add a breakpoint
Click the add breakpoint tool then click the transition (breakpoints will be created individually). As well, clicking the breakpoint tool will show all of the existing breakpoints.
Delete a breakpoint
Click the breakpoint, then click the x
that appears in the top right corner or press the Delete
key (only the selected breakpoint will be deleted). In the case of loop transitions, a minimum of two breakpoints are required.
Change the position of a loop transition
Change the position of each of the breakpoints so that the transition points to the new position.
Change the target/source of a transition
Click the transition, hover over the target/source of a transition until the hand pointer appears, then drag and drop the target/source onto another action.
Change the loop of an action toward another action
Click the loop, then change the target and the source toward the other action.
Resize swimlanes
Click the participant, place the pointer over the border between participants, click the border, then drop it on the new position.
Change the order of participants
Click the participant, then drag and drop it onto the new position (the orange header indicates the new position of the participant).
Associate actions with participants in swimlanes
Can be enabled and disabled in the Workflow section on the Administration tab in the Configuration panel.
Zoom
The zoom percentage is displayed in the top right corner of the workflow.
Icon
Tools
Remarks
Save the layout
Save the current layout of the workflow diagram
Print the diagram
Print the current diagram
Add participant
Add a new participant to the process
Add action
Add a new action to the process
Add synchronization
Add a synchronization action to the process
Add end point
Add an end point to the process
Add comment
Add a comment to the process
Add text
Add text to the process
Add break points
Add break points to transitions
Choose auto positioning mode
Switch between auto and manual positioning mode for the transition anchors
Show assignment methods
Show assignment methods on actions
Display vertical swimlanes
Add a vertical swim lane overlay on the graphical view with actions displayed in the participant columns
Display horizontal swimlanes
Add a horizontal swim lane overlay on the graphical view with actions displayed in the participant rows
Display vertical panels
Add a vertical panel overlay on the graphical view with actions displayed in the participant columns
Display horizontal panels
Add a horizontal panel overlay on the graphical view with actions displayed in the participant columns
Display color picker
Display a color picker from which you can choose the swimlane/panel and the background color
Decrease zoom
Decrease the zoom scale by 15%
Increase zoom
Increase the zoom scale by 15%
Maximize canvas
Maximize the canvas size
Restore canvas
Restore the default canvas size
Button/Column
Remarks
New action
Opens the Select an action type window and then the Add action form
Refresh
Updates the action list
Delete
Deletes the selected action
Order
The arrows allow the action display order to be modified within the process workflow
Name
Action name
Click the name to open the Edit action panel.
Description
Action description
Previous actions
Lists actions preceding the current action within the workflow
Next actions
Lists actions following the current action within the workflow
A link displays the Edit action form, which lists actions that following the current one. The Add link on the Edit action form displays the action form in edit mode for each following action.