ชั้นเรียนกระบวนการ
การแสดงออกทางกราฟิก
การคิด
การแสดงออกที่มีโครงสร้าง
หมายเหตุ
การแสดงออกอย่างมีประสิทธิภาพ
ทรีแมป
แผนภาพวงเล็บ
โหมดเริ่มต้น
Mermaid เป็นเครื่องมือที่สร้างไดอะแกรมจากไวยากรณ์ข้อความ เมื่อเขียนโค้ด Mermaid ง่าย ๆ ก็สามารถสร้างไดอะแกรมได้หลายรูปแบบ เช่น โฟลว์ชาร์ต, ซีเควนซ์ไดอะแกรม, คลาสไดอะแกรม, สเตตไดอะแกรม, ER ไดอะแกรม, แกนต์ชาร์ต, ไมด์แมป และอาร์คิเทกเจอร์ไดอะแกรม
ต่างจากเครื่องมือวาดภาพแบบลากวางทั่วไป Mermaid อธิบายโหนด, ความสัมพันธ์, ลำดับเวลา และโครงสร้างข้อมูลในไดอะแกรมผ่านโค้ดเป็นหลัก เมื่อแก้ไขโค้ด ไดอะแกรมจะสร้างใหม่โดยอัตโนมัติ จึงเหมาะเป็นพิเศษกับงานอย่างเอกสารทางเทคนิค, การออกแบบผลิตภัณฑ์, การจัดการโครงการ, การพัฒนาซอฟต์แวร์ และการจัดระเบียบความรู้
บทความนี้แนะนำไวยากรณ์พื้นฐานของ Mermaid และรวบรวม ประเภทไดอะแกรมที่ตัวแก้ไข Mermaid รองรับการเรนเดอร์ พร้อมไวยากรณ์การประกาศ ตัวอย่างโค้ด และสถานการณ์การใช้งาน หากคุณต้องการเขียนและพรีวิวโค้ด Mermaid ออนไลน์โดยตรง คุณสามารถ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid ของ ProcessOn.
Mermaid เป็นเครื่องมือที่ใช้ไวยากรณ์ข้อความในการสร้างไดอะแกรม โค้ดด้านล่างสามารถสร้างโฟลว์ชาร์ต Mermaid แบบง่ายได้:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
ผลลัพธ์การเรนเดอร์เป็นดังนี้:
โดยที่: flowchart TD ใช้ประกาศสร้างโฟลว์ชาร์ตที่จัดเรียงจากบนลงล่าง
สำหรับ Mermaid ตรรกะการทำงานสามารถสรุปได้ดังนี้:
เขียนโค้ด Mermaid → แยกวิเคราะห์โค้ด → เรนเดอร์ไดอะแกรม → แก้ไขโค้ด → ไดอะแกรมอัปเดตแบบเรียลไทม์
ดังนั้น หนึ่งในกุญแจสำคัญในการเรียน Mermaid คือการทำความเข้าใจไวยากรณ์การประกาศที่ใช้กับไดอะแกรมแต่ละประเภท
ไดอะแกรมต่างประเภทใช้ไวยากรณ์การประกาศ Mermaid ที่ต่างกัน, ปัจจุบัน ไดอะแกรม Mermaid ที่พบบ่อยมีดังนี้:
| ประเภทไดอะแกรม | ไวยากรณ์การประกาศของ Mermaid | การใช้งานทั่วไป |
| โฟลว์ชาร์ต | flowchart | กระบวนการธุรกิจ, อัลกอริทึม, เวิร์กโฟลว์ |
| ซีเควนซ์ไดอะแกรม | sequenceDiagram | การโต้ตอบของระบบ, การเรียก API |
| คลาสไดอะแกรม | classDiagram | โครงสร้างซอฟต์แวร์, การสร้างโมเดลเชิงวัตถุ |
| สเตตไดอะแกรม | stateDiagram-v2 | การเปลี่ยนสถานะ, สเตตแมชชีน |
| ER ไดอะแกรม | erDiagram | ความสัมพันธ์ของเอนทิตีในฐานข้อมูล |
| แกนต์ชาร์ต | gantt | แผนโครงการ, ความคืบหน้าของงาน |
| เจอร์นีย์ไดอะแกรมของผู้ใช้ | journey | ประสบการณ์ผู้ใช้, เส้นทางลูกค้า |
| ไมด์แมป | mindmap | การจัดระเบียบความรู้, การระดมสมอง |
| ไทม์ไลน์ | timeline | ลำดับเวลา, เหตุการณ์ทางประวัติศาสตร์ |
| แผนภูมิวงกลม | pie | สัดส่วน, การวิเคราะห์องค์ประกอบ |
| ควอดแรนต์ชาร์ต | quadrantChart | การจำแนกประเภท, ลำดับความสำคัญ, การวิเคราะห์การวางตำแหน่ง |
| Git ไดอะแกรม | gitGraph | สาขา Git, การคอมมิต, การรวมสาขา |
| แซงกีย์ไดอะแกรม | sankey-beta | ข้อมูล, ทรัพยากร, ทิศทางการไหลของปริมาณ |
| XY ชาร์ต | xychart-beta | แนวโน้มข้อมูล, การเปรียบเทียบตัวเลข |
| เรดาร์ชาร์ต | radar | การเปรียบเทียบตัวชี้วัดหลายมิติ |
| C4 ไดอะแกรม | C4Context เป็นต้น | การสร้างโมเดลสถาปัตยกรรมซอฟต์แวร์ |
| อาร์คิเทกเจอร์ไดอะแกรม | architecture-beta | สถาปัตยกรรมของระบบ, บริการ และทรัพยากร |
| คัมบังไดอะแกรม | kanban | การจัดการงานและสถานะการทำงาน |
| บล็อกไดอะแกรม | block-beta | ความสัมพันธ์ของโมดูล, โครงสร้าง และระบบ |
| แพ็กเก็ตไดอะแกรม | packet-beta | โครงสร้างแพ็กเก็ตเครือข่าย |
| รีไควเมนต์ไดอะแกรม | requirementDiagram | การวิเคราะห์ความต้องการและความสัมพันธ์ของความต้องการ |
ตัวแก้ไข Mermaid แต่ละเวอร์ชันอาจรองรับไวยากรณ์และฟีเจอร์ของไดอะแกรมไม่เหมือนกัน เมื่อใช้งานจริงควรยึดตามไวยากรณ์ที่ตัวแก้ไขรองรับ
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง flowchart ในการสร้างโฟลว์ชาร์ต วิธีเขียนที่ง่ายที่สุด:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
ผลลัพธ์การเรนเดอร์
โดยที่:
โฟลว์ชาร์ต Mermaid ยังสามารถใช้ LR (จากซ้ายไปขวา), RL (จากขวาไปซ้าย), BT (จากล่างขึ้นบน) และการตั้งค่าทิศทางอื่น ๆ ตัวอย่างเช่น:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
แสดงถึงโฟลว์ชาร์ตที่จัดเรียงจากซ้ายไปขวา
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| (text) | สี่เหลี่ยมมุมมน | หมายถึงจุดเริ่มต้น, จุดสิ้นสุด หรือการทำงานทั่วไปของโฟลว์ |
| [text] | สี่เหลี่ยม | หมายถึงขั้นตอน, งาน หรือกระบวนการประมวลผลที่เจาะจง |
| {text} | สี่เหลี่ยมข้าวหลามตัด | หมายถึงการตัดสินใจ, การแยกสาขาตามเงื่อนไข |
| ((text)) | วงกลม | หมายถึงจุดเชื่อมต่อหรือเหตุการณ์ |
| [[text]] | สี่เหลี่ยมซ้อน | หมายถึงการเรียกซับโฟลว์, ซับโมดูล |
| [(text)] | ทรงกระบอก | หมายถึงโหนดฐานข้อมูล |
| >text] | รูปทรงอสมมาตร | หมายถึงอินพุต/เอาต์พุต |
| [/text/] | สี่เหลี่ยมด้านขนาน | หมายถึงข้อมูลอินพุตหรือเอาต์พุต |
| --> | ลูกศร | หมายถึงทิศทางการดำเนินไปของโฟลว์ |
| --- | เส้นเชื่อมที่ไม่มีลูกศร | หมายถึงความสัมพันธ์แบบสมาคม |
| -.-> | ลูกศรเส้นประ | หมายถึงโฟลว์ทางเลือก, ความสัมพันธ์แบบอ้างอิง |
| ==> | ลูกศรหัวหนา | หมายถึงโฟลว์ที่สำคัญหรือความสัมพันธ์ที่แน่นแฟ้น |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างโฟลว์ชาร์ตด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/flowchart
โฟลว์ชาร์ตเหมาะสำหรับใช้ในงานอย่างกระบวนการธุรกิจ, เวิร์กโฟลว์, ขั้นตอนอัลกอริทึม, กระบวนการของระบบ และกระบวนการตัดสินใจ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับโฟลว์ชาร์ต.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง sequenceDiagram ในการสร้างซีเควนซ์ไดอะแกรม ตัวอย่างที่ง่ายที่สุด:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| sequenceDiagram | ซีเควนซ์ไดอะแกรม | สร้างซีเควนซ์ไดอะแกรม |
| A->B: message | เส้นทึบ | หมายถึงการเรียกข้อความแบบซิงโครนัสหรือการโต้ตอบทั่วไป |
| A-->B: message | เส้นประ | หมายถึงข้อความตอบกลับหรือการโต้ตอบที่มีความสัมพันธ์แบบอ่อน |
| A->>B: message | ลูกศรเส้นทึบ | หมายถึงการเรียกข้อความแบบอะซิงโครนัส |
| A-->>B: message | ลูกศรเส้นประ | หมายถึงการตอบกลับแบบอะซิงโครนัสหรือข้อความตอบกลับ |
| participant A | ผู้เข้าร่วม | กำหนดออบเจกต์, บทบาท หรือระบบในการโต้ตอบ |
| actor A | บทบาท | หมายถึงผู้เข้าร่วมเชิงรุก เช่น ผู้ใช้ หรือระบบภายนอก |
| activate A | กล่องแอ็กติเวชัน | หมายถึงออบเจกต์เริ่มประมวลผลคำขอ |
| deactivate A | สิ้นสุดการแอ็กติเวชัน | หมายถึงออบเจกต์ประมวลผลปัจจุบันเสร็จสิ้น |
| loop text | กล่องลูป | หมายถึงกระบวนการโต้ตอบที่ทำซ้ำ |
| alt text | การแยกสาขาตามเงื่อนไข | หมายถึงเส้นทางการโต้ตอบภายใต้เงื่อนไขที่ต่างกัน |
| opt text | โฟลว์ทางเลือก | หมายถึงการโต้ตอบที่อาจเกิดขึ้นได้ |
| par text | กล่องขนาน | หมายถึงการทำงานหลายอย่างพร้อมกัน |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างซีเควนซ์ไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/sequence-diagram
ซีเควนซ์ไดอะแกรมเหมาะสำหรับอธิบายการโต้ตอบที่เกิดขึ้นตามลำดับเวลาระหว่างผู้ใช้กับระบบ, ระบบกับระบบ และบริการกับบริการ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับซีเควนซ์ไดอะแกรม.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง classDiagram ในการสร้างคลาสไดอะแกรม
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| classDiagram | คลาสไดอะแกรม | สร้างคลาสไดอะแกรม |
| class ClassName | คลาส | กำหนดออบเจกต์คลาส |
| ClassName : attribute | แอตทริบิวต์ | หมายถึงตัวแปรสมาชิกในคลาส |
| ClassName : method() | เมธอด | กำหนดเมธอดของคลาส |
| <|-- | สามเหลี่ยมโปร่ง+ เส้นทึบ | หมายถึงความสัมพันธ์แบบสืบทอด |
| <|.. | สามเหลี่ยมโปร่ง+ เส้นประ | หมายถึงความสัมพันธ์แบบอิมพลีเมนต์ |
| *-- | ข้าวหลามตัดทึบ+ เส้นทึบ | หมายถึงความสัมพันธ์แบบคอมโพซิชัน |
| o-- | ข้าวหลามตัดโปร่ง+ เส้นทึบ | หมายถึงความสัมพันธ์แบบแอกกรีเกชัน |
| --> | ลูกศรเส้นทึบ | หมายถึงความสัมพันธ์แบบสมาคม |
| ..> | ลูกศรเส้นประ | หมายถึงความสัมพันธ์แบบดีเพนเดนซี |
| -- | เส้นทึบ | หมายถึงความสัมพันธ์แบบเชื่อมต่อทั่วไป |
| +attribute | เครื่องหมายบวก | หมายถึงแอตทริบิวต์หรือเมธอดแบบสาธารณะ |
| -attribute | เครื่องหมายลบ | หมายถึงแอตทริบิวต์หรือเมธอดแบบไพรเวต |
สัญลักษณ์อย่าง +, -, # ที่อยู่หน้าสมาชิกของคลาสสามารถบ่งบอกระดับการมองเห็นที่แตกต่างกันได้
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างคลาสไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/class-diagram
คลาสไดอะแกรมเหมาะสำหรับงานอย่างการออกแบบซอฟต์แวร์, การสร้างโมเดลเชิงวัตถุ และการวิเคราะห์โครงสร้างโปรแกรม ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับคลาสไดอะแกรม.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง stateDiagram-v2 ในการสร้างสเตตไดอะแกรม
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| stateDiagram-v2 | สเตตไดอะแกรม | สร้างสเตตไดอะแกรม |
| state StateName | สี่เหลี่ยมมุมมน | กำหนดโหนดสถานะพื้นฐาน |
| state StateName : text | สี่เหลี่ยมมุมมนที่มีข้อความ | เพิ่มข้อความอธิบายให้กับสถานะ |
| [*] | จุดทึบขนาดเล็กหรือวงแหวนสองชั้น | หมายถึงการเริ่มต้นหรือสิ้นสุดของสถานะ |
| [*] --> StateName | ลูกศรเริ่มต้น | หมายถึงการเข้าสู่สถานะแรก |
| StateName --> [*] | ลูกศรสิ้นสุด | หมายถึงการสิ้นสุดโฟลว์ของสถานะ |
| A --> B | ลูกศรเส้นทึบ | หมายถึงการเปลี่ยนสถานะ |
| A --> B: event | ลูกศรเส้นทึบที่มีป้ายกำกับ | การเปลี่ยนสถานะที่มีเหตุการณ์กระตุ้น |
| state StateName { ... } | สี่เหลี่ยมมุมมนซ้อนกัน | กำหนดสถานะเชิงซ้อน |
| state Node <<choice>> | สี่เหลี่ยมข้าวหลามตัด | โหนดเลือกตัดสินใจแยกสาขา |
| state Fork <<fork>> | เส้นคั่นแนวนอนแบบหนา | หมายถึงการเริ่มต้นโฟลว์ขนาน |
| state Join <<join>> | เส้นคั่นแนวนอนแบบหนา | หมายถึงการสิ้นสุดและรวมโฟลว์ขนาน |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างสเตตไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/state-diagram
สเตตไดอะแกรมเหมาะสำหรับแสดงสถานะคำสั่งซื้อ, สถานะเวิร์กโฟลว์, สถานะผู้ใช้, สถานะระบบ ตลอดจนสเตตแมชชีน ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับสเตตไดอะแกรม.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง erDiagram ในการสร้างไดอะแกรมความสัมพันธ์ของเอนทิตี หรือที่เรียกว่า ER ไดอะแกรม
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| erDiagram | ไดอะแกรม ER | สร้าง ไดอะแกรม ER |
| ENTITY { } | สี่เหลี่ยม | กำหนดเอนทิตี |
| type field | เครื่องหมายแอตทริบิวต์ | กำหนดแอตทริบิวต์ของเอนทิตี |
| type field PK | คีย์หลัก | กำหนดคีย์หลักของเอนทิตี |
| type field FK | คีย์นอก | กำหนดคีย์นอกของเอนทิตี |
| type field UK | คีย์ที่ไม่ซ้ำ | กำหนดฟิลด์ที่มีข้อจำกัดแบบไม่ซ้ำ |
| || | หนึ่ง | ต้องมีหนึ่งและเพียงหนึ่งเท่านั้น |
| o| | ศูนย์หรือหนึ่ง | ศูนย์หรือหนึ่ง |
| |{ | หนึ่งหรือมากกว่า | อย่างน้อยหนึ่ง |
| o{ | ศูนย์หรือหนึ่งหรือมากกว่า | ศูนย์หรือมากกว่า |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้าง ER ไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/er-diagram
ER ไดอะแกรมสามารถแสดงเอนทิตี, แอตทริบิวต์ และความสัมพันธ์ระหว่างเอนทิตี มักใช้ในการออกแบบฐานข้อมูล ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับ ER ไดอะแกรม.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง mindmap ในการสร้างไมด์แมป
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| mindmap | ไมด์แมป | สร้างไมด์แมป |
| root[text] | สี่เหลี่ยม | หัวข้อหลักทรงสี่เหลี่ยม |
| root(text) | สี่เหลี่ยมมุมมน | หัวข้อหลักทรงสี่เหลี่ยมมุมมน |
| root((text)) | วงกลม | หัวข้อหลักทรงกลม |
| root{{text}} | หกเหลี่ยม | หัวข้อหลักทรงหกเหลี่ยม |
| root)text( | บับเบิล | หัวข้อหลักแบบบับเบิล |
| [text] | สี่เหลี่ยม | โหนดทรงสี่เหลี่ยม |
| (text) | สี่เหลี่ยมมุมมน | โหนดทรงสี่เหลี่ยมมุมมน |
| ((text)) | วงกลม | โหนดทรงกลม |
| {{text}} | หกเหลี่ยม | โหนดทรงหกเหลี่ยม |
| )text( | บับเบิล | โหนดแบบบับเบิล |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างไมด์แมปด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/mindmap
ไมด์แมปแสดงความสัมพันธ์เชิงลำดับชั้นผ่านการเยื้อง จึงเหมาะมากสำหรับการจัดระเบียบความรู้, การระดมสมอง, บันทึกบทเรียน และสถาปัตยกรรมสารสนเทศ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับไมด์แมป.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง gantt ในการสร้างแกนต์ชาร์ต
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
ผลการเรนเดอร์
โดยในนั้น:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| gantt | แกนต์ชาร์ต | สร้างแกนต์ชาร์ต |
| title text | ชื่อเรื่อง | กำหนดชื่อเรื่องของแกนต์ชาร์ต |
| dateFormat text | ตัวระบุการตั้งค่าวันที่ | กำหนดรูปแบบการแปลงวันที่ของไทม์ไลน์ |
| section text | แถบชื่อกลุ่มสี | แบ่งกลุ่มงาน |
| TaskName : id, startDate, endDate | แถบงานแนวนอน | กำหนดคุณสมบัติที่เกี่ยวข้องของงาน |
| startDate | แถบงานแนวนอน | กำหนดเวลาเริ่มต้น |
| endDate | แถบงานแนวนอน | กำหนดเวลาสิ้นสุด |
| duration | แถบงานแนวนอน | กำหนดระยะเวลาของงาน |
| id | กำหนดเอง | กำหนดรหัสของงาน |
| after id | แถบงานแนวนอน | กำหนดงานที่เริ่มตามงานก่อนหน้า |
| 16d, 2w | แถบงานแนวนอน | หมายถึงวันหรือสัปดาห์ |
| milestone, date | ข้าวหลามตัดทึบ | กำหนดโหนดไมล์สโตน |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างแกนต์ชาร์ตด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/gantt
แกนต์ชาร์ตของ Mermaid เหมาะสำหรับแผนโครงการ, การจัดตารางงาน, ความคืบหน้าการพัฒนา และการจัดการโครงการ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับแกนต์ชาร์ต.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง journey ในการสร้างเจอร์นีย์ไดอะแกรมของผู้ใช้
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
ผลการเรนเดอร์
โดยในนั้น:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| journey | เจอร์นีย์ไดอะแกรมของผู้ใช้ | สร้างเจอร์นีย์ไดอะแกรมของผู้ใช้ |
| title text | ชื่อเรื่อง | ชื่อเรื่องของเจอร์นีย์ไดอะแกรมของผู้ใช้ |
| section text | บล็อกแบ่งส่วน | แบ่งกลุ่มขั้นตอนของโฟลว์ |
| TaskName:num:Actor | โหนดโฟลว์+แกนมาตรวัดความพึงพอใจ | กำหนดงานโต้ตอบภายในขั้นตอน, คะแนนความพึงพอใจ และบทบาทที่เข้าร่วม |
| num (1~5) | คะแนนความพึงพอใจ | 1 คะแนนต่ำสุด, 5 คะแนนดีที่สุด |
| Me, Cat | บทบาท | กำหนดบทบาทหลายบทบาทที่เข้าร่วมในงานนี้ |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างเจอร์นีย์ไดอะแกรมของผู้ใช้ด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/user-journey-diagram
เจอร์นีย์ไดอะแกรมของผู้ใช้เหมาะสำหรับวิเคราะห์ขั้นตอนและประสบการณ์ต่าง ๆ ที่ลูกค้าเผชิญตั้งแต่เริ่มสัมผัสผลิตภัณฑ์จนบรรลุเป้าหมาย ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับเจอร์นีย์ไดอะแกรมของผู้ใช้.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง timeline ในการสร้างไทม์ไลน์
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| timeline | ไทม์ไลน์ | สร้างไทม์ไลน์ |
| title text | ชื่อเรื่อง | กำหนดชื่อเรื่องของไทม์ไลน์ |
| section text | บล็อกแบ่งส่วน | แบ่งกลุ่มช่วงเวลา |
| date : Event1 | เหตุการณ์ | กำหนดเหตุการณ์ที่สอดคล้องกับจุดเวลา |
| : Event2 | หลายเหตุการณ์ | เหตุการณ์อื่นที่สอดคล้องกับเวลาเดียวกัน |
| ช่องว่าง | ขึ้นบรรทัดใหม่ | ขึ้นบรรทัดใหม่สำหรับคำอธิบายเหตุการณ์ที่ยาวเกินไป |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างไทม์ไลน์ด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/timeline
ไทม์ไลน์เหมาะสำหรับแสดงเหตุการณ์ทางประวัติศาสตร์, การพัฒนาของโครงการ, การปรับปรุงผลิตภัณฑ์ และข้อมูลตามลำดับเวลา ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับไทม์ไลน์.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง quadrantChart ในการสร้างควอดแรนต์ชาร์ต
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
ผลการเรนเดอร์
โดยที่:
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างควอดแรนต์ชาร์ตด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/quadrant-chart
ควอดแรนต์ชาร์ตเหมาะสำหรับการวางตำแหน่งผลิตภัณฑ์, การวิเคราะห์ลำดับความสำคัญ, การวิเคราะห์การแข่งขัน และการจำแนกแบบสองมิติ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับควอดแรนต์ชาร์ต.
ไวยากรณ์พื้นฐาน
คัมบังไดอะแกรมของ Mermaid ใช้จัดระเบียบรายการงานตามสถานะของงาน เช่น รอดำเนินการ, กำลังดำเนินการ และเสร็จสิ้น โครงสร้างโดยทั่วไปสามารถแสดงได้ดังนี้:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
ผลการเรนเดอร์
โดยที่;
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างคัมบังไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/kanban
คัมบังไดอะแกรมเหมาะสำหรับการจัดการโครงการ, การติดตามงาน, กระบวนการวิจัยและพัฒนา และการจัดการเวิร์กโฟลว์ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับคัมบังไดอะแกรม.
ไวยากรณ์พื้นฐาน
รีไควเมนต์ไดอะแกรมใช้แสดงความสัมพันธ์ระหว่างความต้องการ, ฟังก์ชัน และองค์ประกอบของระบบ, Mermaid ใช้คำสั่ง requirementDiagram ในการสร้างรีไควเมนต์ไดอะแกรม
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| requirementDiagram | รีไควเมนต์ไดอะแกรม | สร้างรีไควเมนต์ไดอะแกรม |
| Requirement name { } | ความต้องการ | กำหนดความต้องการพื้นฐาน |
| functionalRequirement name { } | ฟังก์ชัน | กำหนดความต้องการด้านฟังก์ชัน |
| interfaceRequirement name { } | อินเทอร์เฟซ | กำหนดความต้องการด้านอินเทอร์เฟซ |
| performanceRequirement name { } | ประสิทธิภาพ | กำหนดความต้องการด้านประสิทธิภาพ |
| physicalRequirement name { } | ทางกายภาพ | กำหนดความต้องการทางกายภาพ |
| element name {type: name docRef: name} | องค์ประกอบ | กำหนดองค์ประกอบเอนทิตี เช่น ระบบ / คอมโพเนนต์ / การทดสอบ |
| X - satisfies -> Y | ลูกศรเส้นประ | เอนทิตีตอบสนองความต้องการที่สอดคล้องกัน |
| X - contains -> Y | เส้นทึบ โดยจุดเริ่มต้นมีปลายวงกลมแบบกากบาทบวก | ความต้องการหนึ่งประกอบด้วยความต้องการอีกรายการ |
| X - derives -> Y | ลูกศรเส้นประ | ความต้องการที่เกิดจากความต้องการอีกรายการ |
| X - copies -> Y | ลูกศรเส้นประ | ความต้องการที่คัดลอกจากความต้องการอีกรายการ |
| X - traces -> Y | ลูกศรเส้นประ | ความสัมพันธ์แบบติดตามย้อนกลับสองทางของความต้องการ |
ไวยากรณ์การสร้างรีไควเมนต์ไดอะแกรมของ Mermaid ฉบับเต็ม ดูได้ที่หน้าต่อไปนี้: https://www.processon.io/th/mermaid/requirement-diagram
รีไควเมนต์ไดอะแกรมเหมาะสำหรับการวิเคราะห์ความต้องการของผลิตภัณฑ์, วิศวกรรมระบบ และการติดตามความต้องการ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับรีไควเมนต์ไดอะแกรม.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง pie ในการสร้างแผนภูมิวงกลม
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
ผลการเรนเดอร์
โดยที่:
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างแผนภูมิวงกลมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/pie-chart
แผนภูมิวงกลมเหมาะสำหรับแสดงสัดส่วนและความสัมพันธ์เชิงองค์ประกอบ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับแผนภูมิวงกลม.
ไวยากรณ์พื้นฐาน
แซงกีย์ไดอะแกรมใช้เป็นหลักเพื่อแสดงการไหลของปริมาณ, ทรัพยากร, เงินทุน หรือข้อมูลระหว่างโหนดต่าง ๆ, Mermaid ใช้คำสั่ง sankey-beta ในการสร้างแซงกีย์ไดอะแกรม
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
ผลการเรนเดอร์
โดยที่:
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างแซงกีย์ไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/sankey-diagram
แซงกีย์ไดอะแกรมเป็นแผนภูมิการแสดงผลที่ใช้แสดงการไหลจากกลุ่มตัวเลขหนึ่งไปยังอีกกลุ่มตัวเลขหนึ่ง ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับแซงกีย์ไดอะแกรม.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง xychart-beta ในการสร้าง XY ชาร์ต
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| xychart-beta | XY ชาร์ตพิกัด | สร้าง XY ชาร์ตพิกัด |
| xychart-beta horizontal | XY ชาร์ตพิกัดแนวนอน | สร้าง XY ชาร์ตพิกัดแนวนอน |
| title "name" | ชื่อเรื่อง | กำหนดชื่อเรื่องของ XY ชาร์ต |
| x-axis "axisTitle" [a,b,c] | แกน X | กำหนดประเภทและชื่อเรื่องของแกนนอน |
| y-axis "axisTitle" min --> max | แกน Y | กำหนดช่วงและชื่อเรื่องของแกนตั้ง |
| y-axis "axisTitle" | แกน Y ที่มีเฉพาะชื่อเรื่อง | กำหนดเฉพาะชื่อของแกนตั้ง ส่วนช่วงตัวเลขจะปรับให้อัตโนมัติ |
| bar [num1, num2, num3] | แผนภูมิแท่ง | กำหนดชุดข้อมูลของแผนภูมิแท่ง |
| line [num1, num2, num3] | แผนภูมิเส้น | กำหนดชุดข้อมูลของแผนภูมิเส้น |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้าง XY ชาร์ตด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/xy-chart
XY ชาร์ตเหมาะสำหรับแสดงการเปลี่ยนแปลงของข้อมูล, การเปรียบเทียบตัวเลข และการแสดงข้อมูลแบบง่าย ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับ XY ชาร์ต.
ไวยากรณ์พื้นฐาน
เรดาร์ชาร์ตเหมาะสำหรับเปรียบเทียบผลงานของหลายวัตถุในหลายมิติ เช่น การประเมินความสามารถ, ตัวชี้วัดผลิตภัณฑ์ และการเปรียบเทียบทางเลือก Mermaid ใช้ radar-beta ในการสร้างเรดาร์ชาร์ต
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
ผลการเรนเดอร์
โดยที่:
ไวยากรณ์ที่ใช้บ่อย
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| radar-beta | เรดาร์ชาร์ต | สร้างเรดาร์ชาร์ต |
| title "name" | ชื่อเรื่อง | กำหนดชื่อเรื่องของเรดาร์ชาร์ต โดยวางต่อจาก radar-beta |
| title "name" | ชื่อเรื่อง | กำหนดชื่อเรื่องของเรดาร์ชาร์ต โดยวางก่อน radar-beta และต้องเพิ่มเส้นขีดกลาง 3 เส้นทั้งด้านบนและด้านล่าง |
| axis id ["axisTitle"] | แกนมิติ | กำหนดมิติและชื่อของเรดาร์ชาร์ต |
| curve id ["name"]{[values]} | เส้นโค้งข้อมูล | กำหนดชื่อชุดข้อมูลและค่าของแต่ละมิติ |
| max value | ค่าสูงสุด | กำหนดค่าสูงสุดของช่วงตัวเลขในเรดาร์ชาร์ต |
| min value | ค่าต่ำสุด | กำหนดค่าต่ำสุดของช่วงตัวเลขในเรดาร์ชาร์ต |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างเรดาร์ชาร์ตด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/radar-chart
เรดาร์ชาร์ตมีประโยชน์เป็นพิเศษสำหรับนักพัฒนา, นักวิทยาศาสตร์ข้อมูล และวิศวกรที่ต้องการแสดงข้อมูลในรูปแบบวงกลมอย่างชัดเจนและกระชับ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับเรดาร์ชาร์ต.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง gitGraph ในการสร้าง Git ไดอะแกรม
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
ผลการเรนเดอร์
โดยที่:
ดูไวยากรณ์โดยละเอียดสำหรับการสร้าง Git ไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/git-graph
Git ไดอะแกรมเหมาะสำหรับแสดงกระบวนการควบคุมเวอร์ชัน เช่น การคอมมิตของ Git, การสร้างสาขา, การสลับสาขา และการรวมสาขา ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับ Git ไดอะแกรม.
ไวยากรณ์พื้นฐาน
C4 ไดอะแกรมของ Mermaid ใช้สำหรับการสร้างโมเดลสถาปัตยกรรมซอฟต์แวร์ โดยอธิบายระบบซอฟต์แวร์, คอนเทนเนอร์, คอมโพเนนต์ ตลอดจนความสัมพันธ์ระหว่างสิ่งเหล่านี้ได้ในหลายระดับ
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
ผลการเรนเดอร์
โดยที่:
| ไวยากรณ์ | ไดอะแกรม | ความหมาย |
| C4Context | ไดอะแกรมบริบทของระบบ | สร้าง C4 ไดอะแกรมบริบทของระบบ |
| C4Container | คอนเทนเนอร์ไดอะแกรม | สร้าง C4 คอนเทนเนอร์ไดอะแกรม |
| C4Component | คอมโพเนนต์ไดอะแกรม | สร้าง C4 คอมโพเนนต์ไดอะแกรม |
| C4Dynamic | ไดนามิกไดอะแกรม | สร้าง C4 ไดนามิกไดอะแกรม |
| C4Deployment | ดีพลอยเมนต์ไดอะแกรม | สร้าง C4 ดีพลอยเมนต์ไดอะแกรม |
| title | ชื่อเรื่อง | กำหนดชื่อเรื่องของ C4 ไดอะแกรม |
| Person(alias, "label", "description") | บุคคล | หมายถึงผู้ใช้หรือบทบาทที่ใช้งานระบบ |
| Person_Ext(alias, "label", "description") | บุคคลภายนอก | หมายถึงบุคคลหรือบทบาทขององค์กรที่อยู่ภายนอกระบบและเข้าร่วมการโต้ตอบ |
| System(alias, "label", "description") | โหนดระบบ | หมายถึงระบบซอฟต์แวร์ที่ต้องการวิเคราะห์ |
| System_Ext(alias, "label", "description") | โหนดระบบภายนอก | หมายถึงบริการของบุคคลที่สามหรือระบบซอฟต์แวร์ภายนอกที่ระบบต้องพึ่งพา |
| System_Boundary(alias, "label") | ขอบเขตระบบ | หมายถึงขอบเขตของระบบ |
| Container(alias, "label", "technology") | คอนเทนเนอร์ | หมายถึงหน่วยซอฟต์แวร์ภายในระบบที่ทำงานได้อย่างอิสระ |
| Container_Boundary(alias, "label") | ขอบเขตคอนเทนเนอร์ | หมายถึงขอบเขตของคอนเทนเนอร์หรือบริการหนึ่งรายการ |
ดูไวยากรณ์โดยละเอียดสำหรับการสร้าง C4 ไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/c4-diagram
C4 ไดอะแกรมเหมาะสำหรับการออกแบบสถาปัตยกรรมซอฟต์แวร์, การวิเคราะห์ระบบ และเอกสารทางเทคนิค ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับ C4 ไดอะแกรม.
ไวยากรณ์พื้นฐาน
Mermaid ใช้คำสั่ง architecture-beta ในการสร้างอาร์คิเทกเจอร์ไดอะแกรม
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
ผลการเรนเดอร์
โดยที่:
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างอาร์คิเทกเจอร์ไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/architecture-diagram
อาร์คิเทกเจอร์ไดอะแกรมเหมาะสำหรับแสดงความสัมพันธ์ระหว่างเซิร์ฟเวอร์, ฐานข้อมูล, บริการคลาวด์, บริการแอปพลิเคชัน ตลอดจนคอมโพเนนต์ต่าง ๆ ของระบบ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับอาร์คิเทกเจอร์ไดอะแกรม.
ไวยากรณ์พื้นฐาน
บล็อกไดอะแกรมอธิบายโครงสร้างของระบบผ่านโมดูลและความสัมพันธ์ของการเชื่อมต่อเป็นหลัก, Mermaid ใช้คำสั่ง block-beta ในการสร้างบล็อกไดอะแกรม
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
ผลการเรนเดอร์
โดยที่:
ดูไวยากรณ์โดยละเอียดสำหรับการสร้างบล็อกไดอะแกรมด้วย Mermaid ได้ที่หน้าเว็บต่อไปนี้: https://www.processon.io/th/mermaid/block-diagram
บล็อกไดอะแกรมเหมาะสำหรับงานอย่างโมดูลของระบบ, โครงสร้างฟังก์ชัน, สถาปัตยกรรมทางเทคนิค และความสัมพันธ์ของคอมโพเนนต์ ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับบล็อกไดอะแกรม.
ไวยากรณ์พื้นฐาน
แพ็กเก็ตไดอะแกรมใช้เป็นหลักเพื่อแสดงฟิลด์และความยาวในแพ็กเก็ตเครือข่ายหรือโครงสร้างข้อมูลของโปรโตคอล, Mermaid ใช้คำสั่ง packet-beta ในการสร้างแพ็กเก็ตไดอะแกรม
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
ผลการเรนเดอร์
โดยที่:
แพ็กเก็ตไดอะแกรมเหมาะสำหรับโปรโตคอลเครือข่าย, โครงสร้างแพ็กเก็ต และเอกสารข้อกำหนดทางเทคนิค ลองใช้ฟรี ตัวแก้ไขออนไลน์ Mermaid สำหรับแพ็กเก็ตไดอะแกรม.
การไม่คุ้นเคยกับไวยากรณ์ Mermaid ไม่ได้หมายความว่าจะใช้ Mermaid สร้างกราฟิก, สามารถใช้วิธีต่อไปนี้:
ใช้เทมเพลต Mermaid ฟรี
เลือกเทมเพลตที่ใกล้เคียงกับความต้องการก่อน แล้วแก้ไขโหนด, ข้อความ และความสัมพันธ์ในเทมเพลต วิธีนี้เหมาะสำหรับผู้ใช้ที่ใช้ Mermaid เป็นครั้งแรก
AI สร้างโค้ด Mermaid
สามารถอธิบายไดอะแกรมที่ต้องการด้วยภาษาธรรมชาติได้โดยตรง เช่น:
สร้างโฟลว์การประมวลผลคำสั่งซื้อของอีคอมเมิร์ซ ประกอบด้วยการสั่งซื้อ, การชำระเงิน, การตรวจสอบสต็อก, การจัดส่ง และการเสร็จสิ้นคำสั่งซื้อของผู้ใช้
AI สามารถสร้างโค้ด Mermaid ตามคำอธิบาย แล้วแก้ไขตามความต้องการจริงได้
ใช้ AI ตรวจสอบและแก้ไขโค้ด
หากโค้ด Mermaid มีข้อผิดพลาดทางไวยากรณ์ สามารถให้ AI ช่วยระบุตำแหน่งปัญหาและแก้ไขโค้ดได้
สร้างโค้ดด้วยการจดจำภาพ
สำหรับโฟลว์ชาร์ต, อาร์คิเทกเจอร์ไดอะแกรม หรือไดอะแกรมเชิงโครงสร้างอื่น ๆ ที่มีอยู่แล้ว สามารถลองสร้างโค้ด Mermaid ด้วยการจดจำภาพ แล้วแก้ไขต่อได้
ตัวแก้ไขออนไลน์ Mermaid มักต้องแก้ปัญหาหลักสามประการ: การเขียนโค้ด, การดูตัวอย่างไดอะแกรม และการส่งออกผลลัพธ์นอกจากนี้ เทมเพลตและ AI ยังช่วยลดความยากในการใช้ Mermaid ได้ด้วย
ยกตัวอย่าง ProcessOn Mermaid ตัวแก้ไขออนไลน์ คุณสามารถทำสิ่งต่อไปนี้ได้โดยตรงในเบราว์เซอร์:
ดังนั้น สำหรับผู้ใช้ที่ต้องสร้างไดอะแกรม Mermaid บ่อยครั้ง ตัวแก้ไขออนไลน์ ProcessOn Mermaid จึงรวมการเขียนโค้ด Mermaid การสร้างไดอะแกรม การแก้ไขและปรับเปลี่ยนในภายหลัง การส่งออกและการแชร์ไว้ในสภาพแวดล้อมการทำงานเดียว
ตั้งแต่โฟลว์ชาร์ต, ซีเควนซ์ไดอะแกรม, คลาสไดอะแกรม ไปจนถึงแกนต์ชาร์ต, ไมด์แมป, ควอดแรนต์ชาร์ต, แซงกีย์ไดอะแกรม, Git ไดอะแกรม, C4 ไดอะแกรม และอาร์คิเทกเจอร์ไดอะแกรม ล้วนสามารถสร้างได้ด้วยไวยากรณ์ Mermaid และแก้ไข.
มาใช้ตัวแก้ไขออนไลน์ Mermaid, เขียนโค้ด Mermaid และสร้างไดอะแกรมออนไลน์.
ไวยากรณ์ Mermaid ยากที่จะเรียนไหม?
ไวยากรณ์พื้นฐานของ Mermaid ค่อนข้างง่าย ไดอะแกรมส่วนใหญ่เพียงต้องเข้าใจวิธีการเขียนพื้นฐานอย่างการประกาศไดอะแกรม, โหนด, เส้นเชื่อม และข้อความ ตัวอย่างเช่น sequenceDiagram ใช้ประกาศซีเควนซ์ไดอะแกรม ส่วน flowchart ใช้ประกาศโฟลว์ชาร์ต กฎไวยากรณ์ของไดอะแกรมแต่ละประเภทแตกต่างกัน ไดอะแกรมที่ซับซ้อนยังต้องศึกษาพารามิเตอร์และการตั้งค่าที่เกี่ยวข้องเพิ่มเติม
เขียนโค้ด Mermaid ผิดแล้วทำไมจึงสร้างไดอะแกรมไม่ได้?
Mermaid ค่อนข้างไวต่อโครงสร้างไวยากรณ์ สาเหตุที่พบบ่อยได้แก่ การประกาศไดอะแกรมผิด, ไวยากรณ์ของโหนดหรือเส้นเชื่อมไม่ครบถ้วน, การจัดการการเยื้องหรืออักขระพิเศษไม่ถูกต้อง และการใช้ไวยากรณ์ที่เวอร์ชัน Mermaid ปัจจุบันไม่รองรับ
Mermaid กับซอฟต์แวร์วาดภาพแบบดั้งเดิมต่างกันอย่างไร?
Mermaid อธิบายไดอะแกรมผ่านโค้ดข้อความเป็นหลัก ขณะที่ซอฟต์แวร์วาดภาพแบบดั้งเดิมมักสร้างไดอะแกรมด้วยการลากวางรูปทรง, เส้นเชื่อม และการปรับสไตล์
ไดอะแกรม Mermaid สามารถบันทึกและนำกลับมาใช้ซ้ำได้ไหม?
ได้ เนื้อหาหลักของไดอะแกรม Mermaid คือโค้ดข้อความ จึงสามารถบันทึกโค้ดลงใน Markdown, ไฟล์โค้ด หรือเอกสารอื่น ๆ ที่รองรับ Mermaid แล้วเรนเดอร์อีกครั้งเมื่อต้องการ
นี่ก็เป็นความแตกต่างสำคัญประการหนึ่งระหว่าง Mermaid กับไดอะแกรมในรูปแบบรูปภาพล้วน: รูปภาพบันทึกเฉพาะผลลัพธ์สุดท้าย ขณะที่โค้ด Mermaid บันทึกข้อมูลโครงสร้างของไดอะแกรมไว้ด้วย
Mermaid กับ Markdown เกี่ยวข้องกันอย่างไร?
Mermaid มักถูกใช้ร่วมกับ Markdown แต่ทั้งสองไม่ได้เป็นไวยากรณ์เดียวกัน
Markdown ใช้สำหรับเขียนข้อความเชิงโครงสร้างเป็นหลัก ส่วน Mermaid ใช้สร้างไดอะแกรมผ่านโค้ด ในตัวแก้ไข Markdown ที่รองรับ Mermaid สามารถฝังโค้ด Mermaid ลงในเอกสาร Markdown ได้ ทำให้ไดอะแกรมและคำอธิบายข้อความอยู่ในเอกสารเดียวกัน
