ปกติแล้ว การวาดไดอะแกรมสถาปัตยกรรมระบบสักรูป อาจต้องเสียเวลาเป็นชั่วโมง แต่ stack-diagram สกิลเสริมสำหรับ AI ช่วยเขียนโค้ด สามารถวาดภาพระบบได้ด้วยคำสั่งเพียงประโยคเดียว

สำหรับใครที่เคยทำภาพไดอะแกรมระบบใส่ในหน้าเอกสารแนะนำโปรเจกต์อย่าง README, รายงาน หรือสไลด์นำเสนอ คงคุ้นเคยดีว่าเวลาส่วนใหญ่มักหมดไปกับ 3 เรื่องหลักๆ คือ นั่งลากกล่องทีละกล่อง, ไล่หาไฟล์โลโก้ของแต่ละเทคโนโลยี และคอยขยับเส้นลูกศรไม่ให้พาดทับตัวหนังสือหรือกล่องอื่น

stack-diagram ช่วยลดขั้นตอนทั้งหมดลงเหลือแค่การพิมพ์บอกชุดเทคโนโลยีหรือ stack ที่ใช้เป็นประโยคธรรมดา เหมือนตัวอย่างใน README ของโปรเจกต์ที่เขียนไว้ว่า:

Diagram our stack: Next.js and a Hono API on Vercel. Postgres on Neon, auth with Clerk, payments with Stripe. GitHub Actions deploys.

ประโยคนี้เพียงแค่บอกว่าระบบประกอบด้วยอะไรบ้าง ได้แก่ หน้าเว็บ Next.js กับ API จาก Hono ที่ทำงานบน Vercel, ฐานข้อมูล Postgres บน Neon, ระบบล็อกอิน Clerk, ระบบรับชำระเงิน Stripe และใช้ GitHub Actions สำหรับ deploy หรือการนำระบบขึ้นใช้งานจริง ที่เหลือ AI จะจัดการให้ทั้งหมด ตั้งแต่ค้นหาโลโก้ จัดวางตำแหน่งกล่อง ไปจนถึงลากเส้นเชื่อมโยง

โปรเจกต์นี้พัฒนาโดย caru-ini เผยแพร่บน GitHub ด้วยสัญญาอนุญาตแบบเปิดอย่าง MIT ที่นำไปใช้และแก้ไขได้ฟรี รองรับการทำงานร่วมกับ AI ช่วยเขียนโค้ดอย่าง Claude Code, Codex และ Cursor รวมถึงโปรแกรม AI หรือ agent อื่นๆ ที่รองรับมาตรฐาน Agent Skills ปัจจุบันมียอดดาวบน GitHub 2.2k

หน้าตาของไดอะแกรมที่ stack-diagram วาดออกมา

README ของโปรเจกต์แสดงภาพผลลัพธ์ที่สร้างจากประโยคตัวอย่างข้างต้นไว้ดังนี้

เมื่อดูรายละเอียด จะเห็นว่าภาพออกมาเป็นระเบียบเรียบร้อยเหมือนพิมพ์เขียวทางวิศวกรรม เทคโนโลยีแต่ละตัวแยกอยู่คนละกล่อง โดยใช้โลโก้ทางการวางบนการ์ดสี่เหลี่ยมสีขาว ด้านล่างมีชื่อบริการและคำอธิบายหน้าที่สั้นๆ ด้วยตัวพิมพ์เล็ก เช่น http server หรือ sqlite db

บริการที่ทำงานอยู่บนแพลตฟอร์มเดียวกัน มาจากผู้ให้บริการเดียวกัน หรืออยู่ในคลังเก็บโค้ดอย่าง repository เดียวกัน จะจัดรวมไว้ในกรอบเดียวกัน อย่างในตัวอย่างนี้ Next.js และ Hono จะอยู่ในกรอบ Vercel พร้อมป้ายชื่อและโลโก้ขนาดเล็กที่มุมซ้ายบน เป็นรูปแบบเดียวกับ VPC หรือเครือข่ายส่วนตัวที่ผู้ให้บริการคลาวด์ใช้ในไดอะแกรมสถาปัตยกรรมทั่วไป

