Chuyển tới nội dung chính

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

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
提示：鼠标拖拽移动、滚轮缩放

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
  • 交互：鼠标左/右键拖拽移动、滚轮缩放（5%步进）、点击百分比重置

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ínhMô tảVí dụ
labelNhãn của nút hoặc cạnhA [label="Start"]
shapeHình dạng nútbox, circle, ellipse, diamond
colorMàu sắccolor="red"
styleKiểu dángfilled, dashed, dotted
rankdirHướng bố cụcTB (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.
Chia sẻ công cụ này