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.

Zoomed out far enough that a cable's port labels would be a few pixels tall — below about a third of full size at the normal text scale — they are not drawn; zoom back in and they return. Device names stay. On a big drawing (several hundred devices and cables) the editor also skips the labels far outside the screen while you zoom, and draws them as the view comes near them. Both keep zooming a large drawing smooth, and neither ever reaches an export: a file, an image or a PDF always carries every label.

Fit

The Fit diagram to window button — or ⇧1 (Shift+1), which is the same thing from the keyboard — 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.

On a tablet, and with Apple Pencil

There is no touch mode to switch on. The drawing notices what touched it — a finger, a pen or a mouse — and answers each in its own way, so the tablet you carry into the aisle and the laptop on your desk run the same app with the same settings.

• Two fingers pinch to zoom about the point between them, and move together to pan. The zoom stops at the same 8% and 400% as the buttons.
• One finger works like the mouse. A tap selects, a drag moves what it landed on, and a drag on empty canvas sweeps a marquee. A finger may wobble a few pixels and still be a tap.
• Tap a device to show its cable dots, then drag from one to another device to draw a cable. A finger has no hover, so the tap does what holding the mouse over the device does, and the dots stay up after you lift your finger.
• A fingertip does not have to land exactly on a small control. A cable dot, a resize handle, a caption, or a selected cable's bend can be pressed from a fingertip's width away on empty canvas. A press on a device itself always moves the device, however near its dot.
• The controls you use beside a rack are finger-sized. On a touch screen the cable checklist's ticks, its search and Hide done, Share and Print, a device's Status buttons, the port-name fields and the zoom and fit buttons are at least 44 pixels each way. The rest of the editor keeps its size, and nothing changes for a mouse.
• A second finger cancels the first. If one finger had already started to drag a device or sweep a marquee when the second lands, the device goes back where it was, the marquee goes away, and the selection is what it was before you touched the glass. Nothing is added to the undo list.
• Hold a finger still for half a second to open the canvas menu — the same one a right-click opens, for the device, cable or empty spot under your finger. Moving the finger before then cancels it, and lifting it afterwards leaves the menu open for you to tap a row.

Apple Pencil, or any pen, works like a precise mouse. A tap selects, a drag moves, a drag from one of a device's dots draws a cable, and a drag on empty canvas sweeps a marquee. The pen keeps the mouse's small targets, because its tip is exact. Hold it still for half a second for the canvas menu. A pen that hovers — Apple Pencil Pro or Apple Pencil 2 on an iPad that supports hover, or a Surface Pen — shows a device's cable dots when its tip is above the device, just as the mouse pointer does; with a pen that does not, tap the device first, as with a finger. Pressure and tilt are ignored: nothing in a network drawing is drawn freehand.

Rest your hand on the glass while you write. While the pen is down, and for a moment after it lifts, a hand touching the drawing is ignored: it cannot pan, zoom or select. A hand that was already resting there when the pen came down is ignored from then on, and anything it had started is undone. Once the pen is lifted, two fingers pinch and pan again.

Selecting

• Click a device, zone, rack or connector to select it, replacing the selection.
• Shift-click (or ⌘-click on a Mac, Ctrl-click elsewhere) toggles an item in or out of the current selection. On a Mac, ⌃-click is the right click and opens the canvas menu instead.
• 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, except the ones you cannot move or cannot see: a locked layer's nodes stay out, and so does anything hidden — by a layer, by a View menu switch, or by facing the back of a rack. A connector joins only if it is visible itself and both of its devices survived that filter.
• Tab and ⇧Tab (Shift+Tab) step the selection from one node to the next, one at a time, once the canvas itself has focus — click it first, because everywhere else Tab is still the app's focus order. Locked and hidden nodes are skipped and the walk wraps round, so a long page can be read through from the keyboard.
• 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).

A selected tile that another tile covers wears a dotted ring. When devices overlap and you select them, the one in front keeps the ordinary solid ring and every one under it gets a dotted ring instead, so a pile reads as one tile in front of the others rather than as a tangle of outlines. The order is the real one: Bring to front a tile from the back and the rings swap to match. A zone or rack never counts as covered or covering — devices are meant to stand on it.

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 all, 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.
• A text block or callout has no centre connection point: a note moves from wherever you grab it, its middle included. To cable one, drag from one of the four dots on its sides.

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.

