Diagrams from code

The loop

Drawbridge can draw a topology it is given — as text — and make it presentable. The whole loop is four steps:

1. Generate the topology as Graphviz DOT — ask an AI for it, script it from an inventory, or copy it off a device.
2. Send it in — let an AI assistant hand it over for you (MCP), paste it into Import, open an import link that carries the text in the URL, or run the desktop CLI.
3. Polish — the import arrives laid out in tiers, routed and using Drawbridge's own icons. It is an ordinary editable drawing: nudge, label, add zones.
4. Export — SVG, PNG, PDF, Visio, Mermaid or DOT again from the Export menu, or save as .drawio. Or skip the window entirely and let the CLI export for you.

There is no server in this loop. The parsing, the layout and the drawing all happen in your own browser (or the desktop app), offline. (The one exception is the hosted MCP and HTTP door, which exists so an assistant or a script with nothing installed can reach the same code — see AI assistants (MCP).)

This chapter covers the whole subject:

• AI assistants (MCP) — the shortest path in: one line of configuration and an assistant draws for you, using this same importer and router.
• The DOT format — how the importer reads the text: tiers, peers, devices, links, and what gets reported back.
• DOT examples — complete, paste-ready topologies, from three lines to a spine–leaf fabric. Every example on that page is run through the real parser by a test.
• Code in, image out — the fully scripted path: send a topology in and get an SVG/PNG/.drawio back with no window and no clicks.
• DOT reference — every attribute, every shape kind, every connector type. The lists are generated from the app's own catalogs, so they cannot go stale.

Four ways in

An AI assistant. Connect one to Drawbridge's MCP server and it sends the topology in for you — no pasting, no files. It is one line for the hosted server, Drawbridge --mcp for the local one, and it is the way most people integrate:

claude mcp add --transport http drawbridge https://drawbridge.fortiknight.com/mcp

The AI assistants (MCP) page covers both doors, every client, what the assistant is told about drawing well, and — on the local door only — how an assistant joins a live collaboration session and edits the diagram beside you instead of handing back a finished file.

Paste. Press Import, paste, read the preview — it names the format it detected, counts devices and links, and lists anything it could not read — then press Import. One undo removes the whole import.

An import link. A URL of the form …/app/#import=pako:<payload> opens the app with the Import box pre-filled. The payload is the text, deflate-compressed (zlib) and URL-safe base64 encoded; #import=b64:<payload> is the same without compression. The payload rides in the URL fragment, which browsers never send in the request — no server, log or proxy ever sees the diagram — and nothing is inserted until Import is clicked. Build one with anything that can build a string:

# with the repository script
node scripts/make-import-link.mjs topo.gv

# plain node, no checkout needed
node -e 'const z=require("zlib"),f=require("fs");
console.log("https://drawbridge.fortiknight.com/app/#import=pako:"
  + z.deflateSync(f.readFileSync(0)).toString("base64url"))' < topo.gv

# python
import base64, zlib
text = open("topo.gv", "rb").read()
p = base64.urlsafe_b64encode(zlib.compress(text, 9)).rstrip(b"=").decode()
print("https://drawbridge.fortiknight.com/app/#import=pako:" + p)

Links are capped at 2 MB of decoded text — hundreds of devices; a bigger topology should arrive as a pasted file or through the CLI.

The desktop CLI. Drawbridge --import topo.gv --export topo.svg runs the whole loop headless. The Code in, image out page in this chapter covers it in full — per-platform paths, exit codes, and scripted recipes.

Straight off a FortiGate

FortiGates print their managed-switch topology as DOT natively:

execute switch-controller get-physical-conn dot <fortilink-interface>

Paste the whole output — the CLI text around the digraph is fine — or pipe it into a link or straight through the CLI:

ssh fgt 'execute switch-controller get-physical-conn dot fortilink' \
  | node scripts/make-import-link.mjs -

Device roles, serials and models are read from the dump, and MCLAG peer switches stay side by side on their tier.

A prompt for your AI

Paste this into any AI along with a description of the network you want, and paste its answer into Import:

Produce a network topology as Graphviz DOT for Drawbridge. Rules:
- digraph, arrows pointing downstream (internet/core at the tail, access
  at the head) — the arrows decide the tiers.
- One statement per device: id [kind=..., label="NAME"]. kind is one of:
  internet, cloud, firewall, router, switch, l3-switch, load-balancer,
  wifi-ap, wlc, server, web-server, mail-server, dns-server, database,
  storage, vm, container, user, laptop, printer, voice-pbx, camera, plc,
  scada-server, hmi. Omit kind if none fits (the manual's DOT reference
  page lists every kind).
- Optional device data: mgmtIp="...", serial="...", model="...",
  location="...".
- Links may carry speed="10G" and ports: fw1:port1 -> sw1:ge0.
- Redundant same-tier peers: declare {rank=same; A B} and link them.
- Quote every value containing spaces or hyphens. No colors, fonts,
  pos or layout attributes — Drawbridge lays the diagram out itself
  (pos= exists in the profile only so its own exports round-trip).
Output only the DOT, nothing else.

The DOT examples page shows what good answers look like; the DOT reference page is the complete vocabulary an AI (or you) can draw from.