ข้ามไปยังเนื้อหาหลัก
Markdown และ Mermaid

Markdown Flowchart และ Mermaid ต่างจาก Visual Editor อย่างไร

เปรียบเทียบการเก็บ Diagram เป็นข้อความ Mermaid กับการลากวาง Visual Editor ทั้งเรื่อง Version Control, Layout, เนื้อหาใน Node และการแลกเปลี่ยนไฟล์

ทีม BranchGuide เผยแพร่ อัปเดต

แยกสามแนวคิดที่มักถูกเรียกรวมกัน

Markdown เป็นรูปแบบข้อความสำหรับเนื้อหา เช่น หัวข้อ รายการ ตาราง และ Code Block ส่วน Mermaid เป็นภาษาข้อความสำหรับประกาศ Diagram ขณะที่ Visual Editor ใช้การลากวางและเชื่อม Node บน Canvas

BranchGuide ใช้ Markdown ภายใน Node และรองรับ Mermaid เฉพาะ subset สำหรับแลกเปลี่ยนโครงสร้าง จึงไม่ถือว่า Mermaid ทั้งหมดหรือ Markdown ใด ๆ สามารถแปลงเป็น Graph ได้โดยไม่มีข้อจำกัด

จุดแข็งและข้อแลกเปลี่ยน

เลือกจากวิธีที่ทีมแก้และอ่านงานจริง ไม่ใช่จากความคุ้นเคยของผู้เขียนคนเดียว

หัวข้อMermaidVisual Editor
การแก้โครงสร้างเร็วสำหรับคนคุ้น syntaxเห็นตำแหน่งและเส้นทางทันที
Version ControlDiff เป็นข้อความอ่านง่ายควรเก็บ JSON ที่มี schema
LayoutRenderer จัดให้เป็นหลักลากเองหรือ Auto Layout
เนื้อหาแต่ละ Nodeเหมาะกับ Label สั้นเก็บ Markdown และชนิดเนื้อหาได้มากกว่า

Workflow แบบผสมที่รักษาข้อมูลสำคัญ

เริ่มจาก Mermaid เมื่อมีโครงสร้างอยู่ในเอกสารหรือ Repository แล้ว Import มาตรวจรายงาน จากนั้นใช้ Visual Editor ปรับ Layout และเติมรายละเอียด เก็บ BranchGuide JSON เป็นสำเนาหลักของเนื้อหาเต็ม และ Export Mermaid เมื่อผู้รับต้องการเฉพาะโครง

อย่าคาดว่า Export Mermaid แล้ว Import กลับจะรักษาข้อมูลทุกชนิด เพราะ Screenshot, Warning, Markdown ยาว หรือ Styling อาจไม่มีตัวแทนใน subset

  1. Import syntax ที่รองรับ
  2. อ่าน Import Report
  3. เติมข้อมูลที่ Mermaid แทนไม่ได้
  4. สำรอง JSON ก่อนส่งออก format อื่น

ข้อควรระวังเมื่อนำเข้าเนื้อหาจากภายนอก

ไฟล์นำเข้าคือข้อมูลที่ไม่ควรเชื่อถือ ต้องจำกัดขนาด Parse ด้วย schema ปฏิเสธ URL scheme อันตราย และไม่ execute directive หรือ script จาก Mermaid, Markdown หรือ JSON

Preview Markdown ควรปิด Raw HTML ลิงก์ภายนอกต้องใช้ noopener noreferrer และรูปภาพควรมาจากแหล่งที่นโยบายอนุญาต การแสดงข้อความได้ไม่แปลว่าควรเรียกทรัพยากรทุก URL โดยอัตโนมัติ

ลองเปลี่ยนหลักคิดเป็น Flow ของคุณ

เริ่มจากโครงสร้างที่แก้ได้ แล้วทดสอบทุกเส้นทางกับคนที่ต้องใช้งานจริง

ทดลองกับ API Flow