Drawbridge

Connectors

Drawing a connector

Two ways:

Release over the target device to create the connector. Map underlays never take an endpoint — cabling "the world" is meaningless, and it sits under everything.

Double-click a connector to give it a midpoint label (VLAN, circuit ID, whatever the diagram needs). The inspector's Port labels fields add interface names at the two ends (ge-0/0/1, wan1); they are placed automatically from the route's first and last segments. Where each of them sits is adjustable — see Label placement below.

Connector types

Every connector has one of four types, set in the inspector's Connector section:

Type What it means
Auto Routed by the engine: orthogonal, avoids devices, keeps spacing. Geometry is recomputed, never stored.
Direct A straight line between the two devices. Ignores everything in between.
Arc A smooth curve between the two devices — for when a cable should read as "around", not "through". Select an Arc and drag the handle at its crest to tune how far (and to which side) it bows; double-click the handle to go back to the automatic bow. Click a diamond on the curve to add more control points and pull the curve into any smooth shape — the same gestures as Custom, splined instead of cornered. Switching between Arc and Custom keeps the points. Parallel arcs between the same pair bow at different heights so each stays visible.
Custom Your own path, through waypoints you place.

Custom is the one case where a connector's geometry is document data. Switching a connector to Custom seeds the waypoints from its current route, so it does not jump. Then:

Waypoints are absolute positions: they move with the connector when you move the whole selection, but they do not follow a device you move on its own.

New connectors can take their link type from the two devices they join, and reuse whatever you last chose for that pair of devices. It is on by default; the switch is Auto link detection in the app menu.

Two things happen, and they compose:

Nothing else is guessed, on purpose. A trunk is a VLAN fact, a LAG an aggregation fact, IPsec an encryption fact — none of them follow from two icons, and a badge claiming a tunnel that is not there is worse than a plain line. So two switches stay a plain line until you say otherwise.

It only ever applies to a connector as it is created — never to one that already exists. Connectors you drew before, and every connector in a file you open or import, are left exactly as they are: they are your data, not a guess to be revised. An explicit choice always wins, and every effect is one undo away.

What it learns is stored in your browser, not in the drawing: files you share carry no trace of your conventions, each install remembers separately, and two people editing the same page each apply their own. Forget learned link styles, next to the switch, clears the memory — turning the switch off keeps it, in case you want it back.

Default type, and converting a page

Two buttons sit under the type buttons:

Both act on the type the current selection agrees on, so they are disabled when the selection mixes types.

Through icons

When two devices are not quite in line, an Auto connector shifts where it meets each of them so the cable can still be one straight line — but only within the middle half of the device's side. Move them further out of line than that and the cable takes a step instead, rather than creeping out to the corner of the icon.

A connector normally meets a device at the edge of its tile and passes under it. Through icons, under the type buttons, changes what happens at a device the line passes through: there the connector runs across the middle of the icon and is drawn on top, so the line visibly crosses it. The connector's own two ends — the devices where it starts and stops — keep their normal anchors on the border, exactly like any cable.

It is worth it when a device is something a run passes through rather than ends at — an internet cloud, an ISP hand-off, a patch panel in the middle of a span. Set it on the connector arriving and the one leaving, and the pair reads as one long line with the icon strung on it; where a device has more than one cable in and out, Link as one cable below says which continues as which. Off is the default and always will be: cables belong under the shapes.

The pair does not have to run straight through. When one connector arrives from above and the other leaves to the side, the two meet in the middle of the icon and turn — and the corner is rounded there exactly as it would be anywhere else along a route, so it reads as one cable bending inside the device rather than as two lines stopping against each other. Move either device and the bend follows.

The button is a toggle, and it applies to everything selected. The device itself stays exactly as grabbable as it was — a click in the middle of a crossed icon still picks the device, not the cable.

The cable is drawn on top of the icons by default — that is what "through" means — but it is only a default: select a device and press Arrange ▸ Bring to front and the device covers the cable instead, the way a run vanishes into a cloud. Toggling Through icons resets the cable itself to its default depth.

One cable, several connectors

Drawbridge works out which connector continues into which on its own wherever there is only one possible answer — one cable in, one out, and it bends them into a single line. Where a device has two cables in and two out there is no answer to work out: which of the two arriving cables continues as which of the two leaving ones is a fact about your cabling, not about the picture.

