ข้ามไปยังเนื้อหาหลัก
เปิดเมนู
Markdown + Mermaid + Visual Editor

Markdown Flowchart ที่แก้โครงสร้างด้วยภาพและเขียนรายละเอียดได้

ใช้ Mermaid เมื่อต้องการเก็บโครงสร้าง Flow เป็นข้อความ และใช้ Visual Editor เมื่อต้องจัดตำแหน่งหรืออธิบายแต่ละขั้นตอนละเอียด BranchGuide เชื่อมสองงานนี้ในขอบเขต syntax ที่ตรวจสอบได้โดยไม่รันโค้ดจากไฟล์นำเข้า

ทดลอง Markdown Flowchartดูเทมเพลตตัวอย่าง

Safe Mermaid subset

ลองเขียน Mermaid แล้วตรวจโครงสร้าง

รองรับเฉพาะ flowchart TD/LR, Process, Decision และลูกศรแบบปลอดภัย โค้ดนี้ไม่ถูกส่งไป execute หรือ render เป็น HTML

231/4,000 ตัวอักษร

อ่านโครงสร้างได้

5 Node · 5 Edge · 0 บรรทัดถูกปฏิเสธ

Node ที่ parser สร้าง

  1. startรับคำขอ
  2. decisionข้อมูลครบหรือไม่
  3. stepดำเนินการ
  4. stepส่งกลับแก้ไข
  5. endจบงาน
นำแนวคิดไปสร้างใน Editor

สิ่งที่ Flow นี้ช่วยให้เห็น

ออกแบบโครงสร้างก่อนส่งต่อรายละเอียด

ตัวอย่าง Node ที่ใส่รายการตรวจและรายละเอียด Request/Response แล้วส่งออกโครงสร้างที่รองรับได้

Markdown อยู่ใน Node

เพิ่มหัวข้อ ตาราง รายการ และ Code Block ให้ขั้นตอน โดยไม่ทำให้ข้อความทั้งหมดเบียดบน Canvas

Mermaid subset ที่คาดเดาได้

รองรับ flowchart TD/LR, process, decision และ labeled edges พร้อมรายงานบรรทัดที่นำเข้าไม่ได้

ไม่รัน Raw HTML หรือ Script

Markdown ปิด Raw HTML และตัวนำเข้าตรวจ schema ก่อนสร้าง Graph

วิธีเริ่มต้น

สร้าง Flow ที่ตรวจทานได้ใน 4 ขั้น

  1. 1

    เขียนหรือ Import Mermaid ใน syntax ที่รองรับ

  2. 2

    ตรวจ Import Report และแก้รายการที่ไม่เข้า

  3. 3

    เติม Markdown เฉพาะรายละเอียดที่ช่วยให้ทำตามขั้นได้

  4. 4

    Export JSON เพื่อรักษาข้อมูลเต็ม หรือ Mermaid เพื่อแลกเปลี่ยนเฉพาะโครงสร้าง

ตัวอย่างเฉพาะหน้า

ตัวอย่าง Mermaid subset

โครงสร้าง Request สั้นสามารถแปลงเป็น Start, Process, Decision และ End ก่อนเติมรายละเอียดในแต่ละ Node

  1. 1.กำหนดทิศทาง TD หรือ LR
  2. 2.ประกาศ Node ด้วย ID ที่ไม่ซ้ำ
  3. 3.ใส่ label บนเส้นทางจาก Decision
  4. 4.ตรวจ Preview ก่อนบันทึก

เหมาะกับ

Use case ที่ได้ประโยชน์

  • เก็บ Diagram ใกล้เอกสารนักพัฒนา
  • แปลงโครงร่างข้อความมาแต่งใน Visual Editor
  • ทำคู่มือเทคนิคที่มี Code และ Checklist

ขอบเขตที่ควรรู้

ข้อจำกัดก่อนนำไปใช้

  • ไม่รองรับ Mermaid ทุกชนิดหรือ directive และไม่ execute Mermaid ที่ผู้ใช้นำเข้า
  • Export Mermaid เก็บเฉพาะโครงสร้างที่แมปได้ จึงควรใช้ JSON เป็นไฟล์สำรองหลัก

เทมเพลตที่เกี่ยวข้อง

ไม่ต้องเริ่มจากหน้าว่าง

API Request Flow

แผนผังคำขอ API ตั้งแต่ Gateway ตรวจรูปแบบและสิทธิ์ ผ่าน Business Logic กับฐานข้อมูล จนสร้าง Response พร้อมเส้นทางปฏิเสธที่สื่อสารได้

ดูเทมเพลต

Flow คัดกรอง Software Bug

กระบวนการรับ Bug ตรวจข้อมูล ทำซ้ำ ประเมินความรุนแรง กำหนดเจ้าของ และตัดสินใจแก้ด่วนหรือเข้ารอบพัฒนา โดยไม่ปะปน Feature Request

ดูเทมเพลต

Flow การ Login และยืนยันตัวตน

แผนผังตรวจข้อมูลเข้าสู่ระบบ แยกผลลัพธ์สำเร็จ บัญชีถูกล็อก และข้อมูลไม่ถูกต้อง เพื่อให้ทีมพัฒนากับทีม Support เห็นเงื่อนไขเดียวกัน

ดูเทมเพลต

คู่มือที่เกี่ยวข้อง

อ่านหลักคิดก่อนนำ Flow ไปใช้จริง

Markdown และ Mermaid

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

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

อ่านคู่มือ

วิธีใช้งาน

วิธีสร้าง Flowchart ออนไลน์แบบลากวาง ตั้งแต่โจทย์ถึงการทดสอบ

ขั้นตอนสร้าง Flowchart ออนไลน์อย่างมีโครงสร้าง ตั้งขอบเขต วางเส้นทางหลัก เพิ่มเงื่อนไข เขียนรายละเอียด และลองเดินก่อนแชร์

อ่านคู่มือ

ตัวอย่าง Flow ระบบ

ตัวอย่าง Flow การ Login และ Reset Password พร้อมกรณีผิดพลาด

แยก Authentication Flow ออกจาก Password Recovery และอธิบายจุดตรวจบัญชี รหัสผ่าน Token เซสชัน และข้อความผิดพลาดที่ปลอดภัย

อ่านคู่มือ

คำถามที่พบบ่อย

คำถามเกี่ยวกับ Markdown + Mermaid + Visual Editor

BranchGuide รองรับ Mermaid ทั้งหมดหรือไม่

ไม่รองรับ รองรับ subset ที่ระบุชัดเพื่อให้ Import ปลอดภัยและผลลัพธ์คาดเดาได้ รายงานนำเข้าจะแจ้งส่วนที่ข้าม

Markdown ใน Node ใส่ HTML ได้ไหม

ไม่ได้ Raw HTML ถูกปิด สามารถใช้ Markdown มาตรฐานและ GFM โดยลิงก์ภายนอกเปิดอย่างปลอดภัย

API Request Flow พร้อมคำอธิบายเชิงเทคนิค

ตัวอย่าง Node ที่ใส่รายการตรวจและรายละเอียด Request/Response แล้วส่งออกโครงสร้างที่รองรับได้

ทดลอง Markdown Flowchart