เส้นเชื่อมโยงทั้งหมดจะลากเป็นแนวตั้งและแนวนอนแบบหักมุมฉาก ข้อความกำกับเส้นใช้ฟอนต์ความกว้างคงที่อย่าง Monospace เหมือนตัวอักษรในโค้ด และฉากหลังเป็นลายตารางกระดาษกราฟ

รูปแบบเส้นแต่ละแบบก็สื่อความหมายชัดเจน:

• เส้นทึบสีฟ้า (สีเด่น): แสดงเส้นทางหลักที่คำขอและข้อมูลวิ่งผ่าน
• เส้นทึบสีเทา: แสดงการเชื่อมต่อรองภายในระบบ
• เส้นประ: แสดงความสัมพันธ์ในกระบวนการพัฒนาหรือ deploy เช่น เส้นที่โยงออกจาก GitHub Actions

และจุดสำคัญที่สุดคือ ไม่มีเส้นไหนลากทับตัวหนังสือเลยแม้แต่เส้นเดียว

เลือกส่งออกผลลัพธ์ได้ 4 รูปแบบ:

• HTML ไฟล์เดียว (ค่าเริ่มต้น): ฝังฟอนต์และไฟล์โลโก้ทั้งหมดไว้ในตัวไฟล์ ทำให้เปิดดูผ่านเบราว์เซอร์ได้ทันทีโดยไม่ต้องต่อเน็ต เหมาะสำหรับเก็บไว้ใน repository หรือ wiki ของโปรเจกต์
• PNG: ให้มา 2 ไฟล์เป็นค่าเริ่มต้น คือธีมสว่างและธีมมืด สำหรับนำไปแปะในสไลด์หรือรายงาน
• React component: นำไปใช้บนหน้าเว็บ React ได้โดยไม่ต้องติดตั้งไลบรารีอื่นเพิ่ม
• Artifact: สำหรับแสดงผลเป็นหน้าเว็บของ Claude เพื่อแชร์ลิงก์ให้ทีมเปิดดูได้สะดวก

ผลลัพธ์ทั้งสี่แบบสร้างขึ้นจากไฟล์ HTML เดียวกัน ส่วนไฟล์ PNG ได้จากการใช้ Headless browser หรือเบราว์เซอร์จำลองแบบไม่เปิดหน้าต่าง เปิดไฟล์ HTML ขึ้นมาจับภาพเก็บไว้ ไม่ได้วาดภาพแยกขึ้นมาใหม่

นอกจากนี้ README ยังมีตัวอย่างไดอะแกรมรูปแบบอื่นๆ อีก เช่น ภาพด้านบนที่เป็นชุดเครื่องมือใน monorepo ซึ่งรวมคลังโค้ดหลายส่วนไว้ด้วยกัน ทั้ง pnpm workspace, Turborepo, Biome, Vitest และ Lefthook อีกทั้งยังมีตัวอย่างระบบแชตบอตที่ใช้ Claude ตอบคำถามจาก Notion และระบบบน AWS, Google Cloud และ Azure ที่ดึงไอคอนทางการมาใช้อย่างถูกต้อง

โลโก้ถูกต้องแม่นยำ เพราะใช้ไฟล์ทางการ ไม่ได้วาดขึ้นใหม่

โลโก้ของแต่ละบริการในภาพเป็นไฟล์ทางการที่ดึงมาจากแหล่งต้นทางจริง ไม่ใช่ภาพที่ AI วาดเลียนแบบขึ้นมา โดยสคริปต์ของสกิลจะค้นหาโลโก้จากคลังต่างๆ ตามลำดับดังนี้:

