draw.io tự lưu trữ để chuẩn hóa sơ đồ quy trình cho shop thời trang trên sàn TMĐT
Đăng ngày 12/10/2026
Mục lục bài nghiên cứu
draw.io: trình soạn sơ đồ chạy trên trình duyệt, dùng khi nào và không dùng khi nào
draw.io là một ứng dụng vẽ sơ đồ và bảng trắng có thể cấu hình, do draw.io Ltd (trước đây tên JGraph) và draw.io AG cùng sở hữu và phát triển. Chính kho mã này mô tả mình là trình soạn thảo JavaScript chạy phía máy khách, và nhóm tác giả còn chạy một bản triển khai production tại app.diagrams.net. [1] Với doanh nghiệp nhỏ, điểm đáng chú ý là mã nguồn của trình soạn thảo được cấp theo Apache License 2.0, nên có thể tự đặt trên máy chủ nội bộ mà không phải gửi bản vẽ ra dịch vụ bên ngoài. [1][2]
Khuyến nghị của bài là cân nhắc draw.io khi một tổ chức cần chuẩn hóa tài liệu quy trình, sơ đồ hệ thống hoặc mặt bằng đơn giản và muốn giữ tệp vẽ trong tầm kiểm soát của mình. Không nên kỳ vọng nó thay thế công cụ làm việc nhóm theo thời gian thực: README nói rõ phiên bản trong kho hiện chưa hỗ trợ đồng soạn thảo thời gian thực. [1]
Cũng cần nhớ rằng đây là dự án mà nhóm lõi tự phát triển và không nhận pull request từ bên ngoài. [1] Hệ quả thực tế là doanh nghiệp dùng bản tự lưu trữ sẽ phải bám theo bản phát hành mới của nhóm tác giả thay vì trông chờ một cộng đồng vá lỗi song song.
Sơ đồ nằm rải rác trong slide, ảnh chụp màn hình và đầu nhân viên cũ
Ở nhiều doanh nghiệp, quy trình vận hành được ghi bằng ảnh chụp màn hình dán vào tệp trình chiếu, hoặc nằm trong trí nhớ của người làm lâu năm. Khi người đó nghỉ việc, sơ đồ không còn ai biết sửa. Vấn đề ở đây không phải thiếu công cụ vẽ, mà là thiếu một định dạng tệp mở, sửa được và có thể đặt vào kho tài liệu chung.
draw.io giải quyết một phần của vấn đề đó bằng cách cung cấp trình soạn thảo đa mục đích, chạy ngay trong trình duyệt và có thể phục vụ như một trang web tĩnh. README liệt kê ba cách chạy: tách nhánh kho mã rồi xuất bản lên GitHub Pages để có trình soạn thảo đầy đủ nhưng không có các tích hợp, dùng ảnh Docker chính thức, hoặc tải bản draw.io Desktop. [1]
Cần phân biệt phạm vi. Dự án tự nhận là ứng dụng vẽ sơ đồ và bảng trắng, không phải trình soạn SVG, và đầu ra SVG nhằm nhúng vào trang web chứ không để sửa tiếp bằng công cụ khác. [1] Nếu nhu cầu thật của đơn vị là thiết kế đồ họa, lựa chọn này sẽ không phù hợp.
Hai tầng mã trên nền mxGraph: lõi trình soạn thảo và lớp ứng dụng draw.io
Tài liệu hướng dẫn dành cho người đóng góp trong thư mục mã nguồn cho thấy cách chia lớp khá rõ. Tầng grapheditor là lớp trình soạn thảo chung xây trên thư viện mxGraph, và quy ước ghi trong tài liệu là tầng này không được tham chiếu tới lớp diagramly. Các tệp chính gồm Editor.js, EditorUi.js, Graph.js, Sidebar.js, Format.js và Shapes.js, lần lượt lo phần lõi, khung giao diện, đồ thị, bảng hình mẫu, bảng định dạng và các hình dạng. [5]
Tầng diagramly là lớp ứng dụng riêng của draw.io, kế thừa và ghi đè các nguyên mẫu của grapheditor. Tài liệu nêu App.js là ứng dụng chính, DrawioFile.js là phần trừu tượng hóa tệp, Pages.js xử lý nhiều trang trong một tệp, Settings.js giữ cấu hình và GraphViewer.js là trình xem chỉ đọc. [6] Có thể hiểu đơn giản: tầng dưới biết vẽ và sắp xếp đối tượng, tầng trên biết mở, lưu, nhập và đóng gói thành một sản phẩm.
Đường đi của một bản vẽ: từ thao tác kéo thả đến tệp được lưu
Khi người dùng kéo một hình vào trang, thao tác được ghi vào mô hình đồ thị của mxGraph. Tài liệu lõi mô tả quy ước rằng những thay đổi hình học trực tiếp phải nằm giữa beginArrange và endArrange để phát tín hiệu cellsArranged, nhờ đó bộ định tuyến libavoid biết cần tính lại đường nối. Các thay đổi kiểu dáng ngoài bảng định dạng cũng đi qua cặp lệnh này. [5] Với người dùng cuối, điều đó nghĩa là đường nối tự bám theo khi họ di chuyển hình.
Phần lưu trữ thuộc lớp ứng dụng. Tài liệu lớp diagramly cho biết mỗi nhà cung cấp lưu trữ đám mây có cặp tệp Client và File riêng: Google Drive, Dropbox, OneDrive, GitHub, GitLab và Trello. [6] README lại ghi rằng bản chạy trên GitHub Pages là trình soạn thảo đầy đủ nhưng không có các tích hợp. [1] Vì vậy, nếu doanh nghiệp tự chạy và không cấu hình các tích hợp, nên giả định rằng dữ liệu bản vẽ đi qua thao tác mở và lưu tệp thủ công, rồi kiểm chứng giả định đó trước khi đưa vào quy trình.
Khi cần chia sẻ chỉ để xem, GraphViewer.js là trình xem chỉ đọc, và đầu ra SVG được thiết kế để nhúng vào trang web. [1][6] Một luồng hợp lý là vẽ bằng trình soạn thảo, lưu tệp nguồn vào kho tài liệu có phân quyền, rồi xuất bản bản xem cho người không có quyền sửa.
Những gì tài liệu xác nhận được về tính năng
Trước hết là phạm vi sản phẩm: README gọi draw.io là ứng dụng vẽ sơ đồ và bảng trắng có thể cấu hình, hỗ trợ danh sách trình duyệt cụ thể như Chrome 123 trở lên, Firefox 120 trở lên, Safari 17.5 trở lên và Edge 123 trở lên. [1] Đây là điều kiện đầu vào đáng ghi vào checklist nếu máy tính trong xưởng hoặc cửa hàng còn cũ.
Tài liệu lớp diagramly liệt kê thêm nhiều khả năng ở mức mã nguồn: hơn sáu mươi bộ hình mẫu trong thư mục sidebar, bộ mã hóa Visio ở thư mục vsdx, phần nhập từ Lucidchart, VSDX và Gliffy trong Extensions.js, giao diện Minimal cho chủ đề phác thảo, ELK để sắp xếp bố cục tự động và libavoid để định tuyến đường nối. [6]
Về giới hạn đã được xác nhận: chưa có đồng soạn thảo thời gian thực trong phiên bản này, dự án không nhận pull request và dự án không phải trình soạn SVG. [1] Tệp DiffSync.js được ghi chú là phần diff và patch phục vụ cộng tác, nhưng nguồn đọc được không đủ để kết luận nó biến bản tự lưu trữ thành công cụ cộng tác nhiều người cùng lúc, nên bài không khẳng định điều đó. [1][6]
Ai nên cân nhắc, ai nên bỏ qua
Nhóm phù hợp nhất là các đội cần tài liệu hóa quy trình và sơ đồ kỹ thuật nhưng không muốn trả phí theo người dùng hoặc không muốn dữ liệu sơ đồ rời khỏi hạ tầng của mình. Ví dụ thường gặp là bộ phận vận hành, kế toán nội bộ, đội phần mềm nhỏ, trường học và các agency cần bản vẽ giải pháp gửi khách.
Nên bỏ qua nếu nhóm bạn cần nhiều người cùng chỉnh một bản vẽ và thấy con trỏ của nhau ngay lập tức, nếu cần chỉnh sửa đồ họa vector tự do, hoặc nếu quy định nội bộ bắt buộc có nhà cung cấp cam kết thỏa thuận mức dịch vụ. [1] Bản mã nguồn mở này không đi kèm cam kết như vậy trong các tài liệu đã đọc.
Tình huống giả định: shop thời trang bán trên sàn thương mại điện tử vẽ lại quy trình đơn hàng
Hãy hình dung một shop thời trang quy mô vừa, bán trên một vài sàn thương mại điện tử và có kho riêng ở ngoại thành. Đây là tình huống giả định để phân tích, không phải trường hợp đã triển khai. Khó khăn thường gặp là quy trình xử lý đơn nằm trong tin nhắn nhóm: ai đóng gói, ai kiểm tra size, đơn đổi trả đi theo đường nào, hàng lỗi để ở đâu. Nhân viên thời vụ vào mùa sale phải học lại từ đầu mỗi lần.
Đề xuất là dựng một bản draw.io tự lưu trữ và vẽ ba nhóm sơ đồ. Nhóm đầu là lưu đồ xử lý đơn từ lúc nhận trên sàn đến lúc bàn giao cho đơn vị vận chuyển. Nhóm thứ hai là lưu đồ đổi trả và hoàn tiền, ghi rõ ai quyết định ở mỗi nhánh. Nhóm thứ ba là sơ đồ mặt bằng kho với vị trí kệ theo dòng sản phẩm. Các bản vẽ được lưu thành tệp trong thư mục chung, mỗi tệp có người chịu trách nhiệm cập nhật. [1][5]
Để đưa hướng dẫn tới người đóng gói, tổ vận hành xuất hình sang SVG hoặc ảnh và dán lên bảng điện tử hay trang nội bộ, vì README nói đầu ra SVG phù hợp để nhúng vào web. [1] Quy tắc quan trọng là sơ đồ trên tường phải có ngày cập nhật. Dự án draw.io không giải quyết việc đồng bộ với hệ thống quản lý đơn của từng sàn; sơ đồ ở đây chỉ là tài liệu quy trình, không tự động hóa đơn hàng.
Triển khai và vận hành: ba cách chạy và việc giữ phiên bản mới
Ba lối vào README nêu, gồm GitHub Pages, ảnh Docker chính thức và bản Desktop, tương ứng ba mức nỗ lực. GitHub Pages chỉ phù hợp khi tệp tĩnh được phép công khai, điều mà nhiều doanh nghiệp không muốn. Ảnh Docker nằm ở kho khác của cùng tổ chức nên cần đọc riêng tài liệu của kho đó, nằm ngoài phạm vi các tệp đã đọc ở đây. [1] Bản Desktop thích hợp cho vài máy lẻ không có máy chủ.
README cũng cho biết có gói .war trên trang phát hành, tức là còn lựa chọn chạy trên một máy chủ ứng dụng Java. [1] Tài liệu lớp diagramly còn mô tả cơ chế kênh phát hành dựa trên đăng ký service worker, với kênh ổn định tách riêng, và cảnh báo không được đổi cách tạo khóa bộ nhớ đệm. [6] Điều đó gợi ý người vận hành cần chú ý bộ nhớ đệm của trình duyệt sau mỗi lần nâng cấp, nhưng bài chưa kiểm tra hành vi thực tế.
Về nâng cấp, chính sách bảo mật yêu cầu bản tự lưu trữ luôn được cập nhật vì nhóm không vá ngược cho phiên bản cũ. [3] Quy trình đề xuất: ghi lại phiên bản đang chạy, đặt lịch xem bản phát hành hằng tháng, thử bản mới trên một máy riêng trước, rồi mới thay bản chính.
Bảo mật và quyền riêng tư: dữ liệu vẽ ở đâu và báo lỗi thế nào
Điểm mạnh về quyền riêng tư của mô hình chạy phía máy khách là bản vẽ có thể được mở và sửa mà không cần gửi tới máy chủ của nhà phát triển, nếu bạn tự phục vụ ứng dụng. README mô tả trình soạn thảo là ứng dụng phía máy khách, nhưng không đưa ra cam kết bằng văn bản về mọi luồng dữ liệu khi bật các tích hợp. [1] Vì vậy hãy kiểm tra lưu lượng mạng của bản triển khai trước khi cho phép đưa sơ đồ nhạy cảm vào.
Chính sách bảo mật nêu rõ chỉ nhận báo cáo với phiên bản mới nhất trong kho hoặc bản đang chạy ở app.diagrams.net, không vá ngược, và đề nghị báo lỗi riêng tư qua tính năng advisory của GitHub thay vì mở issue công khai. Tích hợp PlantUML và trang www.drawio.com nằm ngoài phạm vi. [3] Nếu bạn dùng PlantUML, hãy xem nó là thành phần cần đánh giá bảo mật riêng.
Về phía doanh nghiệp, cần phân quyền ở nơi lưu tệp vì trình soạn thảo không thay thế hệ thống kiểm soát truy cập. Với sơ đồ mạng nội bộ hay sơ đồ có địa chỉ, tài khoản, hãy xếp loại tài liệu như mọi tài liệu mật khác. Đây là khuyến nghị quản trị, không phải tính năng xác nhận trong nguồn.
Giấy phép: Apache 2.0 cho mã, điều kiện riêng cho biểu tượng và hình mẫu
Tệp LICENSE tại commit đã ghim là văn bản Apache License 2.0, và README xác nhận mã nguồn trong kho được cấp theo giấy phép này. [1][2] Giấy phép Apache cho phép dùng, sửa và phân phối kèm điều kiện giữ thông báo bản quyền và nêu thay đổi; đó là nội dung chuẩn của văn bản, và đơn vị triển khai thương mại nên để luật sư rà soát trước khi phân phối lại.
Điểm cần đọc kỹ nằm ở README: bộ biểu tượng và thư viện hình mẫu có điều khoản riêng, cấm dùng làm tài sản phần mềm trong sản phẩm của Atlassian hoặc sản phẩm phân phối qua chợ ứng dụng của họ nếu chưa có văn bản cho phép. Hạn chế này không áp dụng cho đầu ra của người dùng cuối như ảnh hoặc tài liệu xuất ra. [1] README cũng nói không đòi quyền tác giả với sơ đồ do người dùng tạo. [1]
Thương hiệu tách khỏi giấy phép mã: README ghi draw.io là nhãn hiệu đã đăng ký tại EU và yêu cầu xin phép trước khi dùng tên hoặc logo theo cách gợi ý liên kết hoặc bảo trợ. [1] Giấy phép này chỉ bao phủ mã tại commit được ghim, không bao phủ dịch vụ app.diagrams.net, các tích hợp bên thứ ba hay thư viện phụ thuộc có giấy phép riêng.
Chi phí và nguồn lực: phần mềm miễn phí, thời gian vận hành thì không
Mã nguồn được cấp phép miễn phí nên khoản chi chính không nằm ở giấy phép mà ở thời gian con người. Bài không nêu số tiền vì không có nguồn đã đọc cho chi phí cụ thể. Các loại nguồn lực gồm một người quản trị bán thời gian để dựng và nâng cấp, một máy chủ nhỏ hoặc dịch vụ lưu trữ tệp tĩnh, dung lượng lưu trữ và sao lưu cho tệp vẽ, và thời gian đào tạo người dùng.
Nếu chỉ dùng bản Desktop, khoản chi hạ tầng gần như bằng không nhưng đổi lại là phân tán: mỗi máy một phiên bản, rất khó đảm bảo mọi người cùng cập nhật theo yêu cầu của chính sách bảo mật. [1][3] Nếu tự phục vụ, chi phí chuyển sang theo dõi bản phát hành và kiểm thử sau nâng cấp. Dịch vụ app.diagrams.net do nhóm tác giả chạy có thể có điều khoản riêng; nguồn đã đọc không có bảng giá nên bài không so sánh. [1]
So sánh theo hướng tiếp cận: soạn sơ đồ tự lưu trữ, dịch vụ đám mây, bảng trắng cộng tác, mã hóa sơ đồ
Hướng thứ nhất là dịch vụ vẽ sơ đồ trên đám mây có thuê bao, như các sản phẩm bảng trắng cộng tác phổ biến. Ưu điểm chung của nhóm này là cộng tác thời gian thực và không phải tự vận hành, nhược điểm là dữ liệu và chi phí nằm ở bên thứ ba. draw.io phù hợp hơn khi ưu tiên kiểm soát tệp và không cần cộng tác trực tiếp. [1]
Hướng thứ hai là vẽ bằng văn bản rồi sinh sơ đồ, ví dụ Mermaid hay PlantUML. Cách này dễ quản lý phiên bản bằng git, nhưng người không biết lập trình khó dùng. Tài liệu lớp diagramly cho thấy draw.io có hỗ trợ chèn Mermaid, còn tích hợp PlantUML bị loại khỏi phạm vi chính sách bảo mật, nên có thể kết hợp hai cách, nhưng cần đánh giá riêng. [3][6]
Hướng thứ ba là bộ công cụ văn phòng có sẵn hình khối, đủ cho sơ đồ đơn giản. Nó thuận tiện vì ai cũng có, song khó chuẩn hóa thư viện hình và khó nhúng vào web.
Hạn chế và những trường hợp không nên dùng
Hạn chế đầu tiên là thiếu đồng soạn thảo thời gian thực trong phiên bản kho này. Hai người sửa cùng một tệp ở hai nơi sẽ tạo xung đột, vì vậy cần quy ước ai sở hữu tệp. [1] Thứ hai, nhóm tác giả không nhận pull request, nên nếu doanh nghiệp cần một tính năng riêng thì phải tự tách nhánh và gánh việc bảo trì. [1] Khi đó, hướng dẫn review mã của dự án, gồm mười nhóm tiêu chí như chức năng, bảo mật và kiểm thử, là khung tham khảo hữu ích. [4]
Thứ ba, chính sách bảo mật chỉ hỗ trợ bản mới nhất, nên tổ chức cần quy trình nâng cấp kỷ luật; nếu hệ thống bị khóa cố định ở một bản cũ vì lý do kiểm định, rủi ro nằm hoàn toàn ở phía bạn. [3] Thứ tư, một số hạn chế giấy phép của bộ biểu tượng cần kiểm tra nếu bạn định đóng gói chúng vào sản phẩm phần mềm. [1]
Không nên dùng khi bản vẽ chứa dữ liệu cực kỳ nhạy cảm mà chưa kiểm chứng luồng dữ liệu của bản triển khai, khi cần hỗ trợ có hợp đồng, hoặc khi nhân sự không có thời gian cập nhật.
Kế hoạch thử nghiệm bốn tuần với tiêu chí đo được
Giai đoạn một, tuần đầu: dựng một bản draw.io trên máy thử, ghi lại phiên bản, kiểm tra danh sách trình duyệt hỗ trợ trên máy của người dùng, và chọn năm quy trình quan trọng nhất của shop cần vẽ. Tiêu chí hoàn thành: người quản trị tạo, lưu và mở lại được tệp trên ít nhất ba loại thiết bị đang dùng thật. [1]
Giai đoạn hai, tuần hai và ba: vẽ các sơ đồ đã chọn, mỗi sơ đồ do chủ quy trình duyệt. Đo ba chỉ số do chính shop tự ghi: số sơ đồ hoàn thành so với kế hoạch, số lần nhân viên mới phải hỏi lại một bước trong quy trình sau khi đọc sơ đồ, và thời gian sửa một sơ đồ khi quy trình đổi. Đặt ngưỡng trước, ví dụ giảm số lượt hỏi lại so với mùa trước, nhưng con số cụ thể phải do shop chọn theo dữ liệu của mình.
Giai đoạn bốn, tuần cuối: rà soát bảo mật cơ bản, gồm kiểm tra lưu lượng mạng khi mở và lưu bản vẽ, thử khôi phục từ bản sao lưu, và xác nhận quy trình nâng cấp theo yêu cầu của chính sách bảo mật. [3] Tiêu chí dừng: nếu việc cộng tác trên cùng tệp gây xung đột thường xuyên hoặc người dùng bỏ không mở sơ đồ, quay lại cách làm cũ hoặc chọn công cụ cộng tác thay vì cố giữ draw.io.
Kết luận: công cụ vẽ nên là một mắt xích của kỷ luật tài liệu
draw.io đáng thử vì nó giải quyết một việc cụ thể bằng mã được cấp phép Apache 2.0 và có nhiều cách chạy, từ GitHub Pages đến Docker và bản Desktop. [1][2] Giá trị thật chỉ xuất hiện khi doanh nghiệp gắn nó vào một nếp làm việc: mỗi sơ đồ có người sở hữu, có ngày cập nhật, được lưu trong kho có phân quyền.
Những ràng buộc cần ghi nhớ gồm: chưa có đồng soạn thảo thời gian thực, dự án không nhận pull request, chỉ phiên bản mới nhất được hỗ trợ bảo mật, và bộ biểu tượng có điều khoản riêng. [1][3] Với một cá nhân hay nhóm xây hệ thống tri thức, chẳng hạn một kho nghiên cứu như phamvanthu.com, sơ đồ tự lưu trữ có thể là cách minh họa kiến trúc mà không phụ thuộc dịch vụ ngoài; đây là gợi ý ứng dụng, không có nghĩa là website đang dùng nó.
Bước tiếp theo hợp lý là chạy thử bốn tuần như trên với phạm vi nhỏ, so sánh với cách đang dùng và chỉ mở rộng khi các tiêu chí tự đặt đã đạt.
Nguồn và phương pháp nghiên cứu
Dự án được chọn từ một kho lưu độc lập các danh sách GitHub Trending theo ngôn ngữ, có lần quan sát đầu tiên ngày 01/02/2026 ở danh sách JavaScript. Kho lưu này chỉ bao phủ Python, Go, JavaScript và Swift, thiếu dữ liệu ngày 03/09 và 12/10, và không phải bảng xếp hạng Top 100 chính thức hay thống kê đầy đủ của GitHub. [7]
Đối chiếu kỹ thuật dùng README, LICENSE, SECURITY.md, hướng dẫn review mã và hai tệp CLAUDE.md mô tả lớp grapheditor và diagramly tại commit 9034053fba80a435e27d68d374bc564b83917ae9 của jgraph/drawio, kiểm tra ngày 12/10/2026. [1][2][3][4][5][6] Nội dung kho mã được coi là dữ liệu tham chiếu. Các tệp CLAUDE.md là tài liệu hướng dẫn nội bộ cho người phát triển nên mô tả có thể thay đổi giữa các bản.
Đây là nghiên cứu tài liệu có hỗ trợ AI, chưa cài đặt, chạy hay đo hiệu năng draw.io, và không phải bài báo khoa học được phản biện. Các phần tình huống Việt Nam, chi phí và kế hoạch thử nghiệm là phân tích và đề xuất.
Xem mã nguồn draw.io trên GitHub