— CONFLUENCE APP

Drawlize for Confluence

Show and edit JSON or YAML as a tree on Confluence pages. Objects and arrays become blocks on a canvas, and the code beside them stays in sync.

LAST UPDATED

The short version

  • Type /Drawlize on a page you are editing to add a document.
  • Edit the tree or the code, and switch the code between JSON and YAML at any time.
  • Save to page stores the document inside the page. Readers see the tree as a picture.
  • Nothing leaves Confluence: no server, no account, no tracking.
The Drawlize editor in Confluence: a tree of object and array blocks on a canvas, and the same document as JSON in the code panel.
The Drawlize editor, open on a Confluence page.

Install

Drawlize is a Confluence Cloud app. A site admin installs it from the Atlassian Marketplace: find Drawlize there, or in Confluence’s own list of apps, and choose to get the app. It does not work on Confluence Data Center.

It asks for no access to your Confluence content. It cannot read or change anything except the documents you add with it.

Add a document

  1. Open a page and choose Edit.
  2. Type /Drawlize and choose Drawlize from the list, or insert it from the editor’s insert menu.
  3. The editor opens full-size, with a small example document to start from.
  4. Edit the document (see Working in the editor).
  5. Choose Save to page. The editor closes and the document appears in the page.
  6. Publish or update the page.

Edit it later

Edit the page, select the document, and open it from its toolbar. The editor opens full-size on the document as it was saved.

  • Save to page saves and closes the editor.
  • Ctrl+S (Cmd+S on a Mac) saves and keeps the editor open.
  • Cancel closes without saving. If you changed something since the last save, it asks first.

Remember to update the page afterwards, as with any other change to it.

Working in the editor

The document is on one side and its JSON or YAML on the other. Change either one and the other follows.

  • Add an object, an array or a record (an object with sample values) from the palette. A new block attaches to the selected block, or to the root.
  • Edit keys and values in a block’s rows. To move a block under another parent, drag from its edge handle onto the new parent.
  • Switch the code panel between JSON and YAML whenever you like: it is the same document either way.
  • Or edit the code in the code panel. The tree follows a moment after you stop typing. If the code has an error, the tree stays as it was and a message says what is wrong.
  • To bring in an existing document, paste it into the code panel. JSON and YAML are both read, whichever format the panel is showing.

Undo and redo, search, and the Download menu work as in the web editor. The editor follows Confluence’s light or dark theme.

What readers see

Readers see the tree as a picture. Under it, Download .json (or .yaml, whichever format the code panel was set to) saves the code and SVG saves the picture.

The picture follows Confluence’s light or dark theme.

Where it is stored

The document is stored inside the page, as part of the Drawlize element you added. So it behaves like the rest of the page:

  • Page history keeps every saved version. Restoring an older version of the page restores the document too.
  • Page restrictions decide who can see and edit it.
  • Copying the page copies the document. The copy is independent of the original.

Drawlize has no server. It sends nothing anywhere, uses no cookies and no analytics, and needs no account. The privacy policy and the terms of service cover the Confluence apps.

Compared with the web editor

The Confluence editor is the same editor as Drawlize on the web, with the parts that belong to a browser tab taken out:

  • No list of documents and no opening files: each Drawlize element on a page holds one document.
  • No version history of its own: page history is the history.
  • No saving to your disk and no share links. Use the page, or the download buttons.
  • No theme switch: it follows Confluence.

Known limits

  • If two people edit the same document at the same time, the last one to save wins.
  • The top level must be an object or an array. Empty documents and YAML files that hold several documents are refused.
  • YAML anchors and aliases are expanded, and YAML-only styles are rewritten, with a warning.
  • Downloaded files are named Untitled.json or Untitled.yaml.
  • Exporting the page to Word does not include the document. Download the SVG to use it elsewhere.

Help

Email contact@drawdiags.com. Name the app, your site address (yoursite.atlassian.net) and what you see. Don’t send page content you are not allowed to share. The contact page has more on what to include.

Guides for the other Confluence apps: Drawtabase, Drawpenapi, Drawmaid, Drawuml.