Prompt การทำ Flowchart ใน Draw.io
ใครเคยเหนื่อยกับการวาด Flowchart ตามโค้ดบ้าง? 😫 โค้ดยาว ๆ แล้วต้องมานั่งลากเส้น จัดบล็อกเอง… เสียเวลาสุด ๆ
แต่เดี๋ยวนี้เราให้ AI ทำแทนได้แล้วครับ! แต่ไม่ใช่แค่สั่งว่า “วาด Flowchart ให้หน่อย” นะ เพราะผลลัพธ์ที่ได้อาจจะดูดี แต่เอาไปใช้ต่อยาก
เคล็ดลับที่จะเปลี่ยน AI จากผู้ช่วยธรรมดาให้กลายเป็น “วิศวกรออกแบบผังงาน” คือการใช้ Prompt ที่มีข้อจำกัด (Constraint-Based Prompting) ครับ
กุญแจสำคัญ: ยื่น “คู่มือมาตรฐาน” ให้ AI
เราไม่ได้ยื่นแค่โค้ดให้ AI แปล แต่เรายื่น กฎหมาย การสร้าง Flowchart ให้มันทำตามอย่างเคร่งครัด!
เราต้องบอก AI ให้ชัดเจนว่า:
ต้องการ Output Format แบบไหน? (ในกรณีนี้คือ Plain XML สำหรับ Diagrams.net)
สัญลักษณ์แต่ละตัวต้องทำงานอย่างไร? (เช่น วงรี Start/Stop, สี่เหลี่ยม Process)
กฏการเชื่อมต่อเป็นอย่างไร? (ห้ามมีเส้นขาด Flow ต้องต่อเนื่อง Start -> Stop)
จุดตัดสินใจ (Decision) ต้องกำกับ True/False ทุกเส้น
พอเรากำหนดกฎเหล่านี้อย่างละเอียด ผลลัพธ์ที่ AI สร้างออกมาจึงไม่ใช่แค่ภาพ แต่เป็น โค้ด XML ที่พร้อม Copy ไปวางใน Draw.io แล้วใช้งานได้ทันที ไม่ต้องจัดเรียงใหม่เลยแม้แต่น้อย! โดยเข้าไปที่ Draw.io แล้วไปที่เมนูด้านบนที่เขียนว่า Extras > Edit Diagram… จากนั้นก็เอาไปวางได้เลย
พร้อมใช้ทันที! Prompt สูตรลับ
ลองนำ Prompt ตัวอย่างนี้ไปใช้ โดยปรับเปลี่ยนส่วนของ “นี่คือโค้ด” ให้เป็นโค้ดของคุณเอง แล้วดูผลลัพธ์ที่ได้เลยครับ!
เขียน flowchart ของโค้ดโปรแกรมต่อไปนี้ให้หน่อย โดยขอให้เป็นภาษาไทย และใกล้เคียงกับภาษาคนมากที่สุด อ่านเข้าใจง่ายมากที่สุด ไม่ต้องใส่คอมเม้นท์ จุดประสงค์คือใช้เพื่อเป็น Guideline ในการออกแบบและสร้างโปรแกรมนี้เพื่อใช้กับภาษาอะไรก็ได้ ผลลัพธ์ขอเป็น plain code ที่สามารถก๊อบปี้ไปวางได้เลย ฉันจะเอาไปใส่ใน [https://app.diagrams.net/](https://app.diagrams.net/) ในส่วนของ Extras > Edit Diagram
ผลลัพธ์ควรหน้าตาประมาณนี้
<mxGraphModel dx="820" dy="646" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
</root>
</mxGraphModel>
เงื่อนไขสำหรับสัญลักษณ์ต่างๆ คือ
Flow ของงานจะต้องมีครบทุกเส้น, Diagram จะต่อเนื่องเนื่องกันตามกฏเหล่านี้ ห้ามมีเส้นลูกศรขาด, จะต้องต่อเนื่องไปเรื่อยๆ ตั้งแต่ Start จนจบ Stop เลย โดยกำหนดให้ใช้สัญลักษณ์ได้แค่นี้เท่านั้น
Flow งานจะต้องเหมือนกับโค้ดโปรแกรมทุกประการ
Start จะมีลูกศรออกมาจากตัวมันเองแค่ 1 เส้นเท่านั้น (วงรี)
Stop จะมีลูกศรเข้ามันแค่ 1 เส้นเท่านั้น (วงรี)
Process จะมีลูกศรเข้ามันแค่ 1 เส้น และออกจากตัวมันแค่ 1 เส้นเท่านั้น (สี่เหลี่ยมผืนผ้า)
Condition จะมีลูกศรเข้ามันแค่ 1 เส้น แต่ออกได้ 2 เส้นเท่านั้น โดยเหนือเส้นจะต้องเขียนด้วยว่าเส้นไหนเป็น True หรือ False (สี่เหลี่ยม diamond)
Function จะมีลูกศรเข้า 1 ออก 1 เท่านั้น (สี่เหลี่ยมผืนผ้า มีขีดข้างซ้ายและขวา)
Input/Output จะมีลูกศรเข้า 1 ออก 1 เท่านั้น (สี่เหลี่ยมด้านขนาน)
ปล. ถ้ามีฟังก์ชันการทำงานย่อย ก็จะต้องมี flowchart ของฟังก์ชันย่อยให้หมดจนครบด้วย แบ่งแยกให้ชัดเจนว่าอันไหนเป็น main อันไหนเป็น function ย่อยชื่ออะไร
ปล. ห้ามอธิบายอะไรมาก ขอแค่ผลลัพธ์อย่างเดียวพอ
นี่คือโค้ด
[***วางโค้ดโปรแกรมของคุณตรงนี้***]
นี่แหละครับ คือการทำให้ AI ทำงานตามมาตรฐานของเราได้อย่างสมบูรณ์แบบ!
ปล. ถ้าได้ flowchart เรียบร้อยแล้ว อย่าลืมกดปุ่มขวาบนที่เขียนว่า Shared และปรับให้เป็นแบบให้คนอื่นดูลิงค์ได้ด้วยนะครับ จะได้เอา Flowchart มาแบ่งปันกันดูได้