Hướng dẫn cú pháp sơ đồ thời gian Mermaid.js

Sơ đồ thời gian là gì?

Một Sơ đồ thời gian là một công cụ trực quan hóa theo thứ tự thời gian, được sử dụng để bản đồ các sự kiện hoặc cột mốc dự án dọc theo một trục thời gian tuyến tính. Trong khi biểu đồ Gantt xử lý các mối quan hệ phụ thuộc và thời lượng nhiệm vụ phức tạp, sơ đồ thời gian tập trung vào việc khi nào—cung cấp một bản tường thuật rõ ràng, dễ quan sát về sự phát triển của một dự án hoặc chu kỳ phát hành của một hệ thống.

Với Mermaid.js, bạn có thể định nghĩa sơ đồ thời gian của mình bằng định dạng văn bản đơn giản và phân cấp. Bộ xử lý sẽ tự động xử lý khoảng cách, định dạng ngày tháng hoặc nhãn thời kỳ, và căn chỉnh các dấu hiệu sự kiện dọc theo trục thời gian trung tâm.

Hướng dẫn cú pháp cốt lõi

Để thiết kế một sơ đồ thời gian hợp lệ và có thể chạy được, bạn phải xác định khoảng thời gian trục và ánh xạ các sự kiện vào các phần cụ thể.

1. Khởi tạo sơ đồ thời gian

Bạn khởi tạo bảng vẽ bằng cách sử dụng từ khóa timeline từ khóa. Cấu trúc được xây dựng bằng cách xác định các phần (chức năng như nhóm) và ánh xạ các sự kiện (hoặc ngày tháng) vào các phần đó.

timeline
    title Lịch sử phát triển hệ thống
    section 2025
        Q1 : Phát hành Alpha
    section 2026
        Q2 : Phát hành Beta

2. Thêm chi tiết vào các sự kiện

Bạn có thể thêm nhiều chi tiết vào một điểm thời gian duy nhất bằng cách sử dụng danh sách tách bởi dấu hai chấm. Điều này hữu ích để tóm tắt các kết quả chính hoặc số phiên bản liên quan đến một ngày tháng hoặc khoảng thời gian cụ thể.

timeline
    section Q3 2026
        Phát hành : v1.0.0
                : Cải tiến hiệu suất
                : Bản vá bảo mật

Ví dụ sơ đồ thời gian Mermaid.js thực tế: Bản đồ lộ trình phát hành sản phẩm

Bản thiết kế này mô phỏng bản đồ lộ trình sản phẩm kéo dài nhiều năm, nhóm các lần phát hành theo năm tài chính và làm nổi bật các sản phẩm chính cho mỗi chu kỳ.

lộ trình
    tiêu đề Bản đồ phát triển sản phẩm 2026-2027
    phần 2026
        Q1 : Giai đoạn Khám phá
           : Phỏng vấn các bên liên quan
        Q2 : Phát triển MVP
           : Thiết kế API cốt lõi
        Q3 : Phát hành bản Beta
           : Vòng phản hồi người dùng
    phần 2027
        Q1 : Ra mắt toàn diện
           : Mở rộng quy mô toàn cầu

Các thực hành tốt nhất cho lộ trình

• Giữ các danh mục ngắn gọn: Sử dụng phần để chỉ các nhóm cấp cao (như năm hoặc các giai đoạn chính), giữ cho các sự kiện thực tế ở dưới cụ thể và có thể hành động.
• Định dạng ngày tháng nhất quán: Đảm bảo các sự kiện trên lộ trình của bạn được sắp xếp theo thứ tự thời gian trong mã, vì động cơ Mermaid sẽ tuân theo trình tự trong script của bạn để xác định vị trí bố cục.
• Sử dụng chi tiết để cung cấp bối cảnh: Đừng làm quá tải trục trung tâm bằng quá nhiều văn bản. Sử dụng định dạng sự kiện nhiều dòng để phân tích chi tiết ‘điều gì đã xảy ra’ thay vì làm nhãn ngày tháng quá dài.