Prompt เดิม แผนภาพเดิม
Prateek Rai ได้เปิดตัว tldraw-canvas-kit ซึ่งเป็นชุดรวม "Agent Skills" จำนวน 19 ทักษะ ที่ช่วยให้ AI assistant แบบ local อย่าง Claude Code หรือ Cursor สามารถควบคุมแอป tldraw desktop แบบ offline และสร้างแผนภาพทางวิศวกรรมที่เหมือนกันทุกครั้งได้ ชุดเครื่องมือนี้ทำงานได้โดยไม่ต้องมีการเชื่อมต่อคลาวด์หรือการส่งข้อมูล telemetry ซึ่งหมายความว่าทีมงานสามารถเก็บรักษาทรัพย์สินทางภาพ (visual assets) ไว้ภายในองค์กร (on-premises) ได้อย่างสมบูรณ์
ทำไมเครื่องมือสร้างแผนภาพแบบ local และมีความแน่นอน (deterministic) จึงมีความสำคัญ
ทีมวิศวกรรมต้องเสียเวลาหลายชั่วโมงในการย้าย flowchart, class diagrams และแผนผังโครงสร้าง (architecture maps) ระหว่างสไลด์, เว็บไซต์เอกสาร และเครื่องมือออกแบบ แต่ละขั้นตอนของการ copy-paste มักนำไปสู่การเปลี่ยนแปลงเล็กๆ น้อยๆ เช่น สไตล์ของเส้นเปลี่ยนไป, ID ถูกสร้างใหม่ หรือเลย์เอาต์คลาดเคลื่อน เมื่อแผนภาพถูกสร้างขึ้นใหม่โดย LLM ผลลัพธ์ที่ได้มักจะเป็นการจัดวางที่แตกต่างออกไป แม้ว่า prompt ที่เป็นข้อความจะเหมือนเดิมก็ตาม สำหรับองค์กรที่ต้องการเอกสารที่พร้อมสำหรับการตรวจสอบ (audit-ready) หรือชิ้นงานการออกแบบที่สามารถทำซ้ำได้ ความไม่แน่นอนนี้ถือเป็นความเสี่ยง
Prateek สร้าง tldraw-canvas-kit ขึ้นเพื่อแก้ปัญหาหลักสองประการ: (1) เครื่องมือที่ทำงานบนเครื่องของผู้ใช้ทั้งหมด และ (2) การรับประกันว่า prompt เดียวกันจะให้แผนภาพแบบเดิมเสมอ ด้วยการเปิดใช้งาน local HTTP API ที่ AI agent สามารถเรียกใช้งานได้ ชุดเครื่องมือนี้จึงช่วยขจัดปัญหาความหน่วงของเครือข่าย (network latency), ความเสี่ยงในการรั่วไหลของข้อมูล (data-exfiltration risk) และความจำเป็นในการสมัครสมาชิก SaaS
หลักการทำงานของชุดเครื่องมือ
- Offline core – แอป tldraw desktop จะรัน local server ที่รับคำสั่งในรูปแบบ JSON-encoded โดยไม่มีการเรียกใช้งานภายนอก และไม่มีข้อมูลการใช้งานใดๆ ถูกส่งออกจากเครื่อง
- Agent Skills – แต่ละทักษะจะกำหนดโครงสร้างที่แน่นอน (fixed structure specification) ได้แก่ การคำนวณเลย์เอาต์, การเลือก stencil และ ID ที่คงที่ เมื่อ agent เรียกใช้ทักษะหนึ่งๆ จะได้รับชุดคำสั่งการวาดที่เป็นแบบ deterministic
- Idempotent updates – หากทักษะถูกรันกับแผนภาพที่มีอยู่แล้ว มันจะอัปเดตรูปทรงในตำแหน่งเดิม, ลบองค์ประกอบที่ล้าสมัย และจัดตำแหน่งจุดเชื่อมต่อ (edges) ใหม่ ผลลัพธ์ที่ได้คือ canvas ที่สามารถรีเฟรชได้โดยไม่เกิดวัตถุซ้ำซ้อน
- File format – แผนภาพจะถูกจัดเก็บเป็นไฟล์ .tldraw ธรรมดา เนื่องจากตรรกะการจัดเลย์เอาต์ (layout logic) อยู่ภายในไฟล์ การแชร์ไฟล์จึงรวมกฎการนำทาง (navigation rules) ที่จำเป็นสำหรับการแสดงผลแบบเดิมไว้โดยอัตโนมัติ
ชุดเครื่องมือนี้รองรับแผนภาพ 13 ประเภท ตั้งแต่ sequence และ flowcharts ไปจนถึง ER diagrams, state machines, swimlanes, use-case, component, package, deployment, architecture, mind maps และ code-base maps ผู้ใช้เพียงแค่บรรยายแผนภาพที่ต้องการ แล้วทักษะ (skill) จะจัดการโครงสร้างพื้นฐานให้เอง
บทเรียนที่ได้รับระหว่างการพัฒนา
- สไตล์ของลูกศรเริ่มต้นจะเป็นแบบวาดด้วยมือ – แม้จะมีการร้องขอเส้นที่สะอาดตา แต่ในตอนแรก API จะสร้างลูกศรในสไตล์ sketch ดังนั้นทักษะจึงต้องส่งคำสั่งตามไปเพื่อเปลี่ยนสไตล์
- ลูกศรสามารถตัดผ่านรูปทรงได้โดยไม่มีการแจ้งเตือน – API จะไม่แจ้งข้อผิดพลาดหากตัวเชื่อมต่อ (connector) ลากผ่านโหนด (node) จึงจำเป็นต้องมีการตรวจสอบด้วยสายตาจากภาพหน้าจอที่สร้างขึ้นเพื่อตรวจหาการทับซ้อนดังกล่าว
- การตัดบรรทัดของป้ายกำกับเส้น (edge-label) จะผิดพลาดเมื่อลูกศรสั้นเกินไป – ป้ายกำกับอาจมีการตัดบรรทัดที่ไม่สวยงามหากตัวเชื่อมต่อสั้นเกินไป ดังนั้นทักษะจึงต้องบังคับความยาวขั้นต่ำหรือปรับตำแหน่งของป้ายกำกับ
ความผิดปกติเหล่านี้แสดงให้เห็นว่าทำไมทักษะต่างๆ จึงถูกสร้างขึ้นตามพฤติกรรมจริงของ API แทนที่จะสร้างขึ้นตามสมมติฐาน
การติดตั้งและใช้งานชุดเครื่องมือ
npx skills add prateek11rai/tldraw-canvas-kit
คำสั่งนี้ใช้งานได้บน macOS และ Linux หลังจากติดตั้งแล้ว AI agent บนเวิร์กสเตชันเดียวกันสามารถสอบถามเอกสารในเครื่อง, สร้างโค้ด และส่งคำสั่งวาดภาพไปยัง tldraw server ที่กำลังรันอยู่ได้ ผลลัพธ์ที่ได้คือแผนภาพที่สามารถทำซ้ำได้ ซึ่งสามารถนำไปแก้ไขเพิ่มเติมหรือส่งออกไปยังงานนำเสนอได้โดยไม่ต้องออกจากเครื่องโฮสต์เลย
ใครได้รับประโยชน์ และข้อแลกเปลี่ยนคืออะไร
- ทีมที่เน้นความปลอดภัย – บริษัทที่มีนโยบายการจัดการข้อมูลที่เข้มงวดสามารถเก็บรักษาชิ้นงานการออกแบบทั้งหมดไว้หลังไฟร์วอลล์ของตนเองได้
- วิศวกรด้านเอกสาร – ผู้ที่ต้องการฝังแผนภาพไว้ใน repository ที่มีการควบคุมเวอร์ชัน (version-controlled) จะได้รับแหล่งข้อมูลความจริงที่เป็นแบบ deterministic
- ผู้ปฏิบัติงานรายบุคคล – นักพัฒนาที่เหนื่อยกับการต้องมานั่งปรับเลย์เอาต์ด้วยตัวเองหลังจากรัน LLM แต่ละครั้ง สามารถเปลี่ยนกระบวนการนี้ให้เป็นแบบอัตโนมัติได้
ข้อจำกัดหลักคือการต้องพึ่งพาอินสแตนซ์ tldraw ที่รันอยู่ในเครื่อง องค์กรที่พึ่งพาบริการแผนภาพบนคลาวด์อยู่แล้วจำเป็นต้องเปลี่ยนมาใช้แอป desktop และปรับเปลี่ยนเวิร์กโฟลว์ นอกจากนี้ ชุดทักษะในปัจจุบันยังไม่ครอบคลุมไลบรารี stencil แบบกำหนดเอง ผู้ใช้จึงต้องทำงานภายใต้รูปทรงที่กำหนดไว้ล่วงหน้าเท่านั้น
ก้าวต่อไป
Prateek plans to expand the skill library based on community feedback and to add support for Windows, broadening the potential user base. He also hopes to see third-party agents integrate the kit, creating a marketplace of specialized diagram generators that all share the same deterministic core.
Takeaway
tldraw-canvas-kit proves that AI-driven diagram creation does not have to be a cloud-only, probabilistic process. By anchoring drawing logic in a local API and enforcing stable identifiers, it lets engineers generate repeatable, audit-ready visuals without sacrificing privacy or control.