Mermaid: Minh họa nhánh Git bằng Mermaid.js - Part 2

Giới thiệu

Trong quá trình làm việc với Git, đôi khi git log không đủ trực quan để hiểu các nhánh, commit, merge, rebase… Lúc này, Mermaid Git Graph là một công cụ tuyệt vời để vẽ sơ đồ trực quan từ Git history.

Mermaid là một công cụ dạng text-based để vẽ sơ đồ như flowchart, Gantt, sequence diagram… và đặc biệt, hỗ trợ cả gitGraph

Ví dụ thêm commit vào branch hiện tại

gitGraph
 commit
 commit
 commit

gitGraph commit commit commit

Switch branch và thêm 1 commit

gitGraph
 commit
 branch develop
 commit

gitGraph commit branch develop commit

Ví dụ

gitGraph
    commit id: "Init"
    branch feature/login
    checkout feature/login
    commit id: "Login UI"
    commit id: "Login Logic"
    checkout main
    merge feature/login

gitGraph commit id: "Init" branch feature/login checkout feature/login commit id: "Login UI" commit id: "Login Logic" checkout main merge feature/login

Chọn theme phù hợp cho gitGraph

Mermaid hỗ trợ nhiều theme để thay đổi phong cách hiển thị sơ đồ Git cho phù hợp với mục đích trình bày

Theme	Mô tả	Gợi ý sử dụng
default	Giao diện mặc định, màu sắc cân bằng, dễ đọc.	Phù hợp với hầu hết mọi tình huống: blog, tài liệu, slides.
dark	Nền tối, văn bản sáng – thích hợp với Dark Mode.	Trình chiếu, code editor nền tối (VS Code, Obsidian...)
neutral	Tông màu xám trung tính, đơn giản, không gây rối mắt.	Tài liệu kỹ thuật, PDF in ấn, wiki nội bộ.
forest	Màu xanh lá cây dịu nhẹ, tạo cảm giác thân thiện, tự nhiên.	Blog cá nhân, bài chia sẻ nhẹ nhàng.
base	Không style – nền trắng đen cơ bản.	Khi muốn tự custom CSS hoàn toàn theo style riêng.

Bạn có thể chọn theme ngay trong phần đầu sơ đồ

%%{ init: { "theme": "base" } }%%
gitGraph
    commit id: "Init"
    branch develop
    checkout develop
    commit id: "Feature A"
    checkout main
    merge develop

%%{ init: { "theme": "base" } }%% gitGraph commit id: "Init" branch develop checkout develop commit id: "Feature A" checkout main merge develop

Mermaid còn hỗ trợ themeVariables

%%{ init: { "theme": "base", "themeVariables": { "commitLabelColor": "#ff0000" } } }%%
gitGraph
    commit id: "Init"
    branch develop
    checkout develop
    commit id: "Feature A"
    checkout main
    merge develop

%%{ init: { "theme": "base", "themeVariables": { "commitLabelColor": "#ff0000" } } }%% gitGraph commit id: "Init" branch develop checkout develop commit id: "Feature A" checkout main merge develop

Bạn có thể thay đổi:

• Màu chữ (commitLabelColor)
• Màu đường (gitBranchLabelColor)
• Kiểu đường (lineWidth, fontSize, v.v.)

 

Ví dụ

Merege nhánh feature/login vào develop

%%{ init: { "theme": "base" } }%%
gitGraph
    commit id: "Init"
    branch develop
    checkout develop
    commit id: "Setup project"
    branch feature/login
    checkout feature/login
    commit id: "Login UI"
    commit id: "Login API"
    checkout develop
    merge feature/login

%%{ init: { "theme": "base" } }%% gitGraph commit id: "Init" branch develop checkout develop commit id: "Setup project" branch feature/login checkout feature/login commit id: "Login UI" commit id: "Login API" checkout develop merge feature/login

Note: 

• commit: tạo 1 commit mới
• branch: tạo nhánh mới
• checkout: chuyển sang nhánh khác

git merge --squash

%%{ init: { "theme": "base" } }%%
gitGraph
    commit id: "Init"
    branch feature
    checkout feature
    commit id: "Feature A"
    commit id: "Feature B"
    checkout main
    commit id: "Main progress"
    commit id: "Merge feature (squashed)"

%%{ init: { "theme": "base" } }%% gitGraph commit id: "Init" branch feature checkout feature commit id: "Feature A" commit id: "Feature B" checkout main commit id: "Main progress" commit id: "Merge feature (squashed)"

Những tính năng nâng cao

Custom Commit ID – Đặt tên tùy chỉnh cho commit

Bạn có thể đặt tên commit dễ hiểu thay vì mã SHA ngẫu nhiên, ví dụ:

gitGraph
  commit id: "Alpha"
  commit id: "Beta"
  commit id: "Gamma"

gitGraph commit id: "Alpha" commit id: "Beta" commit id: "Gamma"

Commit Types – Kiểu commit đặc biệt

Mermaid hỗ trợ 3 kiểu commit:

Commit Type	Mô tả	Symbol	Cách khai báo trong Mermaid
NORMAL	Kiểu commit mặc định	●	commit id: "X" hoặc type: NORMAL
REVERSE	rollback hoặc revert.	⊗	commit id: "Y" type: REVERSE
HIGHLIGHT	release, milestone.	█	commit id: "Z" type: HIGHLIGHT

gitGraph
 commit id: "Normal"
 commit id: "Reverse" type: REVERSE
 commit id: "Highlight" type: HIGHLIGHT

gitGraph commit id: "Normal" commit id: "Reverse" type: REVERSE commit id: "Highlight" type: HIGHLIGHT

Thêm tags

gitGraph
 commit
 commit id: "Release" tag: "v1.0.0"
 commit

gitGraph commit commit id: "Release" tag: "v1.0.0" commit

 

Cherry Pick

Là một cách để checkout 1 commit bất kỳ tại 1 branch được chỉ định về branch hiện tại

gitGraph
 commit id: "ZERO"
 branch develop
 commit id: "A"
 checkout main
 commit id: "ONE"
 checkout develop
 commit id: "B"
 checkout main
 cherry-pick id: "B"

gitGraph commit id: "ZERO" branch develop commit id: "A" checkout main commit id: "ONE" checkout develop commit id: "B" checkout main cherry-pick id: "B"

Tham khảo

Illustrating git Branching with Markdown & Mermaid.js

https://www.datacamp.com/tutorial/git-tag

Git Diagram - Mermaid Flow