Diagram App — Help

Interface Overview

┌──────────────────────────────────────────────────────────────────────┐
│ Diagram name                                                          │
├──────────────────────────────────────────────────────────────────────┤
│ File  Edit  View  Arrange  Help                                       │
├──────────────────────────────────────────────────────────────────────┤
│ New │ Open/Save │ Zoom │ Undo/Redo │ Clipboard │ Order │ Align │ Export│
├──────┬──────────┬─────────────────────────────────┬─────────────────┤
│      │ 🔍 Srch  │                                 │                 │
│Select│ ▶ AWS    │                                 │   Properties    │
│Shape │   ▶Comp  │           Canvas                │     Panel       │
│Conn. │   ▶Stor  │                                 │                 │
│Line  │ ▶ Azure  │                                 │                 │
│Text  │   ▶...   │                                 │                 │
│Icons │ ▶ GCP    │                                 │                 │
│Shapes│   ▶...   │                                 │                 │
│      │          ├─────────────────────────────────┤                 │
│      │          │ tab-1 │ tab-2 │ + │              │                 │
└──────┴──────────┴─────────────────────────────────┴─────────────────┘

• Diagram name bar — shows the current diagram name ("Untitled diagram" until saved)
• Menu bar — File, Edit, View, Arrange, and Help menus
• Top toolbar — quick-access icon buttons for the most common actions
• Left toolbar — compact icon-only drawing tools and icon library toggle
• Icon library panel — 1,270 SVG icons (AWS, Azure, GCP & Network), searchable
• Canvas — the drawing surface; right-click drag to pan
• Tab bar — bottom of canvas; each tab is an independent diagram page
• Properties panel — edit the selected element's properties

Menu Bar

Click a menu title to open it; hover across titles to switch menus; click outside or select an item to close.

File

Edit

View

Arrange

Tabs

Each diagram file can contain multiple tabs — independent pages with their own shapes, connectors, annotations, undo history, and zoom level. The tab bar sits at the bottom of the canvas.

Per-tab: shapes, connectors, lines, annotations, undo/redo history, zoom, pan position.

Shared across tabs: clipboard, diagram name, current drawing tool.

Saving writes all tabs to a single .json file. Export exports only the currently active tab.

Drawing Tools

Shapes

Click the Shape button in the left toolbar to activate the draw tool. A small triangle indicator in the corner of the button shows that clicking it also opens the shape type pop-out — a floating panel where you can choose the shape type. The button icon updates to reflect the currently selected shape. Hovering over a pop-out icon shows its name as a tooltip. The shape type is set at creation time and cannot be changed afterwards.

Tables

The Table shape (chosen from the Shape pop-out) draws a header box stacked above N row boxes.

• Header & row text: editable inline only — double-click the header or a row to type directly into it. There is no "Label" field for tables in the Properties panel.
• Row count: set the number of rows from the Rows field in the Properties panel.
• Row alignment: each row's text can be aligned left, center, or right using the alignment icon buttons in the Row Style section.
• Independent styling: Header Style and Row Style (fill, stroke, font, line style) are separate sections in the Properties panel.
• Duplicating tables: each copy gets its own independent row array — editing one table's rows never affects another.
• Row-level connections: connectors can bind to a specific row rather than the whole table (e.g. row 1 of Table A connects to row 3 of Table B). Change the bound row afterwards using the From row / To row dropdowns in the connector's Properties panel.
• Anchor restriction: connectors bound to a table row only anchor on the row's left or right edge — top/bottom anchoring is disabled for rows.

Connectors

1. Select the Connect tool
2. Drag from the edge of a source shape to a target shape
3. A connector with an arrowhead is created

Endpoint marker options

Start/End markers are chosen from a graphical dropdown in the Properties panel — click the icon button to open a pop-up grid of options (no text labels), then click one to apply it.

The last six use standard Entity-Relationship ("Crow's Foot") notation, useful for database/data-model diagrams — mix and match Start/End markers to express cardinality (e.g. "Zero or many" at one end and "One" at the other).

Curved connectors

Connectors can be rendered as smooth curves instead of straight lines:

1. Select a connector
2. Open the Properties panel
3. Change the Connector dropdown from Straight to Curved

In curved mode, waypoints act as curve-pull handles — dragging a waypoint reshapes the curve smoothly through that point rather than creating a sharp corner.

Waypoints (corners / curves)

1. Select the Select tool
2. Double-click anywhere on an existing connector — a waypoint handle appears
3. Drag the handle to pull the connector into a corner or angle (straight) or to reshape the curve (curved)
4. Add as many waypoints as needed
5. Click a waypoint handle to focus it, then press Delete to remove it

