OpenClaw 2.0: Claude Code + CoWork + Codex + DeepSeek + Buzz — All in One Agent

1
00:00:00,000 --> 00:00:10,966
สวัสดี ครับ ทุกคน ครับ. ยินดีต้อนรับ ครับ.

2
00:00:10,966 --> 00:00:29,503
วันนี้ จะ พา ไป ดู โปรดักต์ สุด เจ๋ง ที่ เรียก ว่า Diagram Design ครับ.

3
00:00:29,503 --> 00:00:51,957
ถ้า อยาก โชว์ ระบบ product architecture และ workflow ของ ตัวเอง นี่ คือ ตัว ช่วย ครับ.

4
00:00:51,957 --> 00:01:07,361
ลอง ดู GitHub repo แล้ว ตอน นี้ มี ดาว ราว 22.7k แล้ว ครับ.

5
00:01:07,361 --> 00:01:19,893
ใน ตัวอย่าง พวก เขา ก็ ใส่ ตัวอย่าง มา เยอะ มาก.

6
00:01:19,893 --> 00:01:33,992
และ เคย ได้ เป็น number one repo of the day ด้วย ครับ.

7
00:01:33,992 --> 00:01:52,007
เหตุผล ที่ สร้าง ขึ้น มา คือ พวก เขา อยาก ได้ แผนภาพ ที่ ใช้ ซ้ำ ได้.

8
00:01:52,007 --> 00:02:13,939
เพราะ ถ้า ขอ โค้ด ธรรมดา มัก ได้ ผล แบบ generic แบบ out of the box ที่ ไม่ โดด เด่น.

9
00:02:13,939 --> 00:02:34,304
เลย ตัดสินใจ สร้าง เครื่องมือ นี้ เพื่อ นำ กลับ มา ใช้ ซ้ำ ได้ ทุก ครั้ง ครับ.

10
00:02:34,304 --> 00:02:43,442
ต่อ ไป ดู ตัวอย่าง ที่ ให้ มา ครับ.

11
00:02:43,442 --> 00:02:55,713
ตอน นี้ มี แบบ ภาพ ประมาณ 28 visual types แล้ว.

12
00:02:55,713 --> 00:03:12,423
เช่น architecture flowchart และ sequence state machine เป็น ต้น.

13
00:03:12,423 --> 00:03:23,911
ลอง ใช้ ดู ได้ เลย และ ใช้งาน ง่าย มาก ครับ.

14
00:03:23,911 --> 00:03:33,310
มี ดีไซน์ หลาย แบบ ให้ เลือก ไป เลย.

15
00:03:33,310 --> 00:03:42,970
ดีไซน์ สวย เรียบ และ ดู แพง มาก ครับ.

16
00:03:42,970 --> 00:03:58,897
ยิ่ง ใส่ รายละเอียด เข้า ไป ใน scope เท่า ไหร่ ผล ก็ ยิ่ง ดี.

17
00:03:58,897 --> 00:04:08,296
พวก เขา ยัง มี dark style ด้วย ครับ.

18
00:04:08,296 --> 00:04:20,828
ดีไซน์ ดู ดี มาก และ เหมาะ กับ การ นำ เสนอ ครับ.

19
00:04:20,828 --> 00:04:29,183
มา ดู ส่วน การ ติดตั้ง กัน ครับ.

20
00:04:29,183 --> 00:04:39,888
ใน คลิป จะ แสดง วิธี ใช้ กับ Claude Code.

21
00:04:39,888 --> 00:05:02,603
แค่ ติดตั้ง plugin แล้ว ตั้ง ค่า ให้ ใช้ ซ้ำ ได้ ทุก ครั้ง ที่ อยาก สร้าง diagram ครับ.

22
00:05:02,603 --> 00:05:17,746
รองรับ Mermaid ด้วย และ สร้าง ไฟล์ PNG SVG ได้ ตาม ดีไซน์.

23
00:05:17,746 --> 00:05:28,973
หรือ export จาก XML เฉพาะ ของ คุณ ได้ ครับ.

24
00:05:28,973 --> 00:05:44,116
ยัง มี แผน architecture ให้ ดู ชัด ว่า ระบบ ทำงาน อย่างไร.

25
00:05:44,116 --> 00:06:05,003
ส่วน ที่ ดี ที่สุด คือ ไป ดู โค้ด ฝั่ง Claude Code ว่า หน้าตา เป็น อย่างไร ครับ.

26
00:06:05,003 --> 00:06:12,313
ก่อน อื่น ต้อง ติดตั้ง ก่อน.

27
00:06:12,313 --> 00:06:25,107
แล้ว สร้าง profile เพื่อ กำหนด สไตล์ ที่ ต้องการ.

28
00:06:25,107 --> 00:06:35,811
ลอง ใช้ กับ เว็บ ดีไซน์ ที่ ชอบ ได้ ครับ.

29
00:06:35,811 --> 00:06:47,561
ไฟล์ จะ ถูก สร้าง ใน โฟลเดอร์ diagram design.

