Tiết lộ nội dung: Sử dụng   để hiển thị DAG được viết bằng ngôn ngữ DOT Vizdom.dev  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  công cụ có thể hiển thị đồ thị được viết bằng ngôn ngữ DOT - Hoàn hảo!   Đồ thị  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,   , 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  , nikeee  , và majac's  - 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ề mặt kỹ thuật   biên tập viên   edotor.net   biên tập viên  Ví dụ: tôi muốn lưu trữ biểu đồ của mình trong  chỉ bằng cách dán một liên kết tự động hiển thị biểu đồ.   Notion.so  tôi có thể dùng  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ó  . 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!   Nàng tiên cáJS    GitHub 64k+ bắt đầu trên  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ó  điều này thật tuyệt vời khi quản lý các sơ đồ   , 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!   Terrastruct.com được xây dựng bằng tay  Vấn đề  Tôi muốn kết xuất các đầu ra DOT được tạo   - dường như không có công cụ nào giúp tôi đạt được mục tiêu đó. theo chương trình  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  vì điều đó 🎉   ứng dụng  …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  đ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 “   ¹”, tôi đã phát triển một biến thể trong Rust.   bài viết trên blog Kỹ thuật vẽ đồ thị có hướng  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 (  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.   d3-graphviz  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.   vizdom  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   và hỗ trợ nhiều hơn nữa  , nên tôi đang so sánh một cách chủ quan  chống lại công cụ DOT của Graphviz, thu gọn nó thành DAG và thậm chí   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. tuyệt vời   công cụ bố trí   vizdom còn  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ị  với ~ 400 nút:   một đồ thị khá lớn  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 đó  hiện được lưu trữ) và các bộ cân bằng tải khác.   vizdom  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   và tải  Editor View 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  để thấy trực quan những thay đổi giữa hai biểu đồ khác nhau.   trình xem khác biệt  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  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ì  đã đạ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.   vizdom   vizdom  Nếu bạn có bất kỳ phản hồi nào, vui lòng nhắn tin cho tôi qua  hoặc  .   Gitter   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

This post provides insights into new product. 

This story contains new, firsthand information uncovered by the writer.

Render DAGs with Vizdom

Read My Stories

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

Đây là lý do tại sao bạn không nên sử dụng Graphviz cho DAG: Thay vào đó bạn nên sử dụng gì

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

94 Stories To Learn About John Locke

61 Stories To Learn About Polotical Philosophy

72 Stories To Learn About The Essays Of Adam Smith

145 Stories To Learn About Book

94 Stories To Learn About John Locke

61 Stories To Learn About Polotical Philosophy

72 Stories To Learn About The Essays Of Adam Smith

145 Stories To Learn About Book

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps