Hướng dẫn cú pháp biểu đồ góc Mermaid.js

Biểu đồ góc là gì?

Một Biểu đồ góclà một công cụ trực quan chiến lược dùng để phân loại các mục vào bốn khu vực khác nhau dựa trên hai biến liên tục (ví dụ: Nỗ lực so với Tác động, hoặc Quan trọng so với Khẩn cấp). Bằng cách đặt các điểm dữ liệu lên mặt phẳng tọa độ 2D được chia bởi trục X và trục Y, bạn có thể phân biệt rõ ràng những “chiến thắng nhanh” ưu tiên cao với những “phân tâm” ưu tiên thấp hoặc những “cược chiến lược dài hạn”.

Với Mermaid.js, bạn có thể định nghĩa các góc của mình, tiêu đề trục và vị trí điểm dữ liệu bằng một khối khai báo đơn giản, cho phép bạn tạo ra các ma trận quyết định chuyên nghiệp ngay lập tức.

Hướng dẫn cú pháp chính: Các thành phần và cấu trúc

Để thiết kế một biểu đồ góc hợp lệ, chạy được hoàn toàn trong Mermaid, bạn phải thành thạo hệ tọa độ, gán nhãn trục và vị trí điểm dữ liệu.

1. Khởi tạo bảng vẽ góc

Bạn khởi tạo bảng vẽ biểu đồ góc ở dòng đầu tiên bằng cách sử dụng từ khóa quadrantCharttừ khóa. Sau đó, bạn xác định nhãn cho bốn góc của mình và tiêu đề cho trục X và trục Y.

quadrantChart
    title Ma trận ưu tiên dự án
    trục-x "Nỗ lực thấp" --> "Nỗ lực cao"
    trục-y "Tác động thấp" --> "Tác động cao"
    góc-1 "Cược chiến lược"
    góc-2 "Chiến thắng nhanh"
    góc-3 "Phân tâm"
    góc-4 "Dự án lớn"

2. Đặt các điểm dữ liệu

Bạn thêm các mục vào biểu đồ bằng cách cung cấp tên hiển thị của chúng, theo sau là tọa độ X và Y của chúng (chuẩn hóa từ 0 đến 1).

  • 0.0 là điểm bắt đầu của trục.
  • 1.0 là điểm kết thúc của trục.
quadrantChart
    title Ma trận Tác động so với Nỗ lực
    trục-x "Nỗ lực thấp" --> "Nỗ lực cao"
    trục-y "Tác động thấp" --> "Tác động cao"
    góc-1 "Cược chiến lược"
    góc-2 "Chiến thắng nhanh"
    góc-3 "Phân tâm"
    góc-4 "Dự án lớn"
    "Nhiệm vụ A": [0.2, 0.8]
    "Nhiệm vụ B": [0.7, 0.2]

Các thực hành tốt nhất cho việc lập bản đồ ma trận

  • Chuẩn hóa dữ liệu của bạn:Vì tọa độ Mermaid được thang đo từ 0.0 đến 1.0, hãy chuyển đổi các giá trị dữ liệu thô của bạn sang phạm vi phần trăm này trước khi nhập vào đoạn mã.
  • Nhãn trục rõ ràng:Luôn luôn bao gồm các nhãn trục mô tả rõ ràng, xác định rõ ràng các trục X và Y đại diện cho điều gì (ví dụ: “Chi phí” so với “ROI”). Một ma trận không có trục xác định chỉ là một biểu đồ phân tán ngẫu nhiên.
  • Giới hạn mật độ điểm:Nếu bạn có nhiều hơn 15-20 điểm trên một biểu đồ tứ phân, nó sẽ trở nên rối rắm và khó đọc. Nếu bạn có bộ dữ liệu lớn hơn, hãy cân nhắc chia nhỏ thành nhiều biểu đồ chủ đề khác nhau.

Ví dụ về biểu đồ tứ phân Mermaid.js trong thực tế

Ví dụ: Ma trận ưu tiên tính năng sản phẩm

Bản thiết kế chức năng này giúp các đội sản phẩm phân loại các tính năng dựa trên nỗ lực phát triển và tác động kinh doanh tiềm năng.

quadrantChart
    tiêu đề Ưu tiên tính năng sản phẩm
    trục-x "Nỗ lực thấp" --> "Nỗ lực cao"
    trục-y "Tác động thấp" --> "Tác động cao"
    tứ phân-1 "Cược dài hạn"
    tứ phân-2 "Thành công nhanh"
    tứ phân-3 "Ưu tiên thấp"
    tứ phân-4 "Sáng kiến lớn"
    "Login API": [0.1, 0.9]
    "Trình tùy chỉnh chủ đề": [0.8, 0.3]
    "Cổng thanh toán": [0.6, 0.8]
    "Chế độ tối": [0.2, 0.2]

Phân tích cú pháp:Bằng cách gán `[0.1, 0.9]` cho “Login API”, chúng ta đặt nó vào tứ phân góc trên bên trái (tác động cao, nỗ lực thấp), đánh dấu nó là một “thành công nhanh”. Điều này giúp các bên liên quan trực quan hóa ngay lập tức các ưu tiên trên lộ trình phát triển.

Lên đầu trang