Skip to content
bahtuiv0.18.8

Sticker graph

<baht-sticker-graph> places stickers on the floor the stickers lean on, joins them with dashed links and sends packets along them one step after another: a client, its router, the internet, a DNS resolver and a web server, or any other diagram of how things talk. It ships in bank20baht-stickers and follows the banknote palette and dark mode like the stickers do.

Builder

Section titled “Builder”

Add stickers, drag them between cells, link them, write the packet flow, and copy the JSON.

Drag a sticker to move it. Connect, then click two stickers to link them.
JSON

Use it

Section titled “Use it”
import 'bank20baht-stickers/all'; // <baht-sticker>, <baht-sticker-graph> and every sticker by name
<baht-sticker-graph id="net"></baht-sticker-graph>
<script type="module">
  document.getElementById('net').graph = {
    nodes: [
      { id: 'client', sticker: 'laptop', label: 'Client', sub: '192.168.1.10', x: 0, y: 2 },
      { id: 'router', sticker: 'router', label: 'Router', sub: '192.168.1.1', x: 2, y: 1 },
      { id: 'web', sticker: 'server', label: 'Web Server', sub: '203.0.113.10', x: 4, y: 0 },
    ],
    links: [
      { from: 'client', to: 'router', dir: 'both' },
      { from: 'router', to: 'web', dir: 'both' },
    ],
    flow: [
      { from: 'client', to: 'web', tone: 'gold', label: 'GET /' },
      { from: 'web', to: 'client', tone: 'ok', label: '200 OK' },
    ],
  };
</script>

A lean bundle imports bank20baht-stickers/graph and registers only the stickers it names.

Key What it is
nodes[] id, sticker (a registered name), label, sub (a muted second line), and the cell x, y: x runs along the floor to the right, y towards the viewer
links[] from, to and dir: none (default), forward or both arrowheads. Links to a missing node are skipped
flow[] One packet per step, in order, then a rest and the loop: from, to, tone (main, ok, gold, hot, deep, the sticker accents) and a label for your own list
Attribute / property What it does
graph (property) The diagram above
step-ms Milliseconds a packet takes along one step (900)
paused Holds the packets where they are
hide-grid Leaves out the floor grid
label Accessible name; the node labels by default
gridAt(clientX, clientY) The cell under a page point, for builders that place nodes by pointer

Each packet that sets off fires baht-step with { index, step }, so a host can highlight the matching row of its own packet table. The two nodes of the current step carry data-active. Under reduced motion no packet moves.