Skip to Main Content
DocsBuild WorkflowVisual Editor

Visual Editor

Canvas / YAML two editing views, toolbar, import and export, version snapshot and collaborative editing lock.

The workflow editor is the page you spend the most time on every day. This article talks about every area and every button, so you know where to click if you want to do X.

Overall Layout

The editor is organized around a top toolbar, a main editing area, and panels that open on demand:

  • Top Toolbar — Auto-save status, undo/redo, verify, save now, more actions and execution
  • Visual tags — DAG canvas, step properties and workflow settings; you can drag nodes, connect lines, zoom and fit the canvas
  • YAML Code Tag — Use Monaco Editor to edit the current workflow YAML and apply parsed changes when leaving the tag
  • More menus — Low-frequency operations such as version, export, preset, module contract, sharing, market release and template upgrade
  • On-Demand Panel — AI assistant, problem panel and execution-related tools are opened in their current state

Visualization and YAML: the same workflow definition

Visual tags and YAML tags are edited in the same workflow, but they use different editing methods:

  • Visual changes will update the structured workflow, and the corresponding content will be regenerated when switching to YAML;
  • YAML changes will be applied back to the visual model only after the parsing is successful. If the parsing fails, the YAML tag will stay on and an error will be prompted;
  • Structures, fields and values will be synchronized according to the workflow model; comments, blank lines and original layout do not belong to the stable preservation contract. Please write important instructions into formal fields such as description before importing.
When to use which side?
  • Canvas: Look at the overall structure, draw the topology of new steps, and do code review.
  • YAML: change detail fields, copy-paste blocks, fine control.
  • Handle YAML parsing errors before switching tags to avoid mistakenly thinking that the changes have been applied.

Top Toolbar

Save

The editor will try to save automatically after the changes stop for about 1.2 seconds, and the top status will show Unsaved, Saving, Saved or Failed. Click "Save Now" if you need to save it immediately; if the automatic save fails, follow the prompts to fix the configuration or network problems and try again. A normal save does not automatically create a version snapshot.

Undo / Redo

The toolbar has Undo and Redo buttons, with shortcuts Ctrl / Cmd + Z and Ctrl / Cmd + Shift + Z. This is an editor-level history stack: canvas drags, YAML edits, and each step the AI assistant builds all go into the same history — so "the AI botched a step" is just as easy to undo. Continuous typing coalesces into one record, and timestamps written back by autosave don't create extra history; up to the most recent 50 snapshots are kept, and switching to another workflow resets the history.

Verify

Call the platform parser to do a round-trip:

  1. YAML → WorkflowDefinition object (syntax layer)
  2. WorkflowDefinition → Semantic verification (whether the variable reference can be parsed, whether the preset can be found, whether there are loops in dependencies)
  3. WorkflowDefinition → YAML round-trip (an error will be reported if there are any deviations)

Errors are marked with a red squiggle at the YAML line level; click one to jump to the line. Deep-validation results are also merged into the diagnostics panel described below. Clean everything up before saving and going live.

Execute

Clicking this button will pop up a dialog box, allowing you to:

  • Fill in the variables of workflow (default values will be pre-filled)
  • Click "Preview" to only check the static execution plan; click "Start Execution" to create the execution and actually run the steps

Preview does not call LLM, tools, or third-party APIs, nor does it verify side effects. For the first real execution, please use test data or read-only permissions; for complex processes, you can enable debug and add breakpoints before key steps.

After clicking "Start Execution", the editor will automatically open a drawer on the right to display the real-time event flow, and at the same time open the execution details in the current tab.

Import/Export

  • Export: Download the current workflow YAML in "More → Export".
  • Import: Return to the workflow list to use the import operation, paste or upload Braidrun YAML; batch entry supports .yaml / .yml.
  • Currently does not provide one-click conversion to Dify, Langflow or n8n formats; external definitions need to be organized into Braidrun YAML and verified first.

Version History

Version management is available starting from Pro: Pro can save up to 10 versions per workflow, and there is no upper limit on the number of versions for Team and Enterprise. Versions need to be saved explicitly in the Versions window. You can:

  • List all snapshots (including time, saver, number of changed lines)
  • Compare with current version diff
  • Roll back to any historical version (rolling back will create a new snapshot and will not actually overwrite the history)

Promote to module / Demote from module

