Mock-up của scriba-diagram-widget theo spec
docs/scriba/03-diagram-plugin.md. Mỗi step là 1 SVG hoàn chỉnh, crossfade opacity —
cùng kỹ thuật D2 dùng cho animated steps.
STEP 1 — INITIAL
Mảng $a = [2, 5, 1, 4, 9, 3]$ với segment tree lưu tổng đoạn. Truy vấn: $\text{sum}(1, 4) = a_1 + a_2 + a_3 + a_4 = ?$
Tại gốc $[0,5]$, đoạn truy vấn $[1,4]$ giao một phần → đệ quy xuống cả hai con $[0,2]$ và $[3,5]$.
Xuống trái $[0,2]$: $[0,1]$ giao một phần → đệ quy tiếp; nút $[1,1]$ phủ hoàn toàn → lấy 5; $[0,0]$ ngoài khoảng → bỏ qua; nút $[2,2]$ phủ hoàn toàn → lấy 1.
Xuống phải $[3,5]$: nút $[3,4]$ phủ hoàn toàn → lấy 13 (khỏi đi sâu); $[5,5]$ ngoài khoảng → bỏ qua.
Ba nút đóng góp: $[1,1]$, $[2,2]$, $[3,4]$. Các nhánh còn lại không cần chạm tới — đây là lý do truy vấn chạy trong $O(\log n)$.
Kết quả: $5 + 1 + 13 = 19$. Cây có 11 nút, chỉ cần đọc 3 nút để trả lời.
Điều khiển: ← → chuyển step, Space play/pause, Home End đi đầu/cuối. Click vào widget để focus.