Claude Code Diagrams That Actually Look Good (No Mermaid Slop)

1
00:00:00,000 --> 00:00:11,900
ใน ทutorial วันนี้ เรา จะ พา ดู โปรเจกต์ สุด เจ๋ง ที่ ชื่อ diagram-design ครับ.

2
00:00:11,900 --> 00:00:25,006
มัน ช่วย ได้ มาก ถ้า คุณ อยาก โชว์ system architecture และ workflow ของ ผลิตภัณฑ์ ครับ.

3
00:00:25,006 --> 00:00:28,772
งั้น เรามา เริ่ม กัน เลย.

4
00:00:28,772 --> 00:00:38,262
ถ้า ดู ที่ GitHub repo จะ เห็น ว่า มี ดาว ไป แล้ว ประมาณ 22.7k.

5
00:00:38,262 --> 00:00:43,685
คน ชอบ โปรเจกต์ นี้ มาก จริง ๆ ครับ.

6
00:00:43,685 --> 00:00:54,681
เขา ใส่ ตัวอย่าง ไว้ เยอะ เพื่อ โชว์ ว่า design framework นี้ ดี แค่ ไหน.

7
00:00:54,681 --> 00:01:03,418
และ ยัง เคย ขึ้น เป็น number one repo of the day อีก ด้วย.

8
00:01:03,418 --> 00:01:08,992
เหตุผล ที่ สร้าง ขึ้น มา คือ อยาก ได้

9
00:01:08,992 --> 00:01:15,770
เครื่องมือ สำหรับ ออกแบบ ไดอะแกรม ที่ ใช้ ซ้ำ

10
00:01:15,770 --> 00:01:17,879
ได้ ทุก ครั้ง.

11
00:01:17,879 --> 00:01:27,821
ทุก ที ที่ ผู้ เขียน ต้องการ ไดอะแกรม ไม่ว่า จะ เป็น architecture,

12
00:01:27,821 --> 00:01:34,148
sketch, workflow หรือ pyramid ของ สิ่ง ที่

13
00:01:34,148 --> 00:01:40,776
สำคัญ ที่สุด พอ ไป ถาม coding agent แล้ว ได้

14
00:01:40,776 --> 00:01:44,090
กลับ มา แค่ กล่อง มน ๆ

15
00:01:44,090 --> 00:01:50,567
ทั่วไป ที่ ไม่ เข้า กับ สไตล์ เว็บไซต์ เลย.

16
00:01:50,567 --> 00:02:03,522
เลย ตัดสิน ใจ สร้าง ระบบ นี้ เพื่อ ให้ ขอ จาก coding agent แล้ว ใช้ ซ้ำ ได้ ทุก ครั้ง.

17
00:02:03,522 --> 00:02:07,740
ต่อ ไป ดู ตัวอย่าง กัน ครับ.

18
00:02:07,740 --> 00:02:15,422
ใน หน้า ตัวอย่าง มี visual type อยู่ ประมาณ 28 แบบ.

19
00:02:15,422 --> 00:02:16,778
แบบ แรก ๆ

20
00:02:16,778 --> 00:02:26,569
ที่ เห็น คือ architecture, flowchart, sequence และ state machine.

21
00:02:26,569 --> 00:02:33,649
ตัวอย่าง เหล่า นี้ อยู่ บน หน้า GitHub ของ เขา.

22
00:02:33,649 --> 00:02:39,373
ลอง เปิด ดู ได้ เลย ใช้ ง่าย มาก ครับ.

23
00:02:39,373 --> 00:02:52,178
มี ดีไซน์ หลาย แบบ ให้ เลื่อน ดู ทั้ง architecture และ flowchart สวย ลื่น ดู แพง มาก.

24
00:02:52,178 --> 00:02:58,655
จริง ๆ แล้ว มัน คือ template ที่ เอา ไป ใส่

25
00:02:58,655 --> 00:03:05,434
กับ ระบบ อะไร ก็ ได้ ตาม รายละเอียด และ scope

26
00:03:05,434 --> 00:03:07,693
ที่ คุณ ให้ ไป.

27
00:03:07,693 --> 00:03:12,965
มี ทั้ง dark style และ light style.

