The more I delve into SQLite, Fossil-SCM, the more I find interesting and impressive. The latest thing I discovered is that SQLite, and by extension Fossil, have a format for generating diagrams called ‘Pikchr’, which is a plain-text format designed to export SVG.

Not only that, but it’s designed to be embedded in markdown, as a code-fence block, that would then be rendered either by the server, or in JS as they do on their site. It’s really neat! The language takes a bit of wrapping your head around, but it turns out it’s not so bad:

down
Internet: circle "Internet"; move
Router: box "Router"
Tailscale: ellipse "Tailscale" at 2cm right of Router.right
Mullvad: circle "Mullvad" "VPN" at 2cm right of Internet.right fit
Server: box "Server" at 2cm left of Internet.left
arc <-> from Server.s to Internet.s color blue "Tailscale" small small aligned "Tunnel" small small aligned
arrow <-> color blue to Tailscale.top "Tailscale" small small aligned "Tunnel" small small aligned
arrow <-> from Internet.s to Router.n

Clients: [
  right
  Client1: oval "Client1" fit; move
  Client2: oval "Client2" fit; move
  Client3: oval "Client3" fit; move
  Client4: diamond "Printer" fit;
] at 2cm below Router.s

down

Network: box thin width Clients.width+1cm height Clients.height+1cm at Clients.center
Caption: text "Local Network" italic with .n at 0.1cm below Network.s

arrow <-> color blue from Network.n to Tailscale.s "Tailscale/Wireguard" aligned small "Tunnel" aligned small
arrow <-> color blue from Tailscale.n to Mullvad.s "Wireguard" aligned small small "Tunnel" aligned small small
arrow <-> color grey from Mullvad.left to Internet.right
arrow <-> color grey from Internet.left to Server.right
arrow <-> from Router.s to Network.n

Renders:

I know someone converted the pikchr language to Go, so it’s possible that it could be included in Hugo in some lofty goal in the future. However, for now, we’ll have to just do it manually. There’s other hope in the form of a Lua pandoc filter that will convert it to an SVG for you.