Hướng dẫn làm phần mềm dưới dạng hình năm 2024

- Quản lí các thành phần chưa tốt lắm nên việc chuyển đổi màu sắc cùng lúc nhiều khối phải mất chút thời gian để chọn nhiều thành phần

- Xuất dưới các dạng như xml, html nhưng lại bị mã hóa

Các bước để tạo một biểu đồ trên trang draw.io Bước 1: Truy cập vào trang web https://www.draw.io/ Sau khi truy cập, trang web sẽ hỏi bạn tạo muốn tạo một biểu đồ mới hay mở lại biểu đồ mà bạn đã tạo từ trước đó, ở đây tôi sẽ tạo một biểu đồ mới để tiện cho việc hướng dẫn

Bước 2: Tạo biểu đồ Sau khi chọn "tạo biểu đồ mới" trang web sẽ đưa ra câu hỏi về loại biểu đồ bạn muốn, ở đây bạn có thể lựa chọn các loại biểu đồ có sẵn của trang web hoặc tạo một biểu đồ trống để làm từ đầu. Ngoài ra bạn cũng có thể nhập luôn tên và định dạng cho biểu đồ cần tạo từ đây ví dụ như: bieudoabc.html

Bước 3: Tạo biểu đồ bằng cách dùng công cụ của website

Trước khi bắt đầu tạo khối cho biểu đồ thì bạn cần chỉnh lại "Kích thước giấy" trước khi vẽ (vì đây là trang web thiết kế dành chủ yếu cho việc in ấn và hiển thị trên giấy chứ không phải dành cho website), do đó bạn nên quy đổi giá trị từ "pt" sang "px" để dễ thiết kế.

Ở đây có 1 trick để do kích thước thiết kế được chính xác bằng cách ấn vào chữ "Ảnh" cạnh nền và import vào đó 1 bức ảnh nhỏ có chiều dài (tính bằng px) như mong muốn, dựa vào nó bạn có thể chỉnh lại kích thước của khung giấy cho phù hợp

Sau khi đã có được kích thước như ý, việc tiếp theo bạn cần làm là sử dụng các công cụ có sẵn của website để tạo ra biểu đồ (hình dưới)

Phía trên đầu là khung điều chỉnh cơ bản như zoom to nhỏ, xóa...

Phía bên tay trái của màn hình là khối hình được tạo sẵn, bạn chỉ việc kéo vào và căn chỉnh cho đúng với ý muốn của mình. Bạn có thể mở các lớp khác để chọn hình dáng khung mà mình mong muốn

Giữa trang là khu vực vẽ chính : Để tạo liên kết giữa 2 khối chữ nhật chúng ta cần 1 đường kẻ để nối chúng với nhau, bạn chỉ việc chọn vào hình mũi tên ở khung phía bên trái thì sẽ được tự động thêm vào khung hình.

Tiếp đó bạn chọn vào đường mũi tên vừa hiển thị nó sẽ hiển thị các khớp (điểm) nối màu xanh da trời, nhấp vào ô màu xanh phía đuôi và kéo vào khung xuất phát "Nhập biểu đồ". Làm tương tự với khung thành phần 1 và ta sẽ có 1 đường nối liên kết 2 khung với nhau.

"Chú ý khi bạn kéo khớp nối màu xanh vào khung thì khung sẽ hiển thị các dấu x là vị trí bắt khớp của khung hình đó cùng với màu xanh lá cây tròn to để bạn dễ bắt khớp vị trí mong muốn"

Phía bên tay phải của màn hình là khung điều chỉnh các thuộc tính của khung hình, text và các đường nối (line) giữa các khung đó từ màu sắc đến hình dáng hiển thị của chúng

Để sử dụng các thành phần con trong biểu đồ được dễ dàng hơn bạn cần tới một công cụ quản lí đó là "Lớp". Để bật thành phần này bạn có thể chọn vào khung phía trên màn hình (chỗ 3 ô hình lồng nhau) hoặc ấn tổ hợp phím "Ctrl + Shift + L", khi đó màn hính sẽ hiển thị thêm 1 khung có tên là lớp.Bạn có thể thêm các lớp khác nhau (dấu cộng) để dễ quản lí hoặc add 1 khung thành phần nào đó vào lớp tương ứng (dấu mũi tên đi vào khung vuông)

Bước 4 : Lưu biểu đồ bạn vừa tạo

Bạn ấn vào "tập tin" và chọn "Lưu" (hoặc ấn Ctrl + S) lựa chọn này sẽ tự lưu trực tiếp file của bạn mà ko chỉnh sửa gì cả. Ngoài ra bạn có thể lựa chọn "Lưu dưới dạng" (hoặc ấn Ctrl + Shift + S), ở đây bạn có thể chỉnh sửa tiêu đề của biểu đồ và lựa chọn các vị trí lưu lại cho biểu đồ của mình Chú ý : Ở dạng save này bạn có thể điều chỉnh lại tên của tập tin cũng như định dạng của nó

Ngoài ra còn 1 cách khác để xuất ra dạng html và các dạng khác đó là "Xuất dưới dạng" (ở đây có rất nhiều dạng cho bạn chọn lựa).

Bước 5 : Hiển thị trên trang web Có nhiều người sẽ nghĩ chỉ việc cop code từ file vừa rồi và đưa vào trang web là được nhưng như đã nêu ở phần nhược điểm là trang web này sẽ mã hóa khối biểu đồ bạn vừa tạo và có hiển thị như sau trên trang web

Khi hiển thị sẽ có 1 bao khung, ấn vào sẽ như pop up bật ra hiển thị toàn hỉnh ảnh của biểu đồ mình vừa vẽ. Đối với những trang web không quan tâm lắm tới hiển thị này thì có thể để vậy tuy nhiên có những trang web không muốn cái khung hiển thị đó thì làm sao ?

Để có thể lọc ra được thành phần không bị bao khung thì cần bạn làm thêm 1 bước nữa :

Bạn mở file html (biểu đồ ) bạn vừa tạo trên 1 trình duyệt web bất kì (ở đây tôi chọn chrome)

Chỉ vào trong khung (cụ thể là thành phần tổng) ấn chuột phải chọn kiểm tra (hoặc ấn Ctrl + Shift + I)

Ở khung vừa mới hiển thị phía dưới, bạn kéo thanh cuộn lên trên và chọn dòng có chữ SVG ở đầu (ảnh dưới).

Tiếp đó đóng hình tam giác lại (trước chữ SVG) và chuột phải chọn "copy" -> "copyouterHTML" sau đó "paste" nội dung vừa mới copy vào 1 file html mới hoặc trực tiếp vào file nào bạn cần và save lại file đó, Fomat lại định dạng hiển thị của file html cho dễ nhìn nếu cần.