Link as one cable, under Through icons, is where you say. Select two connectors that meet at a device and press it; they become one cable that flows through the icon between them. To grow it, select the cable and the next connector together — clicking any part of a cable takes the whole of it — and the button reads Add to this cable: press it and the run takes the newcomer in, keeping its name and everything else about it. A cable can run through as many devices as you like. Unlink cable, which is what the button says when the selection is the cable itself, breaks it back into separate connectors, and nothing is lost when you do.

Once linked, the parts behave as one cable:

Orthogonal to the connector type is the Link type: what the connection is, not how it finds its path. Each type has exactly one fixed presentation — there is no per-link line styling — and all of them are keyed to the line colour, so they follow the theme and any colour override.

Link Drawn as
Normal A plain line. The default; needs no legend entry.
IPsec tunnel A dashed core running inside a translucent tunnel casing, with a padlock badge at the midpoint.
Trunk (802.1Q) A double line — a heavy stroke with a background-coloured stripe down the middle.
LAG (LACP) A heavy line with a midpoint badge: two strands bound in a small ring — the aggregate ring in miniature (see Aggregates below).
WAN link Long dashes.
Management Fine dots — out-of-band.
Wireless Dash-dot, with a radio-wave badge at the midpoint.
Conduit A solid core inside a translucent casing, no badge. The controlled channel between two zones in the IEC 62443 sense — a documented pipe, not an encrypted one, which is what separates it from an IPsec tunnel.
Fieldbus A thin, tightly dashed line. It is the only link drawn under 2 px, because that is the honest picture of a low-speed multidrop or serial run rather than an Ethernet trunk.

The dash rhythms are deliberately distinct — long dashes, fine dots, medium dashes, dash-dot — so the types stay tellable apart at 50% zoom. Badges live at the midpoint rather than along the line, because routes are orthogonal polylines and a decorated line mangles at every corner.

Speed is the second channel: the link type is the line style, the link speed is the line colour. They compose — a 10G WAN link is the WAN dash pattern painted in the 10G colour.

Nine presets are available as chips, ordered slow to fast, and you can enter a custom value:

1G · 2.5G · 5G · 10G · 25G · 40G · 100G · 400G · 800G

The default palette is an ordered cool-to-warm sweep (indigo → blue → teal → green → olive → amber → orange → red → magenta), so the colour also encodes the ranking. Because nine hues cannot all be told apart by everyone, the legend — colour plus the speed text — is the intended second reading; the on-canvas colour only has to read as "roughly this fast, different from its neighbours".

Recolouring is per document, not per connector: with a single speed selected, the Color control next to the chips changes that speed's colour everywhere on the document at once. Reset returns it to its default. A file with no recolouring stores no overrides.

An explicit per-connector colour, chosen from the Color swatches, always wins over the speed colour.

Cable type, and how many transceivers you need

Cable says what the link physically is. It paints nothing — it exists so Drawbridge can tell you what to order:

RJ45 copper · DAC (twinax) · AOC · Multimode (SR) · Single-mode (LR) · Single-mode long (ER) · BiDi · CWDM · DWDM

The speed already fixes the cage — 10G is an SFP+, 100G a QSFP28 — so speed and cable type together name a part: a 25G multimode link is an SFP28 25G SR, one module at each end. A DAC or AOC is one cable assembly and no modules at all; an RJ45 run is neither.

For the optical types a Wavelength field appears, with the CWDM grid and the DWDM C-band offered as presets (C21, 1310 nm, 1471 nm, …). You can type anything — it is your channel plan. The wavelength is part of the part, so eight DWDM links on eight channels come out as eight order lines rather than one line of sixteen.

Nothing is ever guessed. A cable with no type set is counted into an Unspecified row instead of being assumed to be short-reach, because a plausible wrong number is worse than a visibly missing one. Setting the type on the first cable between two kinds of device makes the next one come out the same way, like the other connector conventions.

Blocks → Optics in the toolbar drops a block on the page listing what this page's cables call for, and refreshes in place as you draw. It is a switch — clear it and the block comes off again. It is ordinary page content, so it exports, prints and shares like anything else. For the whole document, Optics report in the app menu shows the totals and a per-device breakdown, and Optics CSV in the Export menu is the same thing as a file.

