OpenAPI Visual Editor
OAIE Sketch is a browser-based editor for OAS3 spec documents. It offers a side-by-side YAML code editor and visual editor with a focus on tactile feedback, simplicity and performance. Its philosophy is "stay close to the code and visualize".
Online Demo: https://raw.githack.com/OAIE/oaie-sketch/master/sketch.html
Currently OAIE Sketch is only a few files plus CDN links. So your process to get it running is manual.
Requests, Responses and sub-objects should be their own schema definitions. Note that this is best practice anyway if you ever want to generate classes from your spec.
components:
schemas:
CapabilitiesRequest:
required:
- spec
properties:
spec:
$ref: '#/components/schemas/Spec'
CapabilitiesResponse:
properties:
capabilities:
type: array
items:
$ref: '#/components/schemas/Capability'
Capability:
properties:
method:
type: string
skuPattern:
type: string
Spec:
description: OAIE.noInArrows
properties:
id:
type: string
schedules:
type: array
items:
$ref: '#/components/schemas/Schedule'
Schedule:
properties:
method:
type: string
expression:
type: string
Beginning documents like this will add a viz (visualisation) into the header (this will show up as a graphic in swagger):
openapi: "3.0.0"
info:
version: "0.0.1"
title: My Service
description: |
My introductory information
<!--OAIE.viz--><!--/OAIE.viz-->
...
Sketch persists graph node positions to the browser's localStorage, but when a viz is present, it will store and load graph node positions to and from this viz (inside the tag).