Pele: Thư viện mã nguồn mở biến sơ đồ Mermaid thành SVG tùy biến giao diện

Pele - Thư viện mã nguồn mở kết xuất sơ đồ Mermaid

Với các lập trình viên thường xuyên phải vẽ sơ đồ luồng, biểu đồ tuần tự hay sơ đồ kiến trúc trong tài liệu, Mermaid từ lâu đã là công cụ quen thuộc nhờ cú pháp văn bản đơn giản. Tuy nhiên, Mermaid.js có nhược điểm cố hữu là dung lượng lớn và khó tùy biến giao diện. Pele — một thư viện mã nguồn mở mới — ra đời để giải quyết đúng những điểm yếu này.

Kết xuất nhanh, dung lượng nhẹ

Pele cho phép người dùng viết cú pháp Mermaid như bình thường, sau đó thư viện sẽ kết xuất thành SVG. So sánh trực tiếp cho thấy sự khác biệt rõ rệt:

• Dung lượng gói (gzip): Pele chỉ 230 kB, trong khi Mermaid.js lên tới 1,6 MB — nhẹ hơn khoảng 7 lần.
• Thời gian kết xuất: Pele chỉ mất 0,05–0,3 ms, còn Mermaid.js cần 6–82 ms.
• Số phụ thuộc trực tiếp: Pele có 0, đồng nghĩa không kéo theo hàng loạt gói phụ trợ vào dự án.

Với các trang web cần hiển thị nhiều sơ đồ hoặc chạy trên thiết bị yếu, đây là lợi thế đáng kể về hiệu năng và trải nghiệm người dùng.

Tùy biến giao diện bằng biến CSS

Điểm khác biệt lớn nhất của Pele nằm ở cơ chế tùy biến bằng biến CSS. Thay vì phải kết xuất lại sơ đồ mỗi khi đổi màu, người dùng chỉ cần khai báo các biến như --pele-bg, --pele-fg, --pele-line, --pele-surface hay --pele-border trong lớp CSS .pele. Mọi thay đổi màu sắc và phông chữ sẽ được áp dụng ngay lập tức mà không cần kết xuất lại.

Cách tiếp cận này đặc biệt hữu ích với các trang hỗ trợ chế độ sáng/tối, hoặc khi doanh nghiệp muốn đồng bộ sơ đồ với bộ nhận diện thương hiệu của mình.

Thư viện cũng đi kèm sẵn các chủ đề Sáng/Tối và giao diện thử nghiệm trực tuyến (Playground) để người dùng chỉnh sửa và xem kết quả tức thì.

Thân thiện với thiết bị di động

Một chi tiết đáng chú ý là Pele tự động thích ứng bố cục trên màn hình nhỏ, thay vì chỉ thu nhỏ toàn bộ sơ đồ như Mermaid.js. Điều này giúp sơ đồ vẫn dễ đọc trên smartphone — yếu tố quan trọng với người dùng Việt Nam, nơi tỷ lệ truy cập web qua di động luôn ở mức cao.

Cách tích hợp vào dự án

Pele có thể cài đặt qua npm, pnpm, yarn hoặc bun. Cách sử dụng rất đơn giản: truyền cú pháp Mermaid vào hàm render() và chèn SVG trả về vào trang.

import { render } from 'pele';

const { svg } = render(`flowchart LR
  A[Mermaid text] --> B[SVG]`);

document.querySelector('#diagram').innerHTML = svg;

Chỉ với vài dòng mã, sơ đồ đã sẵn sàng hiển thị và có thể tùy biến giao diện qua CSS.

Góc nhìn cho cộng đồng lập trình viên Việt Nam

Với các nhóm phát triển phần mềm trong nước thường xây dựng tài liệu kỹ thuật bằng Markdown, đưa sơ đồ vào wiki nội bộ hoặc blog công nghệ, Pele là lựa chọn đáng cân nhắc. Dung lượng nhỏ giúp giảm thời gian tải trang, còn cơ chế biến CSS giúp việc đồng bộ giao diện sơ đồ với website trở nên dễ dàng hơn nhiều so với việc can thiệp sâu vào cấu hình của Mermaid.js.

Dự án đang được thảo luận sôi nổi trên cộng đồng công nghệ, và mã nguồn mở giúp bất kỳ ai cũng có thể đóng góp hoặc tùy chỉnh theo nhu cầu riêng.