# Flowchart ## Specs | Label | Value | | ------------------------- | ----------------------------- | | **Version** | 1.3.0 (updated on 2026-01-18) | | **Developer** | Labii Inc. | | **Type** | Section | | **Support Configuration** | Yes | ## Overview The Flowchart widget provides a graphical, interactive process management tool for laboratory teams. It replaces and improves the previous Workflow widget by operating independently of workflow settings, allowing users to define any sequence of steps and visualize them as a connected node diagram. Each step in the flowchart can carry descriptive metadata, conditional branching logic, redirect loops, and one or more configurable actions. Teams follow the diagram to execute and complete each step in order, with completion status tracked in real time. The widget also supports AI-assisted step generation through FlowchartGPT, enabling users to convert a plain-text workflow description into a structured flowchart automatically.
Flowchart widget overview showing a process diagram with connected nodes

The Flowchart widget displays a process as an interactive node diagram, with each box representing a step that can be executed and completed.

## Use Cases * **Purchase Workflow Management**: Model the full purchase approval process — from request submission through manager review, procurement, and delivery — as a visual flowchart with action buttons at each step. * **Sample Receiving Workflow**: Guide lab technicians through sample intake, labeling, quality check, and storage steps with enforced order and per-step completion tracking. * **Experimental Protocol Execution**: Break a multi-stage protocol into discrete steps with conditional branching (e.g., pass/fail decision nodes) and redirect loops for repeated actions. * **Onboarding and Training Workflows**: Create step-by-step onboarding checklists for new team members with links to relevant documents and forms at each step. * **Compliance Processes**: Track regulated procedures (GLP, GMP) with audit-ready completion records that capture the completing user and timestamp automatically. * **Automated Downstream Actions**: Attach workflow execution or URL-opening actions to steps so that completing a step triggers the next operation automatically. ## Interface ### Read-only View The read-only view displays the rendered flowchart diagram as an interactive graph of connected nodes. Each node represents a step; nodes are color-coded according to their configured color, and completed steps are highlighted in green. Clicking any node opens a step card overlay that shows the step name, description, and available action buttons. * **Diagram Navigation**: Click any node to open the step card for that step. * **Step Card**: Displays the step name, description, completion status, and configured action buttons. Use **Prev** and **Next** to move between adjacent steps. * **Complete Step**: Click **Complete** on the step card to mark the step done. The completing user's name and timestamp are recorded automatically. The diagram updates to highlight the step in green and reveals the next steps. * **Undo Complete**: Click **Undo** on the step card to reverse a completion. * **Perform Step Action**: Configured action buttons appear on the step card. Click an action button to open a link, open a section, or execute a workflow. * **Step Details Panel**: Clicking a node also populates the right-side details panel with the step name, description, node actions (Edit, Add child, Duplicate, Delete), and step actions. ### Edit View The edit view exposes the step management panel and flowchart build controls.
Flowchart step management panel listing all defined steps

The step management panel lists all steps and provides controls to add, edit, delete, and reorder them.

* **Manage Steps Panel**: Click **Manage steps** to open the panel. All defined steps are listed with Edit, Delete, and reorder controls. * **Add Step**: Click **Add step** to create a new step (the Manage steps panel must be open first). * **Edit Step**: Click **Edit** on any step row to modify its fields. * **Delete Step**: Click **Delete** on a step row to remove it. * **Reorder Steps**: Drag and drop the move handle to change the step order. * **Build Flowchart**: Click **Build flowchart** to (re)generate the diagram from the current step list. * **Save as Default**: Click **Save as default** to store the current step list as a template that loads automatically on new records. * **FlowchartGPT**: Enter a plain-text workflow description in the AI prompt input and press **Enter** to generate steps automatically.
Add step form showing all configurable step fields

The Add step form allows full configuration of step metadata, branching logic, and actions.