Anchor Points

By default, connectors attach automatically at the point on each node's border that faces the opposite node. You can override this by dragging the endpoint anchor to any position on the node border.

1. Select the Select tool and click a connector
2. Green handles appear at each end of the connector (on the node borders)
3. Drag a green handle to reposition the anchor point around the node's border
4. Moving or resizing the node preserves the relative attachment angle
5. Anchor changes are undoable and saved with the diagram

Lines

Free-floating lines not attached to any shape. Unlike connectors, lines are not anchored to shapes — they are decorative or structural. Each end supports the same markers as connectors.

1. Select the Line tool (L)
2. Click and drag anywhere on the canvas to draw the line

End markers (Properties panel): each end can independently show None, Arrow, Circle, or Square.

Text Annotations

Free-floating text labels not attached to any shape. Place them by clicking on an empty area of the canvas with the Text tool.

• Multi-line: press Enter in the inline editor for a new line (Ctrl+Enter to confirm)
• Word wrap: long text wraps automatically within the text box width (default max 300 px)
• Resize: select a text annotation — eight resize handles appear; drag to change size
• Alignment: left / centre / right (Properties panel)
• Formatting: font size, bold, italic, underline, text colour, background fill, background opacity, border (Properties panel)

URL Links

A text label that opens a web page when clicked. Place one by clicking on an empty area of the canvas with the URL Link tool (U).

• Placement: click the canvas to place a link (default text "Link", blue, underlined) — an inline editor for the URL opens immediately.
• Editing the URL: double-click the link (Select tool) to reopen the single-line URL editor.
• Editing the text: the visible label text can only be changed from the Text field in the Properties panel — it is not editable inline.
• Navigating: Ctrl+click (or Cmd+click on macOS) the link with the Select tool active to open the URL in a new browser tab. Ctrl+click on a link with no URL set does nothing.
• Styling: colour, font size, bold, italic, underline, and opacity (Properties panel) — no background fill or border.
• Behaves like a text annotation for layers, groups, align/distribute, copy/paste, and undo/redo.

Icon Library

Press I or click the Icons button to open the icon library panel. The library contains 1,270 SVG icons across four providers.

The Network icon set provides mono-colour (black & white) symbols for network topology diagrams:

Use the search box at the top to filter icons by name. Drag an icon onto the canvas to place it as a 64×64 resizable symbol node.

Icon nodes behave like regular shapes: they can be moved, resized, labelled, connected, copied, and exported.

Zoom & Pan

Zoom range: 10%–400%. Right-click and drag on the canvas to pan.

Grid & Snap

Grid

The canvas displays a subtle dot grid at all times — minor dots every 20 px and slightly larger dots every 100 px. The grid is a visual guide only and is not included in SVG or PNG exports.

Snap to Grid

Click the Snap button in the top toolbar (the dot-grid icon between zoom controls and undo/redo) to toggle snapping on or off.

When snap is enabled, the following actions snap to the grid:

• Dragging a node (single or multi-selection)
• Dragging a text annotation
• Drawing a new shape (start and end corners both snap)
• Resizing a shape via its handles

Layers

Each tab has its own Layers panel below the Properties panel. By default every diagram starts with a single Background layer.

Layers Panel

Locking Layers

Click the padlock icon on a layer row to lock or unlock it. A locked layer shows an amber padlock and an amber left border; the layer name is shown in italic.

When a layer is locked:

Locked layers can still be hidden/shown (eye icon), reordered (drag), renamed, and deleted.

Layer Z-ordering

Layers control rendering depth across the whole diagram. Objects on higher layers always appear in front of objects on lower layers, regardless of individual Bring to Front / Send to Back actions. The panel lists layers top-to-bottom from frontmost to backmost — drag rows to reorder.

Within a single layer, use Bring to Front and Send to Back (Arrange menu) to adjust the stacking of elements. These actions are scoped to the layer — they cannot move an element in front of elements on a higher layer.

Active Layer

The active layer name is shown in the Properties panel when nothing is selected. All new shapes, connectors, lines, and annotations are placed on the active layer.

Visibility

Hidden layers are excluded from the canvas and are not selectable. All layers — visible or hidden — are included in SVG and PNG exports.

Moving a Shape to a Different Layer

Select a shape and use the Layer dropdown at the bottom of the Properties panel to move it to any layer.

Editing Elements

Moving

Select an element with the Select tool and drag it.