The canvas menu

Right-click the drawing for the commands that apply to what you clicked. On a Mac, Ctrl-click (⌃-click) does the same; from the keyboard, Shift+F10 or the Menu key opens it over whatever is selected; on a touch screen, hold a finger still for half a second.

A right-click selects what it lands on, just as a click would — a device, its whole group, or a whole cable — and keeps the selection if the thing you clicked is already part of it, so right-clicking one of five selected devices acts on all five. Right-clicking empty canvas clears the selection.

• On a device or a selection: Cut, Copy, Paste here, Duplicate and Delete; Bring to front and Send to back, and Group or Ungroup when they apply; Copy look and Paint look, the format painter.
• On empty canvas: Paste here, Select all, Add device here… — the device picker, opened where you clicked — and Add text here.
• On a cable: Add caption and Select both ends. When the cable has bends you made by hand there are two ways to undo them: Reset bends takes the bends off and keeps the cable's type — a Custom cable becomes a straight line, an Arc goes back to its default curve — and Route automatically hands the cable back to automatic routing.
• On a zone or rack: Select what it carries and Release all. On a device standing in one: Detach, or Reattach.
• Tracing: with two devices selected, Trace path. On one device, Trace path from here… — then click the device at the far end, and the path between them is traced. Escape cancels the wait.

Paste here puts the copy centred on the point you right-clicked, by the same rule as ⌘/Ctrl V: if that spot is taken it moves to the nearest clear one. In Firefox and Safari the browser may ask once for permission to read the clipboard; ⌘/Ctrl V never needs it.

Each row is the same command as its shortcut or its inspector button, and the menu only offers what that button could do right now. Arrow keys walk the menu, Enter runs a row, Escape closes it.

Copy, paste and duplicate

A paste comes down where you are pointing. Copy with ⌘/Ctrl C, point at the canvas and press ⌘/Ctrl V: the middle of what you copied lands under the pointer. With the pointer off the canvas — on a panel, or outside the window — it lands in the middle of the view instead.

A copy never lands on anything. If the spot you point at is taken, the copy goes to the nearest clear spot instead, keeping a small margin from everything around it and preferring to slide sideways rather than down, so it stays in the same row as what it is copied from. Press ⌘V twice without moving the pointer and the second copy comes down beside the first, not on top of it. Duplicate (⌘/Ctrl D) follows the same rule from the original's own spot, so the copy sits beside its original in the same row.

The one thing a copy may stand on is a zone big enough to hold all of it: point into the empty middle of a zone and the copy lands inside it, just as a device placed there would. A copy never half-covers a zone, and a copied zone never comes down over devices that are already on the page — that is what used to make a pasted zone carry someone else's devices away on its next drag.

Copies of rack-mounted equipment go into the next free U of their own rack, and a rack copied together with its equipment brings that equipment along in the same slots.

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.

The icon you clicked keeps the ordinary ring; the rest of the group is ringed faintly. Every member is selected and every member says so, but the one under your pointer is the one the inspector, the format painter and Trace path are talking about — so click another member and the difference moves to it. A device selected on its own, a marquee and Select All look exactly as they always have: there is nothing to tell apart.

Shift-click marks a second icon in the same group. The first click brings the whole group in and marks the icon you pressed; shift-clicking another member marks that one too, without changing what is selected — which is how you trace between two devices that are in the same group. Shift-click a marked icon to unmark it, and unmarking the last one takes the group out of the selection altogether. (A selection you swept with a marquee has nothing marked in particular, so there a shift-click takes the whole group out, as it always did.)

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.

Collapsing a group to one tile

Collapse folds a group down to a single object and keeps its cables. An HA pair, a switch stack or a whole access block becomes one thing on the page, and every cable that ran from a member to a device outside the group now runs from that one thing instead. Cables between two members are inside it and are not drawn. Click the folded group to select or drag it; double-click it to expand.

If every member is the same kind of device, the folded group draws as that kind of tile — the same icon and colour, the group's name underneath, and a small ×N telling you how many devices are in there. A group of different kinds has no honest single icon, so it keeps the plain titled box — with one exception: an optical shelf folds to the DWDM terminal tile whatever its members are, because that is what it is.

