Tiết lộ nội dung: Sử dụng Vizdom.dev để hiển thị DAG được viết bằng ngôn ngữ DOT

Là một nhà phát triển phần mềm, thỉnh thoảng tôi làm việc với DAG - hầu hết đều liên quan đến việc trực quan hóa chúng. Trong nhiều trường hợp, tôi cảm thấy khó có được kết xuất nhanh và phải tìm kiếm công cụ.

May mắn thay, có người đáng tin cậy Đồ thị công cụ có thể hiển thị đồ thị được viết bằng ngôn ngữ DOT - Hoàn hảo!

Ngoại trừ…

• Nó không hoạt động tốt trên web*
• Tôi cần cài đặt nó
• Nó không quản lý tập tin DOT/GV trực tuyến

Cân nhắc

*Được rồi, về mặt kỹ thuật , Graphviz có thể được biên dịch sang WebAssugging và một số người tài năng đã cố gắng xây dựng một số dự án gọn gàng như của dreampuf biên tập viên , nikeee edotor.net , và majac's biên tập viên - mỗi cái đều có sự thay đổi riêng. Tôi vẫn gặp khó khăn trong việc nhúng các kết xuất này mà không xuất chúng sang SVG (hoặc phương tiện khác).

Ví dụ: tôi muốn lưu trữ biểu đồ của mình trong Notion.so chỉ bằng cách dán một liên kết tự động hiển thị biểu đồ.

tôi có thể dùng Nàng tiên cáJS nó hiển thị đồ thị khá rõ ràng và hoạt động tốt một cách đáng ngạc nhiên - đó là một trong nhiều lý do khiến nó có 64k+ bắt đầu trên GitHub . Tôi cũng có thể nhúng biểu đồ vào Notion/GitHub bằng cách sử dụng markdown, thật tuyệt!

Thật không may, tôi phải dịch DOT thành hương vị markdown mà Nàng tiên cá yêu cầu. Đối với các cách trình bày văn bản nhỏ hơn, tôi có thể sử dụng ChatGPT để chuyển đổi chúng cho mình, nhưng nó thường mắc lỗi ngữ pháp và biểu đồ sẽ từ chối hiển thị - khiến nó không đáng tin cậy như một nguồn tự động hóa.

Sau đó có Terrastruct.com điều này thật tuyệt vời khi quản lý các sơ đồ được xây dựng bằng tay , nhưng giống như nỗi lo về Nàng tiên cá của tôi, tôi không thể chuyển đổi DOT thành D2 một cách đáng tin cậy. Tôi cho rằng nếu bạn định xây dựng sơ đồ bằng tay thì đây là chi phí một lần, có thể chấp nhận được. Nói chung, nó là một công cụ tuyệt vời. Thanh danh!

Vấn đề

• Tôi muốn kết xuất các đầu ra DOT được tạo theo chương trình - dường như không có công cụ nào giúp tôi đạt được mục tiêu đó.

• Tôi muốn nhúng các liên kết hiển thị biểu đồ.

• Tôi muốn lưu trữ kết xuất trực tuyến để cập nhật hoặc so sánh trực quan với các biểu đồ khác.

Giải pháp

Đúng - tôi đã xây dựng một ứng dụng vì điều đó 🎉

…Và nó được xây dựng hoàn toàn bằng Rust 🦀 xin cảm ơn rất nhiều Lepto

tl;dr — một ứng dụng đơn giản, được xây dựng có mục đích để hiển thị DAG trực tuyến, nhanh chóng

Giảm thiểu các điểm giao nhau trong quá trình tạo biểu đồ, một thách thức NP-hard được công nhận là chìa khóa để tạo ra các biểu đồ hấp dẫn về mặt trực quan. Nhóm tại Terrastruct đã công bố một kết quả xuất sắc bài viết trên blog đi sâu vào chủ đề này. Lấy cảm hứng đáng kể từ (các) thuật toán bố cục DagreJS và bài viết sâu sắc “ Kỹ thuật vẽ đồ thị có hướng ¹”, tôi đã phát triển một biến thể trong Rust.

Phiên bản này đặc biệt hiệu quả trong việc hiển thị các biểu đồ phân cấp, tận dụng sự phức tạp phức tạp của vấn đề này.

Việc hiển thị các DAG lớn (hơn 500 nút/cạnh) có xu hướng hơi chậm với Graphviz. Dagre + D3 ( d3-graphviz và các dẫn xuất) kết thúc nhanh hơn một chút và cung cấp các tùy chỉnh hình ảnh động/kiểu dáng tuyệt vời. Tuy nhiên, tôi cảm thấy rằng họ đã bỏ lỡ các tính năng mà ngôn ngữ DOT cung cấp — cụ thể là các thuộc tính kiểu dáng thường chỉ được tôn trọng nếu bạn kết xuất bằng Graphviz.

vizdom sẽ tạo ra kết quả rất giống với Dagre nhưng phù hợp hơn với đặc tả DOT và hành vi phong cách của Graphviz. Tuy nhiên, nó không có tính năng tương đương với Graphviz và các câu lệnh/thuộc tính không được hỗ trợ sẽ bị bỏ qua.

