Git Graph
Biểu đồ Git là biểu diễn trực quan của các git commit và git thao tác trên các nhánh khác nhau.
Biểu đồ Git đặc biệt hữu ích cho nhà phát triển và đội vận hành, có thể dùng để chia sẻ chiến lược nhánh Git của họ.
Mermaid có thể kết xuất biểu đồ Git
Sao chép
Nhúng
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid hỗ trợ các thao tác git cơ bản, ví dụ:
- commit : biểu thị một commit mới trên nhánh hiện tại.
- branch : tạo và chuyển sang nhánh mới, đồng thời đặt nó làm nhánh hiện tại.
- checkout : chuyển sang một nhánh đã tồn tại và đặt nó làm nhánh hiện tại.
- merge : hợp nhất nhánh hiện có vào nhánh hiện tại.
Nhờ những thao tác Git này, bạn có thể vẽ biểu đồ Git trong Mermaid một cách rất dễ dàng và nhanh chóng. Tên thực thể thường bắt đầu bằng chữ cái viết hoa, mặc dù không có tiêu chuẩn được công nhận cho việc này, và trong Mermaid cũng không bắt buộc.
Lưu ý: checkout và switch có thể dùng thay thế cho nhau.
Cú pháp
Cú pháp Mermaid của biểu đồ Git rất trực tiếp và đơn giản. Nó áp dụng phương pháp khai báo, mỗi commit đều được vẽ trên trục thời gian của biểu đồ Git theo thứ tự xuất hiện trong mã. Về cơ bản, nó tuân theo thứ tự chèn của mỗi lệnh.
Trước tiên, dùng cú pháp gitGraph để khai báo loại biểu đồ của bạn. Cú pháp gitGraph cho Mermaid biết rằng bạn muốn vẽ biểu đồ Git, và phân tích mã biểu đồ tương ứng.
Mỗi biểu đồ Git đều được khởi tạo bằng nhánh main. Trừ khi bạn tạo các nhánh khác, theo mặc định các commit sẽ đi vào nhánh chính. Điều này xuất phát từ cách git hoạt động, khi bắt đầu bạn luôn bắt đầu từ nhánh chính. Theo mặc định, nhánh main được đặt làm nhánh hiện tại.
Bạn có thể dùng cú pháp commit để đăng ký một commit trên nhánh hiện tại, hãy xem điều này hoạt động như thế nào:
Một biểu đồ git đơn giản, hiển thị ba commit của nhánh mặc định main:
Sao chép
Nhúng
gitGraph
commit
commit
commit
Nếu quan sát kỹ ví dụ trước, bạn có thể thấy nhánh mặc định main cùng ba commit. Cũng xin lưu ý, theo mặc định, mỗi commit đều được gán một ID duy nhất và ngẫu nhiên.
Thêm ID commit tùy chỉnh
Đối với một commit, bạn có thể chỉ định ID tùy chỉnh bằng thuộc tính id khi khai báo, rồi thêm dấu hai chấm:, và ghi giá trị tùy chỉnh trong dấu ngoặc kép.
Hãy cùng xem hình dưới đây để hiểu nó hoạt động như thế nào:
Sao chép
Nhúng
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Thay đổi loại commit
Trong Mermaid, có ba loại commit, chúng được kết xuất hơi khác nhau trong biểu đồ. Các loại đó là:
- NORMAL : loại commit mặc định, được biểu diễn bằng hình tròn đặc
- REVERSE : nhấn mạnh commit là commit ngược, được biểu diễn bằng hình tròn đặc có dấu chéo.
- HIGHLIGHT : tô sáng commit cụ thể, được biểu diễn bằng hình chữ nhật đặc.
Đối với một commit đã cho, bạn có thể dùng thuộc tính type để chỉ định loại của nó khi khai báo, rồi theo sau là dấu hai chấm : và tùy chọn loại mong muốn đã thảo luận ở trên. Ví dụ: commit type:
Lưu ý: nếu không chỉ định loại commit, thì mặc định chọn NORMAL
Hãy cùng xem hình dưới đây để hiểu các loại commit khác nhau này diễn ra như thế nào:
Sao chép
Nhúng
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
Trong ví dụ này, chúng ta chỉ định loại khác nhau cho mỗi commit. Ngoài ra, hãy xem cách chúng ta bao gồm cả id và type cùng lúc khi khai báo commit.
Thêm nhãn
Đối với một commit đã cho, bạn có thể trang trí nó bằng tag, tương tự khái niệm nhãn hoặc phiên bản phát hành trong thế giới git. Bạn có thể gắn nhãn tùy chỉnh bằng thuộc tính tag khi khai báo commit, theo sau là dấu hai chấm:, và ghi giá trị tùy chỉnh trong dấu ngoặc kép.
Sao chép
Nhúng
gitGraph
commit
commit id: "Normal" tag: "v1.0.0"
commit
commit id: "Reverse" type: REVERSE tag: "RC_1"
commit
commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
commit
Trong ví dụ này, chúng ta đặt nhãn tùy chỉnh cho commit.
Tạo nhánh mới
Trong Mermaid, để tạo nhánh mới, bạn có thể dùng cú pháp branch. Bạn cũng cần cung cấp tên của nhánh mới. Tên phải là duy nhất, không thể là tên của nhánh hiện có.
Khi Mermaid đọc cú pháp branch, nó sẽ tạo một nhánh mới và đặt nó làm nhánh hiện tại. Tương đương với việc bạn tạo một nhánh mới trong biểu đồ Git và chuyển sang nhánh đó.
Sao chép
Nhúng
gitGraph
commit
commit
branch develop
commit
commit
commit
Trong ví dụ này, có thể thấy chúng ta bắt đầu từ nhánh main mặc định, và đẩy hai commit lên đó. Sau đó chúng ta tạo nhánh develop, và mọi commit sau đó đều được đặt trên nhánh develop, vì nó đã trở thành nhánh hiện tại.
Checkout nhánh đã có
Trong Mermaid, để chuyển sang nhánh đã có, có thể dùng cú pháp checkout, đồng thời bạn cũng cần cung cấp tên của nhánh đã có. Nếu không tìm thấy nhánh có tên chỉ định, sẽ gây lỗi trên bảng điều khiển. Ví dụ sử dụng: checkout develop
Khi Mermaid đọc cú pháp checkout, nó sẽ tìm thấy nhánh có tên chỉ định và đặt nó làm nhánh hiện tại. Điều này tương đương với việc checkout một nhánh trong Git.
Sao chép
Nhúng
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Trong ví dụ này, trước tiên chúng ta bắt đầu từ nhánh main mặc định, và đẩy hai commit lên đó. Sau đó chúng ta tạo nhánh develop, rồi cả ba commit đều được đặt trên nhánh develop, vì nó đã trở thành nhánh hiện tại. Sau đó, chúng ta dùng cú pháp checkout để đặt nhánh hiện tại thành main, mọi commit sau đó đều được ghi trên nhánh main.
Hợp nhất hai nhánh
Trong Mermaid, để hợp nhất hoặc kết nối với nhánh hiện có, bạn cần dùng cú pháp merge. Đồng thời, bạn cũng cần cung cấp tên của một nhánh hiện có cần hợp nhất. Nếu không tìm thấy nhánh có tên chỉ định, sẽ hiển thị lỗi trên bảng điều khiển. Ngoài ra, bạn chỉ có thể hợp nhất hai nhánh độc lập, không thể hợp nhất một nhánh với chính nó.
Ví dụ cú pháp: merge develop
Khi Mermaid đọc cú pháp merge, nó sẽ tìm thấy nhánh chỉ định và commit cuối của nó, rồi hợp nhất với commit cuối của nhánh hiện tại. Được biểu diễn bằng hai vòng tròn đặc.
Dưới đây là ví dụ hợp nhất hai nhánh:
Sao chép
Nhúng
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Trong ví dụ này, trước tiên bắt đầu từ nhánh main, và đẩy hai commit lên đó. Sau đó chúng ta tạo nhánh develop, và đẩy ba commit lên nhánh develop. Sau đó, chúng ta dùng cú pháp checkout để đặt nhánh hiện tại thành main, mọi commit sau đó đều được thực hiện đối với nhánh main. Cuối cùng, chúng ta hợp nhất nhánh develop vào nhánh main, từ đó tạo ra commit hợp nhất. Vì lúc này nhánh hiện tại vẫn là main, hai commit cuối đều được ghi trên nhánh đó.
Bạn cũng có thể thêm các thuộc tính tương tự cho việc hợp nhất của mình:
- id ghi đè ID mặc định bằng ID tùy chỉnh
- tag thêm nhãn tùy chỉnh vào commit hợp nhất
- type ghi đè loại mặc định của commit hợp nhất. Bạn có thể dùng các loại commit khác đã đề cập ở trên.
Sao chép
Nhúng
gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "customID" tag: "customTag" type: REVERSE
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
Hợp nhất chọn lọc commit từ nhánh khác
Mermaid hỗ trợ chọn một commit từ nhánh khác vào nhánh hiện tại. Bạn cũng có thể dùng cú pháp cherry-pick để chọn commit từ nhánh khác.
Để dùng cú pháp cherry-pick, bạn phải dùng thuộc tính id để chỉ định id, rồi viết id commit mà bạn muốn sau dấu hai chấm :, và bao nó bằng dấu ngoặc kép. Ví dụ:
Dưới đây là một số quy tắc quan trọng cần lưu ý:
- Bạn cần cung cấp id để chọn một commit hiện có. Nếu ID commit đã cho không tồn tại, sẽ gây lỗi. Để làm điều này, hãy dùng định dạng commit id:$value để khai báo commit.
- Commit đã cho không được tồn tại trên nhánh hiện tại, commit được chọn phải luôn đến từ một nhánh khác với nhánh hiện tại.
- Nhánh hiện tại phải có ít nhất một commit, rồi mới có thể thực hiện cherry-pick, nếu không sẽ gây lỗi.
- Khi chọn một commit hợp nhất, phải cung cấp ID commit cha. Nếu bỏ qua thuộc tính cha hoặc cung cấp ID commit cha không hợp lệ, sẽ phát sinh lỗi.
- Commit cha được chỉ định phải là commit cha trực tiếp của commit hợp nhất đang được chọn.
Sao chép
Nhúng
gitGraph
commit id: "ZERO"
branch develop
branch release
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
merge develop id:"MERGE"
commit id:"TWO"
checkout release
cherry-pick id:"MERGE" parent:"B"
commit id:"THREE"
checkout develop
commit id:"C"
Tùy chọn cấu hình cụ thể
Trong biểu đồ Git Mermaid bạn có thể cấu hình các tùy chọn sau:
- showBranches : giá trị boolean, mặc định là true. Nếu đặt thành false, sẽ không hiển thị nhánh.
- showCommitLabel : giá trị boolean, mặc định là true. Nếu đặt thành false, sẽ không hiển thị nhãn commit.
- mainBranchName : chuỗi, mặc định là main. Tên của nhánh mặc định.
- mainBranchOrder : vị trí của nhánh chính trong danh sách nhánh. Mặc định là 0, nghĩa là theo mặc định, nhánh main đứng ở vị trí thứ nhất.
- parallelCommits : giá trị boolean, mặc định là false. Nếu đặt thành true, các commit cách xa cha sẽ hiển thị ở cùng một cấp.
Ẩn tên nhánh và đường kết nối
Đôi khi bạn có thể muốn ẩn tên nhánh và đường kết nối. Bạn có thể dùng cú pháp showBranches để thực hiện thao tác này. Theo mặc định giá trị của nó là true, bạn có thể dùng chỉ thị để đặt thành false.
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
Bố cục nhãn commit: xoay hoặc ngang
Mermaid hỗ trợ hai loại bố cục nhãn commit. Bố cục mặc định là xoay, nghĩa là nhãn được đặt bên dưới vòng tròn commit, xoay 45 độ để dễ đọc hơn. Điều này đặc biệt hữu ích cho các commit có nhãn dài.
Một loại khác là ngang, nghĩa là nhãn được đặt bên dưới vòng tròn commit và hiển thị căn giữa theo chiều ngang, không xoay. Điều này đặc biệt hữu ích cho các commit có nhãn ngắn.
Bạn có thể thay đổi bố cục của nhãn commit bằng cách dùng cú pháp rotateCommitLabel trong chỉ thị. Nó mặc định là true, nghĩa là nhãn commit sẽ xoay.
Ví dụ sử dụng: xoay nhãn commit
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: true
---
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
Ví dụ sử dụng: nhãn commit ngang
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: false
---
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
Ẩn nhãn commit
Đôi khi bạn có thể muốn ẩn nhãn commit. Bạn có thể dùng cú pháp showCommitLabel để thực hiện thao tác này. Theo mặc định giá trị của nó là true, bạn có thể dùng chỉ thị để đặt thành false.
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
showCommitLabel: false
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
Tùy chỉnh tên nhánh chính
Đôi khi bạn có thể muốn tùy chỉnh tên của nhánh chính. Bạn có thể dùng cú pháp mainBranchName để thực hiện thao tác này. Theo mặc định giá trị của nó là main, bạn có thể dùng chỉ thị để đặt thành bất kỳ chuỗi nào.
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchName: 'MetroLine1'
---
gitGraph
commit id:"NewYork"
commit id:"Dallas"
branch MetroLine2
commit id:"LosAngeles"
commit id:"Chicago"
commit id:"Houston"
branch MetroLine3
commit id:"Phoenix"
commit type: HIGHLIGHT id:"Denver"
commit id:"Boston"
checkout MetroLine1
commit id:"Atlanta"
merge MetroLine3
commit id:"Miami"
commit id:"Washington"
merge MetroLine2 tag:"MY JUNCTION"
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
Hãy xem biểu đồ tuyến tàu điện ngầm giả lập được tạo bằng Mermaid. Ở đây, chúng ta đổi tên nhánh chính mặc định thành MetroLine1.
Tùy chỉnh thứ tự nhánh
Trong Mermaid, theo mặc định, các nhánh sẽ hiển thị theo thứ tự chúng được định nghĩa hoặc xuất hiện trong mã biểu đồ.
Đôi khi bạn có thể muốn tùy chỉnh thứ tự nhánh. Bạn có thể thực hiện bằng cách dùng cú pháp order bên cạnh định nghĩa nhánh, bạn có thể đặt nó thành số dương.
Mermaid tuân theo thứ tự ưu tiên do cú pháp order đưa ra.
- Nhánh chính luôn hiển thị đầu tiên, vì giá trị thứ tự mặc định của nó là 0. (Trừ khi thứ tự của nó bị sửa đổi thông qua cú pháp mainBranchOrder trong cấu hình và thay đổi khỏi 0)
- Tiếp theo, tất cả các nhánh không có order sẽ hiển thị theo thứ tự chúng xuất hiện trong mã biểu đồ.
- Tiếp theo, tất cả các nhánh có order sẽ hiển thị theo thứ tự giá trị order của chúng.
Để kiểm soát hoàn toàn thứ tự của tất cả các nhánh, phải định nghĩa order cho tất cả các nhánh.
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
Trong hình trên, tất cả các nhánh đều tuân theo thứ tự đã định nghĩa.
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchOrder: 2
---
gitGraph
commit
branch test1 order: 3
branch test2
branch test3
branch test4 order: 1
Trong hình trên, tất cả các nhánh không chỉ định thứ tự đều được vẽ theo thứ tự đã định nghĩa. Sau đó, nhánh test4 được vẽ, vì thứ tự của nó là 1. Tiếp theo, nhánh main được vẽ, vì thứ tự của nó là 2. Cuối cùng, nhánh test1 được vẽ, vì thứ tự của nó là 3.
Lưu ý: vì chúng ta đã ghi đè mainBranchOrder thành 2, nên nhánh main sẽ không được vẽ ở đầu, mà hiển thị theo thứ tự.
Ở đây, chúng ta đổi tên nhánh chính mặc định thành MetroLine1.
Hướng
Mermaid hỗ trợ ba hướng: từ trái sang phải (mặc định), từ trên xuống dưới và từ dưới lên trên.
Từ trái sang phải (mặc định, LR:)
Trong Mermaid, hướng mặc định là chạy từ trái sang phải, các nhánh xếp chồng lên nhau.
Tuy nhiên, bạn có thể dùng LR: sau cú pháp gitGraph để đặt rõ ràng giá trị này.
Sao chép
Nhúng
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Từ trên xuống dưới (TB:)
Trong hướng từ trên xuống dưới, các commit chạy từ đầu đến cuối biểu đồ, các nhánh được sắp xếp cạnh nhau.
Để định hướng đồ thị theo cách này, bạn cần thêm TB: sau cú pháp gitGraph.
Sao chép
Nhúng
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Từ dưới lên trên (BT:)
Trong hướng từ dưới lên trên, các commit chạy từ cuối đến đầu biểu đồ, các nhánh được sắp xếp cạnh nhau.
Để định hướng đồ thị theo cách này, bạn cần thêm BT: sau cú pháp gitGraph.
Sao chép
Nhúng
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Commit tạm thời (parallelCommits: false)
Sao chép
Nhúng
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Commit song song (parallelCommits: true)
Sao chép
Nhúng
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Chủ đề
Mermaid hỗ trợ một loạt chủ đề tùy chỉnh, bạn có thể dùng chúng để tìm chủ đề phù hợp với mình. Ghi chú: bạn thực sự có thể ghi đè các biến của chủ đề hiện có để tạo chủ đề tùy chỉnh của riêng bạn.
Dưới đây là các tùy chọn chủ đề tùy chỉnh khác nhau:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Để thay đổi chủ đề, bạn có thể dùng cú pháp initialize.
Chủ đề cơ sở
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'base'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
Chủ đề rừng
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'forest'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
Chủ đề mặc định
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph
commit type:HIGHLIGHT
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
Chủ đề tối
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'dark'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
Chủ đề trung tính
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'neutral'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
Tùy chỉnh bằng biến chủ đề
Mermaid cho phép bạn dùng các biến chủ đề để tùy chỉnh biểu đồ của mình, những biến này kiểm soát giao diện và phong cách của các phần tử khác nhau trong biểu đồ.
Để hiểu rõ, chúng ta lấy chủ đề default làm ví dụ, giá trị mặc định của các biến chủ đề sẽ tự động được chọn từ chủ đề.
Dùng chủ đề default để đặt màu của nhánh:
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
Mermaid hỗ trợ các biến chủ đề, dùng để ghi đè giá trị mặc định, tối đa có thể ghi đè 8 nhánh, tức là bạn có thể dùng biến chủ đề để đặt màu cho tối đa 8 nhánh. Sau khi vượt quá 8 nhánh, các biến chủ đề sẽ được dùng lặp lại theo chu kỳ, tức là nhánh thứ 9 sẽ dùng kiểu của nhánh thứ nhất.
Tùy chỉnh màu nhánh
Bạn có thể dùng các biến chủ đề git0 đến git7 để tùy chỉnh màu nhánh. Mermaid cho phép bạn đặt màu cho tối đa 8 nhánh, trong đó biến git0 kiểm soát màu của nhánh thứ nhất, git1 kiểm soát màu của nhánh thứ hai, v.v.
Lưu ý: giá trị mặc định của các biến chủ đề này được chọn từ chủ đề đã chọn. Nếu bạn muốn ghi đè giá trị mặc định, có thể dùng cú pháp initialize để thêm giá trị biến chủ đề tùy chỉnh.
Ví dụ:
Bây giờ hãy ghi đè giá trị mặc định của các biến git0 đến git3:
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'git0': '#ff0000'
'git1': '#00ff00'
'git2': '#0000ff'
'git3': '#ff00ff'
'git4': '#00ffff'
'git5': '#ffff00'
'git6': '#ff00ff'
'git7': '#00ffff'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
Tùy chỉnh màu nhãn nhánh
Bạn có thể dùng các biến chủ đề gitBranchLabel0 đến gitBranchLabel7 để tùy chỉnh màu nhãn nhánh. Mermaid cho phép bạn đặt màu cho tối đa 8 nhánh, trong đó biến gitBranchLabel0 kiểm soát màu của nhãn nhánh thứ nhất, biến gitBranchLabel1 kiểm soát màu của nhãn nhánh thứ hai, v.v.
Hãy xem cách dùng chủ đề default để đặt màu nhãn nhánh:
Bây giờ hãy ghi đè giá trị mặc định của các biến gitBranchLabel0 đến gitBranchLabel2:
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitBranchLabel0': '#ffffff'
'gitBranchLabel1': '#ffffff'
'gitBranchLabel2': '#ffffff'
'gitBranchLabel3': '#ffffff'
'gitBranchLabel4': '#ffffff'
'gitBranchLabel5': '#ffffff'
'gitBranchLabel6': '#ffffff'
'gitBranchLabel7': '#ffffff'
'gitBranchLabel8': '#ffffff'
'gitBranchLabel9': '#ffffff'
---
gitGraph
checkout main
branch branch1
branch branch2
branch branch3
branch branch4
branch branch5
branch branch6
branch branch7
branch branch8
branch branch9
checkout branch1
commit
Ở đây, bạn có thể thấy màu sắc và kiểu của branch8 và branch9 lần lượt được chọn từ nhánh có vị trí chỉ mục 0 (main) và 1 (branch1).
Tùy chỉnh màu commit
Bạn có thể dùng các biến chủ đề commitLabelColor và commitLabelBackground để lần lượt tùy chỉnh màu và màu nền của nhãn commit.
Ví dụ: bây giờ hãy ghi đè giá trị mặc định của các biến commitLabelColor đến commitLabelBackground:
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
mermaid.grammar_mermaid_commit_label_define_label_font_big_small
Bạn có thể dùng biến chủ đề commitLabelFontSize để tùy chỉnh cỡ chữ của nhãn commit.
Ví dụ: bây giờ hãy ghi đè giá trị mặc định của biến commitLabelFontSize:
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
commitLabelFontSize: '16px'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
Tùy chỉnh cỡ chữ nhãn
Bạn có thể dùng biến chủ đề tagLabelFontSize để tùy chỉnh cỡ chữ của nhãn.
Ví dụ: bây giờ hãy ghi đè giá trị mặc định của biến tagLabelFontSize:
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
tagLabelFontSize: '16px'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
Tùy chỉnh màu nhãn
Bạn có thể dùng các biến chủ đề tagLabelColor, tagLabelBackground và tagLabelBorder để tùy chỉnh nhãn, lần lượt thay đổi màu chữ nhãn, màu nền nhãn và viền nhãn.
Ví dụ: bây giờ hãy ghi đè giá trị mặc định của các biến tagLabelColor, tagLabelBackground và tagLabelBorder:
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
tagLabelColor: '#ff0000'
tagLabelBackground: '#00ff00'
tagLabelBorder: '#0000ff'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
Tùy chỉnh màu commit được tô sáng
Bạn có thể dùng các biến chủ đề gitInv0 đến gitInv7 để tùy chỉnh màu commit được tô sáng theo nhánh chứa nó. Mermaid cho phép bạn đặt màu commit được tô sáng cụ thể cho tối đa 8 nhánh, trong đó biến gitInv0 kiểm soát màu commit được tô sáng của nhánh thứ nhất, biến gitInv1 kiểm soát màu commit được tô sáng của nhánh thứ hai, v.v.
Bây giờ hãy ghi đè giá trị mặc định của các biến git0 đến git3:
Sao chép
Nhúng
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitInv0': '#ff0000'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