A group you have not named — every group made here names itself, so this is one that came in from an imported file — is titled for what it is and how big it is: Group · 3, Stack · 4, or MC-LAG for a pair, whose count is always two. It never borrows a member's name, which made a folded group of three different devices read as one giant device called after whichever of them happened to be first; and since the title already says the count, such a tile carries no ×N badge beside it.

Nothing is moved or rewired: collapsing writes one flag, expanding puts the drawing back exactly as it was, and either is a single undo. The rest of the app agrees with the canvas about what is on the page — the overview, and every SVG, PNG, PDF and HTML export, show the same one tile with the same cables on it, and cables route around the folded group rather than around the devices hidden inside it. A saved .drawio still stores the members, so opening one in draw.io itself shows the group expanded.

MC-LAG pairs and switch stacks

Two devices that act as one logical switch, or a stack of them, are kinds of group — so everything a group does they do too. The inspector's Group section has a Type row: Plain · MC-LAG · Stack · Optical (the fourth is an optical shelf). With devices selected, pressing MC-LAG or Stack makes one (Plain just groups them); with a group selected, the lit choice is what it already is, and pressing another re-types it. MC-LAG is only available for exactly two devices — hover it to read why it is greyed out. A new one names itself MC-LAG 1 or Stack 1, the way a plain group names itself Group 1, and the Groups tab says which kind each group is.

Making one lines the members up, keeping the spacing you gave them: two switches you placed 300 px apart on one row become a pair 300 px apart, and switches dropped roughly under each other become a column at the gap they had, each nudged onto the first one's centre line. The layout only ever opens a gap — up to the default, so the ICL and its mark have room — and never closes one. Members that do not already stand in a line (a diagonal pair, a scattered selection) get the default arrangement: the pair side by side, the stack as a tight column in its current top-to-bottom order. Either way the first member stays exactly where it is, and it is all part of the same single undo as the grouping. The members can be spaced however you like afterwards. A press on a member drags the whole pair or stack, as with any group; hold Alt while dragging a member — or double-click it first (or select the group and press Enter) — to move that member on its own, by dragging or with the arrow keys, to any distance in any direction. The spacing you set is kept: nothing later puts the members back — not a reload, not a collaborator's view, not re-typing the group to the kind it already is — and the ICL, the ring, the numbers and the outline redraw for wherever the members stand. The Group section's Orientation row — Horizontal · Vertical — turns a pair or a stack the other way round at any time: the lit choice is how the members stand now, and pressing the other re-lays them along that axis, the first member staying put and the others following it in the same order at the spacing you have, as one undo step.

The backend cables are drawn for you, and they follow the devices. An MC-LAG pair gets its ICL between the two facing sides — stand one switch above the other and the ICL moves to the bottom and top edges by itself, and so does its ICL mark. It is heavier than a cable, and it attaches a third of the way along each side rather than at the middle, so it does not start underneath the data cables that land there. If you have already drawn a real cable between the two members, that cable is the ICL and nothing is drawn over it. A stack gets its stacking ring: each member hops from its lower stack port to the next one's upper port, the last loops back to the first, and the members are numbered 1…N. Lay a stack out as a row instead of a column and the ring moves to the bottom and the numbers to the top, counting left to right. Stack cables in the Group section puts the ring on the other side — Left · Right for a column, Top · Bottom for a row — and the numbers move to the side it left; the choice stays with the stack when you turn it round. These are part of the picture, not cables: they are drawn on the canvas and in every SVG, PNG, PDF and HTML export, and they never appear in the cable schedule, the optics count, the Connections tab, or in anything a cable route has to avoid.

Move a pair or a stack by its outline. Press anywhere inside the outline that is not a device or a cable — the gap between two switches, the margin round them — and drag: the whole group moves, exactly as when you drag it by its name. A press on a member still reaches that member, and a press just outside the outline is still empty canvas, so a marquee starts there as always.

A pair or a stack also draws its outline and its name in exports, unlike a plain group's dashed frame, which stays in the editor — "these two switches are one switch" is a fact the reader of an exported drawing needs. Collapse folds either to one tile like any group. The badge on that tile says only what the name does not: a group still called MC-LAG 1 gets no badge, and Stack 1 gets a plain ×4 — rename them Core or Access and the badge says MC-LAG or Stack ×4.

