เครื่องมือ · Built-in Diagram Tools

เครื่องมือสร้าง Diagram

Diagram ในยุค AI ไม่ใช่แค่ "วาดให้สวย" — แต่ต้อง "precise" เพราะแต่ละ block มีความหมาย และ AI อ่านได้แม่นกว่าคำพูดคลุมเครือ · 4 เครื่องมือที่นี่ช่วยให้คุณสร้าง diagram ที่ "ถูกต้องตาม semantic"

🧰 4 เครื่องมือในหน้านี้

🧭

Diagram Type Picker

ไม่แน่ใจว่าจะใช้ diagram แบบไหน? ตอบ 1-2 คำถาม → ระบบแนะนำ

🎨

Mermaid Live Editor

พิมพ์ Mermaid syntax → เห็น diagram render ทันที · มี template 6 ชนิด · download SVG ได้

🔍

Flowchart Validator

ตรวจว่า flowchart ของคุณใช้สัญลักษณ์ถูก semantic มั้ย — Start/End/Decision ครบ?

📚

Symbol Cheat-sheet

รวมสัญลักษณ์ flowchart 6 แบบ — แต่ละแบบหมายความว่าอะไร ใช้ยังไง

🧭 Tool 1 — Diagram Type Picker

Diagram 6 แบบไม่ได้ใช้แทนกัน — แต่ละแบบเก่งกับเรื่องคนละแบบ · ถ้าใช้ผิด "ดูยังไงก็งงเอง" · เครื่องมือนี้ถามคำถามสั้น ๆ แล้วแนะนำให้

🎨 Tool 2 — Mermaid Live Editor

Mermaid = ภาษา text ที่กลายเป็นรูป diagram · ข้อดี: (1) AI เขียนเก่งมาก · (2) เก็บใน Git ได้ · (3) GitHub render อัตโนมัติใน README.md

เลือก เทมเพลต จาก dropdown → แก้ syntax ทางซ้าย → preview ขึ้นทางขวาทันที · เสร็จแล้วกด Copy หรือ SVG หรือเปิดใน mermaid.live เพื่อแก้ต่อ

เคล็ดลับใช้ Mermaid ร่วมกับ AI

ขอ AI ให้สร้าง Mermaid syntax — "ทำ sequence diagram ของ ระบบ X ที่: นักศึกษา click → server check → ส่ง LINE"
วาง syntax ใน editor นี้ → ดู render
แก้ syntax ตรง ๆ ใน editor (ไม่ต้องกลับไปคุย AI สำหรับเปลี่ยนเล็ก ๆ)
กด Copy → paste ลง diagrams.md ใน project

🔍 Tool 3 — Flowchart Semantic Validator

Flowchart ที่ "วาดถูก" ≠ Flowchart ที่ "ถูก semantic" · สัญลักษณ์แต่ละอันมีกฎตายตัว: Start มี out-arrow 1 เส้น · Decision มี out-arrow ≥ 2 · End ไม่มี out-arrow · เครื่องมือนี้ parse Mermaid แล้วตรวจให้

กฎที่ตรวจ

Start (([Start])) ต้องมีลูกศรออก 1 เส้น · ลูกศรเข้า 0
End (([End])) ต้องมีลูกศรเข้า ≥ 1 · ลูกศรออก 0
Decision ({...}) ต้องมีลูกศรออก ≥ 2 · ควรมี label (Yes/No)
Process / I/O ที่ไม่ใช่ terminal ต้องมีลูกศรออก ≥ 1
ไม่มี orphan (node ที่ไม่เชื่อมกับใคร)
ไม่มี unreachable (node ที่ไม่มีทางไปถึง)

flowchart TD A([Start]) --> B[อ่านโจทย์] B --> C{เข้าใจ?} C -->|Yes| D[ทำการบ้าน] C -->|No| E[ถาม TA] E --> B D --> F[/ส่ง Classroom/] F --> G([End])

วิธีใช้ร่วมกับ Mermaid Editor

