DeepDraw for VS Code

Opens .deepdraw.html and .deepdraw.json files as drawings instead of as text. It is DeepDraw itself running in a webview — the same canvas, hierarchy, notes and icons — with the file you opened as the place everything is stored.

What it does

• Draw, and press Ctrl+S. Every edit marks the tab dirty; saving writes the whole drawing back to the file that is open. Nothing is stored anywhere else.

• Two formats, one editor.

  • MyDrawing.deepdraw.html — the drawing and the library in one file. It opens in any browser with no server behind it, which is the file to mail on or drop in a repo for people who do not have VS Code.
  • MyDrawing.deepdraw.json — the document on its own. Small, and it diffs.

  Save-as between them converts: the format follows the name you give the file.

• Nested drawings. A shape's children are its own drawing, so one file holds a whole hierarchy — double-click into a shape and keep going.

• The hierarchy is a VS Code tree, in the Explorer, where a VS Code reader looks for one. Clicking a shape that holds a drawing opens it; clicking a leaf goes to where it lives and selects it. The library's own hierarchy pane is switched off, so the canvas gets the width back.

• Export (Command Palette → DeepDraw: Export as …) writes MyDrawing.deepdraw.html, .deepdraw.json or .deepdraw.png beside the drawing. The PNG carries the document inside it, so the picture can be imported back as the drawing.

Getting started

npm install
npm run build     # fetches the pinned DeepDraw bundle, then builds

Press F5 to launch an Extension Development Host on samples/, and open Checkout.deepdraw.html.

DeepDraw: New Drawing creates a file in the workspace and opens it. To make one by hand, an empty .deepdraw.json holding {"nodes":{"root":{"type":"root"}}} is a valid blank drawing — DeepDraw fills in every default it does not find.

Settings

Updating the library

scripts/fetch-lib.mjs pins the DeepDraw version and downloads that build from the CDN. Bump DEEPDRAW_VERSION there and run npm run build.

The pin is 0.3.0, the first version with hideTree — the option that lets this extension draw the hierarchy itself.

To build against a version that is not published yet, point at a local checkout, which is also how to try a library change and an extension change in one sitting:

DEEPDRAW_LIB_DIR=../deepdraw/lib/dist npm run build

Notes

• The library is BSL 1.1 (media/lib/LICENSE, media/lib/NOTICE — both are downloaded with the bundle and packaged into the .vsix).
• Saving a .deepdraw.html rewrites it from the template of the pinned library version, so an old file picks up the current library when it is edited. The document itself is unchanged.