Tôi tin rằng đó là một sự thỏa hiệp tốt cho các loại thuộc tính mà DOT được tạo theo chương trình sẽ sử dụng.

Tính năng Vizdom

• 🚀 Kết xuất cực nhanh
• 💾 Lưu trữ biểu đồ trong các liên kết
• 0️⃣ Không phụ thuộc và không cần cài đặt

Tốc độ kết xuất

Vâng, đó là sự so sánh giữa táo với cam. Graphviz vẫn tạo ra những hình ảnh trực quan tuyệt vời và hỗ trợ nhiều hơn nữa công cụ bố trí , nên tôi đang so sánh một cách chủ quan vizdom chống lại công cụ DOT của Graphviz, thu gọn nó thành DAG và thậm chí còn thu hẹp phạm vi của nó thành danh sách các tính năng thu hẹp của ngôn ngữ DOT.

Vâng, tôi biết thật khủng khiếp khi so sánh kinh nghiệm và công cụ nhiều năm trong suốt hơn 30 năm của Graphviz, nhưng đối với trường hợp sử dụng hẹp của tôi, nó nhanh đến mức điên rồ. Dưới đây là một số thời gian treo tường trên Macbook Pro M1 của tôi để hiển thị một đồ thị khá lớn với ~ 400 nút:

• Graphviz gốc: ~30 giây
• Chrome (WASM) Graphviz: gặp sự cố*
• DagreJS của Chrome (Javascript): ~10 giây
• Chrome (WASM) vizdom : ~1 giây**

* Nó gặp sự cố do cờ mô tả, ALLOW_MEMORY_GROWTH=1 , không được đặt, do đó giới hạn tổng bộ nhớ ở mức 16MB. Điều này có thể khắc phục được nhưng tôi chưa tìm thấy dự án trực tuyến nào có thể xử lý biểu đồ được đề cập.

** Biểu đồ mẫu được hiển thị bằng cách chọn Example 14 trong chế độ xem trình soạn thảo. Việc làm mới trang sẽ khiến bạn phải làm mới trang và nhận được 414 vì URI vẫn tồn tại trong biểu đồ quá lớn. Tôi đang nghiên cứu giải pháp tốt hơn để lưu trữ biểu đồ lớn hơn.

Lưu trữ đồ thị trong liên kết

Bạn sẽ nhận thấy khi thực hiện bất kỳ thay đổi nào đối với tệp DOT, URL sẽ ngay lập tức cập nhật một số tham số truy vấn để lưu trữ các tùy chọn biểu đồ và bố cục, cho phép bạn luôn tham chiếu bản sao dữ liệu của mình chỉ bằng cách lưu trữ liên kết!

Có một nhược điểm - đồ thị cỡ lớn có xu hướng làm cho URI quá lớn đối với AWS (trong đó vizdom hiện được lưu trữ) và các bộ cân bằng tải khác.

Tôi hiện đang nghiên cứu giải pháp xử lý các biểu đồ lớn hơn, nhưng đồng thời, tôi đã đưa ra một số cách để duy trì và lưu trữ biểu đồ:

• Sao chép một liên kết có thể nhúng tự động hiển thị chế độ xem giúp tối đa hóa biểu đồ.

• Sao chép đoạn mã iframe để nhúng vào bất kỳ ứng dụng nào hỗ trợ hiển thị chúng.

• Hoặc chỉ cần tải xuống SVG được kết xuất.

Đây là một ví dụ về giao diện của trình soạn thảo dấu vết pprof cho giảm phát :

Chuyển đến Editor View và tải Example 42

Chế độ xem khác biệt

Thỉnh thoảng, tôi thấy mình đang cố gắng so sánh hai biểu đồ mà tôi đã tạo, vì vậy khi làm việc đó, tôi đã thêm một trình xem khác biệt để thấy trực quan những thay đổi giữa hai biểu đồ khác nhau.

Huyền thoại màu sắc:

• Màu đỏ: Đã xóa
• Màu cam: Đã sửa đổi
• Màu xanh lá cây: Đã thêm

Dưới đây là một vài ảnh chụp nhanh:

Nhấp vào tôi: thay đổi ID nút từ “e” thành “f”

Nhấp vào tôi: thêm “cluster=true”

Định hướng tương lai

vizdom vẫn là một công việc đang được tiến hành và khi nó tiếp tục phát triển, tôi biết rằng hành trình hoàn thiện công cụ này cũng năng động như chính lĩnh vực trực quan hóa biểu đồ. Trong khi tôi tự hào về những gì vizdom đã đạt được cho đến nay, tôi càng vui mừng hơn về tiềm năng của nó. Đó là nơi bạn, người đọc và người dùng tiềm năng, bước vào.

Nếu bạn có bất kỳ phản hồi nào, vui lòng nhắn tin cho tôi qua Gitter hoặc Bất hòa .

Cảm ơn bạn đã đọc - Nếu bạn thích bài viết này, hãy theo dõi !

[1]: ER Gansner, E. Koutsofios, SC North và K. . -P. Võ, “Kỹ thuật vẽ đồ thị có hướng,” trong IEEE Transactions on Software Engineering, tập. 19, không. 3, trang 214–230, tháng 3 năm 1993, doi: 10.1109/32.221135.

Cũng được xuất bản ở đây