Mermaid: Hướng dẫn sử dụng Mermaid - Part 1

Mermaid là gì?

Mermaid là một công cụ vẽ sơ đồ và biểu đồ trực quan dựa trên JavaScript, sử dụng cú pháp lấy cảm hứng từ Markdown để tạo và chỉnh sửa các sơ đồ một cách linh hoạt. Với bản phát hành gần đây và sự hỗ trợ trực tiếp trên GitHub, Mermaid đã giúp loại bỏ nhu cầu chèn hình ảnh hoặc đoạn mã cứng trong phần văn bản. Bạn có thể chèn trực tiếp biểu đồ vào nội dung sử dụng cú pháp JavaScript. 

Ưu điểm

Tích hợp dễ dàng: Bạn có thể dùng trực tiếp trong các công cụ phổ biến như GitHub, GitLab, VS Code, v.v.

Dễ dàng tích hợp vào Blogger, Wordpress, website.

Hỗ trợ Visual Studio code và một số công cụ khác

Sử dụng online tại https://mermaid.live

Hỗ trợ nhiều loại sơ đồ: Flowchart, Sequence diagram, Gantt chart, Class diagram, Entity Relationship diagram, v.v. 

Các loại Diagram types hỗ trợ

Diagram Type	Mermaid Syntax	Description
Flowchart	graph TD / graph LR	Biểu đồ luồng – mô tả quá trình, điều kiện, luồng xử lý
Sequence Diagram	sequenceDiagram	Mô tả trình tự các bước và tương tác giữa các đối tượng
Class Diagram	classDiagram	Biểu đồ lớp – thể hiện các class, thuộc tính, phương thức
State Diagram	stateDiagram	Biểu đồ trạng thái – mô tả các trạng thái của hệ thống
Entity Relationship Diagram (ERD)	erDiagram	Mô hình hóa dữ liệu và quan hệ giữa các bảng
Gantt Chart	gantt	Biểu đồ tiến độ – lập kế hoạch dự án theo thời gian
Pie Chart	pie	Biểu đồ tròn – thể hiện tỉ lệ phần trăm
Requirement Diagram	requirementDiagram	Biểu đồ yêu cầu – mô tả các yêu cầu hệ thống
Git Graph	gitGraph	Biểu đồ git – mô tả commit, branch, merge trong git

Cài đặt Mermaid vào Blogger

Bạn vào Settings -> Themes -> Edit as HTML

Thêm đoạn code vào vào cuối template

<script crossorigin='anonymous' integrity='sha512-3EZqKCkk3nMLmbrI7mfry81KH7dkzy/BoDfQrodwLQnS/RbsVlERdYP6J0oiJegRUxSOmx7Y35WNbVKSw7mipw==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/mermaid.min.js'/>
    <script type='text/javascript'>
  var config = {
    startOnLoad: true
  };
  mermaid.initialize(config);
</script>

Để thêm Mermaid vào bài viết, bạn mở bài viết dưới dạng HTML và viết đoạn code trong thẻ pre

<pre class="mermaid">flowchart TD;
    A[Start] --> B[Process 1];
    B --> C[Process 2];
    C --> D[End];
</pre>

Một số cú pháp cơ bản

Cú pháp Mermaid được đặt trong đoạn code sau:

```mermaid
    your code goes here
    .
    .
    .

```

Trường hợp bạn sử dụng website mermaid.live thì không cần đặt code theo cú pháp như trên

Flow chart

```mermaid
flowchart TD;
    A[Start] --> B[Process 1];
    B --> C[Process 2];
    C --> D[End];
```

flowchart TD;
    A[Start] --> B[Process 1];
    B --> C[Process 2];
    C --> D[End];

Giải thích

flowchart: Từ khóa này báo hiệu rằng bạn đang tạo sơ đồ flowchart.

TD: Là hướng của sơ đồ, viết tắt của Top to Down (từ trên xuống dưới). Một số hướng khác bạn có thể sử dụng:

• TB: Top to Bottom – từ trên xuống (tương đương TD)
• BT: Bottom to Top – từ dưới lên
• RL: Right to Left – từ phải sang trái
• LR: Left to Right – từ trái sang phải

-->: Biểu diễn hướng mũi tên nối giữa các nút trong sơ đồ.

A[Start]: Tạo một nút (node) tên là A có nhãn hiển thị là "Start".

Dấu [] dùng để vẽ hình chữ nhật, biểu thị bước xử lý hoặc trạng thái.

Ví dụ: A --> B nghĩa là có mũi tên từ nút A đến nút B.

Ví dụ 2: Vẽ Cloud Native dùng Left right subgraph

