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 VS Code on the
files in your workspace.
Use it
- Open a JSON or YAML file (
.json, .yaml or .yml).
- Run Drawlize: Open Diagram Editor (or Open Diagram Editor to the Side) from the Command
Palette. You can also right-click the file in the Explorer, or right-click its tab.
- Edit on either side. The text editor and the diagram follow each other as you type.
There is no button on the editor's title bar: 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, 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 some files with Drawlize by default, add a pattern of your own to your settings:
"workbench.editorAssociations": { "*.tree.json": "drawlize.editor" }
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 VS Code's storage for the extension. 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,
VS Code's own settings files) 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 VS Code. 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).
