Skip to content
Developer Assistance Tools

Diagram tools

The diagrams category has two tools. Both run in the browser. The category is one of the feature modules (diagrams) that can be left out of a build; see Feature switches.

Diagrams

Section titled “Diagrams”

Path: /tools/diagrams/diagrams

A diagram editor with four kinds of diagram, chosen from the kind selector:

  • Flowchart: shapes joined by arrows. Add Process, Decision and Start/End shapes.
  • ERD: tables (entities) and how they relate.
  • Sequence: one message per line, drawn for you. Source lines look like A -> B: call and A --> B: reply, with # for comments.
  • Full editor: the draw.io editor, with templates and shape libraries.

Other capabilities from the page:

  • A start screen with a blank diagram, a template (by category), a file you already have, or a recent diagram.
  • Edit on the canvas or as JSON (Canvas and Code views), with snap to grid and a choice of arrow styles (none, one end, both ends, dashed).
  • Open a saved diagram (the editor’s own file, .xml, or an .svg with the diagram inside) and save a file you can open again.
  • Export as SVG or PNG, copy the diagram’s XML, and clear the diagram (Undo brings it back).
  • A full-screen mode.

Whiteboard

Section titled “Whiteboard”

Path: /tools/diagrams/whiteboard

A drawing board with a tool palette and an optional dot grid (Shift+G).

  • Clear the board (Undo brings it back).
  • Import a board saved as JSON and export the board as JSON.
  • Export the drawing as a PNG or SVG picture.