แก่นของเรื่อง
แนวคิดหลัก: แผนภาพที่ดีเกิดจาก "ข้อจำกัดที่ตายตัว" ไม่ใช่จากการให้ AI วาดอิสระ skill นี้บังคับงบความซับซ้อน (9 node, 12 เส้น, สีเน้น 2 จุด) ระบบ 4px grid ชุดสีและฟอนต์คงที่ และกฎเส้นเชื่อม 6 ข้อ เพื่อให้ผลลัพธ์สม่ำเสมอทุกครั้ง
ทำไมถึงได้ผล (ตีความ):
- เมื่อจำนวน node ถูกจำกัด ผู้วาดต้องตัดสิ่งที่ซ้ำซ้อนออก แผนภาพจึงเหลือแต่ความคิดที่แยกกัน
- เมื่อสีเน้นมีได้ไม่เกิน 2 จุด สายตาผู้อ่านจึงไปที่จุดสำคัญก่อน
- เมื่อกฎเป็นตัวเลข (ระยะ 12px, รัศมีมุม 8px) สคริปต์ตรวจอัตโนมัติได้ ไม่ต้องพึ่งการดูด้วยตา
20% ที่สำคัญที่สุดในทางปฏิบัติ:
| ต้องทำให้ได้ |
รอได้ |
| ลบก่อนเพิ่ม: ทุก node ต้องเป็นความคิดที่แยกกัน |
ปรับธีมแบรนด์จากเว็บไซต์ |
| ไม่เกิน 9 node ถ้าเกินให้แยกเป็นภาพรวม + ภาพรายละเอียด |
export PNG/SVG |
| สีเน้นไม่เกิน 2 จุด |
นำเข้าไฟล์ draw.io/Excalidraw |
| เส้นเชื่อมต้องตั้งฉาก ไม่ทับกัน |
ฟอนต์ออฟไลน์ |
| ถ้าตารางบอกได้เท่ากัน ให้ใช้ตาราง |
ชนิดแผนภาพที่หายาก |
ช่วยให้ดีขึ้นอย่างไร
หมายเหตุ: repo ไม่มีตัวเลขการวัดผลเชิงเปรียบเทียบกับเครื่องมืออื่น ทุกแถวด้านล่างจึงเป็นการอ่านกฎจาก repo และการตีความ ไม่ใช่ผลวัด
| สถานการณ์ |
ถ้าไม่ใช้ |
ถ้าใช้ |
วัดอย่างไร |
หลักฐาน |
| แผนภาพรก |
ให้ AI วาดอิสระ node เพิ่มเรื่อยๆ |
งบ 9 node / 12 เส้น แยกภาพเมื่อเกิน |
นับ node และเส้นในไฟล์ |
กฎอ่านจาก repo (16 ต.ค. 2026); ผลต่อความอ่านง่ายเป็น ตีความ |
| เส้นพาดทับกล่อง |
layout อัตโนมัติแบบ Mermaid |
กฎเส้นตั้งฉาก ห่างกัน 12px+ และสคริปต์ verify-geometry.py |
ผ่าน/ไม่ผ่านจากสคริปต์ |
กฎอ่านจาก repo; ประสิทธิภาพสคริปต์ ยังไม่ทดสอบ |
| หน้าตาไม่สม่ำเสมอ |
สี/ฟอนต์ต่างกันทุกภาพ |
style guide + token คงที่ |
เทียบ token ในไฟล์กับ style guide |
อ่านจาก repo; ตีความ |
| แชร์ไฟล์ |
ต้องมี build, JS, รูปแยก |
HTML ไฟล์เดียว เปิดออฟไลน์ ไม่มี JS |
เปิดไฟล์บนเครื่องที่ไม่มีเน็ต |
อ่านจาก repo; ยังไม่ทดสอบ |
| แก้ไขบ่อยใน Git |
Mermaid แก้เป็นข้อความได้ |
ไม่ดีขึ้น ผลลัพธ์ไม่ใช่ source ที่แก้ง่าย |
จำนวนบรรทัดที่ diff |
repo ระบุเองว่า Mermaid เหมาะกว่า (trade-off) |
ลองใช้
ตัวอย่างประกอบ (ตัวเลขเป็นของเราเอง)
ระบบสั่งซื้อมี 14 องค์ประกอบ: เว็บ, แอปมือถือ, API gateway, auth, order, payment, inventory, notification, 3 queue, 2 database, cache
- รวมสิ่งที่ไปด้วยกันเสมอ: 3 queue รวมเป็น 1 กล่อง "queues"; 2 database รวมเป็น 1 → เหลือ 14 − 2 − 1 = 11
- รวมเว็บกับแอปมือถือเป็น "clients" → 10 (ยังเกิน 9)
- แยกเป็น 2 ภาพ: ภาพรวม 6 node (clients, gateway, services, queues, data, notification) และภาพรายละเอียดของ services 5 node (auth, order, payment, inventory, cache)
- สีเน้น: เฉพาะเส้นทางสั่งซื้อ→ชำระเงิน (2 element) ที่เหลือใช้ ink/muted
- ตรวจ: ภาพละไม่เกิน 9 node, เส้นไม่เกิน 12, สีเน้นไม่เกิน 2
เมื่อไรควร / ไม่ควรใช้
| กรณี |
ใช้ |
เหตุผล |
| สถาปัตยกรรม, flow, ไทม์ไลน์ สำหรับเอกสารหรือพรีเซนต์ |
ใช้ |
ต้องการความสวยและสม่ำเสมอ |
| ภาพที่ต้องแชร์เป็นไฟล์เดียว |
ใช้ |
HTML+SVG เปิดออฟไลน์ |
| แผนภาพใน repo ที่เปลี่ยนบ่อย |
ไม่ใช้ |
repo แนะนำ Mermaid |
| รายการธรรมดา หรือรูปเดียวที่เรียกว่า "diagram" |
ไม่ใช้ |
ใช้ตารางหรือรายการ |
| ต้องการแก้ภาพด้วยมือใน GUI |
ระวัง |
ผลลัพธ์ไม่ใช่รูปแบบที่แก้ต่อได้ง่าย (ตีความ) |
สิ่งที่ต้องมีก่อน: agent host ที่รองรับ (Claude Code, Codex, Copilot, Cursor, Factory Droid, Pi ฯลฯ) และคำสั่งติดตั้ง npx skills add cathrynlavery/diagram-design (อ่านจาก repo)
ก้าวแรกที่เล็กที่สุด: ติดตั้ง skill แล้วสั่ง "architecture diagram ของโปรเจกต์นี้" ด้วยสไตล์ค่าเริ่มต้น ยังไม่ต้องตั้งแบรนด์
ทดสอบก่อน/หลัง
| รายการ |
ค่าฐาน (ก่อน) |
เกณฑ์ผ่าน (กำหนดก่อนรัน) |
| จำนวน node ต่อภาพ |
นับจากแผนภาพเดิมของคุณ |
≤ 9 |
| จำนวนเส้นที่ตัดกัน/ทับกล่อง |
นับด้วยตา |
0 จุดทับกล่อง |
| เวลาที่เพื่อนร่วมงานตอบว่า "จุดสำคัญคืออะไร" |
จับเวลากับ 3 คน |
สั้นลงและตอบตรงกัน |
| สคริปต์ตรวจ |
– |
self_check.py และ verify-geometry.py ผ่าน |
ทดสอบความเข้าใจ
| คำถาม |
คำตอบ |
คำตอบที่มักผิด |
| แผนภาพมี 12 node ทุกอันสำคัญ ควรทำอย่างไร |
แยกเป็นภาพรวม + ภาพรายละเอียด เพราะเกิน 9 node |
ย่อฟอนต์ให้ใส่ได้ในภาพเดียว |
| ทำไมไม่ใช้สีเน้นกับทุก node ที่ "สำคัญ" |
ถ้าทุกอันเน้น ก็ไม่มีอะไรเด่น และผิด anti-pattern |
ใช้ได้ ยิ่งเน้นยิ่งชัด |
| เส้นสองเส้นต้องผ่านขอบเดียวกัน ทำอย่างไร |
ใช้จุดเชื่อมแยก ห่างอย่างน้อย 12px |
วางทับกันแล้วใช้สีต่างกัน |
| ข้อมูลที่ตารางบอกได้ครบ ควรวาดแผนภาพหรือไม่ |
ใช้ตาราง ตามขั้นตอนเลือกชนิด |
วาดแผนภาพเพราะดูเป็นมืออาชีพกว่า |
| (กับดัก) ทีมเก็บแผนภาพใน Git และแก้ทุกสัปดาห์ skill นี้เหมาะไหม |
ไม่เหมาะนัก repo ชี้ว่า Mermaid ดีกว่า เพราะแก้เป็นข้อความได้ |
เหมาะ เพราะสวยกว่า |
| ผ่านกฎ grid 4px แล้ว แปลว่าแผนภาพสื่อสารดีใช่ไหม |
ไม่ใช่ กฎรับประกันความสะอาด ไม่ได้รับประกันว่าเนื้อหาถูก |
ใช่ เพราะผ่านตัวตรวจ |
ภาพรวมของ skill
skill ผลิตไฟล์ HTML เดียวที่มี SVG ฝังอยู่ ไม่ต้อง build และไม่มี JavaScript ต้นแบบมี 3 แบบ: minimal light, minimal dark และ full editorial (อ่านจาก repo, 16 ต.ค. 2026)
| ด้าน |
รายละเอียด |
| ผลลัพธ์ |
HTML + inline SVG ไฟล์เดียว เปิดออฟไลน์ได้ |
| จำนวนชนิดแผนภาพ |
45 (README และ SKILL.md) แต่หน้า About ของ repo เขียน 44 ซึ่งไม่ตรงกัน |
| นำเข้า |
draw.io, Mermaid, Excalidraw (วาดใหม่ ไม่ได้แปลงตรงๆ) |
| ส่งออก |
SVG, PNG เมื่อร้องขอเท่านั้น |
| ใบอนุญาต |
MIT |
ขั้นตอนทำงาน (workflow)
1. Style gate -> ตรวจ marker .diagram-design และ style guide
2. Pattern -> ถ้าเรื่องพฤติกรรมสำคัญ (คอขวด, lifecycle, trust boundary)
3. Visual type -> เลือกชนิดภาพ; ถ้าตารางพอ ใช้ตาราง
4. State plan -> ระบุชนิด, pattern, ขนาด, สิ่งที่จะตัด
5. Load ref + template -> ใส่ eyebrow, title, SVG, <title>, <desc>
6. Checklist + self_check.py
7. Export (ตามสั่งเท่านั้น)
flowchart LR
A[Style gate] --> B[เลือก pattern]
B --> C[เลือกชนิดภาพ]
C --> D[ระบุแผน]
D --> E[สร้างจากเทมเพลต]
E --> F[ตรวจ checklist และสคริปต์]
F --> G[Export ถ้าสั่ง]
ถ้ามีการนำเข้าไฟล์: สกัดข้อมูลต้นทางด้วยสคริปต์ → ตั้ง 4 dials (format, size, detail, audience) → วาดใหม่ → รายงาน fidelity ledger ว่าอะไรถูกรวม ย่อ หรือทิ้ง
กฎการออกแบบ
หลักการหลัก: "ลบก่อน" ทุก node ต้องเป็นความคิดที่แยกกัน รวม node ที่ไปด้วยกันเสมอ และตัดเส้นที่ layout บอกอยู่แล้ว
| หัวข้อ |
กฎ (อ่านจาก repo) |
| ความหนาแน่นเป้าหมาย |
4/10; เกิน 9 node ให้แยกภาพ |
| งบค่าเริ่มต้น |
9 node, 12 เส้น, 2 องค์ประกอบสีเน้น, 2 callout |
| สีเน้น (coral) |
1–2 จุดโฟกัส ที่เหลือใช้ ink/muted/soft |
| บทบาทสี |
paper, paper-2, ink, muted, soft, rule, rule-solid, accent, accent-tint, link |
| ฟอนต์ (หัวข้อ) |
Instrument Serif (หัวข้อ, callout เอียง) |
| ฟอนต์ (ชื่อ node) |
Geist 600 |
| ฟอนต์ (ข้อความรอง) |
Geist Mono (sublabel, ป้ายลูกศร, คำสั่ง, URL) |
| ห้าม |
JetBrains Mono, เงา, rounded-2xl |
| รูปทรง |
node รัศมี 6px, tag rx=2 |
| Grid |
ตำแหน่ง ขนาด ช่องว่าง padding อยู่บน 4px grid |
| ลูกศร (การวาด) |
วาดก่อนกล่อง; muted ปกติ, accent เส้นหลัก |
| ลูกศร (ชนิดเส้น) |
link สำหรับ HTTP/API, เส้นประ 5,4 สำหรับ optional/async |
กฎเส้นเชื่อม 6 ข้อ (ละเมิดข้อใดข้อหนึ่ง = ไม่ผ่านอัตโนมัติ)
- ตั้งฉากเท่านั้น มุมโค้ง r=8 (ต่ำสุด 6) เส้นตรงเมื่อปลายทั้งสองอยู่แกน x หรือ y เดียวกัน
- ป้ายบนเส้นต้องมีพื้นทึบ ห่างจากเส้น 6–10px
- เส้นไม่ทับกัน เส้นขนานห่างอย่างน้อย 12px ที่จุดตัดใช้ hop
- เส้นที่ใช้ขอบเดียวกันต้องมีจุดต่อแยกกัน ห่าง ≥ 12px
- ห้ามลอดหลังกล่องที่ไม่ใช่ปลายทาง ถ้าเลี่ยงไม่ได้ใช้เส้นประและวางป้ายที่ปลายที่มองเห็น
- พื้นป้ายต้องไม่ทับ node ที่วาดทีหลัง ตรวจด้วย
verify-geometry.py
ชนิดแผนภาพ (45 ชนิด)
| กลุ่ม |
ชนิด |
| โครงสร้าง |
architecture, architecture delta, IT current-state, nested, tree |
| โครงสร้าง (ต่อ) |
org chart, layer stack, exploded axonometric, axonometric plan |
| โครงสร้าง (ต่อ) |
block decomposition trees |
| กระบวนการ/พฤติกรรม |
flowchart, sequence, state machine, swimlane, loop/flywheel, process |
| กระบวนการ/พฤติกรรม (ต่อ) |
lifecycle phase map, kanban, user journey, service blueprint, story map |
| ข้อมูล |
ER/data model, database schema, UML class, data flow, medallion |
| ข้อมูล (ต่อ) |
DP integration, DP security matrix, high-level, dependency graph, deployment |
| เปรียบเทียบ/ปริมาณ |
quadrant, radar, polar, Venn, pyramid/funnel, bar |
| เปรียบเทียบ/ปริมาณ (ต่อ) |
waterfall, treemap/marimekko, heatmap, line, scatter, Sankey |
| วางแผน/วิเคราะห์ |
timeline, Gantt, fishbone, Wardley map |
รายการนี้อ่านจาก SKILL.md ซึ่งแต่ละกลุ่มนับรวมแล้วอาจไม่ตรง 45 พอดี (เพราะบางชนิดมีแบบย่อย) จึงไม่ควรใช้ตัวเลขนี้เป็นเกณฑ์ตายตัว
Checklist ก่อนส่งงาน
| สถานะ |
รายการ |
| ⚪ |
เลือกชนิดภาพแล้ว และเช็คว่าตารางไม่พอจริง |
| ⚪ |
node ≤ 9, เส้น ≤ 12, callout ≤ 2 |
| ⚪ |
สีเน้น ≤ 2 องค์ประกอบ |
| ⚪ |
SVG มี role="img" และ aria-labelledby ชี้ไปที่ <title> และ <desc> |
| ⚪ |
<title> มาก่อน <defs> |
| ⚪ |
ป้ายลูกศรทุกอันมีพื้นทึบ |
| ⚪ |
legend เป็นแถบแนวนอนด้านล่าง |
| ⚪ |
ไม่มีข้อความแนวตั้ง (writing-mode) |
| ⚪ |
min-width ตรงกับ viewBox และอยู่ใน wrapper overflow-x: auto |
| ⚪ |
ภาพเคลื่อนไหว (ถ้ามี) ทำงานได้โดยไม่มี JavaScript |
| ⚪ |
ภาพเคลื่อนไหว (ถ้ามี) แสดงเฟรมนิ่งครบเมื่อเปิด reduced motion |
| ⚪ |
self_check.py และ verify-geometry.py ผ่าน |
Anti-patterns และความเข้าใจผิดที่พบบ่อย
| ข้อผิดพลาด |
ทำไมแย่ |
| โหมดมืดเรืองแสงสีฟ้า/ม่วง |
ขัดกับระบบสีที่จำกัด |
| ใช้ monospace เป็นฟอนต์ชื่อ node |
Mono ใช้ได้เฉพาะ sublabel, ป้าย, คำสั่ง |
| กล่องหน้าตาเหมือนกันหมด |
ไม่มีลำดับความสำคัญ |
| legend ลอยกลางภาพ |
ต้องเป็นแถบด้านล่าง |
| ทำสีเน้นทุก node "สำคัญ" |
สีเน้นหมดความหมาย |
| ลอกการจัดวางอัตโนมัติของ Mermaid |
ขัดกับแนวทาง layout ที่ออกแบบเอง |
ข้อเท็จจริงเทียบกับความเห็น
| ประเภท |
ตัวอย่าง |
| ข้อเท็จจริง (อ่านจาก repo) |
งบ 9 node/12 เส้น/2 สีเน้น; ผลลัพธ์เป็น HTML+SVG ไฟล์เดียว |
| ข้อเท็จจริง (อ่านจาก repo, ต่อ) |
ใบอนุญาต MIT; กฎเส้นเชื่อม 6 ข้อ |
| ความเห็นของผู้พัฒนา (ในเอกสาร repo) |
ว่านี่คือแนวทาง "editorial" ที่ดีกว่า "Mermaid slop"; เป้าความหนาแน่น 4/10 |
| ตีความ |
กฎจำกัดทำให้อ่านง่ายขึ้น; ผลลัพธ์คงที่ข้ามภาพ |
| ยังไม่ทดสอบ |
ความถูกต้องของสคริปต์ตรวจ; ความเสถียรของผลเมื่อเปลี่ยนโมเดล |
Risks
Warning ข้อมูลหน้านี้อ่านจากหน้าเว็บ repo, README และ SKILL.md ผ่านการดึงหน้าเว็บ ไม่ได้เปิดไฟล์ในโฟลเดอร์ references/, scripts/ หรือ templates จึงไม่รู้รายละเอียดของ layout-budget.md, style guide และสคริปต์ตรวจจริง และไม่ได้รันหรือติดตั้งอะไร
| ความเสี่ยง |
รายละเอียด |
| คุณภาพขึ้นกับโมเดล |
README ระบุว่าผลลัพธ์ขึ้นกับโมเดลที่ใช้ |
| ไม่ใช่ source ที่แก้ได้ง่าย |
แก้ในรอบถัดไปต้องสั่ง agent ใหม่ |
| จำนวนชนิดไม่ตรงกัน |
44 กับ 45 ในส่วนต่างๆ ของ repo |
| repo เปลี่ยนเร็ว |
มีประมาณ 351 commit; กฎอาจเปลี่ยน |
| ฟอนต์ |
ใช้ Instrument Serif, Geist, Geist Mono; ไม่มีฟอนต์ไทยในกฎที่อ่านมา |
| ฟอนต์ไทย |
การใช้กับข้อความไทยต้องทดสอบเอง (ตีความ) |
| ความปลอดภัย |
skill คือคำสั่งที่ agent จะทำตาม ควรอ่านก่อนติดตั้งจากแหล่งภายนอก |
Decision / next steps
Recommendation ลองกับแผนภาพเดียวที่คุณวาดบ่อยที่สุด (เช่น architecture) ด้วยสไตล์ค่าเริ่มต้น เทียบกับตารางทดสอบก่อน/หลัง แล้วค่อยตั้งแบรนด์
| ถ้า |
ให้ |
| ผลผ่านเกณฑ์และทีมชอบ |
ตั้ง style guide จากแบรนด์ แล้วใช้เป็นมาตรฐาน |
| แผนภาพต้องแก้ใน Git บ่อย |
ใช้ Mermaid ต่อ และใช้ skill นี้กับภาพสุดท้ายเพื่อเผยแพร่ |
| ข้อความไทยแสดงผลไม่ดี |
กำหนดฟอนต์ไทยใน style guide แล้วทดสอบซ้ำ |
Sources
| รายการ |
รายละเอียด |
| Repo |
cathrynlavery/diagram-design |
| Commit ที่อ่าน |
b46c970 |
| วันที่อ่าน |
2026-10-16 |
| ไฟล์ที่อ่าน |
หน้า repo, README.md, skills/diagram-design/SKILL.md |
| วิธีอ่าน |
ผ่านการดึงหน้าเว็บและสรุป ไม่ใช่ gh |
| ใบอนุญาต |
MIT |
ตัวย่อที่ใช้ในหน้านี้
| ตัวย่อ |
ชื่อเต็ม |
คืออะไร |
อ่านค่าอย่างไร |
| HTML |
HyperText Markup Language |
ภาษาโครงหน้าเว็บ |
ไฟล์ .html เปิดด้วยเบราว์เซอร์ |
| SVG |
Scalable Vector Graphics |
รูปเวกเตอร์ที่เขียนเป็นข้อความ |
ขยายแล้วไม่แตก |
| PNG |
Portable Network Graphics |
รูปภาพแบบ raster |
ส่งออกเป็นรูปนิ่ง |
| JS |
JavaScript |
ภาษาโปรแกรมฝั่งเบราว์เซอร์ |
"ไม่มี JS" = เปิดได้โดยไม่รันสคริปต์ |
| WCAG AA |
Web Content Accessibility Guidelines ระดับ AA |
มาตรฐานการเข้าถึง รวมถึงความต่างสี |
ใช้ตรวจ contrast ของสีแบรนด์ |
ARIA / aria-labelledby |
Accessible Rich Internet Applications |
แอตทริบิวต์บอกเทคโนโลยีช่วยเข้าถึงว่าองค์ประกอบคืออะไร |
ชี้ไปที่ <title> ของ SVG |
| API |
Application Programming Interface |
ช่องทางให้โปรแกรมคุยกัน |
เส้นสี link = การเรียก HTTP/API |
| HTTP |
HyperText Transfer Protocol |
โปรโตคอลสื่อสารเว็บ |
เส้นสี link ใช้กับการเรียกแบบนี้ |
| URL |
Uniform Resource Locator |
ที่อยู่เว็บ |
ใช้ Geist Mono |
| GUI |
Graphical User Interface |
หน้าจอแบบกราฟิก |
แก้ภาพด้วยมือใน GUI |
| ER |
Entity-Relationship |
แผนภาพตารางข้อมูลและความสัมพันธ์ |
ชนิด ER/data model |
| UML |
Unified Modeling Language |
ภาษามาตรฐานโมเดลซอฟต์แวร์ |
ชนิด UML class |
| IT |
Information Technology |
เทคโนโลยีสารสนเทศ |
ชนิด IT current-state |
| DP |
ไม่ระบุชื่อเต็มในข้อมูลที่อ่าน |
ใช้ในชื่อ "DP integration", "DP security matrix" |
ยังไม่ทราบความหมายแน่ชัด ต้องเปิดดู repo |
| MIT |
MIT License |
ใบอนุญาตโอเพนซอร์สแบบอนุญาตกว้าง |
ใช้ซ้ำและแก้ไขได้ตามเงื่อนไข |
| px |
pixel |
หน่วยจุดภาพ |
12px = ห่าง 12 จุด |
| rx / r |
radius (rx ใน SVG) |
รัศมีมุมโค้ง |
r=8 = มุมโค้งรัศมี 8px |
CSS ค่า min-width, overflow-x |
– |
คุณสมบัติจัดขนาดและการเลื่อน |
ใช้ใน wrapper ของ SVG |
| 4/10 |
คะแนนความหนาแน่น |
เป้าหมายจากผู้พัฒนา |
4 จาก 10 = ค่อนข้างโปร่ง |
| npx |
Node package runner |
คำสั่งรันแพ็กเกจ Node |
ใช้ติดตั้ง skill |
| AI |
Artificial Intelligence |
ปัญญาประดิษฐ์ |
agent ที่วาดแผนภาพ |
แถวที่มาจากความรู้ทั่วไป ไม่ใช่นิยามใน repo: HTML, SVG, PNG, JS, WCAG AA, ARIA, API, HTTP, URL, GUI, ER, UML, IT, MIT, px, rx / r, CSS, npx, AI
Summary
- คำตัดสิน: เหมาะกับการทำแผนภาพสำหรับเผยแพร่ที่อยากได้หน้าตาสม่ำเสมอ ไม่เหมาะกับภาพที่แก้ใน Git บ่อย
- แก่น: ข้อจำกัดตายตัว (9 node, 12 เส้น, สีเน้น 2 จุด, 4px grid, กฎเส้น 6 ข้อ) ทำให้ผลลัพธ์สะอาดและตรวจได้ด้วยสคริปต์
- ลำดับคิด: ลบก่อน → เลือกชนิด (ตารางพอไหม) → วาดตามงบ → ตรวจ checklist
- ข้อควรระวัง: ไม่มีตัวเลขวัดผลใน repo ทุกข้อดีที่ว่า เป็นการตีความ และยังไม่ทดสอบกับข้อความไทย
- ขั้นแรก: ติดตั้งแล้วลองกับแผนภาพเดียว ใช้ตารางก่อน/หลังเป็นเกณฑ์
