Skip to main content
สามารถสร้างแผนภาพโดยใช้ Mermaid ซึ่งเป็นเครื่องมือที่ใช้ในการสร้างแผนภาพ แผนผัง หรือ Flow Chart

Mermaid Live Edit

ใช้ preview โค้ด Mermaid ได้แบบเรียลไทม์

Mermaid Playground

ใช้สร้าง Mermaid Diagram โดยไม่ต้องเขียนโค้ด
สามารถส่งภาพ Diagram ที่ต้องการสร้างมาให้ทีม IT ช่วยสร้างได้
หลังได้โค้ดจาก Editor แล้ว ให้นำมาใส่ในหน้าเนื้อหา
1

เปลี่ยน Web Editor เป็น Markdown Mode

Markdown Editor
2

วางโค้ด Mermaid ลงในหน้าเนื้อหา

เริ่มด้วย ```mermaid และจบด้วย ```สามารถคัดลอกโค้ดด้านล่างไปวาง แล้วคัดลอกโค้ดจาก Editor แล้ววางแทนบรรทัดกลางได้เลย
3

หลังกลับมา Visual Mode จะเห็นเป็น Code Block ดังรูปด้านล่าง

เมื่อ Publish แล้ว จะเห็นในหน้าเนื้อหาจริงเป็นแผนภาพตามโค้ดที่เขียนไว้ ไม่ต้องกังวลว่าจะแสดงเป็นโค้ดMermaid Diagram Code

ตัวอย่าง

โค้ดที่เพิ่มในหน้า Markdown Mode