Comprehensive Guide to Workflow Process Design, Deployment, and Management

Process Design

Click the "Add" button to create a new workflow, filling in basic information such as display name, unique code, category, icon, and remarks.

View

Select the "View" button to open two tabs showing the process diagram and the underlying data.

Edit

Use the "Edit" button to modify the basic information of an existing workflow.

Design

Open the process designer by clicking "Design". The designer consists of four parts: drag‑panel, canvas, property panel, and control panel.

Drag Panel

Provides node models such as Start, Task, Custom, Decision, Fork, Join, End, SubProcess (independent), and SubProcess (embedded).

Canvas

Supports zoom (Ctrl + mouse wheel), drag, move, connect nodes, edit nodes and edges, and right‑click context menus.

Property Panel

Displays editable properties for the selected node or edge. Different node types have specific fields (e.g., start node, task node, custom task, decision, branch, merge, end, sub‑process).

Control Panel

Located at the top‑right, offering zoom, fit, undo/redo, clear, view JSON/XML data, import, highlight, and save actions.

Form Design

Accessed via the "Form Design" button. Metadata‑driven forms are generated from JSON, while custom forms are static Vue components.

Form Attributes

Configure title, layout, and other properties.

Operations

Add, reorder (move up/down), edit, delete, and save form fields.

Deployment

Use the "Deploy" or "Redeploy" buttons to generate a new version of the workflow definition.

Process Definition

Stores the workflow engine definition files synced from the designer. Fields include display name, unique code, category, version (auto‑increment on deploy), and status (enabled/disabled).

Actions

View – diagram and data

Initiate – open the start form

Enable / Disable – control availability

Delete – remove the definition (does not affect deployed instances)

Request Initiation

Shows a grouped list of the latest versions of process definitions; clicking an item opens the start form.

My Initiated

Lists processes started by the user, with detail tabs for form (read‑only), diagram (highlighted), and approval records (timeline or table).

My Tasks

Displays pending tasks for the user. Each task can be processed via the "Handle" button, showing the same three‑tab detail view. Form fields include approval comment (required), attachment upload, next‑node assignee selection, and optional copy‑to users. Submission buttons: Agree, Reject, Return to Previous, Return to Initiator, Jump (to historical node). Countersign Tasks Buttons: Agree, Disagree, Add Signer (does not advance the flow). Delegation Assign a proxy to handle tasks on your behalf. My Completed, My CC, and Other Views Provide read‑only access to completed tasks, copied tasks, and related details. Related Source Code Backend project: https://gitee.com/mldong/mldong Frontend project: https://gitee.com/mldong/mldong-vue Demo site: https://flow.mldong.com (login: admin / 123456)