OpenAPI and Swagger visualizer

See your API spec as a diagram.

LetDraw is an OpenAPI visualizer that turns a spec into an editable map of your API. Paste an OpenAPI 3.x or Swagger 2.0 file in YAML or JSON and get every endpoint, grouped by tag and colour-coded by method, with arrows to the schemas it uses.

Visualize a spec How it works
Shop API · from openapi.yaml
users orders Schemas GET /users POST /users GET /orders/{id} DELETE /orders/{id} User id, email, name Order id, user, total
Step by step

How to visualize an OpenAPI spec

From openapi.yaml or swagger.json to a diagram you can arrange and share.

  1. Grab your spec

    Use any OpenAPI 3.x or Swagger 2.0 document, in YAML or JSON. It needs a paths section to draw from.

  2. Paste it into Generate from Code

    Open Generate from Code (a Pro feature) from the More tools menu and paste. The spec is recognised automatically and a live preview appears.

  3. Choose the layout

    Lay the diagram out top-down or left-right, and switch between a clean and a sketchy look.

  4. Insert and share

    Drop it on the canvas, move things around, add notes, then share a link or export as PNG, SVG or PDF.

Endpoints and schemas, connected

An OpenAPI visualizer that maps endpoints to schemas

Every operation becomes a box with its method, path and summary. Operations are grouped by their first tag (or the first path segment when there is none), and every schema in components or Swagger definitions gets its own box listing its first properties. Arrows follow each $ref, from operations to the schemas they use and between nested schemas.

  • OpenAPI 3.x and Swagger 2.0, pasted as YAML or JSON
  • Endpoints grouped by tag and colour-coded by HTTP method
  • Arrows follow $ref, so you see which endpoints share a model
Try it now
openapi: 3.0.3 paths: /pets: get: tags: [pets] post: tags: [pets] components: schemas: Pet: ... pets GET /pets POST /pets Schemas Pet id, name, tag
What people use it for

A Swagger visualizer for the whole team

A spec is written for machines; a diagram is something people can talk about.

API design reviews

Walk through a new or changed API as a picture and comment right next to the endpoint in question.

Onboarding

Show new developers which endpoints exist and which models they share before they read a single handler.

Partner and integration docs

Export an overview of your public API as PNG, SVG or PDF for guides, portals and slides.

Spotting loose ends

Schemas with no arrows pointing at them stand out, and so do tags that grew too many endpoints.

Planning refactors

Paste the current spec, then sketch the target shape of the API beside it on the same canvas.

Frontend and backend handoffs

Agree on endpoints and payloads in one shared diagram that both sides edit in real time.

Questions

OpenAPI visualizer FAQ

Which spec versions are supported?
OpenAPI 3.x and Swagger 2.0, in YAML or JSON. Schemas are read from components.schemas in OpenAPI 3 and from definitions in Swagger 2.
Does my spec leave the browser?
No. The spec is parsed and laid out entirely in your browser. Only the diagram you insert is saved, like any other drawing.
Is it free?
Generate from Code, which turns a spec into a diagram, is part of Pro and Enterprise. The Free plan still gives you the full canvas, every diagram type and export to PNG, SVG and PDF, with no credit card.
Can I edit the diagram afterwards?
Yes. Endpoints, schemas and arrows are normal shapes you can move, restyle, comment on or delete, and you can share the result or export it as PNG, SVG or PDF.

More ways to diagram from code

Terraform diagrams Helm chart diagrams Graphviz DOT PlantUML online SQL to ER diagram Git graph EXPLAIN plan visualizer AI whiteboard

Your API, at a glance.

Open LetDraw, paste your OpenAPI or Swagger spec and get a diagram your whole team can read.