Fields
Summary
Nodes typing
Configure the field mapping for flow chart nodes. The node data type is required - create a data type in your Bubble database with the corresponding fields. Actual node data is loaded using the "Load nodes and edges" action.
app type
The Bubble data type representing a single node. This field is required. Select the type of thing in your app that each node should represent.
field of Node data type``
Field in your Node data type that uniquely identifies each node. If not provided, IDs will be auto-generated when the "Auto-generate node IDs" option is enabled in actions.
field of Node data type``
Field in your Node data type for the node label or display text. Optional.
field of Node data type``
Optional field in your Node data type containing the image URL to display in the node. By default image will be rendered below the label. The image styles and positioning can be changed using 'Custom CSS' element field in Advanced fields section.
field of Node data type``
Field for the node's horizontal position on the canvas. Defaults to 0 if not provided. Optional.
field of Node data type``
Field for the node's vertical position on the canvas. Defaults to 0 if not provided. Optional.
field of Node data type``
Field that specifies the React Flow node type (default, input, output, group). If not provided, all nodes will use the "default" type. Optional.
field of Node data type``
Field containing custom JSON properties to extend each node. The JSON will be merged with the node object, allowing you to set additional ReactFlow node properties like className, style, hidden, etc. Example: {"className": "special-node", "style": {"backgroundColor": "#ff0000"}, "hidden": false}. You can use className to apply custom CSS styles in the Custom CSS field.
Node typing - relationships
Configure parent-child relationships between nodes. These fields allow you to define connections through data relationships rather than separate edge objects.
field of Node data type``
Field containing parent node IDs. Can be a single text field (one parent) or a list of texts (multiple parents). When specified, edges will be automatically created from each parent to this node. Optional.
field of Node data type``
Field containing child node IDs. Can be a single text field (one child) or a list of texts (multiple children). When specified, edges will be automatically created from this node to each child. Optional.
Edges typing
Configure the field mapping for explicit flow chart edges. This is optional - you can use node relationships instead. If you have a separate data type for edges, configure the field mappings here.
app type
The Bubble data type representing edges/connections. Only needed if you want to load edges from a separate list rather than using node relationships. Optional.
field of Edge data type``
Field that uniquely identifies each edge. If not provided, IDs will be auto-generated. Optional.
field of Edge data type``
Field containing the ID of the source node for this edge. Required if using explicit edge data.
field of Edge data type``
Field containing the ID of the target node for this edge. Required if using explicit edge data.
field of Edge data type``
Field that specifies the React Flow edge type (default, straight, step, smoothstep, bezier). Defaults to "default" if not provided. Optional.
field of Edge data type``
Field containing custom JSON properties to extend each edge. The JSON will be merged with the edge object, allowing you to set additional ReactFlow edge properties like className, style, animated, markerStart, markerEnd, etc.
General appearance
Configure the visual components and display options for the React Flow chart.
dropdown
Theme mode for the React Flow chart. Options: "light", "dark", or "system" (follows browser/OS preference).
Interaction behavior
Control how users can interact with nodes and the canvas.
boolean
Enable/disable dragging of nodes. When disabled, nodes are fixed in position and cannot be moved by users.
boolean
Enable/disable selection of nodes and edges. When disabled, users cannot select any elements (useful for read-only displays).
boolean
Enable/disable creating new connections between nodes. When disabled, users cannot drag from node handles to create new edges.
boolean
Enable/disable panning the canvas by dragging empty space. When enabled, users can drag the background to move the viewport.
Auto layout
Auto-layout automatically positions nodes in your chart. Auto-layout can be enabled in the "Load nodes and edges" action or run using a dedicated "Auto layout" action. Auto-layout uses the Dagre algorithm to minimize edge crossings and optimize spacing between nodes.
dropdown
Direction for automatic layout. Options: "TB" (top to bottom), "BT" (bottom to top), "LR" (left to right), "RL" (right to left).
number
Width of nodes in pixels for layout calculations. This affects spacing and positioning when auto-layout is enabled.
number
Height of nodes in pixels for layout calculations. This affects spacing and positioning when auto-layout is enabled.
Node appearance (advanced)
Configure default styling and behavior for nodes.
text
JSON object with default properties applied to all nodes (e.g., {"draggable": true, "style": {"background": "#fff"}}). These settings can be overridden by action-specific settings. Optional.
Node template (advanced)
Override layout of the nodes content. It allows you to display your specific Bubble data in the nodes. See demo for examples and reference.
yes/no
Render nodes (with default node type) using the defined custom templates.
text
Custom template allows you to override HTML displayed in the nodes and display app specific data in the nodes. This field defines template for nodes with type "default" (or not set). It requires "Enable custom templates" to be enabled. Use HTM syntax with <${Component}> for React components. Access to label, imageUrl, nodeData (all bubble node data in your database), Handle component, and Position enum. To see all variables you can use in the template, enable "Debug template variables" field. See demo for examples or HTM template library for syntax.
yes/no
Enable debug logging of template variables to browser console. Useful for development and troubleshooting custom templates. Shows all available variables you can use in the template.
Edge appearance (advanced)
Configure default styling and behavior for edges.
dropdown
Visual style of edges. Options: "bezier" (smooth curves, default), "straight" (direct lines), "step" (right-angled for flowcharts), "smoothstep" (step with rounded corners).
yes/no
Whether edges should be animated by default. Animated edges show flowing dots along the connection.
dropdown
Arrow marker at the start of edges. Options: "none" (no arrow), "arrow" (open arrow), "arrowclosed" (filled arrow).
dropdown
Arrow marker at the end of edges. Options: "none" (no arrow), "arrow" (open arrow), "arrowclosed" (filled arrow).
text
JSON object with default properties applied to all edges (e.g., {"animated": true, "style": {"stroke": "#999"}}). These settings can be overridden by action-specific settings. Optional.
Advanced Configuration
text
Advanced: JSON object with React Flow component props for custom configuration. Overrides default settings. Example: {"fitView": true, "panOnDrag": false}
text
Advanced: JSON object with MiniMap component props for custom configuration. Example: {"nodeColor": "#ff0000", "maskColor": "rgba(0,0,0,0.1)"}
text
Advanced: JSON object with Controls component props for custom configuration. Example: {"showZoom": true, "showFitView": false, "showInteractive": true}
text
Advanced: JSON object with Background component props for custom configuration. Example: {"gap": 12, "size": 1, "color": "#f1f1f1"}
boolean
When enabled, outputs the constructed ReactFlow properties and nodes/edges JSONs to the browser console. Useful for advanced users to see current settings and construct reactFlowPropsJSON values. Check browser dev tools console.
text
Custom CSS styles for advanced appearance customization. You can use placeholder {ELEMENT_ID} that will be replaced with the plugin element ID that we recommend to use since the styles are appended to the page styles globally. See the demo for examples and reference.
Nodes typing
Configure the field mapping for flow chart nodes. The node data type is required - create a data type in your Bubble database with the corresponding fields. Actual node data is loaded using the "Load nodes and edges" action.
Node data type
Type: app type
The Bubble data type representing a single node. This field is required. Select the type of thing in your app that each node should represent.
Node ID field
Type: field of Node data type``
Field in your Node data type that uniquely identifies each node. If not provided, IDs will be auto-generated when the "Auto-generate node IDs" option is enabled in actions.
Node label field
Type: field of Node data type``
Field in your Node data type for the node label or display text. Optional.
Node image field
Type: field of Node data type``
Optional field in your Node data type containing the image URL to display in the node. By default image will be rendered below the label. The image styles and positioning can be changed using 'Custom CSS' element field in Advanced fields section.
Node X position field
Type: field of Node data type``
Field for the node's horizontal position on the canvas. Defaults to 0 if not provided. Optional.
Node Y position field
Type: field of Node data type``
Field for the node's vertical position on the canvas. Defaults to 0 if not provided. Optional.
Node type field
Type: field of Node data type``
Field that specifies the React Flow node type (default, input, output, group). If not provided, all nodes will use the "default" type. Optional.
(Adv.) Node JSON field
Type: field of Node data type``
Field containing custom JSON properties to extend each node. The JSON will be merged with the node object, allowing you to set additional ReactFlow node properties like className, style, hidden, etc. Example: {"className": "special-node", "style": {"backgroundColor": "#ff0000"}, "hidden": false}. You can use className to apply custom CSS styles in the Custom CSS field.
Node typing - relationships
Configure parent-child relationships between nodes. These fields allow you to define connections through data relationships rather than separate edge objects.
Node parents field
Type: field of Node data type``
Field containing parent node IDs. Can be a single text field (one parent) or a list of texts (multiple parents). When specified, edges will be automatically created from each parent to this node. Optional.
Node children field
Type: field of Node data type``
Field containing child node IDs. Can be a single text field (one child) or a list of texts (multiple children). When specified, edges will be automatically created from this node to each child. Optional.
Edges typing
Configure the field mapping for explicit flow chart edges. This is optional - you can use node relationships instead. If you have a separate data type for edges, configure the field mappings here.
Edge data type
Type: app type
The Bubble data type representing edges/connections. Only needed if you want to load edges from a separate list rather than using node relationships. Optional.
Edge ID field
Type: field of Edge data type``
Field that uniquely identifies each edge. If not provided, IDs will be auto-generated. Optional.
Edge source field
Type: field of Edge data type``
Field containing the ID of the source node for this edge. Required if using explicit edge data.
Edge target field
Type: field of Edge data type``
Field containing the ID of the target node for this edge. Required if using explicit edge data.
Edge label field
Type: field of Edge data type``
Field containing the display text for the edge. Optional.
Edge type field
Type: field of Edge data type``
Field that specifies the React Flow edge type (default, straight, step, smoothstep, bezier). Defaults to "default" if not provided. Optional.
(Adv.) Edge JSON field
Type: field of Edge data type``
Field containing custom JSON properties to extend each edge. The JSON will be merged with the edge object, allowing you to set additional ReactFlow edge properties like className, style, animated, markerStart, markerEnd, etc.
General appearance
Configure the visual components and display options for the React Flow chart.
Show mini map
Type: yes/no
Display a miniature overview of the entire flow chart for easy navigation.
Show controls
Type: yes/no
Display zoom and fit view control buttons in the bottom left corner.
Background
Type: dropdown
Background pattern for the canvas.
Color mode
Type: dropdown
Theme mode for the React Flow chart. Options: "light", "dark", or "system" (follows browser/OS preference).
Interaction behavior
Control how users can interact with nodes and the canvas.
Nodes draggable
Type: boolean
Enable/disable dragging of nodes. When disabled, nodes are fixed in position and cannot be moved by users.
Elements selectable
Type: boolean
Enable/disable selection of nodes and edges. When disabled, users cannot select any elements (useful for read-only displays).
Nodes connectable
Type: boolean
Enable/disable creating new connections between nodes. When disabled, users cannot drag from node handles to create new edges.
Pan on drag
Type: boolean
Enable/disable panning the canvas by dragging empty space. When enabled, users can drag the background to move the viewport.
Auto layout
Auto-layout automatically positions nodes in your chart. Auto-layout can be enabled in the "Load nodes and edges" action or run using a dedicated "Auto layout" action. Auto-layout uses the Dagre algorithm to minimize edge crossings and optimize spacing between nodes.
Layout direction
Type: dropdown
Direction for automatic layout. Options: "TB" (top to bottom), "BT" (bottom to top), "LR" (left to right), "RL" (right to left).
Node width for layout
Type: number
Width of nodes in pixels for layout calculations. This affects spacing and positioning when auto-layout is enabled.
Node height for layout
Type: number
Height of nodes in pixels for layout calculations. This affects spacing and positioning when auto-layout is enabled.
Node appearance (advanced)
Configure default styling and behavior for nodes.
Node settings JSON
Type: text
JSON object with default properties applied to all nodes (e.g., {"draggable": true, "style": {"background": "#fff"}}). These settings can be overridden by action-specific settings. Optional.
Node template (advanced)
Override layout of the nodes content. It allows you to display your specific Bubble data in the nodes. See demo for examples and reference.
Enable custom templates
Type: yes/no
Render nodes (with default node type) using the defined custom templates.
Custom node template
Type: text
Custom template allows you to override HTML displayed in the nodes and display app specific data in the nodes. This field defines template for nodes with type "default" (or not set). It requires "Enable custom templates" to be enabled. Use HTM syntax with <${Component}> for React components. Access to label, imageUrl, nodeData (all bubble node data in your database), Handle component, and Position enum. To see all variables you can use in the template, enable "Debug template variables" field. See demo for examples or HTM template library for syntax.
Debug template variables
Type: yes/no
Enable debug logging of template variables to browser console. Useful for development and troubleshooting custom templates. Shows all available variables you can use in the template.
Edge appearance (advanced)
Configure default styling and behavior for edges.
Default edge type
Type: dropdown
Visual style of edges. Options: "bezier" (smooth curves, default), "straight" (direct lines), "step" (right-angled for flowcharts), "smoothstep" (step with rounded corners).
Edge animated
Type: yes/no
Whether edges should be animated by default. Animated edges show flowing dots along the connection.
Edge start marker
Type: dropdown
Arrow marker at the start of edges. Options: "none" (no arrow), "arrow" (open arrow), "arrowclosed" (filled arrow).
Edge end marker
Type: dropdown
Arrow marker at the end of edges. Options: "none" (no arrow), "arrow" (open arrow), "arrowclosed" (filled arrow).
Edge settings JSON
Type: text
JSON object with default properties applied to all edges (e.g., {"animated": true, "style": {"stroke": "#999"}}). These settings can be overridden by action-specific settings. Optional.
Advanced Configuration
ReactFlow props JSON
Type: text
Advanced: JSON object with React Flow component props for custom configuration. Overrides default settings. Example: {"fitView": true, "panOnDrag": false}
MiniMap props JSON
Type: text
Advanced: JSON object with MiniMap component props for custom configuration. Example: {"nodeColor": "#ff0000", "maskColor": "rgba(0,0,0,0.1)"}
Controls props JSON
Type: text
Advanced: JSON object with Controls component props for custom configuration. Example: {"showZoom": true, "showFitView": false, "showInteractive": true}
Background props JSON
Type: text
Advanced: JSON object with Background component props for custom configuration. Example: {"gap": 12, "size": 1, "color": "#f1f1f1"}
Debug to console
Type: boolean
When enabled, outputs the constructed ReactFlow properties and nodes/edges JSONs to the browser console. Useful for advanced users to see current settings and construct reactFlowPropsJSON values. Check browser dev tools console.
Custom CSS
Type: text
Custom CSS styles for advanced appearance customization. You can use placeholder {ELEMENT_ID} that will be replaced with the plugin element ID that we recommend to use since the styles are appended to the page styles globally. See the demo for examples and reference.
Example:
Last updated