The canvas

The canvas is the whole drawing surface. Everything below happens on it: panning and zooming, selecting, moving, grouping, and switching pages.

Pan and zoom

Panning

While Space is held the cursor changes to the pan cursor. If you release Space while another window has focus, the app clears the modifier for you, so the next click selects rather than pans.

During a drag, resize, marquee or connector gesture, moving the pointer near the edge of the canvas auto-pans, so you can reach off-screen space without letting go.

Zooming

Zoom is clamped between 8% and 400%. When you reach either end, that button switches itself off — a control that cannot do anything is not offered.

Fit

The Fit diagram to window button frames every node and every routed connector with padding. It insets the frame for the floating chrome (inspector panel, pages bar), so objects at the edge of the drawing never land underneath a panel.

Fit is the one thing allowed past the 8% floor. On a very large drawing — a few hundred devices imported at once — the whole topology does not fit on screen at 8%, and Fit means "show me all of it", so it zooms out as far as it needs to and the percentage reads below 8. The − button stays switched off down there: you can arrive below the floor by asking for the whole drawing, but you cannot walk below it a step at a time. + brings you straight back up.

Fit also runs automatically when you toggle isometric view or rotate it — the projected footprint changes shape, so the view is re-framed.

Selecting

• Click a device, zone, rack or connector to select it, replacing the selection.
• Shift-click (or ⌘/Ctrl-click) toggles an item in or out of the current selection.
• Drag on empty canvas sweeps a marquee. Hold Shift or ⌘/Ctrl while starting to add the swept items to what is already selected.
• ⌘/Ctrl A selects every node and connector on the page.
• Escape clears the selection (see Escape below for the exact order).

Marquee rules:

• A device joins the selection when the marquee touches the box you can see on screen (in isometric that is the drawn cabinet or extruded tile, not the flat footprint).
• A zone or rack joins only when it is fully contained, so sweeping objects inside a zone does not pick up the zone itself.
• A connector joins when its route touches the rectangle — any vertex inside, or any segment crossing it. Overlapping and parallel connectors can therefore be swept and then bound as an aggregate.

Selecting one member of a group selects the whole group (unless you have entered it — see Groups).

Moving and resizing

Drag any selected object to move it. A drag only starts after about 3 px of pointer travel, so a slightly shaky click still counts as a click.

• Moving a zone or rack carries everything standing on it — every node whose centre is inside — without changing the selection. Contents move rigidly by the same delta, so racked devices stay in their U slots. This is true of every way of moving it: dragging, the arrow keys, and Align.
• Hold Alt to move the container alone and leave its contents where they are — while you start the drag, or while you press an arrow key. Useful for repositioning a backdrop under a layout you have already settled. The inspector says so whenever a container is selected, and the first time a move ever carries something the app mentions it once, at the moment it happens (App menu → Show one-off tips again brings that back).
• What a container carries is scoped to its own layer. A zone on the physical layer does not pick up an overlay object that happens to sit on top of it, and it never moves anything on a hidden or locked layer — including things you cannot see, which is the case that used to move devices silently.
• To take one object out of a container's grip without moving the container, hold Alt and drag that object: it moves, and from then on the container leaves it behind. The inspector has the same thing as a button — Detach / Reattach — for when you do not want to move anything, and a container itself offers Release contents, which detaches everything standing on it at once.
• Select a container to see what it will take with it. Anything standing inside it that will not travel — because you detached it, or because it sits on another layer, or on a locked one — fades back while the container is selected, with the reason in its tooltip. Everything still vivid travels. The inspector states the same forecast in words — Carries 2 of 3 — 1 detached — which is also how you catch an object that looks half inside but is not: you placed three, the zone says it carries two. A container with nothing to warn about dims nothing, the drawing is untouched at rest, and none of this ever reaches an export.
• The drop decides. An ordinary drop into a container means "owned by this container", so dropping a detached object back inside re-attaches it; an Alt drop means "not owned". An Alt drop out on open canvas simply clears the mark, since there is no container to be detached from. Arrow keys never change it, so a detached object can be nudged into place without losing the mark.
• Dragging a group member carries the whole group.
• Dragging a rack unit moves it along the cabinet face, in whole U steps.
• Grabbing a lone device near its centre arms connect-on-drop: while you hover another device the source stays put and a connector is previewed; release over the target to wire them, release on empty canvas to just move it.

