Demo Mermaid Charts#

Astro 5.5 đã hỗ trợ tốt hơn cho các công cụ vẽ biểu đồ như Mermaid và D2. Dưới đây là một số ví dụ:

Flowchart#

1
graph TD
2
    A[Start] --> B{Is it working?}
3
    B -->|Yes| C[Great!]
4
    B -->|No| D[Debug]
5
    D --> B
6
    C --> E[Deploy]

Sequence Diagram#

1
sequenceDiagram
2
    participant User
3
    participant Astro
4
    participant Mermaid
5

6
    User->>Astro: Write markdown with mermaid code
7
    Astro->>Mermaid: Process mermaid block
8
    Mermaid->>Astro: Return SVG diagram
9
    Astro->>User: Display rendered page

Gantt Chart#

1
gantt
2
    title Dự án Astro với Mermaid
3
    dateFormat  YYYY-MM-DD
4
    section Planning
5
    Nghiên cứu           :done,    des1, 2025-01-01,2025-01-05
6
    Thiết kế             :done,    des2, 2025-01-06, 3d
7
    section Development
8
    Cài đặt Mermaid      :done,    dev1, 2025-01-10, 1d
9
    Test và demo         :active,  dev2, 2025-01-15, 2d
10
    section Deployment
11
    Deploy production    :         deploy, 2025-01-20, 1d

Class Diagram#

1
classDiagram
2
    class AstroProject {
3
        +String name
4
        +String version
5
        +Array plugins
6
        +configure()
7
        +build()
8
        +dev()
9
    }
10

11
    class MermaidPlugin {
12
        +render()
13
        +parse()
14
    }
15

16
    AstroProject --> MermaidPlugin : uses

Pie Chart#

1
pie title Thống kê sử dụng framework
2
    "React" : 42.7
3
    "Vue" : 23.1
4
    "Angular" : 15.2
5
    "Svelte" : 8.9
6
    "Astro" : 10.1

Các biểu đồ trên được render trực tiếp từ code blocks trong Markdown, nhờ vào cấu hình excludeLangs: ['mermaid'] và plugin rehype-mermaid.