Drawpenapi — OpenAPI diagram editor
Design an HTTP API visually, in sync with your OpenAPI YAML file. Drawpenapi shows the API the way
Swagger UI does — tags, operations, schemas — and makes every part of it editable. Edit the diagram
and the YAML changes; edit the YAML and the diagram changes.
This is the Drawpenapi web editor, running inside VS Code on the
files in your workspace.
Use it
- Open an OpenAPI 3.0, 3.1 or 3.2 file (
.yaml or .yml).
- Click the Open Diagram Editor to the Side button in the editor's title bar, or run
Drawpenapi: Open Diagram Editor from the Command Palette. You can also right-click the file in
the Explorer.
- Edit on either side. The text editor and the diagram follow each other as you type.
The file stays an ordinary YAML file. Save, undo, revert and source control all work the way they do
for any other file: Ctrl+S saves it and Ctrl+Z undoes the last change, whichever side made it.
To open YAML files with Drawpenapi by default, add this to your settings:
"workbench.editorAssociations": { "*.openapi.yaml": "drawpenapi.editor" }
What you can do
- Add, edit, reorder and delete operations, parameters, request bodies, responses and webhooks.
- Edit schemas, security schemes and every other component type, with references kept whole.
- See problems (dangling references, missing fields) listed as you work.
- Export the API sheet as SVG, PNG or PDF.
Good to know
- A diagram edit rewrites the file in Drawpenapi's own formatting. Every field and extension the
document holds is kept, but fields are written in a standard order, quoting and spacing become
uniform, and YAML comments are not kept. Drawpenapi asks before it rewrites a file it did not
write, once per file. Edits you type in the text editor are never reformatted.
- A file that is not an OpenAPI 3.x document (Swagger 2.0, a YAML syntax error) is not opened as a
diagram, and is left untouched. Fix it in the text editor and the diagram appears by itself.
- A new, empty file opens as an empty API. Nothing is written until your first edit.
- OpenAPI documents written as JSON are not supported here: the editor writes YAML.
Privacy
Drawpenapi runs entirely inside VS Code. It makes no network requests, has no telemetry, and reads and
writes only the file you open with it. The editor's page is not allowed to contact any server.
Privacy policy · Terms of service
Feedback
drawdiags.com/contact
Part of the Free Diagrams suite: Drawmaid (Mermaid), Drawuml (PlantUML),
Drawtabase (SQL), Drawpenapi (OpenAPI) and Drawlize (JSON and YAML).
