Skip to content

Visual editor

The visual editor is the drawflow-based authoring surface for users who prefer to assemble pipelines visually rather than edit YAML directly. It writes back to YAML on every change; YAML stays the canonical source.

Opening the editor

Open a configuration draft and switch to Visual in the editor toolbar. The current YAML is parsed into the visual graph; if the YAML contains constructs the editor cannot round-trip (see What is supported) you get a warning chip and the editor stays read-only on those parts.

The palette

The left palette lists every component the visual editor knows about, grouped:

  • Receivers (otlp, kafka, hostmetrics, filelog, …)
  • Processors (batch, attributes, transform, filter, tail_sampling, …)
  • Connectors (spanmetrics, routing, forward, …)
  • Exporters (otlp, prometheusremotewrite, kafka, debug, …)
  • Extensions (opamp, zpages, health_check, …)

Drag any palette item onto the canvas, double-click to configure it, connect it to others by dragging from one node's output socket to another's input socket.

Per-component config

Double-click any node to open its configuration drawer. The drawer is schema-driven from the OpenTelemetry Collector component's options — you get the same fields the YAML would have, but as a form.

Common shortcuts:

  • Tab cycles through fields,
  • Cmd/Ctrl + Enter saves the drawer,
  • Esc cancels.

Mini-map

A mini-map in the bottom-right shows the whole graph; click anywhere on it to pan to that section. Useful for very wide configurations.

Multi-pipeline editing

You can edit multiple signal pipelines in one canvas — pipelines are distinguished by lane colour (traces / metrics / logs / profiles) and each has its own group. Connectors that cross signal types render as arrows between lanes.

What is supported

The visual editor preserves YAML round-trip for:

  • canonical receiver / processor / exporter / connector / extension blocks,
  • service.pipelines references,
  • inline simple values (strings, numbers, booleans),
  • nested maps with depth ≤ 6,
  • standard YAML formatting.

It will fall back to "read-only" with a warning when it encounters:

  • YAML anchors and aliases that span multiple top-level blocks,
  • arbitrary YAML stringify shapes that have no schema mapping,
  • comments in unusual positions (comments in the middle of a flow sequence).

When in doubt, switch to the YAML editor — it is always available and canonical.

Save and publish

Cmd/Ctrl + S (or the Save button) writes back to YAML. Validation runs on every save. Publish is the same flow as in the YAML editor — the visual editor does not change the publishing model.

Why drawflow?

ADR-022 covers the choice of drawflow over alternatives (React Flow, raw SVG). Drawflow is small, framework-agnostic, and ergonomic for the collector's roughly-DAG shape. We accept the cosmetic limitations in exchange for the maintenance footprint.