The rules are enforced rather than assumed: an MC-LAG pair is exactly two devices and a stack is two or more, both of them devices — zones, text, lines and rack-mounted units are not members. Anything that would break a rule is refused with a sentence saying why, so a pair is never quietly turned into something else. An imported file is held to the same rules: a Graphviz DOT paste declaring a pair of three devices gets a plain group and a line in the import report saying so. The kind travels with the file (draw.io, Visio and DOT exports included) and reaches collaborators live.

Optical shelves

A DWDM shelf — the transponders and the mux that make up one end of an optical line — is the fourth kind of group: select two or more devices and press Optical on the Type row (Plain · MC-LAG · Stack · Optical). It names itself Optical 1, moves, collapses, exports and reaches collaborators like any group. Unlike a pair or a stack it draws no backend cable: the cables inside a shelf are yours to draw, and they are what the shelf is read from. Making one moves nothing either — the outline goes round the members where you put them, transponders above the mux or beside it, because how a shelf is cabled is what its drawing has to show.

The channel plan is read from those cables — you never type it twice. Draw a cable from a transponder to the mux, set its Cable to DWDM (or CWDM) and pick a channel on its card — C21 — and that channel is now added or dropped at this shelf. A cable carrying a channel between two Mux/Demux members of the same shelf is a channel passing through the site, which is how an add/drop site is drawn. Select the shelf and the inspector's Group section lists Channels at this site: each channel, what it is in nanometres and terahertz (C21 is 1560.61 nm · 192.1 THz), whether it is local or through, and for a local one the client it carries — the device and port at the far end of the transponder's other cable, which you can click to go there. Under it, Lines lists everything that leaves the shelf: the far device or shelf, the cable's own label and length, and the channels lit on it.

Collapse a shelf and it folds to one DWDM terminal tile, not the blank box a group of different devices gets, with its channels as small chips under the name — C21, C23, a dashed C25 through, and +N when there are more than four. The chips are part of the drawing: they appear in every SVG, PNG, PDF and HTML export, the way a stack's member numbers do.

A fibre between two shelves says what it carries. Draw a cable from one shelf to another and it becomes a span: a quiet second line under its caption lists the channels present at both ends — C21 C23. A channel that reaches only one end is not listed and is not a problem: dropping a wavelength at one site is the normal case. A channel that is on one span twice — passing through a site that also adds it locally — is: the repeat is drawn in the warning colour, and Checks says it in a sentence, "Channel C21 is used twice on the span DWDM-B ⇄ DWDM-C", which you can Ignore if you mean it.

Everything here is derived, so there is nothing to keep in step: change a wavelength on a cable and the chips, the span and the Checks finding all change with it. The kind travels with the file (draw.io, Visio and DOT exports included) and reaches collaborators live; the plan itself is never stored, because the cables already say it.

Naming groups

Select a group and the inspector's Facts tab shows its card under the Group row: a name field — type DMZ, Rack 12, whatever the group is — what kind of group it is, a member count, and the members' names. Clicking the card selects the whole group and brings it into view. The name travels with the file (draw.io, Visio and DOT exports included), reaches collaborators live, and becomes the title of the group's collapsed placeholder — an unnamed group is titled for what it is instead. 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.

Search everything

⌘K / Ctrl K — or Search everything… in the app menu — opens one box at the top of the window for anything with a name. Type and the results come in groups, the best-matching group first:

• Devices on any page — Enter goes to that page and selects it, with the view centred on it.
• Actions — every command on the bar and in its menus, with its shortcut beside it; Enter runs it exactly as its button would.
• Shapes — Enter places one in the middle of the view.
• Pages, Groups by name (Enter selects the whole group), and Cables by caption.
• Addresses and serials — the same fields ⌘/Ctrl F searches: management IPs, serials, models, a cable's address or circuit.
• Manual — Enter opens the manual at that topic.

↑ and ↓ move, Enter goes, Esc closes. ⌘/Ctrl K works with the focus in a field, as ⌘/Ctrl F does. ⌘/Ctrl F stays what it was: find on this page, stepping through the matches.

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, every asset field on a device — management IP, serial, chassis ID, model, location, notes and link — a zone's subnet, a device's role and functions, connector labels, a cable's VLAN, its circuit id or carrier, and the address at either end of a cable (a connector hit is reported at the devices it runs between, because find centres the view on a node; an address is reported at the device whose interface carries it). 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.