28
00:03:12,965 --> 00:03:18,690
คลิก ดู รอบ ๆ ได้ เลย ว่า สวย แค่ ไหน.

29
00:03:18,690 --> 00:03:25,468
ดีไซน์ คม มาก และ เหมาะ กับ การ นำ เสนอ ครับ.

30
00:03:25,468 --> 00:03:28,029
มา ดู README ต่อ.

31
00:03:28,029 --> 00:03:39,327
ใน ส่วน installation มี plugin สำหรับ Claude Code และ มี Codex plugin ด้วย.

32
00:03:39,327 --> 00:03:47,913
แต่ ใน คลิป นี้ จะ โชว์ การ ใช้ บน Claude Code เป็น หลัก.

33
00:03:47,913 --> 00:03:55,595
ขั้น แรก ติดตั้ง plugin แล้ว สร้าง profile ให้ ได้.

34
00:03:55,595 --> 00:04:07,194
profile นี้ จะ ใช้ ซ้ำ ได้ เพื่อ วาด ไดอะแกรม ที่ แมตช์ กับ เว็บไซต์ ของ คุณ.

35
00:04:07,194 --> 00:04:12,015
ก่อน อื่น ขอ ไล่ README อีก นิด.

36
00:04:12,015 --> 00:04:25,723
ด้าน อื่น ของ README บอก ว่า รองรับ การ import จาก ระบบ อื่น ได้ เช่น draw.io หรือ Mermaid.

37
00:04:25,723 --> 00:04:34,309
และ สร้าง ไฟล์ ออก มา เป็น PNG, SVG หรือ รูปแบบ อื่น ได้.

38
00:04:34,309 --> 00:04:45,155
ตาม ดีไซน์ และ ไฟล์ XML ของ คุณ แล้ว export เป็น รูป ภาพ บน เครื่อง ได้.

39
00:04:45,155 --> 00:04:51,934
ชัด ดี มาก ครับ ว่า ทำงาน ยัง ไง. ส่วน ที่ ดี

40
00:04:51,934 --> 00:04:58,411
ที่สุด คือ ไป ดู ใน Claude Code ว่า ติดตั้ง

41
00:04:58,411 --> 00:05:04,738
แล้ว หน้า ตา เป็น ยัง ไง และ ใช้ จริง แล้ว

42
00:05:04,738 --> 00:05:06,545
เป็น ยัง ไง.

43
00:05:06,545 --> 00:05:15,433
ใน Claude Code ก่อน อื่น ต้อง ติดตั้ง plugin ให้ เรียบร้อย.

44
00:05:15,433 --> 00:05:20,554
แล้ว ตาม ที่ พูด ไป สร้าง profile.

45
00:05:20,554 --> 00:05:31,099
คุณ กำหนด เว็บไซต์ ของ คุณ ได้ เวลา ทดสอบ ลอง ใช้ เว็บ ที่ ดีไซน์ ดี ๆ

46
00:05:31,099 --> 00:05:36,673
อย่าง Lovable หรือ notion.com ก็ ได้.

47
00:05:36,673 --> 00:05:42,999
เป็น ตัวอย่าง ที่ โชว์ งาน ออกแบบ ได้ ชัด.

48
00:05:42,999 --> 00:05:48,422
profile จะ ถูก สร้าง ไว้ ใน โฟลเดอร์

49
00:05:48,422 --> 00:05:55,351
diagram-design มี โฟลเดอร์ diagram-design แล้ว

50
00:05:55,351 --> 00:05:58,364
มี profiles ข้าง ใน.

51
00:05:58,364 --> 00:06:05,293
ให้ ขอ ให้ Claude หรือ Codex สร้าง ให้ ก็ ได้.

52
00:06:05,293 --> 00:06:15,687
ครั้ง แรก อาจ ยัง ไม่ มี ต้อง เซฟ เข้า โฟลเดอร์ นี้ ตาม ที่ ระบบ ถาม.

53
00:06:15,687 --> 00:06:18,851
อย่า ลืม เซฟ นะ ครับ.

54
00:06:18,851 --> 00:06:25,328
จาก นั้น จะ สร้าง profile ของ เว็บไซต์ ได้.

