Tạp chí Thợ Code

Được sự quan tâm của cộng đồng lớn về câu hỏi nên dùng gì để vẽ sơ đồ kiến trúc cho đẹp cho sịn sò. Nên mạn phép cuối tuần xin tranh thủ biên mấy dòng tổng hợp về một số công cụ dùng để vẽ các sơ đồ kỹ thuật kiến trúc chia sẻ cùng mọi người.

Nhìn chung ở thời điểm hiện tại có khá nhiều công cụ hỗ trợ cho việc này, đa phần đều là các web application hỗ trợ cross-platform, cái thì miễn phí trăm phần trăm, cái thì cho xài thử một thời gian, cái thì có miễn phí nhưng giới hạn…

Tuy rằng thị trường có nhiều công cụ nhưng thân thuộc nhất chắc phải kể đến Visio nằm trong bộ Office trứ danh một thời.

• Có phiên bản desktop truyền thống lẫn webapp hiện đại, tuy nhiên không có phiên bản nào miễn phí, muốn dùng thử chỉ có “dùng thuốc”.
• Rất phù hợp với các bạn đang sử dụng Office 365 (tuy nhiên phải mua thêm license vì không sẵn có trong các gói subscription thông dụng) vì có thể share, edit, comment ngay trong MS Teams.
• Tính năng Re-Layout Page khá thú vị giúp tự động gom gọn sơ đồ chỉ với một click.

• Các template/ icon được hãng chuẩn bị sẵn: https://support.microsoft.com/en-us/office/featured-visio-templates-and-diagrams-27d4274b-5fc2-4f5c-8190-35ff1db34aa5#p2-aws

Draw.io

Ứng viên thứ hai sau Visio chắc chắn phải kể đến là draw.io bởi vì miễn phí, cùng khả năng tích hợp với các dịch vụ cloud giúp cho việc đồng bộ hóa và chia sẻ rất dễ dàng nên đây gần như là lựa chọn hàng đầu của mọi người ngày nay.

• Khả năng bổ sung thêm các mẫu riêng, rất phù hợp cho những dự án lớn với các components được thiết kết sẵn dùng cho nhiều team. Hướng dẫn cụ thể tại đây:

• Hỗ trợ tạo các sơ đồ với luồng liên kết “động đậy được”: rất đơn giản, tại màn hình thiết kế chỉ cần vào menu Edit> Select Edges để chọn hết tất cả các cạnh, sau đó chọn vào checkbox Flow Animation trong panel Style bên phải là xong. Tuy nhiên, đáng buồn là Drawio hiện không hỗ trợ xuất file động như GIF hay các định dạng video. Bạn có thể giải quyết nhanh bằng tính năng File> Export as> URL để tạo ra một liên kết chia sẻ và sử dụng liên kết này cho hiển thị sơ đồ động hoặc thậm chí là chỉ cần capture màn hình là OK!

Excalidraw.com

Lâu lâu muốn tạo phong cách một chút hay là đổi gió thì tui vẫn hay sử dụng Excalidraw.com vì giao diện trực quan đơn giản, bản vẽ mặc định theo phong cách sketching, hand-draw

• Thú vị là Excalidraw.com còn cung cấp cả thư viện cho phép bạn có thể nhanh chóng tự xây dựng một ứng dụng tương tự, bạn có thể trải nghiệm demo chạy được tại https://codesandbox.io/p/github/excalidraw/excalidraw/master
• Giao diện rất đơn giản, chỉ tập trung vào việc vẽ, thành phẩm mang phong cách và cảm giác rất hand-made, nghệ nghệ.
• Các bộ icon về các techstack của các hãng lớn cũng được xây dựng lại cho phù hợp với phong cách sketching nên nhìn tổng thể rất hài hòa.
• Còn nếu xét về khía cạnh người dùng bình thường thì phiên bản miễn phí có vài bất tiện nhỏ như là không hỗ trợ đồng bộ hóa dữ liệu qua cloud storage, mặc dù vẫn có cơ chế cho phép thêm các mẫu/ icon riêng nhưng nếu được thêm vào thì sẽ public trên toàn hệ thống nên sẽ không phù hợp cho các dự án có tính chất cần bảo mật thông tin.

Cloudairy.com

Nói không ngoa thì chắc Cloudairy cũng góp công không nhỏ vào trào lưu “animated architecture diagram”, họ chia sẻ khá nhiều sơ đồ kỹ thuật kiến trúc được thiết kế đẹp mắt với nhiều hiệu ứng “động đậy” khác nhau. Giao diện cũng hết sức hiện đại và dễ dùng dù mới lần đầu sử dụng.

• Đẹp, nhìn rất sịn sò, rất là phong cách nhà táo!
• Có bản miễn phí để dùng trải nghiệm mà đăng ký không cần nhập thông tin credit card.
• Tính năng Export cũng không còn thiếu gì, thậm chí còn chi phép crop luôn chỉ export một vùng nào đó trên bản vẽ.

• Tính năng minimap như chơi game dàn trận chiến thuật vậy, rất hữu ích cho những bản vẽ rất lớn.
• Tài khoản miễn phí vẫn cho dùng AI Gen, có vẻ nói tiếng Việt vẫn hiểu, tui hết sức bất ngờ!

IcePanel.io

Là một công cụ khá đặc biệt vì hỗ trợ C4 Model, một kỹ thuật mô tả kiến trúc phần mềm một cách sinh động và hữu dụng để có thể giải thích thông tin cho nhiều đối tượng từ non-technical stackeholder cho đến technical stackeholder trong dự án.

C4 = Context + Container + Component + Code, với mỗi tầng sẽ có một cách biểu diễn khác nhau phù hợp với từng đối tượng khác nhau và IcePanel hỗ trợ liên kết rất mạnh để chúng ta có thể dễ dàng drill-down hoặc drill-up để dễ dàng giải thích các vấn đề kỹ thuật phức tạp.

• Hỗ trợ markdown cho phép bạn viết document luôn với các object trong sơ đồ.
• Cho phép sử dụng nhiều version khác nhau thể hiện việc phát triển theo thời gian của hệ thống.
• Tính năng xây dựng Flow rất tiện dụng và trực quan trong việc thể hiện một quy trình hay luồng dữ liệu sẽ được xử lý như thế nào.

Source: https://icepanel.io/

Textografo, SmartDraw, Zapier Canvas, Whimsical, FlowMapp, Venngage, Creately, FigJam, Mural, Lucidchart, Figma... nhiều quá không làm sao mà có thời gian xài thử. Chưa kể còn vô số công cụ mà AWS cũng có liệt kê tại mục Drawing and diagramming tools trên trang AWS architecture icons của hãng: https://aws.amazon.com/architecture/icons.

Mong nhận được các thảo luận chia sẻ và giới thiệu các tính năng hay ho ở những công cụ khác mà các bạn có dịp trải nghiệm qua.

PS. Thật ra chỉ hai bạn hỏi thôi nhưng mà sanh hoạt trong cộng đồng gần 41K thành viên nên đúng là cộng đồng lớn thật 😁

Biên soạn: Tí Dev. Hiệu đính & bắt lỗi chính tả: Anh Dũng.

Sài Gòn, một ngày cuối tuần không nắng cũng chẳng mưa.