SAService Architect Open designer
SAService ArchitectDocumentation
Graph DesignerCanvas controls
Designer guide Fit · Auto layout · Build Mode · Renderer · Export SVG

Graph toolbar — Visual Service Design

Canvas controls provide viewport fitting, layout, editing, renderer selection, component collapse/expand, and SVG export. Pipelines and Components have their own pages in the left navigation.

When to use

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

Behavior

  • Auto Layout uses ELK for node placement, decomposes independent flow groups, and packs their layouts. Endpoint associations remain visible transport boundaries, not shared in-process pipeline edges. Routing can be computed independently for pipeline interiors and then for their boundaries.
  • ELK reduces crossings heuristically; a global minimum or crossing-free drawing is not guaranteed. Fixed-position routing draws orthogonal paths around nodes without rerunning node placement. Valid full-graph routes are cached and reused when returning from a pipeline or component view; selection alone does not reroute the complete graph.
  • Dragging previews affected routes, then refines them after release. Unaffected routes and node positions are preserved; reciprocal connections use separate terminal directions. Expensive routing runs with progress and cancellation rather than blocking the interface.
  • 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

Uses ELK layered layout with orthogonal edge routing. Includes cycles, transport associations and labels, reduces crossings and packs disconnected groups compactly.

Build Mode

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

Export SVG

Downloads the currently displayed graph, including visible component cards and routed edges, as SVG. This is an image export, not generated service code.

componentsCollapse / Expand all

Changes the presentation of component fragments without changing their runtime streams or links.

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.