Resize handles appear on the corners when exactly one node is selected. Each corner moves its two edges; the opposite edges stay put. Minimum sizes are enforced (racks and zones have their own larger minimums). Racks resize in whole U steps; rack units keep the rail width and resize only vertically, in whole Us.

A resize sticks at the size of what is already on the page. Come within a few pixels of another shape's width or height and the drag takes that measurement exactly, with a marked span drawn over the shape you are resizing and over the one it matched — so "the same size as that one" is something you can see rather than something you squint at. The two dimensions are decided separately, so a shape can take its width from one neighbour and its height from another. Only comparable shapes are offered: device tiles match device tiles, zones match zones, and anything whose size the app manages for it (a rack, a rack unit, a title-block cell) is left out. Keep dragging and the size comes free again.

Hold Shift to keep the proportions. The shape then scales as one — useful when the tile is a photo or a logo and a stretched one would look wrong — and the dimension you have pulled furthest leads. Shift can go down or come up in the middle of a drag; the shape takes its shape back, or lets it go, without waiting for you to move the mouse. A size match still applies under Shift, so shift-dragging a tile onto a neighbour's width lands its height there too whenever the two were drawn in the same proportions.

Nudging

With nodes selected:

• Arrow keys move the selection by one grid step (8 px).
• Shift + Arrow moves by 1 px.
• Alt + Arrow moves a selected container alone, leaving its contents behind — the keyboard's version of Alt-drag.

A nudged zone or rack carries what stands on it, exactly as dragging it does. A continuous run of nudges coalesces into a single undo step; a pause ends the run.

Snapping and smart guides

• Positions snap to an 8 px grid. A single node snaps its absolute position; a multi-node or container drag moves by one snapped delta, so relative spacing is preserved.
• Smart guides: when the dragged object comes within about 6 screen pixels of lining up with a neighbour's edge or centre, it sticks to that alignment and a guide line shows what it snapped to. Alignment wins over the grid on that axis; the other axis keeps normal grid snapping.
• Even spacing: drag a shape towards the end of a row and it snaps to the gap the row already uses, with a capped bar drawn over each of the two gaps to say they match. It works between two shapes as well — dropping one in a space centres it — and down a column exactly as it does along a row. The shapes have to be in the same row or column for the offer to be made: a shape well above the run is not part of it. Dashed lines mean edges line up, capped bars mean spaces match, so the two never have to be told apart by guesswork. Nothing is written to the document except the position you dropped at; Align → Distribute is still there for spacing a whole selection at once.
• Rack units additionally snap to the U grid of the cabinet they are over.

Groups

A group is an explicit membership, not a geometric container: members stay grouped wherever you move them. The frame drawn around a group is derived from the members' bounds, padded — it is not a shape you can select on its own.

A new group names itself — Group 1, Group 2, … the lowest number not already in use on the page — so every group is findable in the Groups tab from the moment it exists. Extending a named group keeps its name; merging two differently-named groups starts over with a fresh auto name (the members no longer agree on one); ungrouping frees the name, number included.

Entering a group

To edit one member without ungrouping:

• Double-click a member — the first double-click enters the group and selects just that member. A further double-click (now that you are inside) edits its label like any node.
• Or select the group and press Enter.

While inside, dragging a member moves only that member. Clicking a node outside the group, or grouping/ungrouping, leaves it.

A collapsed group draws as a single placeholder box. Click it to select or drag the whole group; double-click it to expand.

Naming groups, and the Groups tab

The inspector's Groups tab lists every group on the page, so a group can be picked from a list instead of hunted for on the canvas. Each card has a name field — type DMZ, Rack 12, whatever the group is — a member count, and the members' names. Clicking a card selects the whole group and brings it into view; while the Groups tab is open the inspector stays up even with nothing selected, so you can pick group after group. The name travels with the file (draw.io and Visio exports included), reaches collaborators live, and becomes the title of the group's collapsed placeholder. Clearing the field un-names the group; ungrouping forgets the name with the membership.

A named group also shows its name on the canvas: a small muted label just above the group frame's top-left corner, updating live as you type in the name field. Clicking that label selects the whole group, and dragging it moves the group — the same gesture the collapsed placeholder answers. The label is part of the editor's derived group frame, so like the frame it appears on the canvas only, not in exports.

Labels

