แผนภาพ Git
แผนภาพ Git เป็นการแสดงภาพของ git commit และ git operation บนสาขาต่าง ๆ
แผนภาพ Git มีประโยชน์เป็นพิเศษสำหรับนักพัฒนาและทีมปฏิบัติการ (ops) ใช้แชร์กลยุทธ์สาขา Git ของพวกเขาได้
Mermaid สามารถเรนเดอร์แผนภาพ Git ได้
คัดลอก
ฝัง
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid รองรับ git operation พื้นฐาน เช่น:
- commit: หมายถึง commit ใหม่บนสาขาปัจจุบัน
- branch: สร้างและสลับไปยังสาขาใหม่ พร้อมตั้งให้เป็นสาขาปัจจุบัน
- checkout: สลับไปยังสาขาที่มีอยู่แล้วและตั้งให้เป็นสาขาปัจจุบัน
- merge: รวมสาขาที่มีอยู่เข้ากับสาขาปัจจุบัน
ด้วย git operation เหล่านี้ คุณสามารถวาดแผนภาพ Git ใน Mermaid ได้อย่างง่ายดายและรวดเร็ว ชื่อเอนทิตีมักขึ้นต้นด้วยตัวพิมพ์ใหญ่ แม้ว่าจะไม่มีมาตรฐานที่เป็นที่ยอมรับในเรื่องนี้ และใน Mermaid ก็ไม่ได้บังคับ
หมายเหตุ: checkout และ switch ใช้แทนกันได้
ไวยากรณ์
ไวยากรณ์ Mermaid ของแผนภาพ Git ตรงไปตรงมาและเรียบง่ายมาก ใช้แนวทางแบบประกาศ โดย commit แต่ละอันจะถูกวาดบนไทม์ไลน์ของแผนภาพ Git ตามลำดับที่ปรากฏในโค้ด โดยพื้นฐานแล้ว จะเป็นไปตามลำดับการใส่ของแต่ละคำสั่ง
ก่อนอื่น ใช้ไวยากรณ์ gitGraph เพื่อประกาศประเภทแผนภาพของคุณ ไวยากรณ์ gitGraph บอก Mermaid ว่าคุณต้องการวาดแผนภาพ Git และแยกวิเคราะห์โค้ดแผนภาพอย่างสอดคล้องกัน
แผนภาพ Git ทุกอันเริ่มต้นด้วยสาขา main เว้นแต่คุณจะสร้างสาขาที่แตกต่างออกไป โดยค่าเริ่มต้น commit จะเข้าสู่สาขาหลัก สิ่งนี้ขับเคลื่อนโดยวิธีการทำงานของ git ที่ตอนเริ่มต้นคุณจะเริ่มจากสาขาหลักเสมอ โดยค่าเริ่มต้น สาขา main ถูกตั้งเป็นสาขาปัจจุบัน
คุณสามารถใช้ไวยากรณ์ commit เพื่อลงทะเบียน commit หนึ่งครั้งบนสาขาปัจจุบัน มาดูกันว่ามันทำงานอย่างไร:
แผนภาพ git อย่างง่ายที่แสดงสาม commit ของสาขาเริ่มต้น main:
คัดลอก
ฝัง
gitGraph
commit
commit
commit
หากสังเกตตัวอย่างก่อนหน้าอย่างละเอียด คุณจะเห็นสาขาเริ่มต้น main และสาม commit โปรดสังเกตด้วยว่าโดยค่าเริ่มต้น commit แต่ละอันจะได้รับ ID ที่ไม่ซ้ำกันและสุ่มมา
เพิ่ม ID ของ commit แบบกำหนดเอง
สำหรับ commit หนึ่ง คุณสามารถระบุ ID แบบกำหนดเองได้ด้วยคุณสมบัติ id ตอนประกาศ แล้วตามด้วยเครื่องหมายทวิภาค : และระบุค่าแบบกำหนดเองภายในเครื่องหมายอัญประกาศคู่
มาดูกันว่ามันทำงานอย่างไรด้วยภาพด้านล่าง:
คัดลอก
ฝัง
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
แก้ไขประเภทของ commit
ใน Mermaid commit มีสามประเภท ซึ่งเรนเดอร์ในแผนภาพแตกต่างกันเล็กน้อย ประเภทเหล่านั้นคือ:
- NORMAL: ประเภท commit เริ่มต้น แสดงด้วยวงกลมทึบ
- REVERSE: เน้นว่า commit เป็น commit ย้อนกลับ แสดงด้วยวงกลมทึบที่มีกากบาท
- HIGHLIGHT: ไฮไลต์ commit เฉพาะ แสดงด้วยสี่เหลี่ยมทึบ
สำหรับ commit ที่กำหนด คุณสามารถระบุประเภทของมันได้ด้วยคุณสมบัติ type ตอนประกาศ แล้วตามด้วยเครื่องหมายทวิภาค : และตัวเลือกประเภทที่ต้องการตามที่กล่าวไว้ข้างต้น ตัวอย่าง: commit type:
หมายเหตุ: หากไม่ได้ระบุประเภท commit จะเลือก NORMAL เป็นค่าเริ่มต้น
มาดูกันว่าการ commit ประเภทต่าง ๆ เหล่านี้ดำเนินไปอย่างไรผ่านภาพด้านล่าง:
คัดลอก
ฝัง
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
ในตัวอย่างนี้ เราได้ระบุประเภทที่แตกต่างกันให้กับแต่ละ commit นอกจากนี้ มาดูว่าเรารวมทั้ง id และ type ไว้พร้อมกันเมื่อประกาศ commit ได้อย่างไร
เพิ่มป้ายกำกับ
สำหรับ commit ที่กำหนด คุณสามารถตกแต่งมันด้วย tag คล้ายกับแนวคิดของป้ายกำกับหรือเวอร์ชันเผยแพร่ในโลกของ git คุณสามารถแนบป้ายกำกับแบบกำหนดเองได้ด้วยคุณสมบัติ tag ตอนประกาศ commit ตามด้วยเครื่องหมายทวิภาค : และระบุค่าแบบกำหนดเองภายในเครื่องหมายอัญประกาศคู่
คัดลอก
ฝัง
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
ในตัวอย่างนี้ เราได้ตั้งค่าป้ายกำกับแบบกำหนดเองให้กับ commit
สร้างสาขาใหม่
ใน Mermaid หากต้องการสร้างสาขาใหม่ คุณสามารถใช้ไวยากรณ์ branch ได้ คุณยังต้องระบุชื่อของสาขาใหม่ ชื่อต้องไม่ซ้ำกัน ต้องไม่ใช่ชื่อของสาขาที่มีอยู่แล้ว
เมื่อ Mermaid อ่านไวยากรณ์ branch มันจะสร้างสาขาใหม่และตั้งเป็นสาขาปัจจุบัน เทียบเท่ากับคุณสร้างสาขาใหม่ในแผนภาพ Git และสลับไปยังสาขานั้น
คัดลอก
ฝัง
gitGraph
commit
commit
branch develop
commit
commit
commit
ในตัวอย่างนี้ จะเห็นว่าเราเริ่มจากสาขา main ที่เป็นค่าเริ่มต้น และ push สอง commit ลงบนนั้น จากนั้นเราสร้างสาขา develop และ commit ทั้งหมดหลังจากนั้นถูกวางบนสาขา develop เนื่องจากมันกลายเป็นสาขาปัจจุบัน
เช็คเอาต์สาขาที่มีอยู่แล้ว
ใน Mermaid หากต้องการสลับไปยังสาขาที่มีอยู่แล้ว สามารถใช้ไวยากรณ์ checkout ได้ พร้อมกันนั้นคุณยังต้องระบุชื่อของสาขาที่มีอยู่แล้ว หากไม่พบสาขาชื่อที่ระบุ จะทำให้เกิดข้อผิดพลาดบนคอนโซล ตัวอย่างการใช้: checkout develop
เมื่อ Mermaid อ่านไวยากรณ์ checkout มันจะค้นหาสาขาชื่อที่ระบุและตั้งเป็นสาขาปัจจุบัน ซึ่งเทียบเท่ากับการเช็คเอาต์สาขาใน Git
คัดลอก
ฝัง
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
ในตัวอย่างนี้ เราเริ่มจากสาขา main ที่เป็นค่าเริ่มต้นก่อน และ push สอง commit ลงบนนั้น จากนั้นเราสร้างสาขา develop และต่อมาทั้งสาม commit ถูกวางบนสาขา develop เนื่องจากมันกลายเป็นสาขาปัจจุบัน หลังจากนั้น เราใช้ไวยากรณ์ checkout เพื่อตั้งสาขาปัจจุบันเป็น main และ commit ทั้งหมดหลังจากนั้นจะถูกบันทึกบนสาขา main
รวมสองสาขา
ใน Mermaid หากต้องการรวมหรือเชื่อมต่อกับสาขาที่มีอยู่ คุณต้องใช้ไวยากรณ์ merge พร้อมกันนั้นคุณยังต้องระบุชื่อของสาขาที่มีอยู่ที่ต้องการรวมด้วย หากไม่พบสาขาชื่อที่ระบุ จะแสดงข้อผิดพลาดบนคอนโซล นอกจากนี้ คุณสามารถรวมได้เฉพาะสองสาขาที่แยกจากกัน ไม่สามารถรวมสาขากับตัวมันเองได้
ตัวอย่างไวยากรณ์: merge develop
เมื่อ Mermaid อ่านไวยากรณ์ merge มันจะค้นหาสาขาที่ระบุและ commit สุดท้ายของมัน แล้วรวมเข้ากับ commit สุดท้ายของสาขาปัจจุบัน แสดงด้วยวงกลมทึบซ้อน
ต่อไปนี้คือตัวอย่างการรวมสองสาขา:
คัดลอก
ฝัง
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
ในตัวอย่างนี้ เริ่มจากสาขา main ก่อน และ push สอง commit ลงบนนั้น จากนั้นเราสร้างสาขา develop และ push สาม commit ลงบนสาขา develop หลังจากนั้น เราใช้ไวยากรณ์ checkout เพื่อตั้งสาขาปัจจุบันเป็น main และ commit ทั้งหมดหลังจากนั้นทำกับสาขา main สุดท้าย เรารวมสาขา develop เข้ากับสาขา main จึงเกิด merge commit เนื่องจากในตอนนี้สาขาปัจจุบันยังเป็น main สอง commit สุดท้ายจึงถูกบันทึกบนสาขานั้น
คุณยังสามารถเพิ่มคุณสมบัติที่คล้ายกันให้กับการรวมของคุณได้:
- id เขียนทับ ID เริ่มต้นด้วย ID แบบกำหนดเอง
- tag เพิ่มป้ายกำกับแบบกำหนดเองให้กับ merge commit
- type เขียนทับประเภทเริ่มต้นของ merge commit คุณสามารถใช้ประเภท commit อื่น ๆ ที่กล่าวไว้ข้างต้นได้
คัดลอก
ฝัง
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"
รวม commit แบบเลือกจากสาขาอื่น
Mermaid รองรับการเลือก commit หนึ่งจากสาขาอื่นมาสู่สาขาปัจจุบัน คุณยังสามารถใช้ไวยากรณ์ cherry-pick เพื่อเลือก commit จากสาขาอื่นได้
หากต้องการใช้ไวยากรณ์ cherry-pick คุณต้องระบุ id ด้วยคุณสมบัติ id แล้วเขียน commit id ที่ต้องการหลังเครื่องหมายทวิภาค : และล้อมด้วยเครื่องหมายอัญประกาศคู่ ตัวอย่าง:
นี่คือกฎสำคัญบางประการที่ต้องระวัง:
- คุณต้องระบุ id เพื่อเลือก commit ที่มีอยู่ หาก commit ID ที่ระบุไม่มีอยู่ จะทำให้เกิดข้อผิดพลาด สำหรับกรณีนี้ โปรดใช้รูปแบบ commit id:$value ในการประกาศ commit
- commit ที่ระบุต้องไม่มีอยู่บนสาขาปัจจุบัน และ commit ที่ถูกเลือกต้องมาจากสาขาที่แตกต่างจากสาขาปัจจุบันเสมอ
- สาขาปัจจุบันต้องมี commit อย่างน้อยหนึ่งครั้งก่อนจึงจะทำ cherry-pick ได้ มิฉะนั้นจะทำให้เกิดข้อผิดพลาด
- เมื่อเลือก merge commit ต้องระบุ parent commit ID หากละเว้นคุณสมบัติ parent หรือระบุ parent commit ID ที่ไม่ถูกต้อง จะเกิดข้อผิดพลาด
- parent commit ที่ระบุต้องเป็น parent โดยตรงของ merge commit ที่กำลังเลือก
คัดลอก
ฝัง
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"
ตัวเลือกการกำหนดค่าเฉพาะ
ในแผนภาพ Git ของ Mermaid คุณสามารถกำหนดค่าตัวเลือกต่อไปนี้:
- showBranches: ค่าบูลีน ค่าเริ่มต้นเป็น true หากตั้งค่าเป็น false จะไม่แสดงสาขา
- showCommitLabel: ค่าบูลีน ค่าเริ่มต้นเป็น true หากตั้งค่าเป็น false จะไม่แสดงป้ายกำกับของ commit
- mainBranchName: สตริง ค่าเริ่มต้นเป็น main ชื่อของสาขาเริ่มต้น
- mainBranchOrder: ตำแหน่งของสาขาหลักในรายการสาขา ค่าเริ่มต้นเป็น 0 ซึ่งหมายความว่าโดยค่าเริ่มต้น สาขา main อยู่ในลำดับที่ 1
- parallelCommits: ค่าบูลีน ค่าเริ่มต้นเป็น false หากตั้งค่าเป็น true commit ที่ห่างจาก parent จะแสดงในระดับเดียวกัน
ซ่อนชื่อสาขาและเส้นเชื่อมต่อ
บางครั้งคุณอาจต้องการซ่อนชื่อสาขาและเส้นเชื่อมต่อ คุณสามารถทำได้โดยใช้ไวยากรณ์ showBranches โดยค่าเริ่มต้นค่าของมันคือ true คุณสามารถใช้คำสั่งเพื่อตั้งค่าเป็น false ได้
คัดลอก
ฝัง
---
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
เลย์เอาต์ของป้ายกำกับ commit: หมุนหรือแนวนอน
Mermaid รองรับเลย์เอาต์ป้ายกำกับ commit สองประเภท เลย์เอาต์เริ่มต้นคือแบบหมุน ซึ่งหมายความว่าป้ายกำกับวางไว้ด้านล่างวงกลม commit หมุน 45 องศาเพื่อให้อ่านง่ายขึ้น ซึ่งมีประโยชน์เป็นพิเศษสำหรับ commit ที่มีป้ายกำกับยาว
อีกประเภทคือแนวนอน ซึ่งหมายความว่าป้ายกำกับวางไว้ด้านล่างวงกลม commit และแสดงจัดกึ่งกลางแนวนอน ไม่หมุน ซึ่งมีประโยชน์เป็นพิเศษสำหรับ commit ที่มีป้ายกำกับสั้น
คุณสามารถเปลี่ยนเลย์เอาต์ของป้ายกำกับ commit ได้โดยใช้ไวยากรณ์ rotateCommitLabel ในคำสั่ง ค่าเริ่มต้นเป็น true ซึ่งหมายความว่าป้ายกำกับ commit จะหมุน
ตัวอย่างการใช้: ป้ายกำกับ commit แบบหมุน
คัดลอก
ฝัง
---
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
ตัวอย่างการใช้: ป้ายกำกับ commit แนวนอน
คัดลอก
ฝัง
---
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
ซ่อนป้ายกำกับของ commit
บางครั้งคุณอาจต้องการซ่อนป้ายกำกับของ commit คุณสามารถทำได้โดยใช้ไวยากรณ์ showCommitLabel โดยค่าเริ่มต้นค่าของมันคือ true คุณสามารถใช้คำสั่งเพื่อตั้งค่าเป็น false ได้
คัดลอก
ฝัง
---
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
กำหนดชื่อสาขาหลักเอง
บางครั้งคุณอาจต้องการกำหนดชื่อสาขาหลักเอง คุณสามารถทำได้โดยใช้ไวยากรณ์ mainBranchName โดยค่าเริ่มต้นค่าของมันคือ main คุณสามารถใช้คำสั่งเพื่อตั้งค่าเป็นสตริงใดก็ได้
คัดลอก
ฝัง
---
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"
มาดูแผนภาพเส้นทางรถไฟใต้ดินจำลองที่สร้างด้วย Mermaid ที่นี่ เราเปลี่ยนชื่อสาขาหลักเริ่มต้นเป็น MetroLine1
กำหนดลำดับสาขาเอง
ใน Mermaid โดยค่าเริ่มต้น สาขาจะแสดงตามลำดับที่ถูกกำหนดหรือปรากฏในโค้ดแผนภาพ
บางครั้งคุณอาจต้องการกำหนดลำดับสาขาเอง สามารถทำได้โดยใช้ไวยากรณ์ order ข้างการกำหนดสาขา ซึ่งคุณสามารถตั้งค่าเป็นจำนวนบวกได้
Mermaid ปฏิบัติตามลำดับความสำคัญที่กำหนดโดยไวยากรณ์ order
- สาขาหลักจะแสดงก่อนเสมอ เนื่องจากค่าลำดับเริ่มต้นของมันคือ 0 (เว้นแต่ลำดับของมันถูกแก้ไขผ่านไวยากรณ์ mainBranchOrder ในการกำหนดค่าและเปลี่ยนจาก 0)
- จากนั้น สาขาทั้งหมดที่ไม่มี order จะแสดงตามลำดับที่ปรากฏในโค้ดแผนภาพ
- จากนั้น สาขาทั้งหมดที่มี order จะแสดงตามลำดับของค่า order
หากต้องการควบคุมลำดับของสาขาทั้งหมดอย่างเต็มที่ ต้องกำหนด order ให้กับสาขาทั้งหมด
คัดลอก
ฝัง
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
ในภาพด้านบน สาขาทั้งหมดปฏิบัติตามลำดับที่กำหนด
คัดลอก
ฝัง
---
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
ในภาพด้านบน สาขาทั้งหมดที่ไม่ได้ระบุลำดับจะถูกวาดตามลำดับที่กำหนด หลังจากนั้น สาขา test4 ถูกวาด เนื่องจากลำดับของมันคือ 1 ต่อมา สาขา main ถูกวาด เนื่องจากลำดับของมันคือ 2 สุดท้าย สาขา test1 ถูกวาด เนื่องจากลำดับของมันคือ 3
หมายเหตุ: เนื่องจากเราได้เขียนทับ mainBranchOrder เป็น 2 สาขา main จึงไม่ถูกวาดที่จุดเริ่มต้น แต่จะแสดงตามลำดับ
ที่นี่ เราเปลี่ยนชื่อสาขาหลักเริ่มต้นเป็น MetroLine1
ทิศทาง
Mermaid รองรับสามทิศทาง: จากซ้ายไปขวา (ค่าเริ่มต้น), จากบนลงล่าง และจากล่างขึ้นบน
จากซ้ายไปขวา (ค่าเริ่มต้น, LR:)
ใน Mermaid ทิศทางเริ่มต้นคือจากซ้ายไปขวา โดยสาขาจะซ้อนกันอยู่ด้านบนของกันและกัน
อย่างไรก็ตาม คุณสามารถใช้ LR: หลังไวยากรณ์ gitGraph เพื่อตั้งค่าอย่างชัดเจนได้
คัดลอก
ฝัง
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
จากบนลงล่าง (TB:)
ในทิศทางจากบนลงล่าง commit จะดำเนินจากด้านบนไปยังด้านล่างของแผนภาพ โดยสาขาจะเรียงเคียงข้างกัน
หากต้องการกำหนดทิศทางกราฟด้วยวิธีนี้ คุณต้องเพิ่ม TB: หลังไวยากรณ์ gitGraph
คัดลอก
ฝัง
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
จากล่างขึ้นบน (BT:)
ในทิศทางจากล่างขึ้นบน commit จะดำเนินจากด้านล่างไปยังด้านบนของแผนภาพ โดยสาขาจะเรียงเคียงข้างกัน
หากต้องการกำหนดทิศทางกราฟด้วยวิธีนี้ คุณต้องเพิ่ม BT: หลังไวยากรณ์ gitGraph
คัดลอก
ฝัง
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
commit ชั่วคราว (parallelCommits: false)
คัดลอก
ฝัง
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
commit แบบขนาน (parallelCommits: true)
คัดลอก
ฝัง
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
ธีม
Mermaid รองรับธีมแบบกำหนดเองหลากหลาย คุณสามารถใช้เพื่อค้นหาธีมที่เหมาะกับคุณได้ หมายเหตุ: คุณสามารถเขียนทับตัวแปรของธีมที่มีอยู่เพื่อสร้างธีมแบบกำหนดเองของคุณเองได้
ต่อไปนี้คือตัวเลือกธีมแบบกำหนดเองต่าง ๆ:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
หากต้องการเปลี่ยนธีม คุณสามารถใช้ไวยากรณ์ initialize ได้
ธีมพื้นฐาน
คัดลอก
ฝัง
---
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
ธีมป่า
คัดลอก
ฝัง
---
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
ธีมเริ่มต้น
คัดลอก
ฝัง
---
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
ธีมมืด
คัดลอก
ฝัง
---
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
ธีมเป็นกลาง
คัดลอก
ฝัง
---
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
ปรับแต่งเองด้วยตัวแปรธีม
Mermaid ช่วยให้คุณปรับแต่งแผนภาพของคุณได้ด้วยตัวแปรธีม ซึ่งควบคุมรูปลักษณ์และสไตล์ขององค์ประกอบต่าง ๆ ของแผนภาพ
เพื่อให้เข้าใจ เราจะยกตัวอย่างธีม default โดยค่าเริ่มต้นของตัวแปรธีมจะถูกเลือกจากธีมโดยอัตโนมัติ
ใช้ธีม default เพื่อตั้งค่าสีของสาขา:
คัดลอก
ฝัง
---
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 รองรับตัวแปรธีมสำหรับเขียนทับค่าเริ่มต้น โดยเขียนทับได้สูงสุด 8 สาขา นั่นคือคุณสามารถใช้ตัวแปรธีมตั้งค่าสีได้สูงสุด 8 สาขา เมื่อสาขาเกิน 8 สาขา ตัวแปรธีมจะถูกนำมาใช้ซ้ำแบบวนรอบ นั่นคือสาขาที่ 9 จะใช้สไตล์ของสาขาที่ 1
กำหนดสีสาขาเอง
คุณสามารถใช้ตัวแปรธีม git0 ถึง git7 เพื่อกำหนดสีสาขาเอง Mermaid อนุญาตให้คุณตั้งค่าสีได้สูงสุด 8 สาขา โดยตัวแปร git0 ควบคุมสีของสาขาแรก git1 ควบคุมสีของสาขาที่สอง เป็นต้น
หมายเหตุ: ค่าเริ่มต้นของตัวแปรธีมเหล่านี้ถูกเลือกจากธีมที่เลือกไว้ หากคุณต้องการเขียนทับค่าเริ่มต้น สามารถใช้ไวยากรณ์ initialize เพื่อเพิ่มค่าตัวแปรธีมแบบกำหนดเองได้
ตัวอย่าง:
ตอนนี้เรามาเขียนทับค่าเริ่มต้นของตัวแปร git0 ถึง git3 กัน:
คัดลอก
ฝัง
---
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
กำหนดสีป้ายกำกับสาขาเอง
คุณสามารถใช้ตัวแปรธีม gitBranchLabel0 ถึง gitBranchLabel7 เพื่อกำหนดสีป้ายกำกับสาขาเอง Mermaid อนุญาตให้คุณตั้งค่าสีได้สูงสุด 8 สาขา โดยตัวแปร gitBranchLabel0 ควบคุมสีของป้ายกำกับสาขาแรก ตัวแปร gitBranchLabel1 ควบคุมสีของป้ายกำกับสาขาที่สอง เป็นต้น
มาดูวิธีใช้ธีม default เพื่อตั้งค่าสีของป้ายกำกับสาขากัน:
ตอนนี้เรามาเขียนทับค่าเริ่มต้นของตัวแปร gitBranchLabel0 ถึง gitBranchLabel2 กัน:
คัดลอก
ฝัง
---
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
ที่นี่ คุณจะเห็นว่าสีและสไตล์ของ branch8 และ branch9 ถูกเลือกจากสาขาที่มีตำแหน่งดัชนี 0 (main) และ 1 (branch1) ตามลำดับ
กำหนดสี commit เอง
คุณสามารถใช้ตัวแปรธีม commitLabelColor และ commitLabelBackground เพื่อกำหนดสีและสีพื้นหลังของป้ายกำกับ commit แยกกันได้
ตัวอย่าง: ตอนนี้เรามาเขียนทับค่าเริ่มต้นของตัวแปร commitLabelColor ถึง commitLabelBackground กัน:
คัดลอก
ฝัง
---
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
คุณสามารถใช้ตัวแปรธีม commitLabelFontSize เพื่อกำหนดขนาดตัวอักษรของป้ายกำกับ commit เองได้
ตัวอย่าง: ตอนนี้เรามาเขียนทับค่าเริ่มต้นของตัวแปร commitLabelFontSize กัน:
คัดลอก
ฝัง
---
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
กำหนดขนาดตัวอักษรของป้ายกำกับเอง
คุณสามารถใช้ตัวแปรธีม tagLabelFontSize เพื่อกำหนดขนาดตัวอักษรของป้ายกำกับเองได้
ตัวอย่าง: ตอนนี้เรามาเขียนทับค่าเริ่มต้นของตัวแปร tagLabelFontSize กัน:
คัดลอก
ฝัง
---
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
กำหนดสีป้ายกำกับเอง
คุณสามารถใช้ตัวแปรธีม tagLabelColor, tagLabelBackground และ tagLabelBorder เพื่อกำหนดป้ายกำกับเอง โดยเปลี่ยนสีข้อความป้ายกำกับ สีพื้นหลังป้ายกำกับ และขอบป้ายกำกับตามลำดับ
ตัวอย่าง: ตอนนี้เรามาเขียนทับค่าเริ่มต้นของตัวแปร tagLabelColor, tagLabelBackground และ tagLabelBorder กัน:
คัดลอก
ฝัง
---
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
กำหนดสี commit ที่ไฮไลต์เอง
คุณสามารถใช้ตัวแปรธีม gitInv0 ถึง gitInv7 เพื่อกำหนดสีของ commit ที่ไฮไลต์ตามสาขาที่มันอยู่ Mermaid อนุญาตให้คุณตั้งค่าสีของ commit ที่ไฮไลต์เฉพาะได้สูงสุด 8 สาขา โดยตัวแปร gitInv0 ควบคุมสีของ commit ที่ไฮไลต์ของสาขาแรก ตัวแปร gitInv1 ควบคุมสีของ commit ที่ไฮไลต์ของสาขาที่สอง เป็นต้น
ตอนนี้เรามาเขียนทับค่าเริ่มต้นของตัวแปร git0 ถึง git3 กัน:
คัดลอก
ฝัง
---
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
