Search DevFox

Search tools and pages.

OpenAPI Endpoint Graph

Visualize OpenAPI / Swagger endpoint relationships, schema dependencies, and request flows as an interactive node-link graph with PNG export

Loading tool...

What is OpenAPI Endpoint Graph

Written by Giorgos Kostas. Last reviewed:

OpenAPI Endpoint Graph turns an OpenAPI / Swagger spec into a node-link diagram so you can see how endpoints, tags, and schemas relate at a glance — instead of reading a 2000-line YAML file or scrolling Redoc top-to-bottom.

It complements the OpenAPI Visualizer (Redoc-rendered docs) by answering structural questions: which endpoints share a schema, which schemas are referenced from where, and what a typical request flow (login → token → call) looks like.

Why use it

  • Onboard a new teammate to a large API by showing the architecture as a picture, not a wall of YAML.
  • Find every endpoint that touches a particular schema before refactoring the schema's shape.
  • Document a multi-step API flow (Login → Get Token → Get User → Get Orders) you can drop into a design doc as a PNG.
  • Spot orphaned schemas (declared in `components.schemas` but never referenced) at a glance.
  • Audit a third-party API for the breadth of operations under a single auth flow.

Features

  • Three views: endpoint relationships (tag → op → schema), API flow (drag-to-order sequence), and schema-only explorer
  • Auto-suggested API flow seeded from id/token producer/consumer matches in the spec
  • Interactive React Flow canvas with minimap, zoom/pan, and search-and-highlight
  • Color-coded HTTP methods (GET / POST / PUT / DELETE / PATCH) and dashed schema $ref edges
  • Side panel inspector with operation summary, parameters, and full schema JSON
  • Export the graph as PNG (2× retina) or Graphviz DOT for embedding in docs
  • Paste, upload, or fetch the spec from a public URL via the same proxy as OpenAPI Visualizer

How to use OpenAPI Endpoint Graph

  1. Load a spec. Paste, upload (.json/.yaml/.yml), or fetch a public URL through the proxy. The graph rebuilds live as the spec changes.
  2. Pick a view. Switch between Endpoint relationships, API flow, and Schemas at the top of the canvas.
  3. Build a flow. On the API flow tab, click an operation in the right panel to add it; reorder with the up/down arrows. Click Suggest flow to seed it from the spec.
  4. Inspect a node. Click any operation or schema to see its summary, parameters, schema refs, and raw JSON in the side panel.
  5. Export. Use the Export menu in the toolbar to save a PNG (2× DPR) or Graphviz DOT file.

Example (before/after)

OpenAPI Endpoint Graph input

Start with the openAPI Endpoint Graph input you want to process in OpenAPI Endpoint Graph.

OpenAPI Endpoint Graph output

Get a openAPI Endpoint Graph result from OpenAPI Endpoint Graph that is ready to review, copy, and reuse in the next step of your workflow.

Common errors

Unsupported input

The tool may reject input that does not match the expected content, structure, or file type.

Fix: Confirm the tool input requirements and paste the correct type of data.

Incomplete values

Missing fields or partial content can block processing or produce weak results.

Fix: Provide the full required input before running the tool.

Copying placeholder content

Sample or placeholder values can lead to output that looks valid but is not ready for real use.

Fix: Replace placeholders with your actual values before relying on the result.

FAQ

How is this different from the OpenAPI Visualizer?

OpenAPI Visualizer renders Redoc-style API documentation — readable, linear, great for browsing endpoints and request/response examples. OpenAPI Endpoint Graph is the architecture / debugging companion: a node-link diagram that surfaces relationships you can't see in linear docs (which endpoints share a schema, what auth-shaped flows the spec implies, which schemas are orphans).

Where does the suggested API flow come from?

It's a name-based heuristic. We look for an auth-shaped operation (path or operationId matching login / token / auth / signin), then chain operations whose path or operationId mentions an identifier (id / userId / orderId / token) into the operations that consume that identifier as a parameter. It's a starting point — drag-reorder it freely.

Does it support OpenAPI 3.1 and Swagger 2.0?

Yes. Schemas are read from both `components.schemas` (3.x) and `definitions` (Swagger 2.0). `$ref` strings are resolved when they point at either location.

Can I export the graph?

Yes — PNG (rasterised from React Flow at 2× DPR for retina) or Graphviz DOT (post-process with `dot -Tsvg` for high-fidelity SVG embedding in documentation).

How big a spec can it render?

Comfortably up to a few hundred operations / schemas. Beyond that the dagre layout slows down and the canvas becomes hard to navigate; the search-and-highlight plus minimap stay usable, but consider splitting the spec by domain.

Is my spec uploaded?

Paste and upload modes are 100% client-side. Only the URL-fetch mode hits our server proxy (because browsers can't bypass CORS). We log the URL and timing for rate-limit purposes, but not the spec contents.

Related tools

Pair the endpoint graph with related API and visualization tools. You can also browse the full Visual & Testing Tools category for more options.

OpenAPI Visualizer

Paste, upload, or fetch an OpenAPI spec and render readable, navigable API documentation with copy-as-curl per operation

JSON Graph Explorer

Explore any JSON document as an interactive node-link graph with collapsible nodes, $ref/href detection, and PNG plus DOT export

JSON Viewer

View and explore JSON data

YAML to JSON

Convert YAML to JSON format

JSON to SQL

Convert JSON to SQL INSERT statements

Database Schema Visualizer

Visualize SQL CREATE TABLE or DBML as an ERD with table cards, primary-key badges, foreign-key arrows, and per-table detail panels

Diff Checker

Compare two texts and highlight differences

HTML Viewer

View and preview HTML

Internet Speed Test

Test internet ping, download speed, and upload speed in your browser with a live gauge, connection details, and same-origin Mbps measurements.

JSON Diff Visualizer

Compare two JSON documents with a structure-aware diff tree, ignore-order options, and JSON Patch (RFC 6902) plus jsondiffpatch delta export

JSON Path Tester

Test JSONPath expressions against JSON data

Markdown Editor

Edit and preview Markdown with live preview