OpenAPI ve Swagger görselleştirici

OpenAPI spesifikasyonunu bir diyagram olarak gör.

LetDraw, bir spesifikasyonu API'nin düzenlenebilir bir haritasına dönüştüren bir OpenAPI görselleştirici. YAML veya JSON biçiminde bir OpenAPI 3.x ya da Swagger 2.0 dosyası yapıştır; her uç nokta etikete göre gruplanmış, metoduna göre renklendirilmiş olarak ve kullandığı şemalara giden oklarla gelir.

Spesifikasyonu görselleştir Nasıl çalışır
Mağaza API'si · openapi.yaml'dan
users orders Şemalar GET /users POST /users GET /orders/{id} DELETE /orders/{id} User id, email, name Order id, user, total
Adım adım

OpenAPI spesifikasyonu nasıl görselleştirilir

openapi.yaml veya swagger.json dosyasından, düzenleyip paylaşabileceğin bir diyagrama.

  1. Spesifikasyonunu al

    YAML veya JSON biçiminde herhangi bir OpenAPI 3.x ya da Swagger 2.0 dokümanını kullan. Çizim için bir paths bölümü içermesi gerekir.

  2. Koddan Oluştur'a yapıştır

    Diğer araçlar menüsünden Koddan Oluştur'u (bir Pro özelliği) aç ve yapıştır. Spesifikasyon otomatik olarak tanınır ve canlı bir önizleme görünür.

  3. Yerleşimi seç

    Diyagramı yukarıdan aşağıya ya da soldan sağa yerleştir, sade ve eskiz görünümü arasında geçiş yap.

  4. Ekle ve paylaş

    Tuvale bırak, öğeleri taşı, notlar ekle, sonra bir bağlantı paylaş ya da PNG, SVG veya PDF olarak dışa aktar.

Uç noktalar ve şemalar, birbirine bağlı

Uç noktaları şemalarla eşleyen bir OpenAPI görselleştirici

Her işlem; metodu, yolu ve özetiyle bir kutuya dönüşür. İşlemler ilk etiketlerine (etiket yoksa yolun ilk bölümüne) göre gruplanır; components ya da Swagger definitions içindeki her şema, ilk özelliklerini listeleyen kendi kutusunu alır. Oklar her $ref'i izler: işlemlerden kullandıkları şemalara ve iç içe şemalar arasında.

  • YAML veya JSON olarak yapıştırılan OpenAPI 3.x ve Swagger 2.0
  • Etikete göre gruplanmış uç noktalar, HTTP metoduna göre renklendirilmiş
  • Oklar $ref'i izler, böylece hangi uç noktaların aynı modeli paylaştığını görürsün
Hemen dene
openapi: 3.0.3 paths: /pets: get: tags: [pets] post: tags: [pets] components: schemas: Pet: ... pets GET /pets POST /pets Şemalar Pet id, name, tag
Ne için kullanılıyor

Tüm ekip için bir Swagger görselleştirici

Spesifikasyon makineler için yazılır; diyagram ise insanların üzerine konuşabileceği bir şeydir.

API tasarım incelemeleri

Yeni ya da değişen bir API'yi resim üzerinden gözden geçir ve ilgili uç noktanın hemen yanına yorum bırak.

Ekibe katılım

Yeni geliştiricilere, tek bir handler okumadan önce hangi uç noktaların olduğunu ve hangi modelleri paylaştıklarını göster.

İş ortağı ve entegrasyon dokümanları

Herkese açık API'nin genel görünümünü rehberler, portallar ve sunumlar için PNG, SVG veya PDF olarak dışa aktar.

Açıkta kalan uçları bulmak

Hiçbir okun işaret etmediği şemalar göze çarpar, fazla uç nokta biriktirmiş etiketler de öyle.

Refactoring planlamak

Mevcut spesifikasyonu yapıştır, ardından API'nin hedeflenen halini aynı tuvalde yanına çiz.

Frontend ve backend arasında devir

Uç noktalar ve payload'lar üzerinde, iki tarafın da gerçek zamanlı düzenlediği tek bir ortak diyagramda anlaşın.

Sorular

OpenAPI görselleştirici: sık sorulan sorular

Hangi spesifikasyon sürümleri destekleniyor?
YAML veya JSON biçiminde OpenAPI 3.x ve Swagger 2.0. Şemalar OpenAPI 3'te components.schemas'tan, Swagger 2'de definitions'tan okunur.
Spesifikasyonum tarayıcıdan çıkıyor mu?
Hayır. Spesifikasyon tamamen tarayıcında ayrıştırılır ve yerleştirilir. Yalnızca eklediğin diyagram, diğer çizimler gibi kaydedilir.
Ücretsiz mi?
Bir spesifikasyonu diyagrama dönüştüren Koddan Oluştur, Pro ve Enterprise'ın parçasıdır. Ücretsiz plan yine de kredi kartı gerektirmeden tam tuvali, tüm diyagram türlerini ve PNG, SVG ve PDF dışa aktarımını sunar.
Diyagramı sonradan düzenleyebilir miyim?
Evet. Uç noktalar, şemalar ve oklar; taşıyabileceğin, yeniden biçimlendirebileceğin, yorum ekleyebileceğin ya da silebileceğin normal şekillerdir. Sonucu paylaşabilir veya PNG, SVG ya da PDF olarak dışa aktarabilirsin.

Koddan diyagram oluşturmanın diğer yolları

Terraform diyagramı Helm chart diyagramı Graphviz DOT online PlantUML online SQL'den ER diyagramı Git grafiği EXPLAIN plan görselleştirici Yapay zekâ beyaz tahta

API'n, tek bakışta.

LetDraw'u aç, OpenAPI veya Swagger spesifikasyonunu yapıştır ve tüm ekibinin okuyabileceği bir diyagram al.