OpenFLOW - Công cụ tạo sơ đồ hạ tầng đẹp mắt nhanh chóng trên máy cục bộ

• PWA tạo sơ đồ isometric (phong cách 3D) mã nguồn mở chạy trên trình duyệt
• Dựa trên React và engine Isoflow, hoạt động cả khi ngoại tuyến mà không cần cài đặt, đồng thời cung cấp nhiều tính năng như bảo vệ quyền riêng tư, tự động lưu, Import/Export dễ dàng
• Lưu toàn bộ dữ liệu trong bộ nhớ cục bộ của trình duyệt, có thể tự do chia sẻ và sao lưu sơ đồ dưới dạng tệp JSON
• Hỗ trợ hosting tĩnh như GitHub Pages, Netlify, có thể sử dụng đầy đủ tính năng PWA trong môi trường HTTPS

---

Tổng quan về OpenFLOW và giá trị của dự án

• OpenFLOW là PWA (Progressive Web App) mã nguồn mở miễn phí hữu ích cho nhà phát triển và chuyên gia IT khi trực quan hóa thiết kế hạ tầng và cấu trúc mạng
• So với các công cụ cạnh tranh, có thể làm việc nhanh và an toàn trên máy cục bộ, đồng thời sử dụng được tính năng ngay cả khi không có kết nối mạng
• Sử dụng engine Isoflow để tạo các sơ đồ phong cách 3D đẹp mắt, đồng thời đảm bảo quyền riêng tư mạnh mẽ vì mọi dữ liệu không bị gửi tới máy chủ bên ngoài
• Nhờ UI trực quan, tự động lưu, import/export và các tính năng tiện lợi cho công việc thực tế, nhiều nhóm và cá nhân có thể dễ dàng tài liệu hóa mạng và kiến trúc
• Yêu cầu môi trường phát triển thấp, có thể bắt đầu làm việc ngay chỉ với trình duyệt web mà không cần cài đặt đặc biệt

Tính năng chính

• Tạo sơ đồ isometric: trực quan hóa mạng, hệ thống, sơ đồ kỹ thuật với cảm giác 3D
• Tự động lưu: nội dung công việc được tự động lưu mỗi 5 giây
• Bảo vệ quyền riêng tư: dữ liệu chỉ được lưu cục bộ trong trình duyệt (giới hạn 5~10MB)
• Import/Export: hỗ trợ chia sẻ và sao lưu sơ đồ bằng tệp JSON
• Chế độ ngoại tuyến: có thể dùng toàn bộ tính năng mà không cần Internet
• Khởi chạy nhanh: có thể cài đặt và chạy dưới dạng PWA

Triển khai và hosting

• Hosting tĩnh: triển khai thư mục build lên GitHub Pages, Netlify, Vercel, AWS S3, v.v.
• Bắt buộc HTTPS: cần HTTPS để PWA hoạt động bình thường (ngoại trừ môi trường cục bộ)
• Khuyến nghị sao lưu định kỳ: với công việc quan trọng, hãy export ra JSON để sao lưu

Tech stack

• React, TypeScript, Isoflow, PWA

Trình duyệt tương thích

• Chrome/Edge (khuyến nghị), Firefox, Safari, hỗ trợ PWA trên di động

Mã nguồn mở và đóng góp

• Phiên bản cộng đồng của Isoflow (giấy phép MIT) + OpenFLOW (Unlicense)
• Bất kỳ ai cũng có thể tự do sử dụng, chỉnh sửa và phân phối

[GN⁺]

Ý kiến trên Hacker News

• Giải thích rằng đang dùng Mermaid.js vì dù không thích giao diện, cú pháp khó và khá nhiều lỗi, đây vẫn là một trong những công cụ vẽ sơ đồ được hỗ trợ tốt nhất trong các static site generator; đồng thời bày tỏ hy vọng sẽ thật tuyệt nếu sơ đồ Isoflow cũng có thể được nhúng vào Markdown dễ dàng như vậy
  • Cảm ơn vì ý kiến thú vị, dự định sẽ thêm vào danh sách TODO
  • Ý tưởng của mermaid tự thân là tốt, nhưng cú pháp quá phức tạp và việc tích hợp với các công cụ như GitLab lại không ổn định
  • Có chức năng tích hợp với Markdown sẽ mang lại lợi ích lớn hơn nhiều cho người dùng
