Excalidraw — วาด diagram แบบ hand-drawn สำหรับ developer

ทำไมถึงชอบ Excalidraw

เครื่องมือ diagram ส่วนใหญ่ให้ผลลัพธ์ที่ดูเป็นทางการเกินไป ทำให้รู้สึกว่าต้อง “ทำให้สวย” ก่อนแชร์ Excalidraw แก้ปัญหานี้ด้วยสไตล์ hand-drawn ที่บอกว่า “นี่คือ draft ยังแก้ได้” — ทำให้ brainstorm ไหลลื่นขึ้นมาก

ใช้ทำอะไรได้บ้าง

System Design

วาด architecture diagram, data flow, และ component relationships ได้อย่างรวดเร็ว ไม่ต้องเสียเวลาจัดระเบียบ pixel

อธิบาย Algorithm

วาด tree, graph, หรือขั้นตอนการทำงานเพื่ออธิบายให้ทีมเข้าใจ ได้ผลดีกว่าพิมพ์ข้อความยาวๆ

Brainstorm Feature

ลาก box และ arrow เพื่อ map ความสัมพันธ์ระหว่าง feature ก่อนเริ่มเขียนโค้ด

ฟีเจอร์ที่ควรรู้

• Collaboration แบบ real-time — แชร์ link ให้ทีมวาดพร้อมกันได้เลย
• Export เป็น PNG/SVG — ใส่ใน PR description หรือ documentation ได้
• Libraries — มี shape library สำเร็จรูปสำหรับ AWS, GCP, network diagram
• Dark mode — ถนอมตาตอนทำงานดึก
• VS Code Extension — เปิด .excalidraw ใน editor ได้เลย

Keyboard Shortcuts ที่ใช้บ่อย

วิธีเริ่มใช้

เปิด excalidraw.com แล้วใช้เลย — ไม่ต้องสมัครบัญชี ไม่ต้องติดตั้ง ข้อมูลเก็บใน localStorage ของ browser

ถ้าต้องการ self-host หรือใช้ใน React project:

npm install @excalidraw/excalidraw

import { Excalidraw } from '@excalidraw/excalidraw';

export default function DiagramEditor() {
  return (
    <div style={{ height: '500px' }}>
      <Excalidraw />
    </div>
  );
}

เปรียบเทียบกับเครื่องมืออื่น

Tips

ใช้ frame tool กันส่วนต่างๆ ของ canvas ไว้อย่างเป็นระเบียบ แต่ละ frame export เป็นรูปแยกได้

Save ไฟล์ .excalidraw ไว้ใน git repo พร้อมกับ documentation — คนอื่นเปิดแก้ต่อได้เลย ไม่ต้องมี account