55
00:06:25,328 --> 00:06:34,818
ตัวอย่าง ใน คลิป สร้าง profile ให้ Lovable กับ Notion ไว้ แล้ว.

56
00:06:34,818 --> 00:06:39,488
จะ ลอง เว็บ อื่น ก็ ได้. จริง ๆ

57
00:06:39,488 --> 00:06:45,815
แล้ว คือ การ สร้าง template ให้ เว็บ นั้น.

58
00:06:45,815 --> 00:06:59,975
ระบบ จะ ดึง หน้า เว็บ มา ดู สไตล์ แล้ว สร้าง ไดอะแกรม ที่ ออกแบบ มา เพื่อ เว็บ นั้น โดย เฉพาะ.

59
00:06:59,975 --> 00:07:06,603
ตาม ที่ บอก ใน README ของ repo เป้า หมาย คือ

60
00:07:06,603 --> 00:07:12,929
ให้ workflow และ ดีไซน์ ไดอะแกรม แมตช์ กับ

61
00:07:12,929 --> 00:07:16,695
เว็บไซต์ ที่ คุณ ให้ ไว้.

62
00:07:16,695 --> 00:07:23,624
ถ้า แค่ ขอ Claude แบบ ทั่วไป จะ ได้ กล่อง มน ๆ

63
00:07:23,624 --> 00:07:27,541
ที่ ไม่ เข้า กับ ไซต์ เลย.

64
00:07:27,541 --> 00:07:37,935
เลย ต้อง มี template ชุด นี้ เพื่อ ให้ ไดอะแกรม แมตช์ ไซต์ ที่ เลือก.

65
00:07:37,935 --> 00:07:51,342
เหมาะ มาก กับ การ วาด workflow และ system architecture บน เว็บ โดยเฉพาะ งาน ดู ภายใน ทีม.

66
00:07:51,342 --> 00:08:01,434
หลัง onboard เว็บไซต์ แล้ว จะ มี ตาราง โชว์ ว่า มี profile กี่ อัน.

67
00:08:01,434 --> 00:08:14,841
เช่น มี profile Notion และ มี template หรือ profile Lovable ที่ สร้าง ไว้ ใน session นี้.

68
00:08:14,841 --> 00:08:19,511
อยู่ ใต้ ส่วน profiles ชัด เจน.

69
00:08:19,511 --> 00:08:32,767
เมื่อ ใส่ profile ครบ แล้ว เลือก profile แล้ว ขอ diagram skill ให้ วาด ไดอะแกรม ได้ เลย.

70
00:08:32,767 --> 00:08:41,504
ตัวอย่าง แรก ที่ ทำ คือ architecture diagram ของ แอป ครับ.

71
00:08:41,504 --> 00:08:55,211
โดย ทั่วไป ถ้า สร้าง แอป จะ มี front end, back end, database, Redis และ cache อะไร แบบ นี้.

72
00:08:55,211 --> 00:08:59,128
ผล ที่ ได้ ดู ดี มาก ครับ.

73
00:08:59,128 --> 00:09:07,865
ถ้า ใช้ framework หรือ template แบบ Lovable สี จะ สด กว่า.

74
00:09:07,865 --> 00:09:13,288
ถ้า ใช้ Notion จะ ได้ โทน คน ละ แบบ.

75
00:09:13,288 --> 00:09:22,025
เว็บ Lovable สี จัด หน่อย ดู spicy หรือ ว่า colorful กว่า.

76
00:09:22,025 --> 00:09:29,105
Lovable มี กล่อง ม่วง ส่วน Notion ดู คลีน กว่า.

77
00:09:29,105 --> 00:09:37,992
Notion ค่อนข้าง สะอาด Lovable ดู dynamic และ มี สี มากกว่า.

78
00:09:37,992 --> 00:09:47,633
ดีไซน์ จะ ตาม ไซต์ ใน profile ที่ คุณ สั่ง ให้ design skill ใช้.

79
00:09:47,633 --> 00:09:51,399
ลอง prompt อื่น ต่อ ครับ.

80
00:09:51,399 --> 00:09:58,629
เช่น อยาก ได้ quadrant ที่ โชว์ future projects.

