Trình kết xuất đồ thị DOT

Ví dụ

Chọn ví dụ

Trình soạn thảo DOT

Loading...

Xem trước

Nhập mã DOT và nhấn nút kết xuất để xem trước

Mẹo: Kéo để di chuyển, cuộn để thu phóng

Hướng dẫn sử dụng

• DOT là ngôn ngữ mô tả đồ thị Graphviz
• Chọn từ ví dụ hoặc nhập mã DOT thủ công
• Nhấn nút "Kết xuất" để xem trước thời gian thực
• Xuất dưới dạng SVG hoặc PNG
• Tương tác: kéo chuột trái/phải để di chuyển, cuộn để thu phóng (bước 5%), nhấp vào phần trăm để đặt lại

Giới thiệu DOT

DOT là ngôn ngữ mô tả đồ thị của Graphviz, dùng để mô tả đồ thị, sơ đồ luồng, cấu trúc mạng, v.v. Đây là định dạng văn bản đơn giản mô tả các nút, cạnh và thuộc tính của chúng.

Cú pháp cơ bản

Đồ thị có hướng

digraph G {
  // Định nghĩa nút
  A [label="Start", shape=box];
  B [label="Process", shape=ellipse];
  C [label="End", shape=doublecircle];
  
  // Định nghĩa cạnh
  A -> B [label="Execute"];
  B -> C [label="Finish"];
}

Đồ thị vô hướng

graph G {
  // Định nghĩa nút
  Node1 [label="Server 1"];
  Node2 [label="Server 2"];
  Node3 [label="Database"];
  
  // Định nghĩa cạnh
  Node1 -- Node2;
  Node2 -- Node3;
  Node1 -- Node3;
}

Thuộc tính thường dùng

Thuộc tính	Mô tả	Ví dụ
label	Nhãn của nút hoặc cạnh	A [label="Start"]
shape	Hình dạng nút	box, circle, ellipse, diamond
color	Màu sắc	color="red"
style	Kiểu dáng	filled, dashed, dotted
rankdir	Hướng bố cục	TB (trên-xuống), LR (trái-phải)

Trường hợp sử dụng

• Kiến trúc phần mềm：Hiển thị các thành phần hệ thống và quan hệ
• Sơ đồ luồng：Mô tả quy trình và quyết định
• Cấu trúc mạng：Hiển thị thiết bị mạng và kết nối
• Sơ đồ trạng thái：Mô tả chuyển trạng thái
• Sơ đồ tổ chức：Hiển thị quan hệ nhóm/phòng ban

常见问题

Mối quan hệ giữa ngôn ngữ DOT và Graphviz là gì?

DOT là ngôn ngữ mô tả đồ thị, dùng văn bản để định nghĩa cấu trúc và thuộc tính. Graphviz là bộ công cụ mã nguồn mở kết xuất đồ thị DOT thành hình ảnh (như PNG, SVG). Công cụ này tích hợp engine Graphviz để bạn có thể kết xuất đồ thị DOT trực tuyến theo thời gian thực.

DOT hỗ trợ những loại đồ thị nào?

DOT hỗ trợ đồ thị có hướng (digraph, dùng -> cho cạnh) và đồ thị vô hướng (graph, dùng -- cho cạnh). Các engine bố cục phổ biến gồm dot (bố cục phân cấp), neato (bố cục lực), circo (bố cục vòng), và fdp (bố cục lực).

Làm sao để đổi kiểu nút trong đồ thị DOT?

Thêm thuộc tính trong ngoặc vuông khi định nghĩa nút, ví dụ A [shape=box, color=red, style=filled, fillcolor=lightblue]. Các shape thường dùng: box, circle, ellipse, diamond, record.

Đồ thị đã kết xuất có thể xuất ra định dạng nào?

Công cụ hỗ trợ xuất đồ thị đã kết xuất ra SVG và PNG. SVG là định dạng vector, phù hợp để in và chỉnh sửa tiếp; PNG là bitmap, phù hợp để nhúng trực tiếp vào tài liệu và trang web.