GPT-Vis1.3
Skip to examples
Browse chart types
Chart library26 ways to visualize
Start with your own data.SDK quickstart Install the Agent Skill

RELATIONSHIP / CHART GUIDE

Flow Diagram

A flow diagram visually represents the steps and decision points of a process or system.

01 / EXPLORE

See it in action.

Switch to Code to copy an example.

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.

About Flow Diagram

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.

02 / CONFIGURE

Make it yours.

The properties available for this chart.

Configuration Options

PropertyTypeRequiredDescription
typestringrequiredValue must be "flow-diagram".
dataObjectrequiredChart data, containing nodes and edges.
data.nodesObject[]requiredNode array, each node represents a step.
data.nodes.namestringrequiredNode name, must be unique.
data.edgesObject[]requiredEdge array, each edge represents a relationship between two nodes.
data.edges.sourcestringrequiredSource node name, pointing to the name property of a node.
data.edges.targetstringrequiredTarget node name, pointing to the name property of a node.
data.edges.namestringoptionalEdge label, used in branching scenarios.
titlestringoptionalChart title.
themeBuiltinThemeName | ThemeSpecoptionalBuilt-in theme name or custom theme object; default is "default". See Documentation → Custom Themes.
styleObjectoptionalChart style.
style.backgroundColorstringoptionalMust be a valid color value.
style.palettestring[]optionalMust be an array of valid color values.
GPT-Vis · An AntV project · MIT licensed