1. svgl: ค้นหาที่นี่เป็นลำดับแรก เพราะมีโลโก้ทางการเวอร์ชันล่าสุดของเครื่องมือนักพัฒนายุคใหม่ เช่น Hono หรือ Better Auth
2. devicon: ค้นหาต่อถ้าไม่พบใน svgl
3. gilbarbara/logos: ค้นหาต่อจากคลังนี้เป็นลำดับถัดมา
4. ถ้าไม่พบจากทั้งสามแห่ง AI จะเข้าไปค้นหาไฟล์โลโก้จาก repository หรือหน้าเว็บทางการของแบรนด์นั้นโดยตรง

สำหรับไอคอนของคลาวด์เจ้าใหญ่อย่าง AWS, Google Cloud และ Azure ตัวสกิลจะไม่ค้นหาผ่านคลังเหล่านี้ แต่จะดึงจากชุดไอคอนทางการของแต่ละค่ายโดยตรงระหว่างรัน

ถ้าเป็นไดอะแกรมบน AWS ตัวสกิลยังวาดตามแนวทางปฏิบัติของ AWS ด้วย เช่น ตีกรอบสี่เหลี่ยมมุมฉาก และใส่ชื่อเต็มอย่าง Amazon S3 แทนการเขียนแค่ S3 เฉยๆ ยิ่งไปกว่านั้น ถ้ารู้หรือพอคาดเดาได้ว่าอะไรอยู่ฝั่งไหน AI จะช่วยแบ่ง VPC ออกเป็นสองส่วนให้ด้วย ได้แก่ Public Subnet สำหรับบริการที่เปิดรับผู้ใช้นอกระบบอย่างระบบกระจายโหลด Load Balancer และ Private Subnet สำหรับเซิร์ฟเวอร์แอปพลิเคชันและฐานข้อมูล

ส่วนกล่องที่เป็นฟังก์ชันทั่วไปและไม่มีแบรนด์เฉพาะ เช่น งานตั้งเวลาหรือคิวประมวลผล ตัวสกิลจะใช้ไอคอนลายเส้นจากชุด Lucide มาแสดงแทน โดยไม่ใช้ตัวหนังสือเปล่าๆ และไม่ใช้อีโมจิ

ใน SKILL.md ไฟล์ข้อกำหนดที่ AI ต้องอ่านก่อนเริ่มทำงาน กำหนดกฎสำคัญไว้ข้อหนึ่งว่า ห้ามเปลี่ยนสีโลโก้เด็ดขาด ถ้าโลโก้เดิมเป็นสีขาวจนกลืนไปกับการ์ดสีขาว วิธีแก้คือให้เปลี่ยนสีการ์ดรองด้านหลังให้เข้มขึ้น ไม่ใช่ไปแก้สีของตัวโลโก้

จุดนี้พลาดง่าย เพราะไอคอนที่หน้าตาคล้ายของจริงไม่ได้แปลว่าเป็นไฟล์ทางการเสมอไป stack-diagram จึงเลือกไม่ใช้ simple-icons คลังไอคอนที่วาดโลโก้ขึ้นมาใหม่เป็นสีเดียว เนื่องจาก SKILL.md ระบุไว้ว่าผู้ใช้มองปราดเดียวก็รู้ทันทีว่าโลโก้ผิด

ลูกศรไม่ทับตัวหนังสือ เพราะ AI ตรวจสอบภาพที่วาดเสร็จก่อนส่งงาน

SKILL.md แบ่งการวาดภาพหนึ่งภาพออกเป็น 7 ขั้นตอน:

1. สรุปโครงสร้างเนื้อหาว่ามีกล่องอะไรบ้าง จัดกลุ่มอย่างไร และเชื่อมต่อกันแบบไหน
2. ดาวน์โหลดไฟล์โลโก้ตามลำดับคลังที่กำหนดไว้
3. กำหนดพิกัดของทุกชิ้นตามกฎระยะห่างของสกิล
4. สร้างไฟล์ HTML จากเทมเพลตที่มาพร้อมกับสกิล
5. เรนเดอร์ออกมาเป็นรูปภาพ PNG แล้วให้ AI เปิดดูภาพจริงเพื่อตรวจสอบ
6. ส่งมอบงานในรูปแบบไฟล์ที่ผู้ใช้ต้องการ
7. ถามผู้ใช้ว่าต้องการแชร์ภาพขึ้นแกลเลอรีสาธารณะหรือไม่