วาด flowchart ใน Mermaid Editor ด้านบน — ดูจน render ออกมาดูสวย
copy syntax → วางใน Validator ด้านบน → กด ตรวจ
ถ้ามี warning/error — กลับไปแก้ใน Editor → validate อีกครั้ง
เมื่อ "ไม่พบปัญหา" = flowchart ของคุณ "ถูกทั้งรูปและ semantic"

📚 Tool 4 — Flowchart Symbol Cheat-sheet

สัญลักษณ์ 6 แบบของ flowchart — แต่ละแบบมี "กฎเรื่องลูกศร" ที่ต่างกัน

Start / End

Stadium

จุดเริ่ม / จุดจบ

วงรี — ทุก flowchart ต้องมี 1 Start และ ≥ 1 End

Start: in=0, out=1
End: in≥1, out=0
ห้ามมี process ที่ "ลอย" ไม่เชื่อม Start/End

A([Start])

Process

Rectangle

การทำงาน 1 ขั้น

สี่เหลี่ยม — "verb + noun" เช่น "คำนวณคะแนน", "บันทึกไฟล์"

in: ≥ 1
out: ≥ 1 (ถ้าไม่ใช่ตัวสุดท้าย)
ถ้า out = 0 → ใช้ End แทน

B[คำนวณคะแนน]

Yes/No

Diamond

การตัดสินใจ

สี่เหลี่ยมข้าวหลามตัด — คำถาม yes/no, แตกออก ≥ 2 ทาง

in: ≥ 1
out: ≥ 2 (labeled!)
ใช้ |Yes| / |No| บนลูกศร

C{ผ่าน?}

I / O

Parallelogram

รับ/ส่งข้อมูล

สี่เหลี่ยมขนาน — "อ่านไฟล์", "พิมพ์ผล", "เก็บใน DB"

in: ≥ 1
out: ≥ 1
ใช้เมื่อข้อมูลข้ามขอบเขตระบบ

D[/อ่าน CSV/]

→

Arrow

ลูกศร · ทิศทางการไหล

เชื่อมระหว่างกล่อง — มีทิศทางชัด · ห้ามชนกันโดยไม่มี junction

--> ลูกศรปกติ
-->|label| ลูกศรมี label
-.-> ลูกศรประ (optional)

A -->|Yes| B

Circle

จุดเชื่อม (Connector)

วงกลม — ใช้เมื่อ flowchart ยาวจนต้องข้ามหน้า · ใส่ตัวอักษรเหมือนกัน 2 ที่

คู่ — ที่ "ออก" และที่ "เข้า"
ตัวอักษรต้องเหมือนกัน (A↔A)
ใช้สำหรับ flowchart ใหญ่

E((A))

💡 ใช้ Diagram ร่วมกับ AI — Workflow ที่แนะนำ

ใช้ Diagram Picker — ก่อนเริ่ม brainstorm — ตอบคำถาม → รู้ว่าจะใช้ diagram แบบไหน
วาดมือก่อน (ปากกา + กระดาษ) — 5-10 นาที · ช่วยจัดความคิด · อย่ารีบเปิด tool
ใช้ Mermaid Editor — เปลี่ยน sketch มือเป็น Mermaid syntax · เลือก template แล้วแก้
ใช้ Flowchart Validator — copy syntax → ตรวจ semantic
ส่งให้ AI review — paste syntax + บริบทใน Claude/ChatGPT: "ดู diagram นี้แล้ว ฉันลืมอะไรไปบ้าง?"
เซฟลง project — เซฟ Mermaid ใน diagrams.md ใน git · GitHub render อัตโนมัติ

เพราะอะไร Mermaid > draw.io/Excalidraw สำหรับยุค AI

Text-based → AI เขียนได้ · diff/merge ได้ใน git
Standard syntax → AI ทุกตัวรู้จัก (Claude, ChatGPT, Gemini)
Render อัตโนมัติ → GitHub, Notion, VS Code preview
6 diagram types ในภาษาเดียว → ไม่ต้องเปลี่ยน tool