Визуализатор OpenAPI и Swagger

Спецификация API в виде диаграммы.

Визуализатор OpenAPI в LetDraw превращает спецификацию в редактируемую карту вашего API. Вставьте файл OpenAPI 3.x или Swagger 2.0 в YAML или JSON и получите все эндпоинты, сгруппированные по тегам и окрашенные по HTTP-методу, со стрелками к схемам, которые они используют.

Визуализировать спецификацию Как это работает
Shop API · из openapi.yaml
users orders Схемы GET /users POST /users GET /orders/{id} DELETE /orders/{id} User id, email, name Order id, user, total
Шаг за шагом

Как визуализировать спецификацию OpenAPI

От openapi.yaml или swagger.json до диаграммы, которую можно упорядочить и показать коллегам.

  1. Возьмите спецификацию

    Подойдёт любой документ OpenAPI 3.x или Swagger 2.0 в YAML или JSON. Для построения в нём нужен раздел paths.

  2. Вставьте её в «Создать из кода»

    Откройте «Создать из кода» (функция Pro) в меню «Другие инструменты» и вставьте. Спецификация распознаётся автоматически, и сразу появляется предпросмотр.

  3. Выберите раскладку

    Расположите диаграмму сверху вниз или слева направо и переключайтесь между аккуратным и эскизным видом.

  4. Вставьте и поделитесь

    Поместите её на холст, передвиньте элементы, добавьте заметки, затем поделитесь ссылкой или экспортируйте в PNG, SVG или PDF.

Эндпоинты и схемы, связанные между собой

Визуализатор OpenAPI, который связывает эндпоинты со схемами

Каждая операция становится блоком с методом, путём и описанием (summary). Операции группируются по первому тегу (или по первому сегменту пути, если тега нет), а каждая схема из components или из definitions Swagger получает свой блок со списком первых свойств. Стрелки следуют за каждым $ref: от операций к схемам, которые они используют, и между вложенными схемами.

  • OpenAPI 3.x и Swagger 2.0, вставленные как YAML или JSON
  • Эндпоинты сгруппированы по тегам и окрашены по HTTP-методу
  • Стрелки следуют за $ref, так что видно, какие эндпоинты используют общую модель
Попробовать
openapi: 3.0.3 paths: /pets: get: tags: [pets] post: tags: [pets] components: schemas: Pet: ... pets GET /pets POST /pets Схемы Pet id, name, tag
Для чего это используют

Визуализация Swagger для всей команды

Спецификацию пишут для машин; диаграмму люди могут обсуждать.

Ревью дизайна API

Разберите новый или изменённый API по картинке и комментируйте прямо рядом с нужным эндпоинтом.

Онбординг

Покажите новым разработчикам, какие эндпоинты существуют и какие модели у них общие, ещё до того, как они прочтут хоть один обработчик.

Документация для партнёров и интеграций

Экспортируйте обзор публичного API в PNG, SVG или PDF для руководств, порталов и слайдов.

Поиск неувязок

Схемы, на которые не указывает ни одна стрелка, сразу бросаются в глаза, как и теги, в которых стало слишком много эндпоинтов.

Планирование рефакторинга

Вставьте текущую спецификацию, а рядом на том же холсте набросайте целевую форму API.

Передача между фронтендом и бэкендом

Согласуйте эндпоинты и payload в одной общей диаграмме, которую обе стороны редактируют в реальном времени.

Вопросы

Визуализатор OpenAPI: частые вопросы

Какие версии спецификации поддерживаются?
OpenAPI 3.x и Swagger 2.0, в YAML или JSON. Схемы читаются из components.schemas в OpenAPI 3 и из definitions в Swagger 2.
Покидает ли моя спецификация браузер?
Нет. Спецификация разбирается и раскладывается полностью в вашем браузере. Сохраняется только вставленная вами диаграмма, как любой другой рисунок.
Это бесплатно?
«Создать из кода», функция, которая превращает спецификацию в диаграмму, входит в Pro и Enterprise. Тариф Free всё равно даёт полный холст, все типы диаграмм и экспорт в PNG, SVG и PDF, без банковской карты.
Можно ли потом редактировать диаграмму?
Да. Эндпоинты, схемы и стрелки являются обычными фигурами, которые можно перемещать, менять стиль, комментировать или удалять, а результатом можно поделиться или экспортировать его в PNG, SVG или PDF.

Другие способы построить диаграмму из кода

Диаграммы Terraform Диаграммы Helm-чартов Graphviz DOT онлайн PlantUML онлайн ER-диаграмма из SQL Граф Git Визуализатор EXPLAIN Доска с ИИ

Ваш API с первого взгляда.

Откройте LetDraw, вставьте спецификацию OpenAPI или Swagger и получите диаграмму, понятную всей команде.