1. Project Overview

A simple yet powerful, easy-to-use, extensible workflow engine designed for complex Chinese-style approval processes.

The JsonFlow workflow system's frontend now supports mobile APPs and the Vue3 technology stack. A single set of frontend code supports PC, Pad, and H5 displays, as well as mobile APP office workflows (including workflow diagram rendering).

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

Beautiful UI and simple operation ⭐️

• Workflow Diagram Design: Drag nodes into the canvas and connect them freely. During workflow design, right-click a node or connection to configure its properties (nodes can also be configured by double-clicking). The process is quick and convenient.
• Freely configure connections, routes, and layouts to change connection styles. Nodes and connections within the canvas can be dragged and resized. Custom shapes will also be supported in the future.

• View Workflow Diagrams: Workflow nodes display different statuses and icons. Hover over a node to view node and approval information, or hover over a connection to view condition information. (Note: The displayed information can be customized.)

Online Design

• Development Platform: Automatically generate code to make secondary workflow customization and development faster and easier.
• One-Click Design [Form Design + Workflow Design (Form/Approval Page Permissions) + Page Settings]

Online Office

Office Applications

• Supports one-click submission of office application forms online, task processing, WebSocket task message notifications, and more.

Task Management

• Approve tasks directly from the pending tasks list. View or modify form information, approval history, and workflow diagrams. Task handlers and pages are highly configurable.

• Workflow Instance Management
• More functions are waiting for you to experience...

4. Feature Overview

The first independently developed workflow engine (not an open-source BPM). Features an automatic layout algorithm and fully authorized workflows. No. 1 among independently developed engines. Powerful features support online zero-code workflow design and office application submission. Beautiful UI and extremely simple operation ⭐️. Both frontend and backend code are fully self-developed and controllable, making secondary development very easy. Frontend and backend communicate entirely through JSON (with a simple format), making the system easy to use and suitable for complex Chinese-style approval workflows.

Workflow Management, Work Order Management, Workflow Handover Module

• This system separates the workflow engine from the work order system, with the purpose of decoupling and reducing business intrusion, making it easier for business to perform various complex reports and statistics in the future.
• This system also supports online workflow and task handover, making up for the shortcomings of traditional BPM workflow that needs to be handled separately, making it easier for company personnel to transfer work after flowing.

Other Features:

• Five types of nodes are available: Start Node, Sequential Node, Parallel Node, End Node, and Virtual Node, along with a Node Task.
• Approval processes feature a timeline-based UI display (using the Timeline component), with two display options: table view and timeline view.
• More functions are waiting for you to experience...

5. Tech Stack

Data structure

{
  "nodeList": [
    {
      "type": "start",
      "nodeName": "Start",
      "icon": null,
      "attrs": {
        "pcTodoUrl": null,
        "pcFinishUrl": null
      },
      "clazz": {
        "clazz": null,
        "methods": null
      },
      "defJob": {
        "jobName": "Task Name",
        "userId": null,
        "roleId": null
      },
      "jobSize": 1,
      "id": "1661145449179000002",
      "height": 50,
      "x": 210,
      "width": 50,
      "y": 205
    }
  ],
  "linkList": [
    {
      "type": "link",
      "label": "",
      "sourceId": "1661145449179000002",
      "targetId": "1661145452800000003",
      "attrs": {
        "varKey": null,
        "varVal": null
      },
      "id": "1661145456855000004",
      "icon": null
    }
  ],
  "attrs": {
    "id": "1661145437059000001"
  },
  "status": "0"
}

Local Installation

• Download this project: npm install
• Start the project: npm run serve
• Build the project dist: npm run build