Skip to main content
สามารถสร้างแผนภาพโดยใช้ Mermaid ซึ่งเป็นเครื่องมือที่ใช้ในการสร้างแผนภาพ แผนผัง หรือ Flow Chart
สามารถส่งภาพ Diagram ที่ต้องการสร้างมาให้ทีม IT ช่วยสร้างได้
หลังได้โค้ดจาก Editor แล้ว ให้นำมาใส่ในหน้าเนื้อหา
1

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

Markdown Editor
2

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

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

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

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

ตัวอย่าง

โค้ดที่เพิ่มในหน้า Markdown Mode
```mermaid
flowchart TB
  subgraph pre[ตรวจโครงการ]
  sec(เลขาฯ ตรวจ
  format และภาษา)
  so(S&O ตรวจ objective)
  rd(R&D ตรวจตัวชี้วัด)
  end
  subgraph committee[พิจารณาโครงการ]
  check{ที่ประชุมพิจารณาโครงการ}
  reject([สพศ.และประธานโครงการ
  หาแนวทางแก้ไขร่วมกัน])
  pass([ส่งงานกิจ])
  end
  prereject(ถ้าต้องมีการปรับ objective
  หรือตัวชี้วัด S&O และ R&D
  จะมีการพูดคุยและหาแนวทาง
  แก้ไขร่วมกับประธานโครงการ)
  member@{ shape: comment, label: "นายก, อุปฯบริหาร,
  Finance, อุปฯอื่นที่เกี่ยวข้อง" }

  sec --> rd
  so --> rd
  rd --> check
  check -- ที่ประชุมไม่อนุมัติ --> reject
  check -- ที่ประชุมอนุมัติ --> pass
  pre -.-> prereject
  committee ~~~ member
```