### Step Fields Each step contains the following fields: | Field | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------- | | **Name** | Step name. Use letters and numbers only. | | **Description** | Instructions or description for the step. | | **Parent** | Parent step to connect this step to a previous one in the diagram. | | **Shape** | Node shape in the diagram. See [Mermaid flowchart shapes](https://mermaid-js.github.io/mermaid/#/flowchart?id=node-shapes). | | **Color** | Background color of the node box. | | **Condition** | Condition text displayed on the arrow from the parent node. Letters and numbers only. | | **Redirect To** | Redirect back to a previous step to create a loop. | | **Redirect To Text** | Label for the redirect arrow. Defaults to "Redirect to". | | **Action** | One or more action buttons attached to the step. Each action has a Name, Icon, Action type, and Parameters. | ## Configuration Diagrams and step cards can be configured to control display width and step enforcement. {% stepper %} {% step %} Click the **Configure** button in the Flowchart widget header to open the settings panel. {% endstep %} {% step %} Configure the available settings: * **Width**: The display width of the flowchart diagram, expressed as a fraction (e.g., `6/12` = 50% of total width). * **Should disable actions if step not current**: When checked, users cannot complete or act on steps that are not the active step, enforcing strict sequential execution. {% endstep %} {% step %} Click **Save** to apply the configuration. {% endstep %} {% endstepper %} {% hint style="info" %} Setting **Width** to `12/12` (full width) is recommended for flowcharts with many branching steps to ensure all nodes are visible without scrolling. {% endhint %} {% hint style="warning" %} Enabling **Should disable actions if step not current** enforces strict step ordering. Ensure your flowchart steps are in the correct sequence before enabling this option in a production record. {% endhint %} ## Additional Functions ### Execute Workflow View The Execute Workflow view consolidates all resources needed to complete a workflow into a single window. {% stepper %} {% step %} Click the **Execute Workflow** button in the Flowchart widget. {% endstep %} {% step %} The workflow view opens with: * The flowchart diagram in the side menu for orientation * Step details (name, description, actions) at the top of the content window * Additional record sections displayed in the main body {% endstep %} {% step %} Work through each step using the step details panel. Complete steps, perform actions, and navigate to subsequent steps without leaving the workflow view. {% endstep %} {% endstepper %} ### Step Actions Each step can be assigned one or more actions that appear as buttons on the step card. Supported action types: | Action | Description | | ----------------- | ------------------------------------------------ | | `OPENLINK` | Opens any URL in a new tab. | | `OPENSECTION` | Opens a specific record section in a new tab. | | `EXECUTEWORKFLOW` | Executes a configured Labii workflow by its UID. | **Example action parameter strings:** * Open a URL: `{'action': 'OPENLINK', 'parameters': 'https://www.example.com'}` * Open Gmail compose: `{'action': 'OPENLINK', 'parameters': 'https://mail.google.com/mail/?view=cm&fs=1&to=someone@example.com&su=SUBJECT&body=BODY'}` * Open a new sample creation form: `{'action': 'OPENLINK', 'parameters': '/form/rows/experiments/0/?d0RLUmZpZWxkc19kaXNhYmxlZHlIUVo_=is_archived'}` * Execute a workflow: `{'action': 'EXECUTEWORKFLOW', 'parameters': 'ehkn0a40x1glqvAFKP'}` ### Generate Flowchart with AI (FlowchartGPT) FlowchartGPT automatically generates flowchart steps from a plain-text workflow description, eliminating manual step creation for common processes. {% stepper %} {% step %} Open the Manage steps panel by clicking **Manage steps**. {% endstep %} {% step %} Locate the AI prompt input box and type a detailed description of your workflow. Clearly outline each stage and any branching conditions to improve accuracy. {% endstep %} {% step %} Press **Enter**. The AI interprets the description and creates the corresponding flowchart steps automatically. {% endstep %} {% step %} Review the generated steps. Edit, reorder, or delete steps as needed to match your exact workflow requirements. {% endstep %} {% step %} Click **Build flowchart** to render the diagram from the finalized steps. {% endstep %} {% endstepper %} {% hint style="success" %} Providing a detailed, sequential description yields more accurate AI-generated steps. Include decision points and conditions (e.g., "if sample passes QC, proceed to storage; otherwise, reject") for richer diagrams. {% endhint %} ### Save as Default To reuse a step set across multiple records, click **Save as default** in the Manage steps panel. The current steps will be pre-loaded on all new records that include this Flowchart widget, saving setup time for recurring workflows. ## Best Practices ### Designing Flowchart Steps * Keep step **Name** values short and descriptive using only alphanumeric characters (e.g., `ReceiveSample`, `QCCheck`). * Write clear **Description** text with instructions; this is what users see in the step card during execution. * Use **Condition** text on branching arrows to make decision logic self-documenting in the diagram (e.g., `Pass`, `Fail`, `Approved`). ### Enforcing Workflow Integrity * Enable **Should disable actions if step not current** for regulated or GMP processes to prevent out-of-order completion. * Use **Save as default** for standardized SOPs so all new records start with the correct step set. * Assign `EXECUTEWORKFLOW` actions to automate downstream record creation or data operations at the appropriate step. ### Performance and Maintainability * After adding, editing, or reordering steps, always click **Build flowchart** to regenerate the diagram and reflect the latest changes. * Limit individual flowcharts to a manageable number of steps (typically under 20) for readability. For longer processes, consider splitting into sub-workflows linked via `EXECUTEWORKFLOW` actions. * Use **Redirect To** sparingly and document the loop condition clearly to avoid confusing cyclic diagrams. {% hint style="success" %} Combining the Flowchart widget with relevant data sections in the Execute Workflow view gives users everything they need to complete a step — instructions, actions, and supporting data — without navigating away. {% endhint %} ### Common Pitfalls to Avoid * **Avoid** using spaces or special characters in step **Name** fields; they are used as node identifiers in the diagram syntax. * **Avoid** deleting a parent step without first re-parenting its children, which will break the diagram connections. * **Instead**, reassign child step **Parent** values before removing an intermediate step. ## Related Widgets * [**Steps**](https://docs.labii.com/widgets/section-widgets/process-management/steps): An alternative process management widget that presents steps as a linear list rather than a graphical diagram. Use the Steps widget when a sequential checklist view is preferred over a visual flowchart. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.labii.com/widgets/section-widgets/process-management/flowchart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.