Drawlize — JSON and YAML tree designer
See a JSON or YAML file as a tree, and edit it there. Objects and arrays are blocks on a canvas, their
values are rows inside the block, and a line joins each block to the one that contains it. Edit the
diagram and the file changes; edit the file and the diagram changes.
This is the Drawlize web editor, running inside Visual Studio
on the files of your solution or folder. Requires Visual Studio 2022 (17.14 or later) or Visual Studio 2026.
Use it
- Open or select a JSON or YAML file (
.json, .yaml or .yml).
- Right-click it in Solution Explorer or its document tab and choose Open
Drawlize Diagram Editor (or … to the Side). Open With… → Drawlize Diagram Editor
works too, and Set as Default there opens such files in Drawlize from then on.
- Edit on either side. The text editor and the diagram follow each other as you type. From the
diagram's tab, Open Text Editor to the Side shows the JSON or YAML next to it.
There is no entry in the code editor's menu: almost every project is full of JSON files, and most
of them are not something you want to see as a diagram.
The file stays an ordinary JSON or YAML file. Save, undo, reload 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.
What you can do
- Add, re-parent, duplicate and delete objects and arrays; turn one into the other.
- Add, rename, reorder and delete values, and change their type (string, number, boolean, null).
- Arrange the blocks yourself, or let auto layout do it, left to right or top down.
- Search keys and values.
- Export the diagram as SVG, PNG or PDF.
Good to know
- The file's extension is its format. A
.json file is written as JSON and a .yaml or .yml
file as YAML. To change the format, save the file under the other extension.
- Moving blocks never changes your file. Where the blocks sit is remembered for each file on this
computer, in the extension's own folder in
your local app data. It is not written into the file and is not shared
through source control. Moving a block cannot be undone with Ctrl+Z.
- A diagram edit rewrites the file in Drawlize's own formatting. YAML comments are not kept, and
neither are flow-style collections, block scalars, your quoting or anchors and aliases (they are
expanded). Numbers are written the way JavaScript reads them:
1.0 becomes 1, and an integer
larger than 2^53 loses its last digits. Drawlize asks before it rewrites a file it did not write,
once per file, and says what would be lost. Edits you type in the text editor are never
reformatted.
- A
.json file has to be plain JSON. A file with comments or trailing commas (tsconfig.json,
an appsettings.json with comments) is not opened as a diagram and is left untouched.
- A file with a syntax error, a file whose top level is a single value rather than an object or an
array, and a YAML file with several documents are not opened as a diagram either. Fix the file in
the text editor and the diagram appears by itself.
- A new, empty file opens as an empty object. Nothing is written until your first edit.
Privacy
Drawlize runs entirely inside Visual Studio. It makes no network requests, has no telemetry, and reads and
writes only the file you open with it, plus the remembered layout described above. 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).
| |