ขั้นตอนที่ 5 นี่เองคือเหตุผลที่ลูกศรไม่พาดทับตัวหนังสือ โดย AI จะต้องเปิดภาพที่เรนเดอร์เสร็จแล้วขึ้นมาตรวจเช็กทีละข้อ สิ่งที่ต้องตรวจคือ ไม่มีเส้นลากตัดผ่านป้ายชื่อ, ไม่มีหัวลูกศรจิ้มลงบนตัวหนังสือ, มองเห็นไอคอนครบทุกตัว และไม่มีองค์ประกอบใดล้นออกนอกกรอบ ถ้าพบจุดผิดพลาด AI จะกลับไปแก้แล้วเรนเดอร์ใหม่จนกว่าภาพจะสะอาดตาและถูกต้อง

SKILL.md ให้เหตุผลไว้อย่างตรงไปตรงมาว่า ขั้นตอนการตรวจสอบนี้ใช้พลังประมวลผลเพิ่มขึ้นเพียงเล็กน้อย แต่คุ้มค่ากว่าการส่งภาพที่มีตัวหนังสือทับกันออกไปอย่างแน่นอน

นอกจากนี้ ยังมีการป้องกันไว้ตั้งแต่ขั้นตอนคำนวณพิกัด โดยกฎของสกิลถือว่า "กล่องหนึ่งกล่อง" คือการ์ดโลโก้รวมกับข้อความกำกับด้านล่าง ดังนั้น เวลาลากเส้นเชื่อมต่อในแนวตั้ง เส้นจะเริ่มที่ขอบนอกสุดของทั้งก้อน ไม่ได้ลากจากตัวการ์ดโลโก้แล้วพาดผ่านชื่อด้านล่างลงไป สังเกตได้จากภาพตัวอย่างแรก เส้นที่ลากลงมาจาก Hono จะเริ่มที่ใต้คำว่า api routes ไม่ได้เริ่มจากใต้การ์ดโลโก้

วิธีติดตั้งและสั่งงาน stack-diagram ด้วยประโยคธรรมดา

การติดตั้ง: ถ้าใช้งานใน Claude Code, Codex, Cursor หรือ agent อื่นๆ ที่รองรับมาตรฐาน Agent Skills สามารถติดตั้งได้ทันทีด้วยคำสั่งเดียว:

npx skills add caru-ini/stack-diagram

ถ้าใช้งานผ่านแอป Claude ให้ดาวน์โหลดไฟล์ stack-diagram.zip จากหน้า Releases แล้วอัปโหลดเข้าไปเป็น Skill ได้เลย

สิ่งที่ต้องเตรียมบนเครื่อง: สกิลนี้ต้องการ Python 3.9 ขึ้นไป และต้องเชื่อมต่ออินเทอร์เน็ตเพื่อใช้ค้นหาและดาวน์โหลดโลโก้ ถ้าต้องการผลลัพธ์เป็นไฟล์ PNG ต้องติดตั้งเครื่องมือสั่งเปิดเบราว์เซอร์เพื่อจับภาพจากไฟล์ HTML อย่าง Playwright และ Chromium ด้วยคำสั่ง:

pip install playwright && python3 -m playwright install --with-deps chromium

แนะนำให้ติดตั้งเครื่องมือชุดนี้ไว้เสมอ แม้ตั้งใจจะใช้แค่ไฟล์ HTML เพราะในขั้นตอนที่ AI ต้องเปิดตรวจสอบภาพก่อนส่งมอบงาน ก็ต้องใช้สคริปต์เรนเดอร์ PNG ตัวนี้เช่นเดียวกัน

วิธีสั่งงาน: ไม่จำเป็นต้องพิมพ์คำสั่งพิเศษอย่าง Slash command ที่ขึ้นต้นด้วยเครื่องหมาย / เพียงแค่พิมพ์ประโยคธรรมดาสั่งให้วาดไดอะแกรมสถาปัตยกรรม ภาพระบบ หรือผังเทคโนโลยีที่ใช้ จะพิมพ์เป็นภาษาไหนก็ได้ แล้ว AI จะเรียกใช้สกิลนี้เองโดยอัตโนมัติ

