Visual flow builder

The flow builder turns your spec’s paths into an interactive node graph. It’s the primary way you’ll explore and edit a spec inside OpenAPI Studio.

How paths become nodes

Each path is decomposed into segments and an endpoint leaf:

/api/users/{id}
  → /api  →  /users  →  {id}    (segment nodes)
                          └─ GET · PUT · DELETE   (endpoint node)

Path parameters ({id}, {slug}) collapse into the leaf so the tree stays clean.

Selecting nodes

• Click an endpoint node to open the editor on the first method.
• Click a method badge (GET, POST, WS, etc.) to select that specific operation.
• Click a segment node to highlight everything underneath it.

The active selection is reflected in the URL — share links jump straight to the right endpoint.

Display modes

Three node styles, switchable from the toolbar:

Use Minimal to fit a 200-endpoint spec on screen, General when you’re focused on a small area.

Layouts

The toolbar offers two auto-layouts powered by Dagre:

• Layered (vertical) — root at top, leaves at bottom. Best for narrow specs.
• Layered (horizontal) — root at left, leaves at right. Best for wide specs and side-by-side editing.

You can pan and zoom freely; double-click to fit the graph to the viewport.

The action menu

Hover (or tap on touch) any selected endpoint node to reveal:

• Edit — open the editor.
• Run — open the executor.
• Copy cURL — with the active server and credentials applied.
• Delete — remove the path.

Keyboard

• + / - — zoom in / out.
• Ctrl/Cmd 0 — reset zoom.
• Escape — close the editor panel.

Full list: Keyboard shortcuts.