• Double-click a device, zone or connector to edit its label inline.
• With a single node or a single connector selected, F2 or Enter starts the same inline editor.
• Enter commits, Escape cancels.

Double-clicking a rack's title opens the rack builder. Double-clicking a connector waypoint deletes that waypoint.

Text style

The inspector's Text style row sets the label's weight and typeface. B, I and U compose — a caption can be bold and italic at once — and pressing a pressed button clears it. They work on devices, connectors and text blocks, and on a mixed selection they style everything selected in one step. The keyboard reaches all three as well — ⌘B, ⌘I and ⌘U (Ctrl on Windows and Linux) do exactly what the buttons do, including clearing a style that is already on.

The typeface drop-down offers seven faces, each row drawn in the face it sets, so the list shows you what you are choosing rather than describing it. Mono and Roboto Mono are the useful ones for network drawings — interface names, IP addresses and port numbers line up and are far easier to compare when every character is the same width.

Where a face comes from decides how far it travels, and the note under the drop-down tells you which kind you have just picked.

Sans, Mono, Serif and Comic are a request rather than a guarantee. Nothing is embedded, so each falls back to whatever the machine opening the drawing actually has. That matters most for Comic, which ships with Windows and macOS but is usually missing on Linux, where it falls back to a plain face.

Inter, Lato and Roboto Mono ship inside Drawbridge, and their letterforms are written into every SVG, PNG, PDF and HTML export. Those look the same on every machine that opens them, including machines that have never heard of the font. What they cannot do is reach another editor: a .drawio or .vsdx file records a font by name, with no way to carry the letterforms, so draw.io and Visio substitute something of their own — Helvetica for Inter and Lato, Courier New for Roboto Mono. Drawbridge remembers your real choice and restores it when you open the file again.

Changing the face also changes how wide the text is, so a caption may re-wrap onto another line.

Weight and typeface are saved using draw.io's own keys, so a drawing opened in draw.io carries its bold, italic and underline across intact.

Find and replace

Two separate tools, both working on the text already on the page.

Find — ⌘/Ctrl F opens a small box in the corner of the canvas. It matches, case-insensitively, against device labels, a zone's subnet, and connector labels (a connector hit is reported at the devices it runs between, because find centres the view on a node). The box shows how many matches there are; Enter / ↓ goes to the next, ⇧Enter / ↑ to the previous, and each hit is panned to and flashed. ⌘F again reselects what you typed, Escape closes the box and gives the canvas back the keyboard. The browser's own find never opens over the app.

Find looks at the page you are on. To search another page, switch to it and search again.

Replace — the Replace button in the toolbar opens Find and replace in labels, for the renames that are tedious one at a time (ge-0/0/1 → xe-0/0/1 across forty ports):

It covers device labels, connector labels and the port labels at a connector's two ends. Unlike find, replace is case-sensitive in both modes. Without Regex the query is literal — a $, a . or a ( means itself. With Regex, a pattern that will not compile is reported quietly in the dialog instead of doing anything.

Pages

The page tab strip sits along the bottom of the canvas.

Deleting a page that holds content asks for confirmation first.

Pages whose payload is a compressed .drawio blob open read-only: their tabs are disabled and the content is preserved verbatim when you save.

In a collaboration session, tabs show coloured dots for the people working on that page, and a tab pulses when someone is active on a page you are not viewing.

Minimap

The Toggle overview minimap button shows a small navigator in the corner of the canvas. It renders the whole diagram — real tiles and shape icons, connectors in their actual colours, zones as dashed frames — with a rectangle marking the region you are currently looking at.

• Text blocks and callouts appear as faint blocks at their real size and position, and a group shows the dashed frame the canvas draws round it. The map never draws words — at that size they would be a smudge — so a note reads as "something is here, that shape, there", which is what you need to find it again.
• Click or drag inside the map to pan the canvas there.
• The map fits the union of the content and the current viewport, so the "you are here" rectangle stays visible even when you are zoomed out past the drawing.
• Hidden layers are left out of it, so the minimap always matches the canvas — including the fit, so hiding a large backdrop no longer squeezes the rest of the diagram into a corner of the thumbnail.
• The minimap is read-only: it never changes the model.
• It defaults to on, except on small viewports (under 720 × 560), where it starts off until you enable it. Your choice is remembered.

The View menu

The eye in the toolbar, beside the ★ Quick shapes star, is a short list of switches for what the drawing shows. Everything starts on.

