Vẽ sơ đồ kiến trúc với SVG — Nhúng trực tiếp trong blog | Blog

Vì sao nên dùng SVG cho sơ đồ kiến trúc?

Khi viết blog kỹ thuật, việc minh hoạ kiến trúc hệ thống bằng sơ đồ là gần như bắt buộc. Có nhiều cách: chụp ảnh từ draw.io, dùng Mermaid, hay export PNG từ Excalidraw. Nhưng một cách đơn giản và hiệu quả không kém là dùng SVG thuần — viết tay hoặc từ Excalidraw, nhúng trực tiếp vào file markdown.

SVG có vài ưu điểm:

Không vỡ hình khi phóng to
Dung lượng nhẹ (vài KB)
Không cần thêm dependency hay tool
Có thể nhúng trực tiếp <svg> trong .md

Ví dụ: Sơ đồ kiến trúc đơn giản

Dưới đây là một sơ đồ client → load balancer → API server → database. Toàn bộ code SVG viết tay, chưa tới 2KB:

Cách làm

Nếu bạn dùng Excalidraw, vẽ xong copy code JSON rồi export SVG qua menu Export → SVG. Hoặc viết tay như trên — chỉ cần vài thẻ cơ bản:

<rect> — hình chữ nhật
<ellipse> — hình ellipse (database)
<line> — đường thẳng
<text> — chữ
<marker> — mũi tên

Với Astro, bạn chỉ cần đặt <svg>...</svg> trực tiếp trong file .mdx là chạy. Nếu là .md thuần, markdown parser bỏ qua HTML tags và pass nguyên vẹn ra trình duyệt.

Kết

SVG là công cụ nhẹ, nhanh, linh hoạt để minh hoạ kiến trúc trong blog kỹ thuật. Thử nghiệm với Excalidraw để vẽ rồi export SVG — hoặc viết tay cho những sơ đồ đơn giản.