81
00:09:58,629 --> 00:10:04,354
สำคัญ มาก ว่า ต้อง ระบุ ชื่อ template.

82
00:10:04,354 --> 00:10:16,103
ต้อง มี template เลือก profile และ บอก ว่า อยาก สร้าง อะไร ด้วย template นั้น.

83
00:10:16,103 --> 00:10:25,443
สาม อย่าง นี้ คือ profile, template และ สิ่ง ที่ อยาก ให้ วาด.

84
00:10:25,443 --> 00:10:28,003
ลอง อีก ตัวอย่าง.

85
00:10:28,003 --> 00:10:37,192
บอก ว่า อยาก ได้ ไดอะแกรม เป็น quadrant โชว์ future projects.

86
00:10:37,192 --> 00:10:40,205
แล้ว ส่ง ให้ ลอง ทำ.

87
00:10:40,205 --> 00:10:45,779
ครั้ง นี้ น่า จะ ใช้ Lovable profile.

88
00:10:45,779 --> 00:10:52,708
อาจ ต้อง คุย กับ agent สอง สาม รอบ ให้ กระชับ.

89
00:10:52,708 --> 00:10:56,173
แล้ว copy ผล ไป วาง ดู.

90
00:10:56,173 --> 00:11:02,499
ได้ quadrant สวย มาก ดู แบบ Lovable จริง ๆ

91
00:11:02,499 --> 00:11:08,374
สี สวย ทำ ได้ ดี มาก ครับ. ลอง อีก อัน.

92
00:11:08,374 --> 00:11:18,919
เช่น sequence diagram ของ bearer token call พร้อม refresh ตอน เจอ 401.

93
00:11:18,919 --> 00:11:23,287
ถือ ว่า เป็น ตัวอย่าง ที่ ดี.

94
00:11:23,287 --> 00:11:29,915
ระหว่าง รอ ผล จะ เห็น ลำดับ ใน sequence ได้.

95
00:11:29,915 --> 00:11:31,873
สวย มาก ครับ.

96
00:11:31,873 --> 00:11:41,665
ปกติ วาด มือ เสีย เวลา แต่ ใช้ skill ชุด นี้ แล้ว เร็ว ขึ้น เยอะ.

97
00:11:41,665 --> 00:11:46,786
มี ตัวอย่าง sequence อีก หลาย แบบ.

98
00:11:46,786 --> 00:11:52,511
รอ ผล แล้ว copy ไป วาง. ว้าว สวย จริง.

99
00:11:52,511 --> 00:11:57,482
ไดอะแกรม สะอาด คม และ น่า ดู มาก.

100
00:11:57,482 --> 00:12:02,302
หวัง ว่า จะ มี ประโยชน์ นะ ครับ.

101
00:12:02,302 --> 00:12:09,231
สุด ท้าย อยาก โชว์ ว่า template จริง อยู่ ไหน.

102
00:12:09,231 --> 00:12:17,516
มี template จำนวน มาก ที่ ใช้ สร้าง ไดอะแกรม เหล่า นี้.

103
00:12:17,516 --> 00:12:27,157
ถ้า ไป ดู ส่วน skill ใน Claude จะ เจอ skill section ของ plugins.

104
00:12:27,157 --> 00:12:35,442
เข้า plugins แล้ว มี marketplace และ มี diagram-design.

105
00:12:35,442 --> 00:12:43,124
มี skill หลาย ตัว เลือก อัน หนึ่ง แล้ว ดู โครง ได้.

106
00:12:43,124 --> 00:12:48,698
เช่น copy template ออก มา ดู หน้า ตา.

107
00:12:48,698 --> 00:12:56,983
สวย ดี ครับ นี่ คือ template ที่ ใช้ สร้าง งาน พวก นี้.

108
00:12:56,983 --> 00:13:01,954
หวัง ว่า คลิป นี้ จะ มี ประโยชน์.

109
00:13:01,954 --> 00:13:10,540
ถ้า ชอบ กด subscribe, like หรือ comment ถาม ได้ เลย ครับ.

110
00:13:10,540 --> 00:13:20,181
ขอบคุณ มาก ที่ สนับสนุน ช่อง แล้ว เจอกัน ใหม่ ใน คลิป หน้า ครับ.