```mermaid
flowchart TD
    subgraph Left[Monolithic]
        direction TB
        UI2["UI<br>(Giao diện người dùng)"] --> Logic["Logic nghiệp vụ<br>(Business Logic)"]
        Logic --> Data_Access["Tầng truy cập dữ liệu<br>(Data Access)"]
        Data_Access --> DB["Database"]
    end

    subgraph Right[Cloud Native / Microservices]
        direction TB
        UI1["UI<br>(Giao diện người dùng)"] --> API_Gateway["API Gateway"]
        
        API_Gateway --> Service_A["Service A<br>(Quản lý người dùng)"]
        API_Gateway --> Service_B["Service B<br>(Giỏ hàng)"]
        API_Gateway --> Service_C["Service C<br>(Thanh toán)"]
        
        Service_A --> DB_A["DB A"]
        Service_B --> DB_B["DB B"]
        Service_C --> DB_C["DB C"]
        
        MB["Message Broker"]

        Service_A -->|"Giao tiếp bất đồng bộ"| MB
        Service_B -->|"Giao tiếp bất đồng bộ"| MB
        Service_C -->|"Giao tiếp bất đồng bộ"| MB
    end
```

flowchart TD subgraph Left[Monolithic] direction TB UI2["UI
(Giao diện người dùng)"] --> Logic["Logic nghiệp vụ
(Business Logic)"] Logic --> Data_Access["Tầng truy cập dữ liệu
(Data Access)"] Data_Access --> DB["Database"] end subgraph Right[Cloud Native / Microservices] direction TB UI1["UI
(Giao diện người dùng)"] --> API_Gateway["API Gateway"] API_Gateway --> Service_A["Service A
(Quản lý người dùng)"] API_Gateway --> Service_B["Service B
(Giỏ hàng)"] API_Gateway --> Service_C["Service C
(Thanh toán)"] Service_A --> DB_A["DB A"] Service_B --> DB_B["DB B"] Service_C --> DB_C["DB C"] MB["Message Broker"] Service_A -->|"Giao tiếp bất đồng bộ"| MB Service_B -->|"Giao tiếp bất đồng bộ"| MB Service_C -->|"Giao tiếp bất đồng bộ"| MB end

Ví dụ 3: Tạo flowchart giải phương trình bậc 2

```mermaid
flowchart TD
    A([Bắt đầu]) --> B[Nhập a, b, c]
    B --> C[Tính $$\Delta = b^2 - 4ac$$]
    C --> D{delta > 0?}
    
    D -- Đúng --> E[Có 2 nghiệm phân biệt]
    E --> F[Áp dụng công thức]
    F --> F2["x_1, x_2 = (-b ± sqrt(\Delta)) / (2a)"]
    F2 --> Z([Kết thúc])
    
    D -- Sai --> G{$$\Delta == 0?$$}
    G -- Đúng --> H[Có nghiệm kép]
    H --> I[Áp dụng công thức]
    I --> I2["x_0 = -b / (2a)"]
    I2 --> Z
    
    G -- Sai --> J[Vô nghiệm]
    J --> Z
```

Để render công thức toán học đẹp hơn, bạn sử dụng thêm Katex

flowchart TD A([Bắt đầu]) --> B[Nhập a, b, c] B --> C[Tính $$\Delta = b^2 - 4ac$$] C --> D{$$\Delta > 0?$$} D -- Đúng --> E[Có 2 nghiệm phân biệt] E --> F[Áp dụng công thức] F --> F2["$$x_1, x_2 = \frac{(-b ± \sqrt(\delta))} {(2a)}$$"] F2 --> Z([Kết thúc]) D -- Sai --> G{$$\Delta == 0?$$} G -- Đúng --> H[Có nghiệm kép] H --> I[Áp dụng công thức] I --> I2["$$x_0 = -b / (2a)$$"] I2 --> Z G -- Sai --> J[Vô nghiệm] J --> Z

Cách viết công thức trong Mermaid bằng KaTeX

Mermaid hỗ trợ KaTeX bằng cú pháp \$\$...\$\$ bên trong dấu nháy của node

graph LR
  A["$$x^2$$"] --> B["$$\sqrt{x}$$"]

graph LR A["$$x^2$$"] --> B["$$\sqrt{x}$$"]

Để hiển thị x₁, x₂ (tức là chữ x với chỉ số dưới 1, 2) như trong toán học, bạn dùng ký hiệu LaTeX sau trong KaTeX hoặc Mermaid với KaTeX

A["$$x_1, x_2$$"]

flowchart TD A["$$x_1, x_2$$"]

Lưu ý:

• Luôn dùng dấu nháy " " quanh công thức để tránh lỗi.
• Dùng \$\$...\$\$ để hiển thị công thức dạng block.
• Các ký hiệu LaTeX như \sqrt{}, \frac{}, ^, _, \pi, v.v... đều dùng được.

 

ERD Diagram

Entity Relationship Diagram (ERD) là một dạng minh họa mối quan hệ của các thực thể/đối tượng (entity) trong một hệ thống. ERD chủ yếu được phát triển trong thiết kế cơ sở dữ liệu quan hệ (relational database) nhằm trực quan hóa các khái niệm và thiết kế mối quan hệ của các đối tượng trong cơ sở dữ liệu.

Định nghĩa Entity

erDiagram
    CITY
    STATE
    COUNTRY

erDiagram CITY STATE COUNTRY

Relationship

Một số ký hiệu relationship trong SQL Server

• O| - Zero or one
• || - One and only one
• O{ - Zero or many
• |{ - One or many

erDiagram
    COUNTRY
    STATE
    CITY
    COUNTRY ||--|{ STATE : "Has"
    STATE ||--|{ CITY : "Has"
    CITY ||--o| STATE : "Is capital of"
    CITY ||--o| COUNTRY : "Is capital of"

erDiagram COUNTRY STATE CITY COUNTRY ||--|{ STATE : "Has" STATE ||--|{ CITY : "Has" CITY ||--o| STATE : "Is capital of" CITY ||--o| COUNTRY : "Is capital of"

Thêm field vào table

Khi mới bắt đầu, bạn có thể chỉ vẽ sơ đồ ERD đơn giản với tên các bảng (entity) và quan hệ giữa chúng. Nhưng thực tế, để mô tả đầy đủ hơn cấu trúc dữ liệu trong hệ thống, bạn thường cần liệt kê các trường dữ liệu (fields) – còn gọi là cột (columns) hoặc thuộc tính (attributes) – của từng bảng.

 

erDiagram
  CITY {
    int city_id
    string name
    string state_abbreviation
  }

erDiagram CITY { int city_id string name string state_abbreviation }

Khi thiết kế cơ sở dữ liệu, khóa chính (Primary Key) và khóa ngoại (Foreign Key) là hai thành phần cực kỳ quan trọng giúp đảm bảo tính toàn vẹn dữ liệu.

erDiagram
  CITY {
    int city_id PK
    string name
    string state_abbreviation FK
  }

  STATE {
    string state_abbreviation PK
    string name
    int country_id FK
  }

  COUNTRY {
    int country_id PK
    string name
  }

  COUNTRY ||--|{ STATE : "Has"
  STATE ||--|{ CITY : "Has"
  CITY ||--o| STATE : "Is capital of"
  CITY ||--o| COUNTRY : "Is capital of"

erDiagram CITY { int city_id PK string name string state_abbreviation FK } STATE { string state_abbreviation PK string name int country_id FK } COUNTRY { int country_id PK string name } COUNTRY ||--|{ STATE : "Has" STATE ||--|{ CITY : "Has" CITY ||--o| STATE : "Is capital of" CITY ||--o| COUNTRY : "Is capital of"

Lưu ý: 

• PK: được viết sau tên cột chính.
• FK: được viết sau tên cột là khóa ngoại.
• Quan hệ giữa bảng dùng ký hiệu như:

• ||--|{: One-to-Many có ràng buộc
• ||--o|: One-to-One không bắt buộc (optional)

Một số ký hiệu Hy Lạp thông dụng (KaTeX)

Cú pháp	Hiển thị	Ý nghĩa thường gặp
\alpha	$$\alpha$$	Hệ số góc, góc
\beta	$$\beta$$	Hệ số beta trong thống kê
\gamma	$$\gamma$$	Tỉ lệ, hằng số gamma
\delta	$$\delta$$	Vi phân nhỏ, sai số
\Delta	$$\Delta$$	Phân biệt phương trình bậc hai
\theta	$$\theta$$	Góc
\lambda	$$\lambda$$	Giá trị riêng, bước sóng
\pi	$$\pi$$	Số Pi
\sigma	$$\sigma$$	Độ lệch chuẩn
\omega	$$\omega$$	Tần số góc

📌 Ghi Nhớ Nhanh Cú Pháp Mermaid

Cú Pháp	Ý Nghĩa
flowchart TD	Bắt đầu sơ đồ theo hướng từ trên xuống (Top-Down)
A[Text]	Tạo nút hình chữ nhật hiển thị "Text"
A(Rounded)	Tạo nút bo góc (thường dùng làm điểm bắt đầu/kết thúc)
A{Decision}	Tạo nút hình thoi (biểu diễn nhánh rẽ / điều kiện)
A --> B	Vẽ mũi tên từ node A đến node B
A --- B	Vẽ đường nối không mũi tên (liên kết logic)
A -->|Yes| B	Vẽ mũi tên có nhãn "Yes"

Tham khảo

https://www.freecodecamp.org/news/diagrams-as-code-with-mermaid-github-and-vs-code/