คำจำกัดความพื้นฐาน
ผังงานประกอบด้วยโหนด (รูปร่างทางเรขาคณิต) และเส้นเชื่อมต่อ (ลูกศรหรือเส้น) โค้ด Mermaid กำหนดวิธีสร้างโหนดและเส้นเชื่อมต่อ และรองรับลูกศรหลายประเภท ลูกศรหลายทิศทาง ตลอดจนการเชื่อมโยงกับกราฟย่อยได้อย่างอิสระ
คำเตือน หากคุณใช้คำว่า "end" ในโหนดผังงาน โปรดเขียนอักษรตัวแรกหรือทั้งคำเป็นตัวพิมพ์ใหญ่ (เช่น "End" หรือ "END") การป้อน "end" เป็นตัวพิมพ์เล็กทั้งหมดจะทำให้ผังงานเกิดข้อผิดพลาด
คำเตือน หากคุณใช้ตัวอักษร "o" หรือ "x" เป็นอักษรตัวแรกเมื่อเชื่อมต่อโหนดผังงาน โปรดเพิ่มช่องว่างหน้าตัวอักษรหรือเขียนตัวอักษรเป็นตัวพิมพ์ใหญ่ (เช่น "dev--- ops", "dev---Ops")
หนึ่งโหนด (ค่าเริ่มต้น)
คัดลอก
ฝัง
---
title: Node
---
flowchart LR
id
id คือเนื้อหาที่แสดงในกล่อง
ไวยากรณ์การสร้างผังงาน นอกจากใช้ flowchart แล้ว ยังสามารถใช้ graph ได้
โหนดที่มีข้อความ
ยังสามารถตั้งค่าข้อความที่ต่างจาก id ให้กับกล่องได้ หากดำเนินการนี้หลายครั้ง ระบบจะใช้ข้อความที่กำหนดไว้ล่าสุดของโหนดนั้น นอกจากนี้ หากภายหลังกำหนดเส้นเชื่อมต่อให้กับโหนด จะละเว้นการกำหนดข้อความก็ได้ การเรนเดอร์กล่องจะใช้ข้อความที่กำหนดไว้ก่อนหน้านี้
คัดลอก
ฝัง
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
ข้อความ Unicode
ใช้เครื่องหมายอัญประกาศคู่ครอบข้อความ Unicode
คัดลอก
ฝัง
flowchart LR
id["This ❤ Unicode"]
รูปแบบ Markdown
ใช้เครื่องหมายอัญประกาศคู่และเครื่องหมาย backtick ครอบข้อความ Markdown
คัดลอก
ฝัง
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
ทิศทาง
ประกาศทิศทางของผังงาน
หมายถึงผังงานจัดเรียงจากบนลงล่าง (TD หรือ TB)
คัดลอก
ฝัง
flowchart TD
Start --> Stop
ทิศทางของผังงานประกอบด้วย:
- TB - จากบนลงล่าง
- TD - จากบนลงล่าง (เหมือนกับจากบนลงล่าง)
- BT - จากล่างขึ้นบน
- RL - จากขวาไปซ้าย
- LR - จากซ้ายไปขวา
รูปร่างโหนด
สี่เหลี่ยมมุมมน
คัดลอก
ฝัง
flowchart LR
id1(This is the text in the box)
รูปร่างสนามกีฬา
คัดลอก
ฝัง
flowchart LR
id1([This is the text in the box])
กราฟย่อย
คัดลอก
ฝัง
flowchart LR
id1[[This is the text in the box]]
ฐานข้อมูล
คัดลอก
ฝัง
flowchart LR
id1[(Database)]
วงกลม
คัดลอก
ฝัง
flowchart LR
id1((This is the text in the circle))
รูปร่างไม่สมมาตร
คัดลอก
ฝัง
flowchart LR
id1>This is the text in the box]
สี่เหลี่ยมข้าวหลามตัด
คัดลอก
ฝัง
flowchart LR
id1{This is the text in the box}
หกเหลี่ยม
คัดลอก
ฝัง
flowchart LR
id1{{This is the text in the box}}
สี่เหลี่ยมด้านขนาน
คัดลอก
ฝัง
flowchart TD
id1[/This is the text in the box/]
สี่เหลี่ยมด้านขนานกลับด้าน
คัดลอก
ฝัง
flowchart TD
id1[\This is the text in the box\]
สี่เหลี่ยมคางหมู
คัดลอก
ฝัง
flowchart TD
A[/ProcessOn\]
สี่เหลี่ยมคางหมูกลับด้าน
คัดลอก
ฝัง
flowchart TD
B[\ProcessOn/]
วงกลมซ้อน
คัดลอก
ฝัง
flowchart TD
id1(((This is the text in the circle)))
การขยายรูปร่างโหนดของผังงาน Mermaid
Mermaid ได้นำรูปร่างใหม่ 30 แบบมาใช้ เพื่อเพิ่มความยืดหยุ่นและความแม่นยำในการสร้างผังงาน รูปร่างใหม่เหล่านี้มีตัวเลือกมากขึ้นสำหรับการแสดงกระบวนการ การตัดสินใจ เหตุการณ์ การจัดเก็บข้อมูล และองค์ประกอบอื่น ๆ ในผังงานอย่างชัดเจน จึงช่วยเพิ่มความชัดเจนและความหมายเชิงความหมาย
ไวยากรณ์ใหม่สำหรับการกำหนดรูปร่าง
ปัจจุบัน Mermaid รองรับไวยากรณ์ทั่วไปสำหรับกำหนดประเภทรูปร่าง เพื่อรองรับรูปร่างที่มีจำนวนเพิ่มขึ้นเรื่อย ๆ ไวยากรณ์นี้ช่วยให้คุณระบุรูปร่างเฉพาะให้กับโหนดได้ด้วยรูปแบบที่ชัดเจนและยืดหยุ่น
คัดลอก
ฝัง
A@{ shape: rect }
ไวยากรณ์นี้สร้างโหนด A เป็นสี่เหลี่ยมมุมฉาก การเรนเดอร์จะเหมือนกับ [A] หรือ A
รายการรูปร่างโหนดฉบับสมบูรณ์
ต่อไปนี้คือรายการฉบับสมบูรณ์ของรูปร่างโหนดที่นำมาใช้ใหม่ พร้อมความหมาย ชื่อย่อ และนามแฝงที่สอดคล้องกัน:
| ชื่อเชิงความหมาย | ไวยากรณ์กราฟ | ชื่อย่อไวยากรณ์ | ไวยากรณ์ทางเลือก | คำอธิบายโดยละเอียด |
|---|---|---|---|---|
| การ์ด | Notched Rectangle | notch-rect | card, notched-rectangle | แสดงการ์ดหนึ่งใบ |
| จัดเรียง | Hourglass | hourglass | collate | แสดงการดำเนินการจัดเรียง |
| เส้นเชื่อมต่อการสื่อสาร | Lightning Bolt | bolt | com-link, lightning-bolt | เส้นเชื่อมต่อการสื่อสาร |
| ความคิดเห็น | Curly Brace | brace | brace-l, comment | เพิ่มความคิดเห็น |
| ความคิดเห็นด้านขวา | Curly Brace | brace-r | เพิ่มความคิดเห็น | |
| ความคิดเห็นที่มีวงเล็บปีกกาทั้งสองข้าง | Curly Braces | braces | เพิ่มความคิดเห็น | |
| การป้อนหรือส่งออกข้อมูล | Lean Right | lean-r | in-out, lean-right | แสดงการป้อนหรือส่งออก |
| การป้อนหรือส่งออกข้อมูล | Lean Left | lean-l | lean-left, out-in | แสดงการส่งออกหรือการป้อน |
| ฐานข้อมูล | Cylinder | cyl | cylinder, database, db | การจัดเก็บฐานข้อมูล |
| การตัดสินใจ | Diamond | diam | decision, diamond, question | ขั้นตอนการตัดสินใจ |
| ความล่าช้า | Half-Rounded Rectangle | delay | half-rounded-rectangle | แสดงความล่าช้า |
| หน่วยจัดเก็บแบบเข้าถึงโดยตรง | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | หน่วยจัดเก็บแบบเข้าถึงโดยตรง |
| หน่วยจัดเก็บแบบดิสก์ | Lined Cylinder | lin-cyl | disk, lined-cylinder | หน่วยจัดเก็บแบบดิสก์ |
| การแสดงผล | Curved Trapezoid | curv-trap | curved-trapezoid, display | แสดงว่าข้อมูลข่าวสารแสดงบนอุปกรณ์ เช่น หน้าจอ เทอร์มินัล เป็นต้น |
| การประมวลผลแบบแบ่งส่วน | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | รูปร่างการประมวลผลแบบแบ่งส่วน |
| เอกสาร | Document | doc | document | แสดงเอกสารหนึ่งชิ้น |
| เหตุการณ์ | Rounded Rectangle | rounded | event | แสดงเหตุการณ์หนึ่งเหตุการณ์ |
| การสกัด | Triangle | tri | extract, triangle | กระบวนการสกัด |
| การแตกแขนง/การรวม | Filled Rectangle | fork | join | การแตกแขนงหรือการรวมในผังงาน |
| หน่วยจัดเก็บภายใน | Window Pane | win-pane | internal-storage, window-pane | หน่วยจัดเก็บภายใน |
| จุดเชื่อมต่อ | Filled Circle | f-circ | filled-circle, junction | จุดเชื่อมต่อ |
| เอกสารที่มีเส้น | Lined Document | lin-doc | lined-document | เอกสารที่มีเส้น |
| กระบวนการแบบมีเส้น/เงา | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | รูปร่างกระบวนการที่มีเส้น |
| ขีดจำกัดลูป | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | ขั้นตอนขีดจำกัดลูป |
| ไฟล์แบบ manual | Flipped Triangle | flip-tri | flipped-triangle, manual-file | การดำเนินการไฟล์แบบ manual |
| การป้อนด้วยมือ | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | ขั้นตอนการป้อนด้วยมือ |
| การดำเนินการด้วยมือ | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | แสดงงานที่ทำด้วยมือ |
| หลายเอกสาร | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| หลายโปรเซส | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| รูปร่างไม่สม่ำเสมอ | Odd | odd | รูปร่างไม่สม่ำเสมอ | |
| เทปกระดาษ | Flag | flag | paper-tape | เทปกระดาษ |
| เงื่อนไขการเตรียม | Hexagon | hex | hexagon, prepare | ขั้นตอนการเตรียมหรือเงื่อนไข |
| การกระทำที่มีลำดับความสำคัญ | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | การกระทำที่มีลำดับความสำคัญ |
| การประมวลผล | Rectangle | rect | proc, process, rectangle | รูปร่างการประมวลผลมาตรฐาน |
| เริ่มต้น | Circle | circle | circ | จุดเริ่มต้น |
| เริ่มต้น | Small Circle | sm-circ | small-circle, start | จุดเริ่มต้นวงกลมเล็ก |
| หยุด | Double Circle | dbl-circ | double-circle | แสดงจุดหยุด |
| หยุด | Framed Circle | fr-circ | framed-circle, stop | แสดงจุดหยุด |
| จัดเก็บข้อมูล | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | จัดเก็บข้อมูล |
| กราฟย่อย | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | กราฟย่อย, โปรแกรมย่อย |
| สรุป | Crossed Circle | cross-circ | crossed-circle, summary | สรุป |
| เอกสารที่ติดป้ายกำกับ | Tagged Document | tag-doc | tagged-document | เอกสารที่ติดป้ายกำกับ |
| กระบวนการมาตรฐาน | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| จุดสิ้นสุด | Stadium | stadium | pill, terminal | จุดสิ้นสุด |
| บล็อกข้อความ | Text Block | text | บล็อกข้อความ |
ต่อไปนี้คือตัวอย่างโค้ดผังงานที่ใช้รูปร่างที่นำมาใช้ใหม่:
คัดลอก
ฝัง
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
โปรเซส
คัดลอก
ฝัง
flowchart TD
A@{ shape: rect, label: "This is a process" }
เหตุการณ์
คัดลอก
ฝัง
flowchart TD
A@{ shape: rounded, label: "This is an event" }
โปรเซสย่อย
คัดลอก
ฝัง
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
ฐานข้อมูล (ทรงกระบอก)
คัดลอก
ฝัง
flowchart TD
A@{ shape: cyl, label: "Database" }
เริ่มต้น (วงกลม)
คัดลอก
ฝัง
flowchart TD
A@{ shape: circle, label: "Start" }
รูปทรงไม่สม่ำเสมอ
คัดลอก
ฝัง
flowchart TD
A@{ shape: odd, label: "Odd shape" }
การตัดสินใจ (สี่เหลี่ยมข้าวหลามตัด)
คัดลอก
ฝัง
flowchart TD
A@{ shape: diamond, label: "Decision" }
เงื่อนไขการเตรียม (หกเหลี่ยม)
คัดลอก
ฝัง
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
การป้อน/ส่งออกข้อมูล (เอียงไปทางขวา)
คัดลอก
ฝัง
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
การป้อน/ส่งออกข้อมูล (เอียงไปทางซ้าย)
คัดลอก
ฝัง
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
การกระทำที่มีลำดับความสำคัญ (สี่เหลี่ยมคางหมู)
คัดลอก
ฝัง
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
การดำเนินการด้วยมือ (สี่เหลี่ยมคางหมูกลับด้าน)
คัดลอก
ฝัง
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
หยุด (วงกลมซ้อน)
คัดลอก
ฝัง
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
บล็อกข้อความ
คัดลอก
ฝัง
flowchart TD
A@{ shape: text, label: "This is a text block" }
การ์ด (สี่เหลี่ยมที่มีรอยบาก)
คัดลอก
ฝัง
flowchart TD
A@{ shape: notch-rect, label: "Card" }
กระบวนการแบบมีเส้น/เงา
คัดลอก
ฝัง
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
เริ่มต้น (วงกลมเล็ก)
คัดลอก
ฝัง
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
หยุด (วงกลมที่มีกรอบ)
คัดลอก
ฝัง
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
การแตกแขนง/การรวม (สี่เหลี่ยมยาว)
คัดลอก
ฝัง
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
จัดเรียง (นาฬิกาทราย)
คัดลอก
ฝัง
flowchart TD
A@{ shape: hourglass, label: "Collate" }
ความคิดเห็น (วงเล็บปีกกา)
คัดลอก
ฝัง
flowchart TD
A@{ shape: comment, label: "Comment" }
ความคิดเห็นด้านขวา (วงเล็บปีกกาด้านขวา)
คัดลอก
ฝัง
flowchart TD
A@{ shape: brace-r, label: "Comment" }
ความคิดเห็น (มีวงเล็บทั้งสองข้าง)
คัดลอก
ฝัง
flowchart TD
A@{ shape: braces, label: "Comment" }
เส้นเชื่อมต่อการสื่อสาร (สายฟ้า)
คัดลอก
ฝัง
flowchart TD
A@{ shape: bolt, label: "Communication link" }
เอกสาร
คัดลอก
ฝัง
flowchart TD
A@{ shape: doc, label: "Document" }
ความล่าช้า (สี่เหลี่ยมมุมมนครึ่งวง)
คัดลอก
ฝัง
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
คัดลอก
ฝัง
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
หน่วยจัดเก็บแบบดิสก์ (ทรงกระบอกมีร่อง)
คัดลอก
ฝัง
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
การแสดงผล (รูปร่างการแสดงผล)
คัดลอก
ฝัง
flowchart TD
A@{ shape: curv-trap, label: "Display" }
การประมวลผลแบบแบ่งส่วน (สี่เหลี่ยมแบ่งส่วน)
คัดลอก
ฝัง
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
การสกัด (สามเหลี่ยมเล็ก)
คัดลอก
ฝัง
flowchart TD
A@{ shape: tri, label: "Extract" }
หน่วยจัดเก็บภายใน (แผงหน้าต่าง)
คัดลอก
ฝัง
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
จุดเชื่อมต่อ (วงกลมทึบ)
คัดลอก
ฝัง
flowchart TD
A@{ shape: f-circ, label: "Connect" }
เอกสารที่มีเส้น
คัดลอก
ฝัง
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
ขีดจำกัดลูป (ห้าเหลี่ยมมีรอยบาก)
คัดลอก
ฝัง
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
ไฟล์แบบ manual (สามเหลี่ยมพลิก)
คัดลอก
ฝัง
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
การป้อนด้วยมือ (สี่เหลี่ยมคางหมูมุมฉาก)
คัดลอก
ฝัง
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
หลายเอกสาร (เอกสารซ้อนกัน)
คัดลอก
ฝัง
flowchart TD
A@{ shape: docs, label: "Multi-document" }
หลายโปรเซส (สี่เหลี่ยมซ้อนกัน)
คัดลอก
ฝัง
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
เทปกระดาษ (ธง)
คัดลอก
ฝัง
flowchart TD
A@{ shape: flag, label: "Paper tape" }
จัดเก็บข้อมูล (สี่เหลี่ยมโบว์)
คัดลอก
ฝัง
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
สรุป (วงกลมมีกากบาท)
คัดลอก
ฝัง
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
เอกสารที่ติดป้ายกำกับ
คัดลอก
ฝัง
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
กระบวนการที่ทำเครื่องหมาย
คัดลอก
ฝัง
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
รูปร่างพิเศษในผังงาน Mermaid
Mermaid ยังได้นำรูปภาพมาใช้เพื่อเสริมผังงานของคุณ ช่วยให้คุณสามารถใส่รูปภาพลงในผังงานได้โดยตรง จึงให้บริบททางสายตาและความชัดเจนมากขึ้น
รูปร่างรูปภาพ
คุณสามารถใช้ image เพื่อแทรกรูปภาพในผังงาน ไวยากรณ์สำหรับกำหนดรูปภาพมีดังนี้:
คัดลอก
ฝัง
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
พารามิเตอร์
- img: ที่อยู่ URL ของรูปภาพที่ต้องการแสดง
- label: ป้ายกำกับข้อความที่เชื่อมโยงกับรูปภาพ สามารถเป็นสตริงใดก็ได้ หากไม่ได้กำหนด จะไม่แสดงป้ายกำกับใด ๆ
- pos: ตำแหน่งของป้ายกำกับ หากไม่ได้กำหนด ป้ายกำกับจะอยู่ที่ด้านล่างของรูปภาพเป็นค่าเริ่มต้น
- w: ความกว้างของรูปภาพ หากไม่ได้กำหนด จะใช้ความกว้างตามธรรมชาติของรูปภาพเป็นค่าเริ่มต้น
- h: ความสูงของรูปภาพ หากไม่ได้กำหนด จะใช้ความสูงตามธรรมชาติของรูปภาพเป็นค่าเริ่มต้น
- constraint: กำหนดว่ารูปภาพจำกัดขนาดของโหนดหรือไม่ การตั้งค่านี้ยังช่วยให้รูปภาพคงอัตราส่วนกว้างยาวเดิม และปรับความสูงตามความกว้าง หากไม่ได้กำหนด จะมีค่าเริ่มต้นเป็น off
รูปภาพช่วยให้ผังงานของคุณมีความยืดหยุ่นและความน่าสนใจทางสายตาเพิ่มขึ้น ทำให้มีข้อมูลและน่าสนใจมากขึ้น
การเชื่อมต่อระหว่างโหนด
โหนดสามารถเชื่อมต่อกันได้ด้วยเส้นเชื่อมต่อและลูกศร มีลิงก์หลายประเภท และยังสามารถแนบสตริงข้อความกับลิงก์ได้
ลิงก์ที่มีลูกศร
คัดลอก
ฝัง
flowchart LR
A-->B
ลิงก์แบบเปิด
คัดลอก
ฝัง
flowchart LR
A --- B
ลิงก์ที่มีข้อความ
คัดลอก
ฝัง
flowchart LR
A-- This is the text! ---B
หรือ
คัดลอก
ฝัง
flowchart LR
A --- | This is the text| B
ลิงก์ที่มีลูกศรและข้อความ
คัดลอก
ฝัง
flowchart LR
A-->|text|B
หรือ
คัดลอก
ฝัง
flowchart LR
A-- text -->B
ลิงก์เส้นประ
คัดลอก
ฝัง
flowchart LR
A-.->B;
ลิงก์เส้นประที่มีข้อความ
คัดลอก
ฝัง
flowchart LR
A-. text .->B;
ลิงก์เส้นหนา
คัดลอก
ฝัง
flowchart LR
A ==> B
ลิงก์เส้นหนาที่มีข้อความ
คัดลอก
ฝัง
flowchart LR
A == |text| ==> B
ลิงก์ที่มองไม่เห็น
คัดลอก
ฝัง
flowchart LR
A ~~~ B
การเชื่อมต่อแบบลูกโซ่ของลิงก์
คัดลอก
ฝัง
flowchart LR
A -- text --> B -- text2 --> C
ยังสามารถประกาศลิงก์ของโหนดหลายรายการในบรรทัดเดียวกันได้ ดังที่แสดงด้านล่าง:
คัดลอก
ฝัง
flowchart LR
a --> b & c--> d
คุณยังสามารถอธิบายการพึ่งพาได้ เช่นเดียวกับโค้ดด้านล่าง:
คัดลอก
ฝัง
flowchart LR
a --> b & c--> d & e--> f
หากใช้ไวยากรณ์พื้นฐานเพื่ออธิบายกราฟเดียวกัน จะต้องใช้ 8 บรรทัด ขอเตือนว่า การใช้วิธีนี้มากเกินไปอาจทำให้ผังงานในรูปแบบ Markdown อ่านยากขึ้น
คัดลอก
ฝัง
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
เพิ่ม ID ให้กับเส้นเชื่อมต่อ
ปัจจุบัน Mermaid รองรับการเพิ่ม ID ให้กับเส้นเชื่อมต่อ คล้ายกับการแนบ ID และเมทาดาทากับโหนด ฟีเจอร์นี้วางรากฐานสำหรับสไตล์ คลาส และฟังก์ชันแอนิเมชันขั้นสูงบนเส้นเชื่อมต่อ
ไวยากรณ์:หากต้องการเพิ่ม ID ให้กับเส้นเชื่อมต่อ โปรดใส่ ID ไว้หน้าไวยากรณ์ของเส้นเชื่อมต่อ แล้วตามด้วยอักขระ @ ตัวอย่าง:
คัดลอก
ฝัง
flowchart LR
A e1@--> B
ในตัวอย่างนี้ e1 คือ ID ของเส้นเชื่อมต่อที่เชื่อม A กับ B คุณสามารถใช้ ID นี้ในคำสั่งนิยามหรือสไตล์ที่ตามมาได้ เช่นเดียวกับการใช้โหนด
เปิดแอนิเมชัน
หลังจากเพิ่ม ID ให้กับเส้นเชื่อมต่อแล้ว คุณสามารถเปิดแอนิเมชันของเส้นเชื่อมต่อได้โดยกำหนดคุณสมบัติของเส้นเชื่อมต่อ:
คัดลอก
ฝัง
flowchart LR
A e1@==> B
e1@{ animate: true }
สิ่งนี้บอก Mermaid ว่าเส้นเชื่อมต่อ e1 เป็นแอนิเมชัน
เลือกประเภทแอนิเมชัน
ในเวอร์ชันเริ่มต้นรองรับความเร็วแอนิเมชันสองแบบ: fast และ slow การเลือกประเภทแอนิเมชันเฉพาะเป็นวิธีง่าย ๆ ในการเปิดใช้งานแอนิเมชันและตั้งค่าความเร็วในคราวเดียว
คัดลอก
ฝัง
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
ใช้คำสั่ง classDef ในการทำแอนิเมชัน
คุณยังสามารถเพิ่มแอนิเมชันให้กับเส้นเชื่อมต่อได้โดยกำหนดคลาสให้กับเส้นเชื่อมต่อ แล้วนิยามคุณสมบัติแอนิเมชันในคำสั่ง classDef ตัวอย่าง:
คัดลอก
ฝัง
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
ในโค้ดนี้:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate นิยามคลาสชื่อ animate พร้อมคุณสมบัติสไตล์และแอนิเมชัน
- class e1 animate นำคลาส animate ไปใช้กับเส้นเชื่อมต่อ e1
หมายเหตุเกี่ยวกับการหลีกอักขระจุลภาค: เมื่อตั้งค่าคุณสมบัติ stroke-dasharray โปรดจำไว้ว่าต้องหลีกอักขระจุลภาคเป็น , เนื่องจากจุลภาคถูกใช้เป็นตัวคั่นในการกำหนดสไตล์ของ Mermaid
ประเภทลูกศรใหม่
รองรับประเภทลูกศรใหม่
- เส้นเชื่อมต่อที่มีวงกลมทึบ
- เส้นเชื่อมต่อที่มีเครื่องหมายกากบาท
เส้นเชื่อมต่อที่มีวงกลมทึบ
คัดลอก
ฝัง
flowchart LR
A --o B
เส้นเชื่อมต่อที่มีเครื่องหมายกากบาท
คัดลอก
ฝัง
flowchart LR
A --x B
ลูกศรหลายทิศทาง
สามารถใช้ลูกศรหลายทิศทางได้ ตัวอย่าง:
คัดลอก
ฝัง
flowchart LR
A o--o B
B <--> C
C x--x D
ความยาวของเส้นเชื่อมต่อ
โหนดแต่ละโหนดในผังงานจะถูกกำหนดให้อยู่ในระดับหนึ่งในกราฟที่เรนเดอร์ โดยอิงจากโหนดที่เชื่อมต่อด้วย นั่นคือระดับแนวตั้งหรือแนวนอน (ขึ้นอยู่กับทิศทางของผังงาน) โดยค่าเริ่มต้น ลิงก์สามารถข้ามได้กี่ระดับก็ได้ แต่คุณสามารถกำหนดให้การเชื่อมต่อใดยาวกว่าการเชื่อมต่ออื่นได้โดยเพิ่มขีดกลางพิเศษในนิยามการเชื่อมต่อ
ในตัวอย่างนี้ มีการเพิ่มขีดกลางพิเศษสองขีดในการเชื่อมต่อจากโหนด B ไปยังโหนด E ทำให้ข้ามระดับได้มากกว่าลิงก์ทั่วไปสองระดับ:
คัดลอก
ฝัง
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
เมื่อป้ายกำกับของการเชื่อมต่อเขียนไว้ตรงกลางการเชื่อมต่อ ต้องเพิ่มขีดกลางพิเศษทางด้านขวาของการเชื่อมต่อ ตัวอย่างนี้เทียบเท่ากับตัวอย่างก่อนหน้า:
คัดลอก
ฝัง
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
สำหรับเส้นแบบจุดหรือลิงก์เส้นหนา อักขระที่ต้องเพิ่มคือเครื่องหมายเท่ากับหรือจุด ดังที่แสดงในตารางด้านล่าง:
| ความยาว | 1 | 2 | 3 |
|---|---|---|---|
| การเชื่อมต่อทั่วไป | --- | ---- | ----- |
| การเชื่อมต่อทั่วไปที่มีลูกศร | --> | ---> | ----> |
| การเชื่อมต่อเส้นหนา | === | ==== | ===== |
| การเชื่อมต่อเส้นหนาที่มีลูกศร | ==> | ===> | ====> |
| เส้นแบบจุด | -.- | -..- | -...- |
| เส้นแบบจุดที่มีลูกศร | -.- | -..-> | -...-> |
อักขระพิเศษ
คุณสามารถใส่ข้อความไว้ในเครื่องหมายอัญประกาศเพื่อเรนเดอร์อักขระที่ยุ่งยากกว่าได้ ดังที่แสดงในตัวอย่างด้านล่าง:
คัดลอก
ฝัง
flowchart LR
id1["This is the (text) in the box"]
การเข้ารหัสเอนทิตีสำหรับการหลีกอักขระ
สามารถใช้ไวยากรณ์ในตัวอย่างในการหลีกอักขระได้
คัดลอก
ฝัง
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
ตัวเลขที่ให้มาเป็นเลขฐานสิบ ดังนั้น # จึงเข้ารหัสเป็น #35 ได้ และยังรองรับการใช้ชื่ออักขระ HTML ด้วย
กราฟย่อย
คัดลอก
ฝัง
subgraph title
graph definition
end
ต่อไปนี้คือตัวอย่าง:
คัดลอก
ฝัง
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
คุณยังสามารถตั้งค่า id ให้กับกราฟย่อยได้
คัดลอก
ฝัง
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
แผนผังลำดับงาน
เมื่อใช้แผนภาพประเภทผังงาน ก็สามารถตั้งค่าเส้นเชื่อมต่อที่ชี้ไปยังและมาจากกราฟย่อยได้เช่นเดียวกับผังงานด้านล่าง
คัดลอก
ฝัง
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
ทิศทางของกราฟย่อย
เมื่อใช้ประเภทผังงาน คุณสามารถใช้คำสั่งทิศทางเพื่อตั้งค่าทิศทางการเรนเดอร์ของกราฟย่อยได้ ดังที่แสดงด้านล่าง:
คัดลอก
ฝัง
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
ข้อจำกัด
หากโหนดใดของกราฟย่อยเชื่อมต่อกับภายนอก ทิศทางของกราฟย่อยจะถูกละเว้น มิฉะนั้น กราฟย่อยจะสืบทอดทิศทางของกราฟแม่:
คัดลอก
ฝัง
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
สตริง Markdown
สตริง Markdown ช่วยเสริมผังงานและแผนที่ความคิดด้วยการจัดหาประเภทสตริงที่ยืดหยุ่นกว่า รองรับตัวเลือกการจัดรูปแบบข้อความ เช่น ตัวหนาและตัวเอียง และสามารถตัดข้อความในป้ายกำกับขึ้นบรรทัดใหม่ได้อัตโนมัติ
คัดลอก
ฝัง
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- หากต้องการทำข้อความเป็นตัวหนา โปรดใช้เครื่องหมายดอกจันสองตัว (**) หน้าหลังข้อความ
- ตัวเอียงใช้เครื่องหมายดอกจันเดียว (*) วางไว้หน้าหลังข้อความ
- สำหรับสตริงแบบดั้งเดิม คุณต้องเพิ่มแท็ก <br> เพื่อให้ข้อความขึ้นบรรทัดใหม่ในโหนด อย่างไรก็ตาม สตริง Markdown จะขึ้นบรรทัดใหม่โดยอัตโนมัติเมื่อข้อความยาวเกินไป และเพียงใช้ตัวขึ้นบรรทัดใหม่แทนแท็ก <br> ก็สามารถเริ่มบรรทัดใหม่ได้
ฟีเจอร์นี้ใช้ได้กับป้ายกำกับโหนด ป้ายกำกับเส้นเชื่อมต่อ และป้ายกำกับกราฟย่อย
สามารถปิดการตัดบรรทัดอัตโนมัติได้โดยใช้ไวยากรณ์เฉพาะ
คัดลอก
ฝัง
---
config:
markdownAutoWrap: false
---
graph LR
ความคิดเห็น
สามารถป้อนความคิดเห็นในผังงานได้ และเอดิเตอร์จะไม่สนใจความคิดเห็นเหล่านี้ ความคิดเห็นต้องอยู่บนบรรทัดของตัวเอง และต้องขึ้นต้นด้วยเครื่องหมายเปอร์เซ็นต์คู่ (%%) ข้อความใด ๆ ตั้งแต่เริ่มความคิดเห็นจนถึงบรรทัดถัดไปจะถือเป็นความคิดเห็น รวมถึงไวยากรณ์ของผังงานใด ๆ
คัดลอก
ฝัง
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
สไตล์และคลาส
สไตล์ของลิงก์
สามารถตั้งค่าสไตล์ของลิงก์ได้ ตัวอย่างเช่น คุณอาจต้องการออกแบบลิงก์ที่เคลื่อนย้ายย้อนกลับในกระบวนการ เนื่องจากลิงก์ไม่มี ID เหมือนโหนด จึงต้องกำหนดสไตล์ที่ลิงก์ควรใช้ด้วยวิธีอื่น ใช้อันดับที่เมื่อกำหนดลิงก์ หรือใช้ค่าเริ่มต้นเพื่อนำไปใช้กับลิงก์ทั้งหมด
คัดลอก
ฝัง
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
ยังสามารถเพิ่มสไตล์ให้กับลิงก์หลายรายการได้โดยใช้จุลภาคแยกหมายเลขลิงก์ในคำสั่งเดียว:
คัดลอก
ฝัง
linkStyle 1,2,7 color:blue;
ตั้งค่าสไตล์เส้นโค้งของเส้นเชื่อมต่อ
หากวิธีเริ่มต้นไม่ตอบสนองความต้องการของคุณ คุณสามารถตั้งค่าสไตล์เส้นโค้งให้กับเส้นเชื่อมต่อระหว่างรายการได้ สไตล์เส้นโค้งที่ใช้ได้ได้แก่ basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter และ stepBefore
ในตัวอย่างด้านล่าง กราฟที่เรียงจากซ้ายไปขวาใช้สไตล์เส้นโค้ง stepBefore
คัดลอก
ฝัง
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
ตั้งค่าสไตล์ของโหนด
สามารถกำหนดสไตล์เฉพาะให้กับโหนดได้ เช่น ขอบที่หนาขึ้นหรือสีพื้นหลังที่ต่างออกไป
คัดลอก
ฝัง
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
คลาส
สะดวกกว่าการกำหนดสไตล์ทุกครั้งคือการกำหนดคลาสสไตล์ แล้วแนบคลาสนั้นกับโหนดที่ต้องการรูปลักษณ์ที่ต่างออกไป
การกำหนดคลาสมีดังนี้:
คัดลอก
ฝัง
classDef className fill:pink,stroke:#333,stroke-width:4px;
นอกจากนี้ ยังสามารถกำหนดสไตล์ให้กับหลายคลาสในคำสั่งเดียวได้:
คัดลอก
ฝัง
classDef firstClassName,secondClassName font-size:12pt;
การแนบคลาสกับโหนดมีดังนี้:
คัดลอก
ฝัง
class nodeId1 className;
ยังสามารถแนบคลาสหนึ่งกับรายการโหนดในคำสั่งเดียวได้:
คัดลอก
ฝัง
class nodeId1,nodeId2 className;
การเพิ่มคลาสสามารถใช้ตัวดำเนินการ ::: เพื่อแนบชื่อคลาสกับโหนดได้ ดังที่แสดงด้านล่าง:
คัดลอก
ฝัง
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
เมื่อประกาศลิงก์หลายรายการระหว่างโหนด สามารถใช้รูปแบบนี้ได้:
คัดลอก
ฝัง
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- ในการประกาศกราฟ ปัจจุบันคำสั่งสามารถไม่ลงท้ายด้วยเครื่องหมายอัฒภาคได้ หลังจากเวอร์ชัน 0.2.16 การลงท้ายคำสั่งกราฟด้วยเครื่องหมายอัฒภาคเป็นเพียงตัวเลือก ดังนั้นการประกาศกราฟด้านล่างจึงใช้ได้เช่นเดียวกับการประกาศกราฟแบบเก่า
- อนุญาตให้มีช่องว่างหนึ่งช่องระหว่างจุดยอดและลิงก์ อย่างไรก็ตาม ไม่ควรมีช่องว่างใด ๆ ระหว่างจุดยอดกับข้อความของจุดยอด และระหว่างลิงก์กับข้อความของลิงก์ การประกาศกราฟแบบเก่ายังคงใช้ได้ ดังนั้นฟีเจอร์ใหม่นี้จึงเป็นตัวเลือก มีจุดประสงค์เพื่อเพิ่มความอ่านง่าย
ต่อไปนี้คือการประกาศเส้นเชื่อมต่อแบบใหม่ ซึ่งใช้ได้เช่นเดียวกับการประกาศเส้นเชื่อมต่อแบบเก่า
คัดลอก
ฝัง
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
