Mermaid Preview

แนวคิดหลัก

ดูตัวอย่าง Mermaid ใช้วาดผังงานและไดอะแกรมลำดับก่อนคอมมิตไปรีโป โหลด mermaid 10 จาก jsDelivr แบบไดนามิกแล้วเรนเดอร์ SVG ในเบราว์เซอร์ ต้นทางไม่ถูกส่งไปเซิร์ฟเวอร์ วากยสัมพันธ์เกือบเหมือน Markdown ของ GitHub แต่ส่วนขยายบางอย่างอาจต่างตามเวอร์ชัน

ชนิดที่ mermaid 10 รองรับ เช่น คลาส Gantt และ ER ทดลองได้โดยทั่วไป กราฟใหญ่มากอาจหนักเบราว์เซอร์ ลิงก์รูปภายนอกหรือการฉีด HTML อาจถูกจำกัดเพื่อความปลอดภัย ใช้เลขบรรทัดในข้อความผิดพลาดเพื่อแก้ลูกศรและไอดีโหนด

ตัวอย่าง

ดูตัวอย่าง flowchart TD ที่ A เริ่มไปเงื่อนไข B ใช่เสร็จ ไม่ลองใหม่ จะวาดกล่องและสี่เหลี่ยมข้าวหลามตัด เขียนผู้เข้าร่วมและลูกศรเป็น sequenceDiagram แล้วข้อความเรียงตามเวลาปรากฏ ช่องว่างในไอดีโหนดทำให้วากยสัมพันธ์ผิด จึงแยกไอดีอังกฤษกับป้ายวงเล็บ ไดอะแกรมลำดับสั้นลงหากรวบประกาศผู้เข้าร่วมไว้บน เมื่อใส่ในเอกสาร ให้คัดลอกเฉพาะต้นทางที่เรนเดอร์สำเร็จเพื่อลดช่องว่างเวอร์ชัน หากลองอินพุตเดิมหลายครั้ง ให้รีเซ็ตแล้ววางใหม่เพื่อไม่ปะปนกับเอาต์พุตก่อน บนคอมพิวเตอร์ที่ใช้ร่วมกัน ให้ล้างช่องเมื่อเสร็จเพื่อไม่ให้ข้อความต้นค้างบนจอ ปิดแท็บเบราว์เซอร์ก็ล้างสิ่งที่เพิ่งวาง ไม่ต้องส่งคำขอลบไปเซิร์ฟเวอร์ ชื่อปุ่มและหัวช่องตรงกับเครื่องมือด้านบนของหน้า จึงทำตามบทความนี้ไปพร้อมใช้ได้ หากผลว่าง ให้ตรวจก่อนว่าช่องที่ต้องกรอกครบและไม่มีข้อความผิดพลาดซ่อน บทความนี้เป็นวิธีใช้ ไม่ได้หมายความว่าข้อมูลอินพุตถูกเก็บในที่เก็บภายนอก บนมือถือ ปุ่มคัดลอกอาจขอสิทธิ์คลิปบอร์ด — อนุญาตแล้วแตะอีกครั้ง

ที่เกี่ยวข้อง: ดูตัวอย่าง Markdown · ดูตัวอย่างสูตร LaTeX