เราเลือกได้ว่าจะพิมพ์ระบุแค่รายชื่อเครื่องมือสั้นๆ หรือจะอธิบายเพิ่มเติมว่าอะไรเชื่อมต่อกับอะไร การบอกแค่รายชื่อจะพิมพ์ได้เร็วกว่า แต่ AI จะต้องคาดเดาเองว่าอะไรควรจัดกลุ่มอยู่ด้วยกันและเส้นควรลากไปทางไหน (AI จะถามกลับเฉพาะเมื่อเครื่องมือกำกวมจนอาจจัดวางผิดพลาดได้) ส่วนถ้ารู้อยู่แล้วว่าระบบเชื่อมต่อกันอย่างไร การระบุลงไปในประโยคตั้งแต่แรกจะได้ผลลัพธ์ที่ตรงกับระบบจริงมากที่สุด

ตัวอย่างด้านล่างเป็นประโยคคำสั่งที่เราเขียนขึ้นเอง นำไปปรับใช้กับระบบของคุณได้เลย:

วาดไดอะแกรมระบบเว็บขายของออนไลน์: หน้าเว็บ Next.js บน Vercel เก็บสินค้าและออเดอร์ใน Postgres บน Supabase รับชำระเงินผ่าน Stripe และ deploy ด้วย GitHub Actions

วาดภาพระบบแชตบอตตอบลูกค้าใน LINE: webhook รับข้อความเข้า Cloudflare Workers ส่งคำถามให้ Claude ตอบ แล้วเก็บประวัติแชตไว้ใน Neon

วาดระบบจองคิวร้านตัดผม: หน้าเว็บ React เรียก API ที่เขียนด้วย Hono บน Cloudflare Workers เก็บข้อมูลใน Cloudflare D1 ขอเป็น PNG ทั้งธีมสว่างและมืด

จากตัวอย่างสุดท้าย เราสามารถระบุรูปแบบไฟล์ที่ต้องการไว้ท้ายประโยคได้เลย แต่ถ้าไม่ได้ระบุ ระบบจะส่งออกเป็นไฟล์ HTML ให้เป็นค่าเริ่มต้น

การแชร์ขึ้นแกลเลอรี stacks.caru.moe ต้องกดยืนยันสองครั้ง

หลังจากวาดภาพเสร็จ AI จะถามเพียงครั้งเดียวว่าต้องการแชร์ภาพขึ้น แกลเลอรี stacks.caru.moe ให้คนอื่นดูด้วยหรือไม่ และจะไม่ถามซ้ำอีกในการสนทนานั้น โดยคำถามนี้จะปรากฏขึ้นเฉพาะตอนที่ AI รันคำสั่งและเชื่อมต่ออินเทอร์เน็ตได้เท่านั้น

ถ้าเราตอบตกลง AI จะถามชื่อที่ต้องการให้แสดง โดยไม่แอบดึงชื่อจากบัญชี Git หรือ GitHub มาใส่เอง จากนั้นจะแสดงข้อมูลทั้งหมดที่จะเผยแพร่ต่อสาธารณะให้เราตรวจทานก่อน ได้แก่ ภาพ PNG ทั้งธีมสว่างและธีมมืด, ชื่อภาพภาษาอังกฤษ, รายชื่อชุดเทคโนโลยีที่ใช้ และชื่อผู้เผยแพร่

ระหว่างนี้ AI จะช่วยตรวจสอบด้วยว่ามีข้อมูลที่เป็นความลับหรือข้อมูลภายในระบบหลุดเข้ามาหรือไม่ เช่น ชื่อเครื่องเซิร์ฟเวอร์, หมายเลข IP หรือชื่อลูกค้า ถ้าพบ AI จะแนะนำให้เรนเดอร์ภาพใหม่เพื่อตัดข้อมูลส่วนนั้นออกก่อน จากนั้นจะขอให้เรายืนยันว่าเป็นระบบของเราเองหรือเป็นข้อมูลที่เปิดเผยต่อสาธารณะได้ โดยระบบจะส่งโพสต์ขึ้นไปก็ต่อเมื่อเราตอบตกลงยืนยันเป็นครั้งที่สองเท่านั้น

