3 panel grid với connector arrow giữa. Static figure, không JS.
Hình 2.
Mỗi swap đổi 2 ô chia cạnh. 6 cặp ngang + 6 cặp dọc = 12 edge per state.
Notes on what you're seeing
Connector arrow giữa 3 panel là tự động từ connector=arrow.
Compiler emit 2 D2 edge (Input → CapKe, CapKe → Target), D2 routing từ panel bounding box.
12 adjacency edge được sinh bởi Edges.adjacent_pairs(g) — tác giả viết 1 dòng,
compiler generate 12 D2 edge declarations với style.stroke-dash: 3.
Panel 3 dùng state=done → compiler apply green palette cho cả 9 cell.
Nếu tác giả muốn từng cell khác màu, họ dùng data=[{v:1,state:done}, ...] (verbose hơn).
data-scriba-src attr trên mỗi panel group chỉ về đúng dòng trong input.md.
Inspect element → jump to source.
Layout engine (dagre) decide giữa các panel là 3 column đều nhau. Tác giả không căn pixel.