Paste OpenAPI/Swagger JSON and visualize endpoints, request/response schemas as interactive diagrams.
Paste an OpenAPI or Swagger JSON document and this renders every path, method, and referenced schema as a connected diagram: one node per endpoint, one node per object definition, with edges showing which endpoint sends or returns which schema. It resolves $ref pointers so nested and reused schemas appear as their own linked nodes instead of inline blobs. The most common surprise is a spec with $ref targets outside the pasted document (external files, other services) - those nodes render empty or unlinked, since the tool only resolves references it can find inside what you pasted.
A concrete input and expected output from the current implementation.
Input
{
"openapi": "3.0.0",
"info": {"title": "Demo", "version": "1.0.0"},
"paths": {
"/users": {
"get": {
"summary": "List users",
"responses": {
"200": {
"description": "OK",
"content": {
"application/json": {
"schema": {
"type": "array",
"items": {"$ref": "#/components/schemas/User"}
}
}
}
}
}
}
}
},
"components": {
"schemas": {
"User": {
"type": "object",
"properties": {
"id": {"type": "integer"},
"name": {"type": "string"}
}
}
}
}
} Expected output
One endpoint node, 'GET /users' (summary: List users), with an edge to a 200-response schema node labeled 'User' (array), which lists two fields: id - integer, name - string.
The $ref in the response schema points to components/schemas/User inside the same document, so the visualizer resolves it into its own node with the two declared properties rather than showing the response as an unresolved reference.
The pasted JSON is read as an OpenAPI 3.x or Swagger 2.0 document: paths (and their methods) become the endpoint list, and components/schemas (or definitions in Swagger 2.0) become the reusable schema pool. Every $ref pointer inside the document is matched against that pool and resolved so a schema used by three endpoints appears as one shared node with three edges, not three separate copies.
Each endpoint node shows its method, path, and summary; each schema node lists its properties and types, sourced directly from the spec's declared property names and type keywords. Edges connect an operation to its request-body schema and to each response schema. Rendering happens in the browser from the pasted text, so nothing is sent anywhere for the diagram to appear.
The tool is described as taking OpenAPI/Swagger JSON specifically, so paste JSON. If your spec is in YAML, convert it to JSON first (most OpenAPI editors and CLI tools, e.g. swagger-cli or yq, can do this) before pasting it here.
No - this is a visualizer, not a validator. A malformed or non-conformant section is more likely to be skipped or shown incomplete than flagged with a specific error. Use a dedicated OpenAPI validator or linter first if you need conformance checking.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.