Type a full IPv4 address and find also lands on the zone whose subnet contains it, even when that zone's subnet says nothing of the sort — searching 10.20.7.9 finds the firewall that answers on it and the 10.20.0.0/16 zone it lives in. (IPv6 is matched as text only.)

Because a hit can come from something you cannot see on the canvas, the counter says which field it was: 2 / 7 · serial, or 2 / 7 · in subnet 10.20.0.0/16. A plain label match says nothing extra — the label is already there under the flashing ring.

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.

Trace a path

Select two devices and the inspector's Facts tab grows a Path section with a Trace path button. Pressing it lights every equal-cost cabled way between them — each in its own colour, with a dashed ring round every device on it and the selection halo along every cable. Under the button you get the count and the length: "2 paths · 2 hops".

In a spine-and-leaf fabric that is one way per spine, which is the point: LEAF-01 to LEAF-04 goes through SPINE-01 and through SPINE-02, and showing you one of them would be half an answer.

When there is more than one, a short list appears under the count — one row per way, in that way's colour, naming the devices in the middle of it ("2 hops · via SPINE-01"). Hover a row, or tab to it, and the drawing keeps that way alone lit while you look at it.

On a wide fabric a longer way can turn out to run entirely over cables a shorter one is already lit for — the same two hops in the other order. There is no cable left for it to colour, so its row says shares every cable rather than sending you looking for a colour that is not on the page; hover it to see that way on its own.

The same section can live beside the drawing: Edit layout → Trace a path docks it (along the bottom by default), where it names the two selected devices and its Trace path button does exactly what the inspector's does.

Longer ways, on the second press

The first press answers with the shortest ways only. Press the button again and it widens to the next length up — a WAN's direct link on the first press, the long way round through a hub on the second. The button says what the next press will do: Longer ways while there are more, Shortest ways when you are at the end, and one more press comes back to where you started.

So how much is on screen is your press, not a number the app picked. A two-spine fabric never buries you in four-hop detours through other leaves unless you ask for them.

It is a walk over the connectors you have drawn, and nothing more. There is no routing table, no addressing and no simulation behind it: if the drawing says these boxes are cabled together, the trace says so too, and if the drawing is out of date so is the answer. A hop is a device, so an aggregate of four parallel cables between the same pair counts once — and all four of them light, because picking one strand out of a port-channel would say something the drawing does not. Every way is a path: no device appears on it twice.

The order is the same every time, so pressing the button twice never lights two different answers. Devices on a hidden layer are not walked through — a device you have taken out of the picture must not quietly carry a path — while a locked layer is walked normally. Zones, racks, maps, notes and arrows are never on a path; only devices joined by connectors are. The walk stays on the page you are on. Very densely cabled drawings can hold more ways than are worth drawing at once; when that happens the count says "and more".

If there is no way between the two, the button says No cabled path and nothing lights up — often exactly what you were checking.

The path stays lit while you pan, zoom and edit, so you can look at the drawing with the route on it. Escape puts it out, and so does selecting anything else. A marquee that also caught the cable between your two devices still counts as two devices.

Mark a path

A traced way goes out the moment you select something else. To keep one on the drawing, press Mark this path under the count — or, when the trace found several ways, the small Mark at the end of the row you want. The way becomes a marked path: orange arrows from the device you picked first to the one you picked second, running beside the cables they follow, with a name tag reading "WEB-01 → DB-01". It is saved in the file, undone and redone like any edit, shared with everyone in a live session, and drawn in every SVG, PNG, PDF and HTML export.

To mark a way the trace would not pick, build it by hand: click the first device, then Shift-click the others in the order the path should take them. With three or more picked, the Path section offers Mark path through N devices. A hop between two devices that are not cabled to each other takes the shortest way between them.

A marked path follows its cables. It stores which devices it runs through, not a drawing, so moving a device, rerouting a cable or changing its connector type carries the arrows along with no action from you. It also keeps up with the cabling:

• A device cabled in between two of its devices, replacing the cable that joined them, is threaded in by itself: the path now runs through it.
• A hop with no way left at all is drawn grey and dashed, and the path's card names what is missing. It heals by itself when a connection comes back.
• Deleting the first or last device deletes the path with it; one undo brings both back. Deleting a device in the middle keeps the path and finds a way around it.

What is kept is the way you marked. A shorter route that appears elsewhere does not move it; Re-trace on the card does, when you ask.

