alibaba/butterfly

🦋 Butterfly: Thư viện diagramming JavaScript mạnh mẽ dành cho flow layout

Một thư viện dựa trên JS hỗ trợ React/Vue2 giúp xây dựng giao diện kéo thả cho các dạng sơ đồ như DAG, BPMN, flowchart một cách nhanh chóng và linh hoạt.

Butterfly (còn gọi là butterfly-dag) là một thư viện JavaScript hỗ trợ React và Vue2, được thiết kế chuyên sâu cho lĩnh vực flow layout. Dự án do Alibaba phát triển, cung cấp giải pháp toàn diện cho việc tạo và quản lý các sơ đồ trựu tượng như DAG, BPMN, flowchart. Với mục tiêu giúp các nhà phát triển tập trung vào nhu cầu tùy chỉnh, Butterfly cung cấp hệ thống API hoàn chỉnh bao gồm Canvas, Group, Node, Edge và nhiều thành phần phụ trợ khác.

✨ Điểm nổi bật

• Dựng sơ đồ dựa trên dữ liệu: Sử dụng cấu trúc dữ liệu JSON để xác định nút, nhóm và kết nối.
• Hỗ trợ đa framework: Tích hợp sẵn hỗ trợ cho React, Vue2 và DOM thuần.
• Tùy biến linh hoạt: Cho phép dùng DOM, React hoặc Vue để thiết kế giao diện cho từng phần tử.
• Quản lý toàn diện Canvas: Hỗ trợ thu phóng, di chuyển, kéo thả và vẽ tự động các thành phần.
• Bộ demo phong phú: Cung cấp nhiều ví dụ thực tế, dễ dàng khởi đầu.
• Hệ thống API trọn gói: Bao gồm Canvas, Node, Edge, Group, Endpoint, Minimap, Tooltip, Menu, Layout và nhiều plugin hữu ích.
• Hỗ trợ layout tự động: Áp dụng các thuật toán layout để sắp xếp các nút một cách logic và đẹp mắt.
• Mở rộng qua plugin: Cung cấp các plugin như arrow, panel, hotkey để nâng cấp chức năng.

💡 Vì sao đáng chú ý

Butterfly nổi bật nhờ khả năng tách biệt hoàn toàn giữa logic và giao diện. Nhờ thiết kế dựa trên dữ liệu, mọi thay đổi trên sơ đồ đều được phản ánh ngay lập tức thông qua cấu trúc JSON, giúp việc đồng bộ trạng thái trở nên đơn giản và hiệu quả.

Khác với các thư viện khác chỉ tập trung vào một khía cạnh như vẽ SVG hay quản lý sự kiện, Butterfly cung cấp một nền tảng đa năng, cho phép người dùng tùy chỉnh hoàn toàn giao diện bằng DOM, React hoặc Vue. Điều này giúp giảm thiểu công sức phát triển giao diện đồng thời tăng tính linh hoạt cho các dự án phức tạp như công cụ modeler, dashboard trực quan hoặc các công cụ thiết kế hệ thống.

---

#JavaScript #React #Vue2 #Diagramming #FlowLayout #OpenSource #TiniX