Two counts are approximate and say so:

The cable schedule, and ticking cables off

Cable schedule in the app menu turns the document into one row per cable — a kopplingsschema — grouped by device, because you work one rack at a time.

Each row is the port you are standing at, where the other end goes, and what the cable is:

et1/2  →  SPINE-02 · et1/1        100G · Single-mode (LR) · Po1

Ports sort the way you read them, so et1/2 comes before et1/10 rather than after it.

Tick a cable when you have run it. The tick is stored in the document, not in your browser, and that is the point: two people patching the same hall see each other's ticks live through collaboration, the state survives a reload on a tablet, and the file you hand over afterwards says what is actually connected. A mis-tick is one undo away.

Progress shows at the top as a figure and a bar, with a smaller bar per device so you can see which rack is still outstanding. Hide done clears what is finished out of the way. The panel is laid out for a phone held in one hand — that is where it gets used.

A cable with no port name at an end shows (no port) in amber. It still counts, but NetBox cannot import it, so it is worth naming before you export.

Print puts the same schedule on A4 with real tick boxes, so it works on paper when the phone is in a pocket. It prints what you are looking at, so searching or hiding the done ones first prints just that.

Sending the checklist to whoever is patching

Share, in the same row of buttons, copies a link to this schedule. Send it over chat to the engineer standing in the hall and they open the checklist on their phone — no account, no install, nothing to sign in to. The cables travel inside the link itself, in the part of a URL that browsers never send to a server, so there is nothing to host and nobody in between ever sees the schedule. It is the same kind of link as the import links described in Diagrams from code.

What they get is the checklist and nothing else. The drawing is not in the link and no document is opened, so there is nothing to edit by accident; searching, Hide done, the progress bars and Print all work exactly as they do here. The CSV and NetBox buttons are not offered, because there is no document behind them to export.

The line above the figure says Shared schedule · ticks stay on this device, and it means it. Their ticks are kept in that phone's own storage and are keyed to the schedule, so they survive a reload or a pull-to-refresh — and they do not come back to you. There is no server for them to come back through. Cables you had already ticked when you shared arrive ticked; everything after that is theirs, and your own document keeps saying whatever you ticked in it.

Because the ticks are keyed to the cables rather than to the exact link, sending a corrected schedule to the same phone keeps the morning's progress: fixing a speed or a label does not clear anything. A link that a chat window has truncated, or that has been edited by hand, says what is wrong instead of showing half a list.

The link points at whatever copy of Drawbridge you shared it from, because that is the address it was copied at. Share from drawbridge.fortiknight.com and anyone can open it. Share from a copy running on your own machine — a localhost address — and it will not open anywhere else, because on their phone localhost means their phone. The same is true of an instance inside a company network: the link works for whoever can reach that instance, which may mean being on the VPN. If a link does not open for the person you sent it to, that is almost always why.

Getting their progress back

Their ticks stay on their phone, but they can hand them to you as a short piece of text. In the shared view there is a Send progress button: it copies a code that starts with drawbridge-ticks: to their clipboard, and they paste it into whatever you already use to talk to each other — chat, mail, a ticket. Nothing is uploaded and nothing leaves the phone on its own; the code is what they choose to send.

The code carries only which cables are done, as identifiers. There are no device names, no ports and no drawing in it, and it is small: a 54-cable job comes back in about 134 characters, which pastes into any chat window without being broken across lines.

On your side, open Cable schedule and press Progress. A field appears under the filters. Paste the code into it and press Apply, or just press Enter.

Applying only ever ticks. It never unticks anything, and that is deliberate: a code says "I have run these", not "everything else is undone". Your document may well hold cables the engineer never saw — on another page, or added after you shared — and a code that could untick would quietly clear them.

The result is written under the field, in one line: Ticked 12 cables · 3 already ticked · 1 is not in this document. The whole apply is a single undo step, so if it was the wrong code, one Undo takes all of it back.

That last count is how you recognise a code from a different job: every cable comes back as not in this document, and nothing is ticked. A cable or two counted that way is normal — you deleted them, or renamed the link since sharing — but a number that matches the whole code means you have pasted the wrong site's progress.