• Labels — device names, connector labels, port labels, and zone & rack names. The objects stay exactly where they are; only the text stops painting, so a screenshot of the topology does not have to be a screenshot of every interface name.
• Objects — connectors, zones & contexts, maps & backdrops, notes / lines & arrows, and the generated legend / optics / title block. A switched-off object leaves the picture completely: it cannot be clicked, marquee'd or deleted while you cannot see it. Notes, lines & arrows covers plain lines as well as flow arrows, and takes a line's caption with it — that caption belongs to the line, so Connector labels (which is about cables) leaves it alone.
• Canvas — the dotted grid.

Two things are worth knowing:

• Nothing moves. Cables are routed around every device whether or not you are looking at it, so switching the notes off never redraws the diagram. Turn everything back on and the picture is identical.
• Exports follow the view. SVG, PNG, PDF, copy-image and the HTML viewer all get what is on screen — a hidden object is not in the file at all, so you can hand over a clean topology without editing the document to make one.

This is yours, not the document's: it is remembered in this browser, it is never saved into the file, and a collaborator sharing the page sees their own view. If you want to hide something for everybody, that is what Layers below are for. Show everything at the bottom of the menu puts it all back, and while anything is off the eye is struck through so you can tell at a glance.

Isometric view

The Toggle isometric view button flips the editor between the flat top-down view and a 2:1 dimetric projection. Device tiles are extruded into chassis boxes, racks stand up as cabinets, and zones and connectors land on a ground plane. Cables lie on that ground plane and meet each device where the chassis meets the floor — at its footprint — so a box standing between a cable and the camera hides it, exactly as a real cabinet would; a cable to rack-mounted hardware climbs the cabinet face to the unit it plugs into.

• Rotate the isometric view a quarter turn cycles the camera through the four corner views. The button is disabled while the flat view is active.
• Toggling or rotating re-fits the diagram, because the projected footprint changes shape.
• This is presentation only. Nothing about the model is edited, the setting is not saved, and a file saved from isometric view reopens flat.

Editing keeps working in isometric: selection rings, resize handles, marquee hit-testing and drags are all measured on the drawn geometry (the cabinet elevation, the extruded tile), not the flat footprint.

The object list

≡ menu → Objects puts everything in the document on one page: every shape, grouped by page, with its icon, what type it is, what it connects to, and which layer it is on. It is the fastest way to answer "what is actually in this file" and "what touches the core switch", neither of which the canvas answers well once a diagram is bigger than a screen.

• The search box matches the name, the type, the layer and the names of what a thing connects to — so typing a device's name finds everything attached to it, not just the device.
• Tick rows and press Select on canvas to select them and close, or double-click a row to jump straight to that one. Either way the canvas scrolls to what you picked; a row on another page switches pages first.
• The connections column reads as a count and then the peers, so a device with eleven links is still one line. The full list is in the row's tooltip.

Editing a cable is not done here — that is the inspector's Connections tab, which works beside the drawing. This is the inventory; that is the workbench.

Layers

The Layers button in the toolbar opens a short list — one row per layer, the topmost layer first, the way the drawing is stacked.