30
00:06:47,561 --> 00:07:06,620
ใน โฟลเดอร์ profiles ให้ ขอ Claude Code หรือ Codex สร้าง profile นี้ ให้.

31
00:07:06,620 --> 00:07:15,758
แล้ว บันทึก ไว้ ให้ เรียบร้อย ครับ.

32
00:07:15,758 --> 00:07:30,640
ครั้ง ถัด ไป จะ สร้าง profile สำหรับ เว็บ ไซต์ ได้ ทันที.

33
00:07:30,640 --> 00:07:44,217
ตัวอย่าง ที่ ทำ ไว้ คือ เว็บ แนว Lovable และ Notion.

34
00:07:44,217 --> 00:07:55,444
ลอง กับ เว็บ อื่น ได้ เช่น กัน ครับ. หลัก ๆ

35
00:07:55,444 --> 00:08:04,060
คือ สร้าง template ของ เว็บ นั้น.

36
00:08:04,060 --> 00:08:18,420
แล้ว วิเคราะห์ ดีไซน์ ของ เว็บ นั้น ไว้ ใช้ ครั้ง หน้า.

37
00:08:18,420 --> 00:08:34,085
ถ้า อยาก ให้ workflow และ diagram ตรง กับ สิ่ง ที่ ระบุ ไว้.

38
00:08:34,085 --> 00:08:44,267
ผล แบบ ธรรมดา มัก ไม่ เหมือน เว็บ จริง.

39
00:08:44,267 --> 00:09:04,371
จึง สร้าง template นี้ เพื่อ ให้ workflow และ diagram ของ คุณ ตรง โจทย์ ครับ.

40
00:09:04,371 --> 00:09:15,598
โอเค ครับ. ลอง copy ทุก อย่าง มา ดู ผล กัน.

41
00:09:15,598 --> 00:09:24,997
จะ เห็น ว่า ได้ แบบ quadrant ออก มา.

42
00:09:24,997 --> 00:09:31,002
แนว คล้าย Lovable ครับ.

43
00:09:31,002 --> 00:09:40,663
ทำ ได้ ดี มาก ลอง อีก แบบ หนึ่ง ครับ.

44
00:09:40,663 --> 00:09:55,023
ลอง ดู sequence diagram ของ bearer token เป็น ตัวอย่าง.

45
00:09:55,023 --> 00:10:10,427
ระหว่าง ที่ กำลัง gen อยู่ จะ เห็น ลำดับ sequence ชัด ขึ้น.

46
00:10:10,427 --> 00:10:20,348
ปกติ ถ้า วาด เอง จะ ใช้ เวลา มาก ครับ.

47
00:10:20,348 --> 00:10:29,225
มี ตัวอย่าง sequence อีก หลาย แบบ.

48
00:10:29,225 --> 00:10:42,019
พอ ได้ ผล ครบ จะ เห็น sequence ทั้ง ชุด เลย ครับ.

49
00:10:42,019 --> 00:10:47,502
รอ ผล แล้ว มา ดู กัน.

50
00:10:47,502 --> 00:10:58,467
ลอง ดู readme และ ตัวอย่าง อื่น ด้วย ครับ.

51
00:10:58,467 --> 00:11:04,211
ว้าว สวย มาก เลย ครับ.

52
00:11:04,211 --> 00:11:13,611
diagram สะอาด เรียบ และ น่า ใช้ มาก.

53
00:11:13,611 --> 00:11:28,493
มี template จำนวน มาก ที่ ใช้ สร้าง diagram ชุด นี้ ครับ.

54
00:11:28,493 --> 00:11:39,458
มี ส่วน skill section สำหรับ plugins ด้วย.

55
00:11:39,458 --> 00:11:50,946
เข้า ไป ที่ plugins แล้ว จะ เจอ marketplace.

56
00:11:50,946 --> 00:12:04,784
เลือก diagram design แล้ว ไป ที่ skills ได้ เลย ครับ.

57
00:12:04,784 --> 00:12:13,661
มี skill และ asset ให้ เลือก เยอะ.

58
00:12:13,661 --> 00:12:22,538
เลือก สัก อัน แล้ว ดู ผล ได้ ครับ.

59
00:12:22,538 --> 00:12:34,809
แค่ copy paste แล้ว ดู ว่า ออก มา เป็น อย่างไร.

60
00:12:34,809 --> 00:12:49,953
สรุป แล้ว นี่ คือ template ที่ ใช้ สร้าง งาน พวก นี้ ครับ.

61
00:12:49,953 --> 00:12:58,307
หวัง ว่า จะ มี ประโยชน์ นะ ครับ.

62
00:12:58,307 --> 00:13:12,145
ถ้า ชอบ คลิป นี้ กด like กด subscribe ช่อง ด้วย ครับ.

63
00:13:12,145 --> 00:13:20,500
แล้ว เจอกัน ใหม่ คลิป หน้า ครับ.