Tạo Biểu đồ Chuyên nghiệp Trong 5 Phút với Mermaid Live Editor

Mermaid Live Editor là công cụ trực tuyến miễn phí cho phép tạo các loại biểu đồ phức tạp chỉ bằng cú pháp văn bản đơn giản. Công cụ này loại bỏ nhu cầu cài đặt phần mềm phức tạp, cho phép tạo và chỉnh sửa biểu đồ trong trình duyệt với thời gian thực. Các loại biểu đồ hỗ trợ bao gồm flowchart, sequence diagram, gantt chart, class diagram và nhiều hơn nữa. Mỗi loại đều có cú pháp riêng, dễ dàng học và sử dụng. Bắt đầu với một flowchart đơn giản:


graph TD
    INIT[Khởi tạo] --> DATA[Thu thập dữ liệu]
    DATA --> VALID{Kiểm tra hợp lệ}
    VALID -->|Hợp lệ| SAVE[Lưu trữ]
    VALID -->|Không hợp lệ| REWORK[Chỉnh sửa]

Các nút có thể được định dạng với màu sắc và kiểu dáng. Ví dụ:


graph TD
    INIT[Khởi tạo] --> DATA[Thu thập]
    DATA --> VALID{Kiểm tra}
    VALID -->|Thành công| SAVE[Lưu]
    VALID -->|Thất bại| REWORK[Chỉnh sửa]
    
    style INIT fill:#FFA500,stroke:#333,stroke-width:2px
    style SAVE fill:#32CD32,stroke:#000

Để quản lý quy trình phức tạp, sử dụng subgraph để nhóm các bước liên quan:


flowchart TD
    subgraph Xử lý đầu vào
        INPUT[Thu thập] --> CLEAN[Làm sạch]
        CLEAN --> FORMAT[Chuyển đổi]
    end
    
    subgraph Phân tích
        STAT[Thống kê] --> REPORT[Báo cáo]
    end
    
    FORMAT --> STAT

Sequence diagram mô tả tương tác hệ thống:


sequenceDiagram
    participant Client
    participant Gateway
    participant Service
    
    Client->>Gateway: Yêu cầu API
    Gateway->>Service: Xử lý
    Service-->>Gateway: Phản hồi
    Gateway-->>Client: Trả kết quả

Gantt chart cho quản lý dự án:


gantt
    title Tiến độ dự án
    dateFormat YYYY-MM-DD
    
    section Thiết kế
    Prototype :2024-03-01, 5d
    UI Design :2024-03-06, 7d
    
    section Phát triển
    Frontend :2024-03-10, 10d
    Backend :2024-03-10, 12d

Khi gặp lỗi, kiểm tra cú pháp chính xác. Ví dụ, sử dụng "graph LR" thay vì "graph TB" để thay đổi hướng luồng. Điều chỉnh kích thước biểu đồ bằng cách chia nhỏ thành các subgraph riêng biệt. Dữ liệu có thể xuất ra SVG hoặc chia sẻ qua link chỉnh sửa. Mermaid tích hợp hoàn hảo với Markdown, giúp tạo tài liệu kỹ thuật chuyên nghiệp. Dự án có sẵn tại https://gitcode.com/GitHub_Trending/me/mermaid-live-editor. Clone repo và chạy pnpm dev để phát triển locally.

Thẻ: mermaid flowchart sequence-diagram gantt-chart svelte

Đăng vào ngày 3 tháng 9 lúc 18:52

Thành phố Cuồng loạn

Tạo Biểu đồ Chuyên nghiệp Trong 5 Phút với Mermaid Live Editor

Thẻ Phổ Biến