SAService Architect Back to designer
SAService ArchitectDocumentation
Graph DesignerCanvas controls
Designer guide Fit · Auto layout · Build Mode · Renderer

Graph toolbar

Four floating buttons control the graph viewport, layout, editing mode, and renderer.

When to use

Use this page while editing or reviewing the graph in the designer.

Behavior

  • Auto Layout uses normal intra-service source links. Cross-service and derived endpoint associations do not determine a stream layer.
  • Changing the renderer does not change the graph model; both renderers edit the same streams, positions, and links.

Buttons properties

Buttons shown directly on the graph canvas.

IconActionDescription
Fit Graph

Adjusts pan and zoom so all graph nodes fit in the visible canvas.

Auto Layout

Repositions streams into a left-to-right layered DAG per service. Predecessors determine the layer; nodes are reordered to reduce edge crossings.

Build Mode

Toggles connection-oriented editing. The button uses the primary color while enabled.

Renderer

Switches between VueFlow and VisNetwork. Switching turns Build Mode off and stores the selected renderer locally.

Configuration example

Open the designer and select Graph.