• A layer decides what is on top of what. Everything on a higher layer paints over everything on a lower one — shapes, pictures and cables alike, with no exceptions for the kind of thing it is. So the way to put a picture behind a drawing is to put it on a layer below that drawing, and the way to lift a whole overlay above it is to drag its layer up. Within one layer it is Arrange that decides (see Arrange and align). A connector, which is not on a layer of its own, travels with the higher of the two devices it joins — so it is never buried by a layer sitting between its two ends, and it makes no difference which end you drew first. The aggregate rings and port labels that belong to a cable go wherever that cable goes.
• The grip (≡) re-stacks the layer: drag it up or down the list and a line shows where it will land. The canvas restacks as you let go, in one undo step, and the new order is what a saved .drawio carries — so the file opens the same way round in draw.io too. Keyboard works as well: focus the grip and press ↑ or ↓ to move that layer one step. A backdrop map stays pinned to the bottom of the list and nothing can be dragged beneath it, because that is what makes it a backdrop; a locked layer will not move at all.
• A checkbox shows or hides that layer. Hiding takes everything that layer contributes off the canvas — its shapes, the cables touching them, and the port labels, cable captions and aggregate rings that belong to those cables.
• The padlock locks it. A locked layer stays fully visible, keeps exporting and printing, and still pushes connectors around it — it just cannot be clicked, dragged, resized, marquee'd or deleted. That is the difference from hiding: hiding takes a layer out of the picture, locking takes it out of your way. It is what you want for a backdrop you need to see and keep bumping into. The lock covers the layer itself as well as its contents: ✕, Move here and the grip are all disabled until you unlock it. Renaming and hiding still work — a name is not content.
• The name field renames it as you type.
• Move here assigns the current node selection to that layer (disabled when nothing is selected). A lock stops shapes leaving as well as arriving, so a selection made before you locked its layer stays put: the button says so rather than doing nothing, and for a mixed selection it says what it will leave behind ("Move 2 of 3 here — 1 on a locked layer") and tells you afterwards.
• The layer your selection is already on is marked current, and its Move here is disabled — moving something onto the layer it is already on would do nothing. If your selection spans several layers, every layer it touches is marked and all of them stay clickable, because moving a mixed selection onto one layer is a real change.
• The dot at the left of a row is where new things land. Click the row — or the dot itself — and from then on everything you draw goes onto that layer instead of the bottom one: a shape from the palette, clicked or dragged; a text box or a callout; a picture pasted or dropped in from outside the app. Two things keep the layer they came from instead — a copy pasted back into the drawing (a duplicate belongs where its original lives) and anything brought in by Import, which carries its own layer names. The chosen row is marked with a bar down its leading edge. It is not the same as current above: current follows your selection, this follows your choice, and the two are often different rows. The dots are one group, so the keyboard reaches them: Tab into one and ↑/↓ move the choice from row to row. Press the chosen one again to clear it, and new shapes go back to the bottom layer as before. A hidden, locked or map layer cannot be chosen — a shape put there would be invisible or unclickable the instant it existed — and if you hide or lock the layer you had chosen, the choice lapses until you undo that. It is yours, not the document's: it is never saved into the file, and a collaborator keeps their own.
• ✕ deletes the layer; its shapes move to the first drawing layer. The last remaining layer cannot be deleted, and neither can one whose shapes would have nowhere to go — if every other drawing layer is locked, the ✕ says so instead of stranding them somewhere you cannot click.
• Add layer at the bottom creates a new one, on top of the stack.

The list lives in the toolbar rather than the inspector so it stays reachable when nothing is selected. It stays open while you click on the canvas, so you can select a shape and press Move here without reopening it each time; Escape, the toolbar button, or a click anywhere else in the app closes it.

Once a page has layers, the inspector shows a Layer row for whatever is selected — the name of the layer it is on, or "Mixed layers" for a selection that spans several. Click the row to open the Layers list, where Move here moves the selection. Connectors have no layer of their own: a cable follows its endpoints.

Search boxes

Every search box in the app works the same way, wherever you meet it — the palette, the icon library, the object list, the manual, the cable schedule, the rack builder, the Quick shapes list, the device and typeface pickers, and the find box.

• Type to filter. There is no Search button and nothing to press.
• A ✕ appears at the right of the box as soon as there is something to clear. One click on it empties the box, puts the list back and leaves the cursor in the field, ready for the next thing you want to look for.
• Escape does the same from the keyboard: the first press empties a box that has text in it and leaves the panel or dialog open, so you can search again without reopening anything. Press it a second time — on an empty box — and it closes the panel, as Escape always does.

The find box (Ctrl/Cmd+F) and the Find and replace dialog are the two exceptions to that last point. Both have the ✕, but in those two Escape means "close this", because the box is the search: there would be nothing left behind after clearing it.

Escape

Escape cancels one thing at a time, in this order:

1. The open inline label editor.
2. The armed placement (a shape picked from the palette, waiting to be dropped).
3. Connector mode, if no cable is mid-draw.
4. The gesture in progress — drag, resize, waypoint move, marquee or aggregate-ring drag — rolling it back.
5. Otherwise, the selection.

Escape during a cable drag cancels that cable and leaves connector mode armed, so a misplaced drop does not also disarm the tool.

When the cursor is in a search box with text in it, Escape belongs to that box first — see Search boxes above.

Adding shapes

• Click a palette shape to arm it, then click the canvas to place it. Escape disarms.
• Or drag a shape from the palette straight onto the canvas.
• Drop image files onto the canvas to insert them, or paste an image from the clipboard.