Skip to main content
DocsBuild WorkflowVisual Editor

Visual Editor

A full tour of the canvas + YAML split view, toolbar, import/export, version snapshots, and collaborative editing locks.

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 a typical three-column layout:

  • Top Toolbar — Core operations such as save/verify/execute/import/export/version history etc.
  • left column canvas — DAG visualization, with drag-and-drop nodes, connections, zooming, and mini-maps
  • Right Column YAML — Monaco Editor directly edits YAML sources with syntax highlighting/auto-completion/error prompts
  • bottom status bar — Save state, edit lock holder, collaborator cursor position, last verification time
  • Right Drawer — AI assistant, breakpoint panel, variable snapshot (open on demand)

Canvas vs YAML: Bidirectional Byte-Level Synchronization

This is the most obvious difference between Braidrun and other brands. A DAG graph and a YAML are byte-level equivalent:

  • You change a line in YAML, and the corresponding node on the canvas is updated instantly;
  • You drag a connection line on the canvas, and the corresponding depends_on field in YAML appears simultaneously;
  • Comments/blank lines/field order are not lost - the exported YAML is exactly the same as what you see in the editor.
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.
  • Both are on - you change one and the other follows, switching at any time.

Top Toolbar

Save

By default, it will automatically save once after you stop typing for 5 seconds; it can also be triggered manually by pressing Ctrl / Cmd + S. Each save will create a version snapshot(Not a simple override).

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)
  • Check / Cancel dry-run (checked by default - highly recommended for first time run)
  • Select trigger source (manual/schedule-simulation)

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

  • Import YAML - Loads YAML from file/pasteboard/a URL overwriting the current content.
  • Export YAML - Download the current YAML to a local file. Suitable for git version control.
  • Import external formats such as Dify/Langflow - Pro or above package required, the platform automatically converts to Braidrun YAML.

Version History

Each save creates a snapshot and retains 100 versions by default (no limit for Enterprise). 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

Select several consecutive steps on the canvas and click "Promote to module" to extract these steps into an independent sub_workflow module, and the original position becomes a module call. Demote reverse operation. 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 to the input endpoint of another node to automatically add the depends_on relationship in YAML. The platform does not allow you to draw edges that form loops - you will be bounced and toasted if you try to draw a loop.

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 click on a step, all variables available before the step is executed - including var:* / steps.*.data / classifier.* / credentials.* (credential values will be displayed desensitized).

Collaborative Editing Lock

Only one person can edit the same workflow at a time - whoever enters first gets the lock. When other people access it, it is in read-only mode, and the status bar will display "xxx is editing". The lock is automatically released after 5 minutes of inactivity, or is forced to be unlocked by the Admin.

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 + S — Save
  • Ctrl / Cmd + E — Execute (open dialog box)
  • Ctrl / Cmd + Shift + V — Verify
  • Ctrl / Cmd + Z — Undo (applicable to both YAML editor + AI assistant)
  • Ctrl / Cmd + Shift + Z — Redo
  • Alt + A — Switch AI assistant drawer
  • Alt + B — Switch breakpoint panel

Next