A code that cannot be used says why rather than doing nothing. An empty field asks you to paste the code; text that is not a code at all says so; a code a chat window has broken or truncated says it is damaged and to ask for it again unbroken; and a code made by a different version of Drawbridge says that instead of half-applying.

This is a manual step in both directions, by design. The engineer has to send you the code and you have to paste it; there is no sync, no polling and no server, so nothing arrives while you are not looking. Ask for a code at the end of the day and you get the day, not a live feed.

Label placement

The inspector's Label placement section moves a connector's captions without moving the cable. It has three independent groups, because they usually want different things: the Connector label is the midpoint caption, and each end's interface name gets its own group — Port label — from end and Port label — to end.

For the connector label:

Each port label gets Above · On · Below and Follow the connector too, plus Auto — the default, where the label picks the side pointing away from its own device and steps out of the way of anything already there. Choosing a side switches that off and pins it; if two labels then want the same spot, they slide further along their cable rather than crossing back over it.

The two ends are set separately because they are genuinely different places: ge-0/0/1 leaving a switch at the top of the page and wan1 arriving at a firewall at the bottom have different things in the way, and one shared setting could only ever suit one of them.

"Above" and "Below" are measured against the cable, not the screen, so they mean the same thing whichever way a connector runs — on a vertical cable "above" is the right-hand side. That is also why a label on a vertical connector sits beside its line rather than across it.

Dragging a caption

Three stops and three sides cannot separate two captions that land in the same place — two cables crossing at a shallow angle put both of them at the midpoint, just above the line. So drag the caption itself: it moves freely along its cable, and away from it, as far as you need.

Dragging is not a free-floating offset. Where the caption ends up is still recorded against the cable — how far along the route, which side, and how far off — so moving a device, or anything that makes the router re-draw the run, carries the caption with the line instead of stranding it in empty space. Crossing the line while dragging flips it to the other side, and dropping it on the line puts it On, knockout and all; the inspector's buttons keep showing which side it ended up on.

Dropping a caption back roughly where it started snaps it to the default, so a label you have nudged and put back is exactly a label nobody has ever touched. Pressing Start, Middle or End always wins over a drag and puts the caption on that stop — including the stop that is already marked, which is how a caption dragged along its own default comes home; pressing the side it is already on puts the distance back to the standard one, which is the quickest way to undo a lot of fiddling.

The format painter carries all of this, so you can set one connector up the way you want it and paint the rest.

The Connections tab

The inspector has two tabs. Properties is everything above. Connections lists every cable touching what you have selected, so you can read and edit a device's links without hunting down each one on the canvas — the tab itself carries the count, so "how many things is this wired to" is answered before you even open it.

Select a device and you get a card per connector: which device it goes to, its label, both port names — each captioned with the device whose port it is, so a cable drawn the other way round cannot quietly swap them — plus its link type and speed. Every field edits in place, and edits land exactly as they would through the connector's own inspector, one undo step each.

The arrow at the top of a card says where the other device is on the page — → for one beside it, ↓ for one below, ↘ for one diagonally down and right. It is measured from the drawing, not from which end of the cable you happened to draw first, so a card can be matched to the picture without reading a name.

Hovering a card highlights that cable on the canvas, which is the quickest way to tell which of eight links is which.

Each card also has Copy and Paint, the format painter on one connector: copy the look of the cable you have got right, then paint it onto the others without leaving the panel. It is the same clipboard as the inspector's own Copy/Paint, so a look copied here can be painted on the canvas and the other way round. A cable that already looks like the copied one says so rather than appearing to ignore the press.

Delete, on the left of the same row, removes the cable itself — unwiring a device is part of editing its connections, and it should not require finding the cable on the canvas first. It is the same delete as selecting the connector and pressing the key: one undo step brings it back.

Select several devices and each gets its own section, because which device you are looking from is what decides which port name belongs to which end. Select connectors instead and they are listed together under one heading, one card each — a card names both of its ends, so a selected cable is one card and not two.

Aggregates in the tab