ข้อความคำสั่งที่เราพิมพ์สั่งงานจะไม่ส่งไปด้วย ส่วนบัญชี GitHub จะเลือกผูกหรือไม่ผูกก็ได้ และจะไม่แสดงต่อสาธารณะ โดยมีไว้ให้เราล็อกอินเข้าไปลบภาพในภายหลัง โพสต์ที่ระบบพักไว้จะขึ้นหน้าแกลเลอรีหลังมีคนตรวจแล้วเท่านั้น ส่วนคีย์สำหรับใช้ลบโพสต์ สกิลจะบันทึกเก็บไว้ในเครื่องของเราเอง

ปัจจุบันในแกลเลอรีมีตัวอย่างภาพแสดงอยู่ 7 ภาพ ตั้งแต่สถาปัตยกรรมเว็บบน Cloudflare Workers ไปจนถึงโปรเจกต์ IoT ที่ใช้บอร์ด ESP32 และมีฟังก์ชันให้กดกรองดูตามเทคโนโลยีได้

การแชร์ภาพจึงขึ้นอยู่กับความสมัครใจของเราทั้งหมด ถ้าเป็นโปรเจกต์ส่วนตัวก็แชร์ได้สบายๆ แต่ถ้าเป็นระบบงานของบริษัท แนะนำให้ตรวจดูชื่อและรายละเอียดต่างๆ ในภาพด้วยตัวเองอีกรอบ เพื่อความปลอดภัย แม้ AI จะช่วยตรวจให้ในเบื้องต้นแล้วก็ตาม

วาดจากคำบรรยาย ไม่ได้เปิดอ่านโค้ดในโปรเจกต์จริง

ข้อมูลทั้งหมดที่ใช้สร้างภาพมีเพียงคำบรรยายที่เราพิมพ์บอกเท่านั้น ตลอดกระบวนการทั้ง 7 ขั้นตอนของสกิล ไม่มีขั้นตอนไหนที่เปิดเข้าไปอ่านโค้ดในโปรเจกต์เลย ถ้าเราลืมบอกว่ามีระบบรับชำระเงินของ Stripe ในภาพก็จะไม่มีกล่อง Stripe

ข้อดีคือ เราสามารถวาดแผนผังระบบที่ยังไม่ได้เริ่มเขียนโค้ดได้ทันที แต่ข้อจำกัดคือ เมื่อระบบจริงเปลี่ยนแปลง ภาพไดอะแกรมจะไม่ปรับตามโดยอัตโนมัติ เราจะต้องสั่งให้ AI วาดภาพใหม่อีกครั้ง

งานที่สกิลนี้ออกแบบมาให้ทำโดยเฉพาะ ได้แก่ ภาพสรุปชุดเทคโนโลยีที่ใช้, ภาพสถาปัตยกรรมระบบ, ภาพโครงสร้างพื้นฐาน เช่น เซิร์ฟเวอร์และระบบเครือข่าย และแผนผังแสดงความเชื่อมโยงระหว่างบริการต่างๆ ทั้งหมดนี้จะเรนเดอร์ออกมาเป็นกล่องและเส้นเชื่อมโยงที่สะอาดตาเหมือนตัวอย่างข้างต้น

ถ้าระบบมีขนาดใหญ่ เราสามารถสั่งให้ซ้อนกรอบกลุ่มย่อยไว้ข้างในกรอบใหญ่อีกชั้นได้ แต่ใน SKILL.md แนะนำว่าควรซ้อนเพียงชั้นเดียว เพราะถ้าซ้อนลึกกว่านั้นภาพจะแน่นและรกตา การแบ่งองค์ประกอบออกเป็นกลุ่มใหญ่ไม่กี่กลุ่มจะช่วยให้ไดอะแกรมอ่านเข้าใจง่ายกว่า

