diagram — vẽ đúng bằng máy, không để model bịa hình

Nguyên tắc trung tâm, mượn của archify và giữ nguyên vì nó đúng: model KHÔNG vẽ. Model chỉ điền logic vào một tờ khai có schema (có những khối nào, khối A nối khối B ra sao). Việc dựng hình là của code tất định. Vẽ xong, máy tự soi lại bố cục; hỏng thì giữ nguyên bản tốt trước đó và nói rõ chỗ sai, tuyệt đối không nhả ra một hình rác.

Đó cũng là lý do skill này tồn tại thay vì để model tự vẽ SVG: một cái hình sai trông vẫn "có vẻ được", nên lỗi bố cục là loại lỗi đi lọt xa nhất.

WHAT

Purpose và context

• Purpose: vẽ SƠ ĐỒ (quan hệ/luồng) và BIỂU ĐỒ (số liệu) bằng code tất định — model chỉ điền tờ khai có schema, máy dựng hình và tự soi bố cục; hỏng thì giữ bản tốt trước đó và nói rõ chỗ sai.
• Trigger (when to use): user nói "vẽ sơ đồ", "vẽ biểu đồ", "vẽ luồng", "sơ đồ kiến trúc", "luồng xử lý", "flow", "graph", "chart", "trực quan hoá", "so sánh hai luồng", "draw a diagram", "sequence diagram", "state machine", "dependency graph", "plot", "dashboard", "convert Mermaid", "diff two flows" (danh sách đủ ở description).
• Non-goals: KHÔNG dùng cho màn hình UI/landing page — đó là hallmark. Không vẽ tay toạ độ SVG cho hình mới. Không thay generator cho sơ đồ trong tài liệu tự sinh.

Mental model

câu hỏi người xem → có TRỤC SỐ? → Sơ đồ (ngữ pháp → archify) hoặc Biểu đồ (dataviz + 5 luật lieflat) → file HTML → cổng nhà (frontend-antipattern, tuỳ chọn visual-receipt) → giao nguyên tử (xanh mới thay, đỏ giữ bản cũ). Model điền logic; code dựng hình; cổng tất định quyết đạt/không.