An aggregate is one card, not one card per member. The head names every device the ring reaches, the line under it says which ring it is and how many cables it stands for, and everything the members share — the label, the type, the speed — is shown once. Fields the members disagree on read Mixed; picking a value there sets it on all of them. Below that is one row of port names per member, so the only thing that genuinely differs cable by cable is the only thing listed cable by cable. A fan-out that reaches two devices (an MC-LAG) gets a heading per device, over its own members, rather than one heading that is only true of the first cable. Hovering the card highlights the whole ring; hovering one member line highlights just that cable. Delete ×4 removes the whole aggregate in one undo step.

You can also decide what goes in a ring from here. Every cable that could be aggregated gets a Ring picker: put it in an existing ring, take it out again, or choose New ring… to spawn another one beside the first. A ring holding a single cable is not drawn yet — the panel says so, and it starts being drawn as soon as a second cable joins it.

Inside a ring's card, each member row ends in the same picker in miniature, under a Ring heading: the ring's number, — to take that cable out, + for a new ring. That is how an aggregate is split in two — give one member a new ring, then send the next member to it — and it is the only ring control a cable inside a ring has, since it gets no card of its own. Taking a cable out that would leave a single cable behind dissolves the ring rather than leaving one you cannot see.

A cable can be in more than one ring

A cable has two ends, and each end can be part of its own port-channel. In a spine/leaf pod the four cables leaving a leaf are one aggregate there, while the two arriving at each spine are an aggregate at that spine — three rings over four cables, which is what the switches themselves think is going on.

So binding adds a ring rather than replacing one. Select all four cables and press Bind as aggregate for the leaf's ring; select the two that run to one spine and press it again for that spine's ring; repeat for the other spine. A subset of a ring is how the next ring gets made, so binding stays available there. When the selection is a whole ring exactly as it already is, the button reads Add another ring instead, and after that Add a third ring.

A set of cables carries one, two or three rings, and never more: one in the middle, one at each end, or all three — the drawings people actually make. A second ring over the same pair of devices would land on top of the first, so it is placed at the other end of the run, and the first moves to the near end to make room; a third goes back to the middle. At three the button goes quiet and says why. Drag any ring along its cables to put it exactly where you want it — it follows the pointer whichever end it hugs.

Unbind removes one ring — the one you pressed on the canvas, or the one picked in the Ring list when the selection touches several — and leaves the other rings those cables are in exactly as they were. The button's tooltip names the ring it is about to remove.

A ring always stands square across its cables, whichever way they run, and a ring that hugs a device sits just outside its tile rather than over it.

Taking a cable out of one ring leaves its other rings alone — pulling a cable out of the leaf's aggregate does not take it out of its spine's.

Because of that, Ring color in the inspector adds a Ring picker as soon as your selection touches more than one aggregate. It lists each ring by its own name — its port-channel label if it has one, otherwise its number in the drawing — with how many cables it holds, and the colour, Reset and Set default below act on the one you have picked. With a single ring selected there is nothing to choose and the picker stays away.

Naming a ring

An aggregate card has Ring label above Cable label, because they are two different facts: the ring's name is the port-channel (Po1, ae0), while a cable's label is the circuit it carries. Writing the port-channel's name on all four cables to say it once is exactly the repetition these cards exist to remove.

Double-click the oval to name a ring without going near the inspector — the caption edits in place, exactly like a device's or a cable's. Aim at the oval's own line: its inside belongs to the cables it encircles, so a double-click in there edits the cable you hit, which is usually what you meant if that is where you clicked.

Those placement controls appear in the ring's card the moment the name is committed — a ring with no caption has nothing to place, so until you have typed one they are not there. The ring's caption is placed the same three ways a connector's label is, measured against the ring rather than a cable: Along runs down the ring's sweep — Start just outside one end, Middle across the middle of it, End just outside the other; Side steps it off the ring in the direction of the cables; and Follow the ring turns it to the ring's angle instead of keeping it horizontal, never upside down. A caption sitting on the ring gets the same knockout a label on its own cable does, so the line does not run through the letters.

What the tab deliberately does not do is re-point a cable at a different device. That is a change to the shape of the diagram rather than to what a cable is, it has a direct gesture already — drag the endpoint handle — and doing it from a list would make the row you are editing disappear out from under you.

Selecting a connector

A selected connector gets a soft band along its length, in the selection colour, with a round handle at each end that you can drag to re-attach it. Hovering shows the same band, fainter — hover and selection are the same idea at two volumes.

