Markdown nwdiag editor

Write a network diagram in nwdiag's short text and see it drawn as you type: each network is a bar, and every host joined to it hangs below with its address. The same editor also draws server racks with rackdiag and packet layouts with packetdiag. The text sits in your Markdown as an ```nwdiag, ```rackdiag or ```packetdiag block. Free in your browser, with no Python and no sign-up.

nwdiag, rackdiag and packetdiag are part of the blockdiag family. The editor draws whichever one the text starts with.

nwdiag syntax

A diagram is nwdiag { … } holding one network block for each network. List the hosts on each network; a host named in two networks is drawn joined to both.

Networks and hosts

Give a network an address, and give each host its own address on that network in square brackets.

You write

nwdiag {
  network dmz {
    address = "210.0.0.0/24";
    web01 [address = "210.0.0.1"];
    web02 [address = "210.0.0.2"];
  }
  network internal {
    address = "172.16.0.0/24";
    web01 [address = "172.16.0.1"];
    web02 [address = "172.16.0.2"];
    db01;
  }
}

You get

Outside links and groups

A plain link with -- joins a node outside any network, such as the internet, and a group boxes hosts together.

You write

nwdiag {
  internet [shape = cloud];
  internet -- router;
  network office {
    router;
    laptop01;
    laptop02;
    printer;
  }
  group {
    color = "#dde8ff";
    laptop01; laptop02;
  }
}

You get

Server racks with rackdiag

Start with rackdiag, give the rack's height in units, then list what sits at each unit. Add a height such as [2U] for a taller device.

You write

rackdiag {
  12U;
  1: UPS [2U];
  3: Storage [3U];
  6: Database server;
  7: Web server;
  8: Web server;
  10: Switch;
}

You get

Packet layouts with packetdiag

Start with packetdiag and list each field by its bit range. colwidth sets how many bits fit on a row.

You write

packetdiag {
  colwidth = 32;
  node_height = 48;
  0-15: Source port;
  16-31: Destination port;
  32-63: Sequence number;
  64-95: Acknowledgement number;
}

You get

Cheat sheet

Write this	You get
`network lan { a; b; }`	A network with hosts a and b
`address = "10.0.0.0/24";` in a network	The network's address
`a [address = "10.0.0.1"];`	A host's address on that network
`internet -- router;`	A link outside the networks
`[shape = cloud]`	Any blockdiag shape for a node
`group { a; b; }`	A box around hosts
`rackdiag { 12U; 1: Server; }`	A 12-unit rack with a server at unit 1
`3: Storage [2U];`	A device two units tall
`packetdiag { 0-15: Field; }`	A packet field covering bits 0 to 15
`colwidth = 32;`	Bits per row of the packet

These are the nwdiag, rackdiag and packetdiag layouts and drawing ported to run in your browser.

Something not working? Let us know.