แผนภาพคัมบัง
แผนภาพคัมบังของ Mermaid ช่วยให้คุณสร้างการแสดงภาพของการไหลเวียนของงานในขั้นตอนต่าง ๆ ของเวิร์กโฟลว์ ด้านล่างนี้อธิบายวิธีใช้ไวยากรณ์แผนภาพคัมบังอย่างถูกต้อง
พื้นฐาน
แผนภาพคัมบังขึ้นต้นด้วยไวยากรณ์ kanban จากนั้นกำหนดคอลัมน์และงานในคอลัมน์เหล่านั้น
คัดลอก
ฝัง
kanban
column1[Column Title]
task1[Task Description]
กำหนดคอลัมน์
คอลัมน์แทนขั้นตอนต่าง ๆ ในเวิร์กโฟลว์ เช่น "รอดำเนินการ", "กำลังทำ", "เสร็จสิ้น" เป็นต้น แต่ละคอลัมน์ถูกกำหนดด้วยตัวระบุที่ไม่ซ้ำกันและชื่อเรื่องที่ล้อมด้วยวงเล็บเหลี่ยม
ไวยากรณ์:
คัดลอก
ฝัง
columnId[Column Title]
- columnId: ตัวระบุที่ไม่ซ้ำกันของคอลัมน์
- [Column Title]: ชื่อเรื่องที่แสดงที่ส่วนหัวของคอลัมน์
比如 id1[Todo]
เพิ่มงานให้กับคอลัมน์
งานจะแสดงในคอลัมน์ของตัวเอง พร้อมการเยื้อง งานแต่ละงานประกอบด้วยตัวระบุที่ไม่ซ้ำกันและคำอธิบายที่ล้อมด้วยวงเล็บเหลี่ยม
ไวยากรณ์:
คัดลอก
ฝัง
taskId[Task Description]
taskId: ตัวระบุที่ไม่ซ้ำกันของงาน,[Task Description]: คำอธิบายของงาน
ตัวอย่าง:
คัดลอก
ฝัง
docs[Create Documentation]
เพิ่มเมทาดาทาให้กับงาน
คุณสามารถใช้ไวยากรณ์ @{ ... } เพื่อเพิ่มเมทาดาทาเพิ่มเติมให้กับแต่ละงานได้ เมทาดาทาสามารถมีคู่คีย์-ค่า เช่น assigned, ticket, priority เป็นต้น ซึ่งจะแสดงในการเรนเดอร์ของโหนด
คีย์เมทาดาทาที่รองรับ
assigned: ระบุว่าใครรับผิดชอบงานนี้,ticket: เชื่อมโยงงานกับหมายเลขตั๋วงานหรือปัญหา,priority: แสดงระดับความเร่งด่วนของงาน ค่าที่อนุญาต: สูงมาก, สูง, ต่ำ และ ต่ำมาก
คัดลอก
ฝัง
kanban
todo[Todo]
id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
ตัวเลือกการกำหนดค่า
คุณสามารถกำหนดเองแผนภาพคัมบังได้โดยใช้บล็อกการกำหนดค่าที่ต้นไฟล์ markdown ซึ่งมีประโยชน์สำหรับการตั้งค่าส่วนกลาง (เช่น URL พื้นฐานของตั๋วงาน) ปัจจุบันแผนภาพคัมบังมีตัวเลือกการกำหนดค่าหนึ่งรายการคือ ticketBaseUrl สามารถตั้งค่าได้ตามตัวอย่างต่อไปนี้:
คัดลอก
ฝัง
---
config:
kanban:
ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
---
เมื่อรายการคัมบังมีหมายเลขตั๋วงานที่ระบุ หมายเลขตั๋วงานในแผนภาพจะมีลิงก์ที่ชี้ไปยังระบบภายนอกที่กำหนดตั๋วงานนั้น ticketBaseUrl ตั้งค่า URL พื้นฐานที่ชี้ไปยังระบบภายนอก ส่วน #TICKET# จะถูกแทนที่ด้วยค่าตั๋วงานในเมทาดาทาของงาน เพื่อสร้างลิงก์ที่ใช้งานได้
ตัวอย่างฉบับสมบูรณ์
ต่อไปนี้คือตัวอย่างโค้ดแผนภาพคัมบังฉบับสมบูรณ์:
คัดลอก
ฝัง
---
config:
kanban:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
กล่าวโดยสรุป การสร้างแผนภาพคัมบังใน Mermaid เป็นกระบวนการที่เรียบง่าย ซึ่งสามารถแสดงเวิร์กโฟลว์ของคุณได้อย่างมีประสิทธิภาพ
คุณสามารถใช้ไวยากรณ์ @{ ... } เพื่อเพิ่มเมทาดาทาที่เป็นตัวเลือกให้กับงาน เพื่อเสริมแผนภาพของคุณ ไวยากรณ์นี้ช่วยให้คุณใส่ข้อมูลบริบทเพิ่มเติม เช่น ผู้รับผิดชอบ หมายเลขตั๋วงาน และลำดับความสำคัญ สำหรับการปรับแต่งเพิ่มเติม โปรดใช้บล็อกการกำหนดค่าที่ด้านบนของไฟล์เพื่อตั้งค่าตัวเลือกส่วนกลาง เช่น ticketBaseUrl เพื่อเชื่อมโยงตั๋วงานโดยตรงจากแผนภาพ
ด้วยการปฏิบัติตามคำแนะนำเหล่านี้ ตรวจสอบให้แน่ใจว่ามีตัวระบุที่ไม่ซ้ำกัน การเยื้องที่ถูกต้อง และใช้เมทาดาทาและตัวเลือกการกำหนดค่า คุณจะสามารถสร้างแผนภาพคัมบังที่ครอบคลุมและปรับแต่งได้ ซึ่งจับคู่เวิร์กโฟลว์ของโครงการได้อย่างมีประสิทธิภาพ