The band sits underneath the cable rather than replacing it, which is deliberate: the cable keeps its own colour while it is selected, so a 100G link still reads as 100G and still matches the legend. Selecting several connectors at once bands each of them individually, so parallel runs stay countable.

A cable drawn from a device's centre ends at that centre, under the icon — so its handle is drawn a little way out along the cable, just clear of the tile, where you can actually grab it. Pressing inside a device always means "move the device", and that has not changed: the handle simply steps outside so both gestures have room. Drag it onto another device, or onto a different side of the same one, exactly like any other endpoint.

Line jumps

Where two connectors cross, the upper one (the one painted later) hops over the lower with a small arc — the wiring-schematic cue that crossing cables are not connected. Nothing to turn on.

Connectors that share an endpoint device do not jump over each other behind that device — where its own tile covers the meeting, a bump would be a mark on a piece of cable nobody can see, and the fan of wires arriving at one switch reads as a junction rather than as a pile of crossings. Everywhere the crossing is actually visible, it bumps: a switch's downlinks crossing mid-run, and Direct cables converging on one firewall, which cross close in by their very nature and used to come out flat.

Two connectors between the same pair of devices would otherwise be drawn exactly on top of each other and be impossible to click. Instead each member of the pair gets a deterministic sideways offset, so the group fans apart around the original centreline: two members sit either side of it, three sit at −1/0/+1, and so on. The fan is derived from the connectors, not stored, so it is stable across redraws and file round-trips.

That is separate from a true aggregate. Select two or more connectors that share at least one endpoint device and use Aggregate → Bind to make them one logical LACP bundle, drawn with a ring encircling the members. Unbind makes them independent again. The ring's colour can be changed, reset, or made the default for all rings — and when your selection is in more than one ring, a Ring picker above the colour says which one you are about to change. Note the distinction from the LAG link type, which is "one line that represents an aggregate"; binding is the real multi-member concept. The two share their look on purpose — the LAG badge is that same ring drawn in miniature around two strands, so both notations read as the one networking idea.

How automatic routing works

Auto connectors are routed by libavoid, an obstacle-avoiding orthogonal router. In plain terms:

A connector that attaches to a zone or a rack skips the router entirely and is drawn as a straight centre-to-centre segment.

Very large drawings

On a very large page — several hundred Auto connectors, the scale of a whole enterprise imported at once — cables that converge on the same heavily-wired device (a datacenter hub firewall with a tunnel from every branch, an ISP cloud carrying half the WAN) are drawn as a fan of smooth curves instead of orthogonal paths. At that density an orthogonal bundle into one device is a solid, unreadable bar, and routing it is also what used to make huge imports take minutes — the fan keeps the drawing readable and the import takes seconds. Everything else on the page keeps normal obstacle-avoiding routing, drawings below this scale are not affected at all, and nothing about your file changes: the connectors are still Auto, and a page that shrinks back below the threshold routes orthogonally again.

Dragging stays responsive on such a page too: while the reroute cannot keep up with the pointer, cables attached to what you are moving follow as straight lines for the duration of the gesture and snap to their exact routes the moment you drop. Pages that reroute quickly never do this — their drags behave exactly as before.

Once you stop editing, the app quietly recomputes the full-quality version of that page in the background — every cable, hubs included, routed orthogonally with obstacle avoidance, exactly as if the page were small — and swaps it in when it finishes. A small "Refining cables…" pill shows while it works (a very large page can take minutes; Cancel keeps the fans). Any edit brings the fans back instantly and the refinement starts over. Exports wait for the full-quality version by default, so the file you hand someone always carries the best cabling available — the export dialog offers "Export current view" if you would rather not wait.

Why connectors move when you move a device

Routes are derived, not stored. Every time the diagram changes, the router re-solves — and it solves for the whole page at once, not just the connector you touched. Moving one device changes the obstacle field, which can change the cheapest path for connectors that have nothing to do with that device. This is normal, and it is the price of never having to clean up cabling by hand.

Recomputation is batched to one pass per animation frame, so dragging a device stays smooth however many connectors are attached.

If you need a path that will never change, switch that connector to Direct or Custom. Direct and Custom geometry is yours, and the router does not touch it.