Key Concepts

Canvas and viewport

The canvas holds the drawing. The viewport is the part currently visible on screen. Panning moves your view, and zooming changes its scale. Moving the viewport does not move your objects.

Model and screen coordinates both use Y-down: X increases to the right, and Y increases downward. Panning changes which part of the drawing appears at the center of the screen.

Objects and connections

The website provides Arrow, Rectangle, Ellipse, Diamond, and Text tools. Objects have editable appearance properties; the selection toolbar shows the controls relevant to the selected objects. Arrows show relationships and can connect shapes.

Use labels that explain what a component does and what each connection means. Consistent spacing, colors, and reading direction help readers follow a diagram.

TextGraph and canvas editing

TextGraph describes diagrams in text. The website's Import TextGraph action accepts source or a playground share link and creates an editable diagram.

The imported objects can be moved and styled on the canvas. Those edits do not update the source text. Keep the source separately if you want to use it again.

Local saving and synchronization

The website keeps persistent data scoped to your account and diagram. Once a canvas is established, it can keep editing locally during a network interruption and synchronize when connectivity returns. Sign-in, document creation, and other account operations still need a connection.

Synchronization connects sessions of the same account. Document access remains account-scoped; possessing a URL does not grant access to another account.

Host-owned saving

Each workspace supplies its own save flow:

• Website: local persistence and account synchronization, with a sync status indicator.
• VS Code: Save diagram writes an editable .draw.png file.
• Confluence: Publish saves the editable document and updates the page preview.

An ordinary image and an editable drawing are different artifacts. Keep the .draw.png file when you need to reopen a VS Code diagram. See Export and Sharing.