The arrows run alongside the cables, never on top of them: to the right of their own direction of travel, so A→B and B→A on one cable are two separate lines, and clear of every cable stroke, so where cables run as a bundle the arrows go round the outside of it. Several paths on one cable take side-by-side lanes. Through a device in the middle the line passes behind the tile.

Click a path to select it. Its card replaces the inspector's usual rows:

The format painter carries a path's look onto other paths. Delete removes a selected path.

A marked path is an annotation, not a cable: the cable schedule, the inventory, the Cables tab and Trace path never count it. Vanilla draw.io keeps it in the file as a hidden object and draws nothing for it. Save as Visio (.vsdx) leaves marked paths out and says so when it saves.

Devices inside a group count as themselves. Clicking one icon of a group selects the whole group — that is what a group is for — but the trace is always about the two icons you actually clicked. Click one, shift-click another anywhere on the page, and the Path section names those two and traces between them, whatever else came along with the selection. One icon is never a pair, so a group of two does not answer for you; and a group you have collapsed is a tile standing in for its devices rather than a device, so there is nothing to trace from until you expand it.

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.

Back

Following a page link — a device's link badge, or Open under its Link (see Asset data) — puts a ← page button at the front of the tab strip, named after the page you came from. Press it, or ⌘[ / Ctrl [, to go back; links followed one after another go back one at a time, the way down from an overview into a site and then into a rack comes back up the same way. Reaching a page any other way — clicking its tab, following a collaborator, an undo that changes page, opening a file — starts over, and the button goes. Back is yours alone: it is not saved with the file and a collaborator has their own. ⌘[ never takes the browser back out of the editor, even with nowhere left to go.

Minimap

The minimap is a panel like the others: in Edit layout it can be docked, floated elsewhere or grouped as a tab, and the View toggle stays the switch that shows or hides it wherever it lives.

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 and racks as solid ones — 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. While you pan or zoom, the map holds its framing and only the rectangle moves — it can run past the map's edge for a moment — and the map re-frames as soon as the view stands still. That is what keeps panning a drawing of a couple of thousand devices smooth.
• 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, except the four Asset data lines, which start off.

• Labels — device names, connector labels, port labels, VLANs, addresses, 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. Two of them hang off another: VLANs is a line of the connector's caption and Addresses hang under the port labels, so switching off Connector labels or Port labels takes them with it.
• Asset data — Management IP, Serial, Model and Location, one switch each. These four work the other way round: they start off, and switching one on draws that field from each device's Asset data (in the inspector) as a small line under its name — tick Management IP alone and every device that has one shows its address, and nothing else. A device with no value for a field simply gets no line for it. The lines sit on the far side of the name from the device, so the name never moves: under the name when it is below the tile (after the functions line), above it when it is above, under it in its own column when it is beside the tile, and under the tile when the name is inside it. A value too long for the space ends in …; hover it to read the whole thing. Notes and Link are not offered — they are prose and a URL, not labels.
• Objects — connectors, zones & contexts, maps & backdrops, notes / lines & arrows, and the generated blocks (legend, optics, title, revisions and flows — one switch for all five). 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 grid: dots every 16 px in the Classic layout, fine lines every 24 px in Studio.

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. The asset data works the same way: an export carries only the fields you switched on, so a picture with management addresses on it does not also carry every serial number.

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 back everything that is hidden (it leaves your asset-data lines alone — those are things you turned on), 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, which layer it is on, and its Status — Installed, Planned, or empty for a device nobody has said anything about. 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, the names of what a thing connects to — so typing a device's name finds everything attached to it, not just the device — and everything on the Asset data card: management IP, serial, model, location, notes and link, plus a device's role and functions, and the status, so typing planned lists what is not in the building yet. A full IPv4 address also matches the zone whose subnet contains it. Every word you type must match, so a second word narrows.
• 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 Cables tab, which works beside the drawing. This is the inventory; that is the workbench.

The Drawing panel

Edit layout → Drawing (off unless you switch it on) is the page as a tree: every layer, topmost first, with a checkbox that shows or hides it and the objects on it underneath. Click an object to select it and bring it into view; type in the filter to narrow the tree the way the object list's search does. Renaming, locking and restacking layers stay in the Layers popover, and the searchable list of every page's objects stays in Objects — both are one press away at the top of the panel.

Layers

