Flows

The Flows section is Grails’ visual flow editor — a canvas-based workspace where your team can create user journey maps, flowcharts, and visual representations of your product’s logic. Each flow is an independent canvas that can contain multiple types of elements: Figma screens, decision nodes, annotations, and grouping containers.

Unlike the rest of the Vault (which is fed from Figma), flows are native Grails content: you create and edit them directly on the platform, though they can reference screens and components synced from Figma.

Overview

The Flows section is organized into three main zones:

• Left Sidebar (Flow List): Shows all flows created in the project. From here you can create, select, and delete flows.
• Main Canvas: The infinite workspace where the diagram is built. Only appears when a flow is selected.
• Configuration Panels: Side panels that open when you select a node on the canvas to configure or inspect it.

Note

If no flows have been created yet, the canvas will show an empty state with a button to create the first one.

Flow List (Sidebar)

The left sidebar displays all flows in the project. Each flow in the list includes:

• Flow icon: A custom emoji or, if none has been assigned, a default grid icon.
• Flow name: The name assigned when creating it or from the settings dialog.
• Selection indicator: The active flow has a highlighted background that distinguishes it from the rest.

Hovering over a flow in the list reveals the delete button (trash icon) on the right.

Sidebar Controls

• ”+” button: Creates a new empty flow. A default name is assigned that you can change later from the flow settings.
• Import button (upload icon): Available to Editors and Admins. Allows importing a flow from a previously exported JSON file. Useful for sharing flows between projects.

Editing Canvas

The canvas is the main workspace where you build and edit your flow. It’s an infinite space you can pan by scrolling or dragging, and zoom in and out on.

Canvas Controls

On the canvas you’ll find the following controls:

• Node tools: A toolbar for adding new node types to the canvas.
• Zoom controls: You can zoom in and out of the view. There’s also a minimap in the corner for orientation when the flow is large.
• Undo/Redo: Buttons to undo or redo recent changes on the canvas. Grails keeps a history of up to 50 actions.
• Settings button (gear icon): In the top-right corner of the canvas. Opens the flow settings dialog (name, description, icon).

Note

If your role is Viewer, the canvas opens in read-only mode. You can navigate, zoom, and explore the flow, but you cannot move or add nodes, or edit connections.

Node Types

Flows can contain the following types of elements:

Node: Screen

Represents a specific screen or frame from Figma. Shows the thumbnail of the synced screen. Clicking a Screen node opens the Screen Detail Panel with two tabs:

Tab: Properties

• Dependencies: List of components used in that screen, with their names and usage counts.
• Related components: Other design system components that appear in the screen.

Tab: Inspect (X-Ray)

• A visual analysis mode that breaks down the components detected within the Figma frame.
• Lets you explore the composition of the screen without opening Figma.

Node: Text

A free-form text block for adding notes, titles, or narrative context to the diagram. Can be edited directly on the canvas by double-clicking.

Node: Choice

A diamond-shaped node representing a decision point in the user flow. Ideal for modeling logical branches (“Is the user authenticated? Yes / No”).

Node: Post-it

A colored sticky note for adding contextual annotations, reminders, or comments to the diagram. Can be edited by double-clicking.

Node: Box

A rectangular container that visually groups related nodes. Useful for delimiting sections of the flow or grouping screens from the same module.

Node: Smart Section

A structured, labeled container for grouping Screen nodes within a logical product section (e.g., “Onboarding”, “Checkout”). Displays the section name as a header.

Node: Nested Flow

A reference to another existing flow in the project. Allows reusing complete diagrams as blocks within a more complex flow.

Connections (Edges)

Nodes are connected to each other with arrows or lines that represent transitions or relationships. You can:

• Create connections by dragging from the edge of one node to another.
• Select a connection to delete it or change its style.

Flow Settings Dialog

Clicking the settings button (gear icon, top-right of the canvas) opens a dialog with the following options:

• Flow name: Editable text field with the current name.
• Description: Optional text field to add context about the flow’s purpose.
• Icon: An emoji picker for choosing a visual icon to identify the flow in the sidebar list.
• Export flow: Option to download the current flow as a JSON file. Useful for backups or sharing with other projects.
• Delete flow: Button to permanently delete the flow (requires confirmation).

Flow Import

Editors and Admins can import flows from JSON files (previously exported from Grails). When importing:

• A new flow is created in the sidebar list.
• All nodes and connections are restored with new unique identifiers.
• References to Figma screens or components are maintained if the elements exist in the current project.

Available Actions

Action	Roles	Description
Create flow	Admin, Editor	”+” button in the sidebar. Creates an empty flow with a default name.
Select flow	All	Clicking a flow in the sidebar list loads its canvas.
Edit name, description, and icon	Admin, Editor	From the settings dialog (gear icon on the canvas).
Add nodes	Admin, Editor	From the canvas toolbar, select the node type and place it.
Move nodes	Admin, Editor	Drag nodes on the canvas to reorganize the diagram.
Connect nodes	Admin, Editor	Drag from the edge of one node to another to create a connection.
Edit node content	Admin, Editor	Double-click a text or post-it node to edit its content.
Configure Screen node	All	Clicking a Screen node opens its Detail Panel to view dependencies and inspect the screen.
Undo / Redo	Admin, Editor	Buttons on the canvas or standard keyboard shortcuts (Ctrl+Z / Ctrl+Y).
Export flow	Admin, Editor	From the settings dialog → download as JSON.
Import flow	Admin, Editor	Import button in the sidebar → select JSON file.
Delete flow	Admin	From the sidebar (hover → trash icon) or from the settings dialog. Requires confirmation.
Navigate canvas	All	Scroll to zoom, drag the background to pan, minimap for orientation.
Inspect screens (X-Ray)	All	Click a Screen node → Inspect tab to see the component breakdown.

Role Permissions

• Admin: Full access. Can create, edit, import, and delete flows. Can add and edit all node types.
• Editor: Can create, edit, and import flows. Can add and edit all node types.
• Viewer: Read-only access. Can browse existing flows, zoom, and explore the canvas, and inspect screens (X-Ray), but cannot make any edits.