Reading the Process Diagram
The diagram of a business case - the root process and all its sub-processes - comes from the business service already in the look of the application. In a page you usually just use the EccProcessDiagram widget; this page shows what the request returns.
Request
GET /api/v1/process/{processInstanceId}/diagram
Authorization: Bearer eyJhbGciOi...
| path | id of a root instance - the id of a sub-process returns |
In the frontend use the helper of the API layer:
import { fetchProcessDiagramList } from "@/ecc/services/ApiService";
const processes = await fetchProcessDiagramList(rootProcessInstanceId); // root first, then sub-processes
const rootSvg = processes[0].diagram; // themed SVG string
Response
data is a list: the root instance first, then every sub-process of the case. Each entry has only these fields - no business data:
| id of the instance |
| business key of the instance |
| process definition, e.g. |
| state of the instance, e.g. |
| the diagram as an SVG string, ready to insert into the page |
{
"success": true,
"httpStatus": 200,
"array": true,
"arrayCount": 2,
"data": [
{ "processInstanceId": "8c3e5f0a-1b2c-4d3e-9f4a-5b6c7d8e9f01", "businessKey": "PR261001-3f9a1c2b", "processId": "purchase", "state": "ACTIVE", "diagram": "<svg ...>...</svg>" },
{ "processInstanceId": "e75d3a7a-8fef-48fc-bec5-067c65c27209", "businessKey": "PR261001-3f9a1c2b", "processId": "purchaseRelease", "state": "ACTIVE", "diagram": "<svg ...>...</svg>" }
]
}
What the diagram shows
light green task with green border | step completed |
blue border | step running now |
green line | path taken so far |
white task, grey line | not reached (yet) |
small circles | start (green), intermediate (yellow) and end (red) events |
icon top left in a task | task type: user, script, service or rule task |
Colors and fonts follow the active UI theme when the SVG is inserted inline, as EccProcessDiagram does.
Insert the SVG inline (not as an image) so that the theme colors apply. The diagram keeps its own size; add pan and zoom around it, or use EccProcessDiagram.
On this page
- Reading the Process Diagram