The Layers button in the toolbar — or ⇧⌘L (Ctrl ⇧L), which opens and closes the same panel — shows 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. A rack takes the units mounted in it along, because they are part of the cabinet; a zone's devices, or a note standing on a rack, stay where they are, so a backdrop can have a layer of its own.
• 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.

Your workspace

The panels — Shapes on the left, Properties and the page tabs over the drawing — can be arranged to suit you. Open the app menu (☰) and choose Edit layout. Every panel grows a header strip: drag the strip to move the panel into the left, right, top or bottom dock (a blue line shows where it will land), use the four small dock buttons on the strip to send it straight there, or press × to hide it. The Layout sheet that appears over the drawing lists every panel with a switch, so a hidden panel is one flick away, and Reset to default puts everything back. Three more panels are off unless you switch them on: Find (the ⌘F / Ctrl F box, always open), History (what you have done, newest first, with Undo and Redo) and Collaborators (who is in the session and on which page — it floats in by itself the first time someone joins, and stays put away once you hide it). Its Presets row holds named starting points — Default (as installed), Focus, Review, Present and Fresh — and the one you are on stays marked until you change something. While you are editing, ⌘Z / Ctrl Z and ⇧⌘Z / Ctrl ⇧Z undo and redo layout changes rather than drawing changes, and the panels themselves are switched off — a click on a shape tile moves nothing onto the canvas. Panels can share one slot as tabs, the way Facts, Cables and Look share the inspector card: drop a panel's header strip ONTO another panel's strip (the whole strip lights up, where a thin line means "between") and it becomes a tab there; click a tab to bring it up, and in edit mode drag a tab out to split it off again, or press its × to hide it. A panel can also float over the drawing: drop its header anywhere on the canvas (a dashed box shows where it will land), or press the strip's last button. A floating panel snaps to a 16px grid and stays inside the window. To use the same arrangement on another computer, the Layout sheet's Export… saves it as drawbridge-layout.json; Import… on the other machine (or dropping the file onto the sheet, or Copy here and Paste there — the sheet reads the clipboard, and where the browser will not allow that it opens a box to paste into) applies it, and one ⌘Z / Ctrl Z undoes the import if it was the wrong file. A drawing handed to Import is refused with a message saying so. A dozen ready-made arrangements to download and import — examples, not presets — are on the website at drawbridge.fortiknight.com/docs/layouts/. Press Escape or Done when you are happy; the layout is kept on this device and the app opens that way next time. Drag a dock's edge at any time, in or out of edit mode, to resize it; two panels stacked in one dock share it, and the line between them drags too (double-click it to share equally) — and a floating panel can be moved by its top edge and resized from its bottom-right corner at any time too, the way the Properties card and the page tabs always could be repositioned in edit mode. A floating panel's side edges drag as well, which is how you widen the Properties card without moving it: the edge you are not holding stays exactly where it is, so a card sitting against the right of the window grows into the drawing rather than off the screen. Double-click a side edge to put the width back.

Once it is the way you want it, ☰ → Lock panels stops all of that answering the pointer: the dock edges, the divider, the side edges and a floating card's strip and corner go inert together, and the resize cursors go with them, so a drag that starts a few pixels off the drawing does nothing instead of moving your workspace. Edit layout ignores the lock — everything in it works exactly as it does unlocked — so arranging is never more than ☰ → Edit layout away, and the switch is remembered on this device.

Minimize a dock when you want its panels out of the way without moving them. Every dock that holds a panel has a small « button in its top outer corner — top-left on the left dock, top-right on the right one, at the left end of the bottom one. Press it and the dock folds to a slim rail at the edge of the window, carrying the names of its panels, and the drawing takes the room. The same button stays in the same corner, now pointing the other way: press it again — or a name on the rail — and the dock comes back exactly as it was, the same panels at the same width. View → Minimize all panels folds every dock at once and Restore all panels brings them all back; in Studio, View is in the ☰ menu. A minimized dock stays minimized when you reload, and Edit layout shows it open while you arrange things, so its panels can still be dragged.

Escape

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

1. Edit layout mode, if it is on (the layout is kept).
2. The open inline label editor.
3. The armed placement (a shape picked from the palette, waiting to be dropped).
4. Connector mode, if no cable is mid-draw.
5. The gesture in progress — drag, resize, waypoint move, marquee or aggregate-ring drag — rolling it back.
6. 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.