Resizing

Select a shape — eight resize handles appear around it. Drag any handle to resize.

Editing Labels

With the Select tool active, double-click any shape, annotation, or icon to edit its label inline. Press Enter or click elsewhere to confirm; Escape to cancel.

Deleting

• Select one or more elements and press Delete or Backspace, click the 🗑 Delete button in the top toolbar, or use Edit → Delete.
• To remove a waypoint: click its handle to focus it, then press Delete.

Selecting Multiple Elements

Hold Shift and click to add to the selection, or drag a selection box over multiple elements on an empty area of the canvas.

Properties Panel

Shape properties

Table properties

Icon (symbol) properties

Connector properties

Line properties

Annotation properties

URL properties

Colour Picker & Palette

Colour properties (Fill, Stroke, Label colour, etc.) are grouped in the Style section of the Properties panel with a shared colour picker.

How to change a colour:

1. Click a colour row (e.g. Fill, Stroke, or Label colour) to select it as the active property — the row highlights in blue.
2. Click the colour swatch button to open the native colour picker, or click a palette swatch to apply a saved colour instantly.
3. The hex value updates live as you pick.

Empty palette slots are shown as dashed grey boxes.

Z-Order (Bring to Front / Send to Back)

• Layer order takes priority — objects on higher layers always render in front of objects on lower layers. Bring to Front / Send to Back operate only within the element's own layer.
• Shapes and connectors within the same layer share the same Z-space. A connector's Z-position follows the topmost node it connects to.
• Text annotations (default) render above all shapes and connectors in the same layer.
• Text annotations (sent to back) move to a background sub-layer — ideal for region boxes in architecture diagrams.

Align & Distribute

Click the Align icon button in the top toolbar to open a floating popup. The Align button is enabled when 2 or more shapes/annotations are selected.

Copy, Cut, Paste & Duplicate

Pasted elements appear offset by 20 px each time. When both ends of a connector are copied, paste creates a new connector between the new copies. Clipboard is shared across tabs.

Group & Ungroup

Select two or more shapes (shift-click or rubber-band), then use the Group toolbar button or Ctrl+G to lock them together as a single unit.

While grouped:

• Clicking any member selects the whole group
• Dragging the group moves all members together
• The Properties panel shows "Group (N shapes)" with an Ungroup button
• Individual shape properties (colour, font, size) are not editable while grouped
• A purple dashed border outlines the group bounding box
• Connectors attached to grouped shapes continue to work normally
• Groups are preserved when saving, and copy/paste preserves group structure

Presentation Mode

Presentation Mode hides all toolbars, menus, and panels and displays the diagram fullscreen — ideal for presenting diagrams to an audience.

Entering and exiting

What happens in presentation mode

• All chrome is hidden: menu bar, toolbars, properties panel, tab bar, icon library.
• The diagram automatically fits to the window when presentation mode is entered.
• The diagram is read-only — no shapes can be drawn, selected, moved or edited.
• Right-click drag and Ctrl+Scroll zoom still work for exploring large diagrams.

Navigating tabs

If the diagram has multiple tabs, a navigation overlay appears at the bottom-right of the screen:

The ◀ / ▶ buttons are hidden when the diagram contains only one tab.

Open, Save & Export

The diagram name is shown in the title bar. It reads "Untitled diagram" until first saved or opened.

Open from Google Drive

Choose File → Open from Google Drive… to open a diagram previously saved to your Google Drive.

1. A Google sign-in popup appears the first time — sign in and grant access when prompted.
2. A dialog opens showing your Google Drive folders and .json diagram files.
3. Navigate to the desired folder — click a folder to enter it; use the breadcrumb to go back up.
4. Click a file to select it, or double-click to open it immediately.
5. Click Open. The file is downloaded, validated, and loaded into the editor.

Save to Google Drive

Click the Google Drive icon in the toolbar (or choose File → Save to Google Drive…) to save your diagram directly to Google Drive.

1. A Google sign-in popup appears the first time — sign in and grant access when prompted.
2. A dialog opens with the filename pre-filled (current diagram name + .json).
3. Browse to the desired folder — click a folder to enter it; use the breadcrumb to navigate back up.
4. Click Save. If a file with the same name already exists in the chosen folder it is overwritten; otherwise a new file is created.
5. A confirmation toast appears and the diagram name is updated.

Undo & Redo

Up to 100 undo steps are retained per tab. Every edit — drawing, moving, resizing, label changes, colour, opacity, line style, paste, align — is undoable.

Keyboard Shortcuts