Visualiseur OpenAPI et Swagger

Votre spécification d’API en diagramme.

LetDraw est un visualiseur OpenAPI qui transforme une spécification en carte modifiable de votre API. Collez un fichier OpenAPI 3.x ou Swagger 2.0 en YAML ou JSON et obtenez chaque endpoint, groupé par tag et coloré selon sa méthode, avec des flèches vers les schémas qu’il utilise.

Visualiser une spécification Comment ça marche
API boutique · openapi.yaml
users orders Schémas GET /users POST /users GET /orders/{id} DELETE /orders/{id} User id, email, name Order id, user, total
Étape par étape

Comment visualiser une spécification OpenAPI

D’un openapi.yaml ou d’un swagger.json à un diagramme que vous pouvez organiser et partager.

  1. Récupérez votre spécification

    Utilisez n’importe quel document OpenAPI 3.x ou Swagger 2.0, en YAML ou JSON. Il doit contenir une section paths à dessiner.

  2. Collez-la dans Générer à partir du code

    Ouvrez Générer à partir du code (une fonctionnalité Pro) depuis le menu Plus d’outils et collez. La spécification est reconnue automatiquement et un aperçu en direct s’affiche.

  3. Choisissez la disposition

    Disposez le diagramme de haut en bas ou de gauche à droite, et passez d’un rendu net à un rendu croquis.

  4. Insérez et partagez

    Déposez-le sur le canevas, déplacez les éléments, ajoutez des notes, puis partagez un lien ou exportez en PNG, SVG ou PDF.

Endpoints et schémas, reliés

Un visualiseur OpenAPI qui relie les endpoints aux schémas

Chaque opération devient une boîte avec sa méthode, son chemin et son résumé. Les opérations sont groupées par leur premier tag (ou par le premier segment du chemin s’il n’y en a pas), et chaque schéma de components ou des definitions Swagger reçoit sa propre boîte avec ses premières propriétés. Les flèches suivent chaque $ref, des opérations vers les schémas qu’elles utilisent et entre schémas imbriqués.

  • OpenAPI 3.x et Swagger 2.0, collés en YAML ou JSON
  • Endpoints groupés par tag et colorés selon la méthode HTTP
  • Les flèches suivent les $ref : vous voyez quels endpoints partagent un modèle
Essayer maintenant
openapi: 3.0.3 paths: /pets: get: tags: [pets] post: tags: [pets] components: schemas: Pet: ... pets GET /pets POST /pets Schémas Pet id, name, tag
Cas d’usage

Un visualiseur Swagger pour toute l’équipe

Une spécification est écrite pour les machines ; un diagramme, les humains peuvent en discuter.

Revues de conception d’API

Parcourez une API nouvelle ou modifiée en image et commentez juste à côté de l’endpoint concerné.

Intégration

Montrez aux nouveaux développeurs quels endpoints existent et quels modèles ils partagent avant qu’ils ne lisent un seul handler.

Docs partenaires et d’intégration

Exportez une vue d’ensemble de votre API publique en PNG, SVG ou PDF pour vos guides, portails et présentations.

Repérer les points faibles

Les schémas vers lesquels aucune flèche ne pointe ressortent, tout comme les tags qui ont accumulé trop d’endpoints.

Planifier un refactoring

Collez la spécification actuelle, puis esquissez la forme cible de l’API à côté, sur le même canevas.

Échanges frontend et backend

Mettez-vous d’accord sur les endpoints et les payloads dans un diagramme partagé que les deux équipes modifient en temps réel.

Questions

FAQ : visualiseur OpenAPI

Quelles versions de spécification sont prises en charge ?
OpenAPI 3.x et Swagger 2.0, en YAML ou JSON. Les schémas sont lus dans components.schemas pour OpenAPI 3 et dans definitions pour Swagger 2.
Ma spécification quitte-t-elle le navigateur ?
Non. La spécification est analysée et mise en page entièrement dans votre navigateur. Seul le diagramme que vous insérez est enregistré, comme n’importe quel autre dessin.
Est-ce gratuit ?
Générer à partir du code, qui transforme une spécification en diagramme, fait partie des forfaits Pro et Enterprise. Le forfait Free vous donne tout de même le canevas complet, tous les types de diagrammes et l’export en PNG, SVG et PDF, sans carte bancaire.
Puis-je modifier le diagramme ensuite ?
Oui. Endpoints, schémas et flèches sont des formes ordinaires que vous pouvez déplacer, restyler, commenter ou supprimer, et vous pouvez partager le résultat ou l’exporter en PNG, SVG ou PDF.

D’autres diagrammes à partir du code

Diagrammes Terraform Diagrammes Helm Graphviz DOT en ligne PlantUML en ligne SQL vers diagramme ER Graphe Git Visualiseur EXPLAIN Tableau blanc IA

Votre API, d’un coup d’œil.

Ouvrez LetDraw, collez votre spécification OpenAPI ou Swagger et obtenez un diagramme que toute votre équipe peut lire.