ไอคอนคลาวด์ใช้ในภาพได้ แต่อย่าบันทึกไฟล์ลงใน repo

ชุดไอคอนของผู้ให้บริการคลาวด์ทั้งสามค่ายหลักมาพร้อมกับเงื่อนไขการใช้งานที่แตกต่างกัน:

• AWS: อนุญาตให้นำไอคอนไปใช้ในไดอะแกรมสถาปัตยกรรมได้ แต่เรื่องการแจกจ่ายไฟล์ต่อยังไม่มีข้อยืนยันที่ชัดเจน
• Google Cloud: อนุญาตให้ใช้ในไดอะแกรมและเอกสารทางเทคนิคได้ ส่วนเรื่องการแจกจ่ายไฟล์ต่อก็ยังไม่มีข้อยืนยันเช่นกัน
• Azure: Microsoft อนุญาตให้ใช้เฉพาะในไดอะแกรมสถาปัตยกรรม สื่อการสอน และเอกสารประกอบเท่านั้น โดยมีข้อห้ามชัดเจนว่า ห้ามครอบตัด พลิก หมุน หรือบิดรูปทรงของไอคอนเด็ดขาด

เพราะเงื่อนไขเหล่านี้ SKILL.md จึงกำชับให้เก็บชุดไอคอนและไฟล์ไอคอนแยกชิ้นของทั้งสามค่ายไว้นอก repository ถ้าเราเป็นคนบันทึกและส่งงานขึ้น repository ด้วยตัวเอง เราแนะนำให้ใส่โฟลเดอร์เก็บไอคอนเหล่านี้ไว้ในไฟล์ยกเว้นการอัปโหลดอย่าง .gitignore เพื่อไม่ให้เผลอนำขึ้นไปด้วย

สำหรับโลโก้ของแบรนด์เทคโนโลยีอื่นๆ ใน README ย้ำเตือนไว้ว่า โลโก้ทั้งหมดยังคงเป็นเครื่องหมายการค้าของเจ้าของแบรนด์นั้นๆ การนำมาใช้ในไดอะแกรมไม่ได้หมายความว่าแบรนด์ดังกล่าวรับรองหรือสนับสนุนระบบของเรา

วาดภาพระบบให้เห็นตรงกัน ก่อนลงมือเขียนโค้ดจริง

เมื่อการสร้างภาพระบบง่ายแค่พิมพ์ประโยคเดียว จังหวะที่เหมาะกับการวาดภาพจึงเปลี่ยนไป ไม่จำเป็นต้องรอให้สร้างระบบเสร็จทั้งหมดก่อนแล้วค่อยมานั่งวาดภาพใส่ไฟล์ README อีกต่อไป

เราแนะนำให้ลองวาดตั้งแต่ตอนที่ระบบยังเป็นแค่ไอเดีย เพื่อนำภาพนั้นไปเปิดคุยกับทีมว่าเข้าใจสถาปัตยกรรมตรงกันหรือไม่ หรือจะส่งภาพให้ AI ดูภาพรวมก่อนสั่งให้เริ่มลงมือเขียนโค้ด เป็นวิธีคิดก่อนลงมือสร้างแบบเดียวกับ การให้ AI ซักไอเดียก่อนลงมือเขียนโค้ด ถ้าภาพออกมาไม่ตรงกับที่คิด ก็แค่ปรับแก้ประโยคคำสั่งแล้วให้ AI วาดใหม่ได้ทันที

ไดอะแกรมระบบที่มีประโยชน์ที่สุด จึงอาจไม่ใช่ภาพที่วาดหลังจากสร้างระบบเสร็จแล้ว แต่เป็นภาพที่ช่วยให้ทั้งทีมและ AI เห็นภาพตรงกันตั้งแต่ก่อนลงมือเขียนโค้ดบรรทัดแรก

ที่มา: โปรเจกต์ stack-diagram บน GitHub