A flow diagram visually represents the steps and decision points of a process or system. It shows the entire flow from start to finish. Each node represents a specific step or decision point, while edges represent the sequence and relationships between steps. Edges only need to be named when they represent branching conditions.
Performance Diagnosis Flow: Shows the decision flow from I/O check to problem identification and solutions.
User Registration Flow (dark theme): User visits registration page, fills in and submits registration form, system validates user info, creates account or prompts corrections, sends verification email, user verifies and registration is complete.
Order Delivery Flow: Customer places order, system generates order, warehouse picks goods, warehouse packs goods, logistics delivery, customer receives goods.
| Property | Type | Required | Description |
|---|---|---|---|
| type | string | required | Value must be "flow-diagram". |
| data | Object | required | Chart data, containing nodes and edges. |
| data.nodes | Object[] | required | Node array, each node represents a step. |
| data.nodes.name | string | required | Node name, must be unique. |
| data.edges | Object[] | required | Edge array, each edge represents a relationship between two nodes. |
| data.edges.source | string | required | Source node name, pointing to the name property of a node. |
| data.edges.target | string | required | Target node name, pointing to the name property of a node. |
| data.edges.name | string | optional | Edge label, used in branching scenarios. |
| title | string | optional | Chart title. |
| theme | 'default' | 'dark' | 'academy' | optional | Chart theme, default is "default". |
| style | Object | optional | Chart style. |
| style.backgroundColor | string | optional | Must be a valid color value. |
| style.palette | string[] | optional | Must be an array of valid color values. |