"More → Promote to module" will fill in the module contract for the entire current workflow and mark it as a reusable module, and will not automatically extract it from the selected steps. Demote will change the module back to the normal workflow and will not automatically expand the caller. See details Modularization and Reuse.

Left Column Canvas Operations

Add New Node

  • The "+" button in the lower left corner opens the step type selector and selects a main mode.
  • It can also be added by dragging "step template fragment" from the right column to the canvas.

Drag the output endpoint of one node onto the input endpoint of another and the depends_on relationship is added to the YAML automatically. The platform does not allow edges that form a cycle — an attempt to draw one snaps back and a toast explains why.

Node Right-Click Menu

  • Edit - Open the YAML snippet of this step for partial editing.
  • Copy - clone a copy of the current step (the id is automatically suffixed).
  • Delete - a warning will be given if there are references downstream when deleting.
  • Set as start/end - Mark the explicit entry/exit of the workflow (required only for state_machine).

Zoom And Mini Map

There is a mini map in the lower right corner, which allows you to quickly jump when a complex workflow exceeds the canvas size. Ctrl / Cmd + scroll wheel to zoom; Space + drag to pan.

Right Column YAML

Autocomplete

Based on JSON Schema, common field names, preset names, and existing step ids can be completed. Ctrl / Cmd + Space Force awakening.

Fold / Unfold

Click the arrow next to the line number on the left to collapse the entire step. Shortcut key Ctrl / Cmd + Shift + [ / ].

Search And Replace

Ctrl / Cmd + F Search, Ctrl / Cmd + H Replace. Support regularity. It will only affect the current workflow - it will not affect other workflows.

Diagnostics And Issues Panel

The editor has two layers of linting that share one set of rule codes:

  • Client-side instant diagnostics — Recomputed locally after every edit (structural rules like dependency cycles, dangling references, and suggestions for near-misspelled step ids), driving the issues panel, node badges, and toolbar badge with zero latency.
  • Server-side deep validation — Called when you click "Validate" in the toolbar POST /api/workflows/lint, returning all issues at once (save-time validation stops at the first error; linting doesn't) and adding rules that need server-side data, like agent presets and module contracts.

The toolbar badge shows the error / warning count in real time (red when there are errors, yellow when only warnings); clicking it runs a deep validation and opens the issues panel. Each issue carries a step-locator chip (click to jump to the node) and a suggested fix; you can also "Fix with AI" for a single issue or all of them — the editor assembles the issues into a structured prompt and sends it to the AI assistant.

Right Drawer

AI Assistant

Click the "AI Assistant" icon in the middle of the right column to expand. Support:

  • Use natural language to describe a piece of logic to be changed, and the assistant will give a diff preview;
  • Slash commands: /execute, /validate, /export, /new, /undo, /help;
  • /undo reverts the assistant's changes (up to 10 steps); the editor's own Ctrl / Cmd + Z can also undo the AI's changes one at a time.

See complete capabilities Orchestrate Using AI Assistants.

Breakpoints Panel

This panel lights up when execution is executing in debug mode. You can add/delete breakpoints, view hit history, and edit variables during pause. See details Breakpoint Debugging.

Variable Snapshot

When you select a step, the panel lists the workflow variables available at that point, upstream step outputs, and runtime variables created by nodes such as extract, classifier, and aggregate. Plaintext credentials are never shown as normal variables; a credential selector stores only a credential ID.

Collaborative Editing Lock

After team collaboration is enabled, only one person in the same workflow is allowed to hold the edit lock at the same time. Others can still view it, but they need to wait for the current lock to be released before saving. The lock expires in 5 minutes by default; the client will actively release it when the lock holder exits the editor. After expiration, other collaborators with editing permissions can reacquire it. There are currently no team admins forcing the entrance to be unlocked.

Multi-Person Collaboration Process

Recommended process: A. Save after modification → Release the lock → B. Take the lock → Continue modification. If you want to make changes in parallel, split it into multiple sub-workflows and edit them separately.

Commonly Used Shortcut Keys

Some of the most commonly used ones in the editor - see the complete list Keyboard Shortcuts.

  • Ctrl / Cmd + Z — Undo in visual tags; YAML editor uses Monaco’s own undo stack
  • Ctrl / Cmd + Shift + Z Or Ctrl + Y — Reworked in visualization tag
  • Delete Or Backspace — Delete the currently selected step in the visualization tab, which can be undone immediately

Next

Last Updated · 2026-07-30

Was this page helpful?