AI WEB STUDIO · FLOWCHART

วิธีสร้างแผนภาพด้วย Diagram Design

977-121 Module: Website Design and Development · มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

วิธีสร้างแผนภาพด้วย Diagram Design | AI Web Studioกระบวนการเลือกความหมายและชนิดภาพ ยืนยัน tokens ทำ HTML ก่อน สกัด SVG และตรวจ accessibility กับ geometry AI WEB STUDIO · FLOWCHARTวิธีสร้างแผนภาพด้วย Diagram DesignFAILPASSตั้งสารของภาพPattern +Visual typeReferences +TokensHTML firstInline SVGExtract SVGตรวจผ่าน?พร้อมใช้ลำดับ / การส่งต่อAI Web Studio · 977-121 Module: Website Design and Development

อ่านภาพนี้อย่างไร

เริ่มจากถามว่าภาพช่วยสื่อสารจริงหรือไม่ เลือก semantic pattern และ visual type อ่าน reference แล้วใช้ tokens ของโครงการ สร้าง HTML เป็น source of truth ก่อนสกัด SVG และผ่าน self-check Flowchart แยก PASS ไปพร้อมใช้ และ FAIL กลับไปแก้ HTML source

แหล่งข้อมูล: design-system/diagrams/STYLE_GUIDE.md, design-system/diagrams/tokens.json, scripts/build-diagrams.mjs, courses/ai-web-studio/docs/labs/diagram-design.md

สิ่งที่ย่อ: ไม่แสดง visual type ทั้ง 39 แบบและขั้น export PNG เพราะบทเรียนนี้ใช้ SVG ใช้ flowchart ของลำดับงาน ไม่ได้ใช้ Process type แบบหลาย actor lanes ของ skill

Prompt สำหรับสร้างซ้ำ

สร้าง flowchart ภาษาไทย 960×600 สอน workflow ของ skill diagram-design: ระบุสิ่งที่ผู้อ่านต้องเข้าใจ → เลือก semantic pattern + visual type → อ่าน reference และใช้ project profile/tokens → สร้าง self-contained HTML ที่มี inline SVG → extract SVG → self_check + geometry + browser review หากไม่ผ่านให้ย้อนกลับแก้ เน้น HTML first ไม่มีเงา ใช้โปรไฟล์ Rawinnipa แบบ dark canvas: พื้น #0A0A0A, ข้อความ #F7F7F7, เส้นรอง #9CA3AF และ Rawin Green #3EDC81 เฉพาะโหนดหรือแถบ focal หนึ่งจุดเท่านั้น; เส้นเชื่อมใช้สี neutral #D1D5DB ใช้ Inter คู่กับ Noto Sans Thai ไม่มีเงา งานนี้อยู่ในคอร์ส AI Web Studio ซึ่งเป็นส่วนหนึ่งของ 977-121 Module: Website Design and Development มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต