3 เครื่องมือวาดภาพ AI สุดเจ๋ง สร้างภาพเทคนิคระดับมืออาชีพด้วยคำสั่งเดียว ทุกตัวมีดาวบน GitHub เกิน 3.6K

01

สร้างแผนภาพเทคนิคที่พร้อมเผยแพร่ได้ด้วยประโยคเดียว

เมื่อเร็วๆ นี้ ผมพบเครื่องมือวาดภาพชื่อ fireworks-tech-graph บน GitHub ซึ่งตอนนี้มีดาวถึง 3.6k ดวงแล้ว

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

ผมลองดูเมทริกซ์ความสามารถของมันแล้ว ถือว่าค่อนข้างทรงพลังทีเดียว

มันรองรับแผนภาพมากถึง 14 ประเภท ครอบคลุมซีรีส์ UML ครบถ้วน และยังมีเทมเพลตเฉพาะสำหรับสาขา AI และ Agent อีกด้วย

ตัวอย่างเช่น RAG pipeline, กระบวนการทำงานร่วมกันของหลาย Agent เป็นต้น ซึ่งมีประโยชน์มากในสถานการณ์การเขียนเนื้อหาที่เกี่ยวข้องกับ AI ในประเทศจีน

ในด้านสไตล์ภาพ มันมีตัวเลือกให้ 7 แบบ รวมถึงสไตล์เทอร์มินัลมืด สไตล์เส้นเทคนิค และสไตล์วาดมือ เป็นต้น

คุณแค่เปลี่ยนสไตล์ของภาพเดียวกันแล้วสร้างใหม่ก็พอ ไม่ต้องปรับแต่งสไตล์ด้วยตนเอง

นี่คือ Skill สำหรับ Claude Code การติดตั้งใช้เพียงคำสั่งเดียว:

• npx skills add yizhiyanhua-ai/fireworks-tech-graph

บน Mac ยังต้องติดตั้ง dependencies พื้นฐานผ่าน brew install librsvg เพื่อแปลง SVG เป็น PNG

เมื่อติดตั้งเสร็จ คุณแค่บอก Claude ให้สร้างผังงาน RAG pipeline และระบุสไตล์เทอร์มินัลมืด ภายในไม่กี่วินาทีคุณก็จะได้ภาพที่พร้อมใช้งาน

• ที่อยู่โอเพนซอร์ส: https://github.com/yizhiyanhua-ai/fireworks-tech-graph

02

Architecture Diagram Generator

อีกปัญหาที่น่าปวดหัวเมื่อวาดแผนภาพสถาปัตยกรรมคือวิธีการแชร์: การส่งออกภาพอาจมีความคมชัดไม่เพียงพอ ในขณะที่การส่งไฟล์ draw.io ต้องให้อีกฝ่ายติดตั้งเครื่องมือที่เกี่ยวข้อง

architecture-diagram-generator โอเพนซอร์สจาก Cocoon-AI แก้ปัญหานี้โดยเฉพาะ และมีดาวถึง 3.6k เช่นกัน

รูปแบบผลลัพธ์ของมันพิเศษมาก: สร้างไฟล์ HTML แบบสแตนด์อโลนโดยตรง ซึ่งฝังรูปแบบ SVG ไว้ภายใน ดับเบิลคลิกไฟล์นี้ เบราว์เซอร์ใดก็เปิดดูได้

แม้แชร์ผ่าน WeChat หรืออีเมล ก็ไม่มีปัญหาภาพเบลอ กระบวนการแชร์ง่ายมาก

สไตล์เริ่มต้นใช้ธีมสีเข้ม ฟอนต์ใช้ JetBrains Mono แผนภาพที่สร้างขึ้นมีความสวยงามในตัว ไม่ต้องปรับแต่งสีเพิ่มเติม

Skill นี้เข้ากันได้ทั้ง Claude.ai และ Claude Code

ถ้าคุณใช้ Claude.ai แค่เข้าไปที่ Settings → Capabilities → Skills แล้วอัปโหลดไฟล์ ผู้ใช้ Claude Code สามารถวางไฟล์ไว้ในไดเรกทอรี ~/.claude/skills/ เพื่อใช้งานได้ทันที

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

• ที่อยู่โอเพนซอร์ส: https://github.com/Cocoon-AI/architecture-diagram-generator

03

Excalidraw Diagram Generator

ผลงานจาก GitHub อย่างเป็นทางการ หลังจากสร้างแล้วยังสามารถแก้ไขด้วยตนเองได้

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

มันเป็น Skill ที่收录อยู่ในคลัง awesome-copilot อย่างเป็นทางการของ GitHub อยู่ในไดเรกทอรี skills/excalidraw-diagram-generator

จุดเด่นที่สุดคือรูปแบบผลลัพธ์: สร้างไฟล์ .excalidraw JSON

ลากไฟล์นี้ไปวางที่ excalidraw.com ก็สามารถเปิดได้ และองค์ประกอบทั้งหมดสามารถแก้ไขต่อได้

Excalidraw เองเป็นบอร์ดวาดภาพออนไลน์โอเพนซอร์สที่มีดาว 120K

คุณสามารถปรับเปลี่ยนสี ย้ายตำแหน่ง เพิ่มลูกศร หรือลบโหนดได้อย่างง่ายดาย

ประเภทแผนภาพที่รองรับก็หลากหลายมาก ผมนับดูมี 9 ประเภท: ผังงาน, แผนภาพความสัมพันธ์, แผนที่ความคิด, แผนภาพสถาปัตยกรรม, แผนภาพการไหลของข้อมูล, แผนภาพเลนว่ายน้ำ, แผนภาพคลาส, แผนภาพลำดับเวลา และแผนภาพ ER ครอบคลุมความต้องการวาดภาพในชีวิตประจำวัน

ที่ควรกล่าวถึงเป็นพิเศษคือ มันแยกประเภทเส้นความสัมพันธ์ UML อย่างละเอียด รวมถึงเส้นสืบทอด การนำไปใช้ ความสัมพันธ์ การพึ่งพา การรวมกลุ่ม และการประกอบ ซึ่งวาดตามมาตรฐานอย่างเคร่งครัด ทำให้การวาดแผนภาพคลาสดูเป็นมืออาชีพเป็นพิเศษ

ถ้าต้องการวาดสถาปัตยกรรมคลาวด์ ก็สามารถเรียกใช้ไลบรารีไอคอนอย่างเป็นทางการของ AWS, GCP และ Azure ได้ ไม่ต้องหาวัสดุด้วยตนเองอีก

มันเหมาะมากสำหรับสถานการณ์ที่ต้องขัดเกลาซ้ำๆ หรือทำงานร่วมกับเพื่อนร่วมงานในการแก้ไข

• ที่อยู่โอเพนซอร์ส: https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator