blockdiag language preview

1. Request path

edges, labels, and a group

horizon-dark

blockdiag {
  browser -> web -> db;
  web [label = "API", color = "lightblue"];
  group {
    web; db;
  }
}

atom-one-dark

blockdiag {
  browser -> web -> db;
  web [label = "API", color = "lightblue"];
  group {
    web; db;
  }
}

github-dark

blockdiag {
  browser -> web -> db;
  web [label = "API", color = "lightblue"];
  group {
    web; db;
  }
}

dracula

blockdiag {
  browser -> web -> db;
  web [label = "API", color = "lightblue"];
  group {
    web; db;
  }
}

nord

blockdiag {
  browser -> web -> db;
  web [label = "API", color = "lightblue"];
  group {
    web; db;
  }
}

github

blockdiag {
  browser -> web -> db;
  web [label = "API", color = "lightblue"];
  group {
    web; db;
  }
}

2. HTTP sequence

a seqdiag exchange with a database

horizon-dark

seqdiag {
  browser -> webserver [label = "GET /index"];
  webserver -> database [label = "query"];
  database -> webserver [label = "rows"];
  webserver -> browser [label = "200 OK"];
}

atom-one-dark

seqdiag {
  browser -> webserver [label = "GET /index"];
  webserver -> database [label = "query"];
  database -> webserver [label = "rows"];
  webserver -> browser [label = "200 OK"];
}

github-dark

seqdiag {
  browser -> webserver [label = "GET /index"];
  webserver -> database [label = "query"];
  database -> webserver [label = "rows"];
  webserver -> browser [label = "200 OK"];
}

dracula

seqdiag {
  browser -> webserver [label = "GET /index"];
  webserver -> database [label = "query"];
  database -> webserver [label = "rows"];
  webserver -> browser [label = "200 OK"];
}

nord

seqdiag {
  browser -> webserver [label = "GET /index"];
  webserver -> database [label = "query"];
  database -> webserver [label = "rows"];
  webserver -> browser [label = "200 OK"];
}

github

seqdiag {
  browser -> webserver [label = "GET /index"];
  webserver -> database [label = "query"];
  database -> webserver [label = "rows"];
  webserver -> browser [label = "200 OK"];
}

3. Network and rack

an nwdiag subnet and a rack layout

horizon-dark

nwdiag {
  network dmz {
    address = "192.168.0.0/24"
    web01 [address = "192.168.0.1"];
    web02 [address = "192.168.0.2"];
  }
}

rackdiag {
  16U;
  1: Server;
  2: Switch;
}

atom-one-dark

nwdiag {
  network dmz {
    address = "192.168.0.0/24"
    web01 [address = "192.168.0.1"];
    web02 [address = "192.168.0.2"];
  }
}

rackdiag {
  16U;
  1: Server;
  2: Switch;
}

github-dark

nwdiag {
  network dmz {
    address = "192.168.0.0/24"
    web01 [address = "192.168.0.1"];
    web02 [address = "192.168.0.2"];
  }
}

rackdiag {
  16U;
  1: Server;
  2: Switch;
}

dracula

nwdiag {
  network dmz {
    address = "192.168.0.0/24"
    web01 [address = "192.168.0.1"];
    web02 [address = "192.168.0.2"];
  }
}

rackdiag {
  16U;
  1: Server;
  2: Switch;
}

nord

nwdiag {
  network dmz {
    address = "192.168.0.0/24"
    web01 [address = "192.168.0.1"];
    web02 [address = "192.168.0.2"];
  }
}

rackdiag {
  16U;
  1: Server;
  2: Switch;
}

github

nwdiag {
  network dmz {
    address = "192.168.0.0/24"
    web01 [address = "192.168.0.1"];
    web02 [address = "192.168.0.2"];
  }
}

rackdiag {
  16U;
  1: Server;
  2: Switch;
}