• Đề xuất sẽ rất hay nếu dùng Isoflow cùng với Styus; Stylus là một home-state server nhẹ tự động thay đổi CSS class, đồng thời chia sẻ liên kết liên quan https://github.com/mmastrac/stylus, và bày tỏ kỳ vọng rằng nó sẽ tương thích tốt với thư viện Isoflow
• Chia sẻ rằng luôn thích các sơ đồ isometric xuất hiện trong sách của Clive Maxfield; nhiều sơ đồ mạch có cấu trúc phi phẳng (flip-flop, các lớp bán dẫn, kiến trúc FPGA, v.v.), và kinh nghiệm là khi thêm góc nhìn, thông tin trở nên bớt rối hơn, dễ hiểu hoặc dễ ghi nhớ hơn; đánh giá đây là cách thể hiện phù hợp với nhiều lĩnh vực kỹ thuật khác nhau, kèm liên kết https://www.clivemaxfield.com
• Lưu ý rằng gần đây Snowflake đã ra mắt một sản phẩm tên Openflow, nên có thể sẽ khó được tìm thấy; cần cân nhắc về tên gọi
  • Nhắc thêm rằng trong lĩnh vực mạng, cũng có một giao thức telemetry tên OpenFlow rất nổi tiếng, đồng thời chia sẻ liên kết liên quan https://en.wikipedia.org/wiki/OpenFlow
• Hỏi không rõ OpenFLOW được xây trên những gì của Isoflow, liệu Isoflow chẳng phải là phần cốt lõi nhất sao
  • Thực tế Isoflow đảm nhiệm 90% công việc; không hề che giấu gì cả, chỉ là không có sẵn một dạng có thể dùng trực tiếp từ community pack nên mới tự cung cấp như vậy
• Nhấn mạnh rằng họ chỉ bọc ISOFLOW Community Edition https://github.com/markmanx/isoflow để có thể thiết lập và chạy cực kỳ dễ dàng mà không cần thao tác đặc biệt; có thể xuất và nạp lại bản sao lưu JSON của sơ đồ nên về thực tế rất thuận tiện để tạo số lượng sơ đồ gần như không giới hạn, qua đó trực tiếp giải quyết hạn chế của bản community
  • Một người dùng không quen với Node.js hỏi rằng trong mã Isoflow, phần đồ họa của các biểu tượng phong cách 3D nằm ở đâu, có phải là các tệp SVG không, và liệu có thể thêm biểu tượng tùy chỉnh hay không
• Khen chất lượng sơ đồ; nhớ lại trước đây đã có dự án tương tự gặp khó trong việc kiếm tiền rồi phải dừng lại; vì dự án này là MIT OSS nên hiện tại có cảm giác thương mại hóa không phải mục tiêu chính; cũng phát hiện liên kết "Built with the Isoflow library" ở cuối trang bị lỗi 404 và đã báo lại https://github.com/isoflow/isoflow
  • Gần như toàn bộ công lao về thiết kế và biểu tượng đều thuộc về Isoflow; giải thích rằng Community Edition được cấu trúc để upsell sang bản Pro; hoàn toàn không có kế hoạch kiếm tiền, chỉ mong mọi người dùng vui vẻ; sẽ phản ánh ngay góp ý về liên kết sai
• Hỏi liệu có thể host trên GitHub Pages hay không và xin liên kết demo
  • Cung cấp liên kết demo trực tuyến chính thức của ISOFLOW https://codesandbox.io/p/sandbox/github/markmanx/isoflow
• Đánh giá đây là một ứng dụng thú vị và đưa ra phản hồi tích cực về việc chia sẻ thông tin chi tiết