Các tập tin đuôi .draw.io chỉ có thể được mở và sử dụng trên trang web hoặc chương trình dành riêng cho draw.io. Bài viết wikihow này sẽ hướng dẫn bạn cách mở một tập tin đuôi.draw.io. Các bước
Về bài wikiHow nàyTrang này đã được đọc 3.680 lần. Bài viết này đã giúp ích cho bạn?Draw.io là gì ? Sử dụng nó có khó không ? Ưu điểm của trang web : - Có thể lựa chọn một số khung đã được tạo sẵn giúp rút ngắn thời gian - Tạo khung khá thoải mái (tùy ý co giãn kích thước khung) - Điều chỉnh linh hoạt - Xuất, nhập file dễ dàng Nhược điểm : - Khó căn khung cho biểu đồ - Không thể reponsive được (không có dạng hiển thị khác trên màn hình mobile) - 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
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ảnnhư 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ạ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 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 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. Sau khi hoàn tất các bước trên thì bạn đã có 1 biểu đồ hiển thị trên website như ý muốn của mình, |