Archify: Turn Any Project Into an Interactive Diagram in One Click

1
00:00:00,000 --> 00:00:05,964
สวัสดี ครับ. ยินดีต้อนรับสู่คลิปใหม่ ครับ.

2
00:00:05,964 --> 00:00:13,206
วันนี้จะพาไปดูโปรเจกต์ที่น่าสนใจ ชื่อ Archify ครับ.

3
00:00:13,206 --> 00:00:19,737
Archify สร้างไดอะแกรมแบบ interactive ได้ ครับ.

4
00:00:19,737 --> 00:00:25,843
มัน dynamic มาก ดูเท่ และมี animation ครับ.

5
00:00:25,843 --> 00:00:28,541
ไม่ใช่ภาพนิ่ง ครับ.

6
00:00:28,541 --> 00:00:37,629
เล่นกับมันได้ และเห็นชัดว่า ใน GitHub มีคอมโพเนนต์อะไรบ้าง ครับ.

7
00:00:37,629 --> 00:00:48,704
ตัวอย่างเช่น ถ้าสร้าง web application มันจะโชว์ end-to-end ว่าทำงานยังไง ครับ.

8
00:00:48,704 --> 00:00:57,934
ถ้าสร้างอะไรที่เป็น product มันจะโชว์ว่า product ทำงานยังไง ครับ.

9
00:00:57,934 --> 00:01:07,590
เห็นทั้งคอมโพเนนต์ และ subcomponents ว่าทุกอย่างเชื่อมกันยังไง ครับ.

10
00:01:07,590 --> 00:01:12,134
ดูเท่มาก ครับ. มัน dynamic จริงๆ

11
00:01:12,134 --> 00:01:16,252
และเป็นโปรเจกต์ที่ดีมาก ครับ.

12
00:01:16,252 --> 00:01:21,505
ใน README ก็บอก use cases ต่างๆ ครับ.

13
00:01:21,505 --> 00:01:26,617
และรองรับ coding agent หลายตัว ครับ.

14
00:01:26,617 --> 00:01:33,007
เช่น Claude Code Codex และ client อื่นๆ ครับ.

15
00:01:33,007 --> 00:01:41,243
ติดตั้งได้ผ่าน npx skills install เพราะมันเป็น skill ครับ.

16
00:01:41,243 --> 00:01:47,349
หรือติดตั้งผ่าน Node.js package ก็ได้ ครับ.

17
00:01:47,349 --> 00:01:52,745
พอติดตั้งแล้ว ก็เล่นกับมันได้เลย ครับ.

18
00:01:52,745 --> 00:01:58,282
ตัวอย่างเช่น ไปที่โฟลเดอร์ binaries ของ

19
00:01:58,282 --> 00:02:03,536
Archify แล้วรันคำสั่ง node เพื่อสร้าง

20
00:02:03,536 --> 00:02:09,926
architectural diagram ตามตัวอย่างของเขา ครับ.

21
00:02:09,926 --> 00:02:16,316
เขามีเทมเพลตให้ด้วย มีประมาณ 11 เทมเพลต ครับ.

22
00:02:16,316 --> 00:02:21,286
เทมเพลตสวยและ interactive มาก ครับ.

23
00:02:21,286 --> 00:02:32,503
เปิดบางอันได้ เช่น product analytics data flow เพื่อดูว่า flow ทำงานยังไง ครับ.

24
00:02:32,503 --> 00:02:38,609
ผมอยากดูแบบ story ไม่ใช่ไดอะแกรมนิ่งๆ ครับ.

25
00:02:38,609 --> 00:02:43,863
อยากเห็นว่ามันทำงานและเล่นยังไง ครับ.

26
00:02:43,863 --> 00:02:49,117
กด play story ได้ แล้วจะเห็นจริงๆ ว่า

27
00:02:49,117 --> 00:02:55,223
ข้อมูลไหลเข้า product ยังไง เก็บข้อมูลยังไง

28
00:02:55,223 --> 00:03:00,050
คุยกับ API ยังไง เก็บข้อมูลอย่างไร

29
00:03:00,050 --> 00:03:05,162
และส่งออกไปยัง consumers ยังไง ครับ.

30
00:03:05,162 --> 00:03:09,422
เท่มาก และมีประโยชน์จริง ครับ.

31
00:03:09,422 --> 00:03:18,652
ไม่ต้องมานั่งอ่านให้เข้าใจเอง เหมือนดูหนัง เห็นการทำงานจริง ครับ.

32
00:03:18,652 --> 00:03:21,918
มีไอคอนจริงๆ ด้วย ครับ.

33
00:03:21,918 --> 00:03:30,863
นอกจาก play story ยังคลิกเองทีละขั้น เพื่อดูรายละเอียดได้ ครับ.

34
00:03:30,863 --> 00:03:33,703
ถ้าดูคอมโพเนนต์ต่างๆ

35
00:03:33,703 --> 00:03:37,963
เขาแยกเป็นส่วนย่อยชัดเจน ครับ.

36
00:03:37,963 --> 00:03:44,353
เช่น collection path ว่าเก็บข้อมูลยังไง ครับ.

37
00:03:44,353 --> 00:03:50,033
มีเรื่อง security ที่ต้องใส่ใจเยอะ ครับ.

38
00:03:50,033 --> 00:03:57,701
ว่าจัดการ security ยังไง และ consume ข้อมูลยังไง ครับ.

39
00:03:57,701 --> 00:03:59,831
ชัดเจนมาก ครับ.

40
00:03:59,831 --> 00:04:06,220
และใช้กับ GitHub repo ได้เลย ครับ. ถ้ามี repo

41
00:04:06,220 --> 00:04:12,326
ของ mobile application หรือ web application

42
00:04:12,326 --> 00:04:18,716
แค่ขอให้ Archify สร้างไดอะแกรมแบบนี้ได้ ครับ.

43
00:04:18,716 --> 00:04:27,520
interactive เหมาะกับ presentation และ end user เรียนง่าย ครับ.

44
00:04:27,520 --> 00:04:30,218
สำคัญอีกอย่าง ครับ.

45
00:04:30,218 --> 00:04:35,187
ทุกเทมเพลตสลับ light mode ได้ ครับ.

46
00:04:35,187 --> 00:04:40,867
มีตัวเลือก visual identity หลายแบบ ครับ.

47
00:04:40,867 --> 00:04:46,263
และ export เป็น PNG หรือ JPG ได้ ครับ.

48
00:04:46,263 --> 00:04:52,795
ดีมากเลย ครับ. มีอย่างหนึ่งที่อยากพูดถึง ครับ.

49
00:04:52,795 --> 00:05:00,037
ใน README เขา document ทุกอย่างไว้เป็น skills ครับ.

50
00:05:00,037 --> 00:05:06,285
แม้ใน about section ก็บอกว่าเป็น agent skill

51
00:05:06,285 --> 00:05:10,260
สำหรับ architecture workflow

52
00:05:10,260 --> 00:05:16,366
ที่สวยและตรวจสอบได้ ทั้ง sequence และ state

53
00:05:16,366 --> 00:05:22,330
flow ครับ. ดังนั้นมันคือ agent skill ครับ.

54
00:05:22,330 --> 00:05:26,448
คนชอบโปรเจกต์นี้เยอะมาก ครับ.

55
00:05:26,448 --> 00:05:29,572
ประมาณ 51k stars ครับ.

56
00:05:29,572 --> 00:05:34,258
มี contributor ประมาณ 20 คน ครับ.

57
00:05:34,258 --> 00:05:39,653
คนเข้ามาช่วยพัฒนา โปรเจกต์ดีจริง ครับ.

58
00:05:39,653 --> 00:05:42,493
แต่มีข้อควรรู้ ครับ.

59
00:05:42,493 --> 00:05:48,031
ถ้าทำตาม README จะค่อนข้างซับซ้อน ครับ.

60
00:05:48,031 --> 00:05:55,557
ต้อง setup coding agent และทำตามขั้นตอนหลายขั้น ครับ.

61
00:05:55,557 --> 00:06:00,101
เช่น ติดตั้งด้วย parameter ต่างๆ

62
00:06:00,101 --> 00:06:05,781
ลองแบบไม่ติดตั้งด้วย และใส่ prompt ครับ.

63
00:06:05,781 --> 00:06:12,170
ทำได้ แต่นิดหน่อยยุ่งยาก ครับ. อีกอย่าง ครับ.

64
00:06:12,170 --> 00:06:15,294
มันกิน token มาก ครับ.

65
00:06:15,294 --> 00:06:25,660
หมายความว่าการสร้างไดอะแกรมใน coding agent จะใช้ token ค่อนข้างเยอะ ครับ.

66
00:06:25,660 --> 00:06:31,766
เราลองใน OpenClaw แล้ว ครับ. ถ้าใช้ Archify

67
00:06:31,766 --> 00:06:38,156
skills สร้างไดอะแกรมจาก GitHub repo เช่น repo

68
00:06:38,156 --> 00:06:44,687
ชื่อ Humanizer จะใช้เวลา download โค้ด ส่งโค้ด

69
00:06:44,687 --> 00:06:47,811
และสร้างไดอะแกรม ครับ.

70
00:06:47,811 --> 00:06:52,213
ถ้ามี limit บางที timeout ครับ.

71
00:06:52,213 --> 00:06:58,603
หลังหลายนาที อาจ timeout จาก rate limit ครับ.

72
00:06:58,603 --> 00:07:02,153
นั่นคือประเด็นถัดไป ครับ.

73
00:07:02,153 --> 00:07:12,235
ทั้งโปรเจกต์พูดถึงการใช้เป็น skill กับ coding agent และวิธีลองใช้ ครับ.

74
00:07:12,235 --> 00:07:15,501
แต่ยังซับซ้อนอยู่ ครับ.

75
00:07:15,501 --> 00:07:22,032
วิธีใช้ Archify ที่ดีที่สุด คือผ่าน Grok ครับ.

76
00:07:22,032 --> 00:07:24,304
น่าสนใจมาก ครับ.

77
00:07:24,304 --> 00:07:29,274
Grok มีทางสร้างไดอะแกรมนี้ได้ ครับ.

78
00:07:29,274 --> 00:07:32,256
ทำผ่าน Grok Bot ครับ.

79
00:07:32,256 --> 00:07:35,948
Bot น่าจะคล้าย Manus ครับ.

80
00:07:35,948 --> 00:07:40,776
คือเข้าใจคำขอ แล้วให้ output ครับ.

81
00:07:40,776 --> 00:07:42,764
ตัวอย่าง ครับ.

82
00:07:42,764 --> 00:07:54,549
อยากให้ Grok Bot วิเคราะห์ repository ดูโครงสร้าง และ architecture ของ Hermes ครับ.

83
00:07:54,549 --> 00:08:00,087
ทำใน Grok Bot หรือใน Grok ง่ายมาก ครับ.

84
00:08:00,087 --> 00:08:06,193
แค่ copy prompt นี้ ครับ. ใจความคือ analyze

85
00:08:06,193 --> 00:08:11,305
repository นี้ แล้วใช้ Archify สร้าง

86
00:08:11,305 --> 00:08:17,695
high-level runtime architecture diagram ครับ.

87
00:08:17,695 --> 00:08:28,344
โชว์ entities primary path external dependencies และ trust boundaries ครับ.

88
00:08:28,344 --> 00:08:33,456
นี่คือวิธีแยกโครงสร้างโปรเจกต์ ครับ.

89
00:08:33,456 --> 00:08:38,000
primary path คือ data flow ครับ.

90
00:08:38,000 --> 00:08:45,952
external dependencies คือ dependency ที่เกี่ยวข้อง ครับ.

91
00:08:45,952 --> 00:08:53,335
trust boundaries คือ trust model ด้าน security ครับ.

92
00:08:53,335 --> 00:09:02,139
และใส่รายละเอียดสนับสนุนใน cards แทนที่จะเพิ่ม edges อีก ครับ.

93
00:09:02,139 --> 00:09:07,677
หลังรัน prompt นี้ ทุกอย่างถูกสร้างสวยๆ

94
00:09:07,677 --> 00:09:14,067
ทางขวา ครับ. อันแรกที่เราทำคือ OpenClaw ครับ.

95
00:09:14,067 --> 00:09:18,895
และอันที่เห็นคือ Hermes ด้วย ครับ.

96
00:09:18,895 --> 00:09:22,161
คลิก OpenClaw ได้ ครับ.

97
00:09:22,161 --> 00:09:27,272
อาจมีอะไรติดนิดหน่อย รอสักครู่ ครับ.

98
00:09:27,272 --> 00:09:31,248
อาจเป็นเรื่อง override ครับ.

99
00:09:31,248 --> 00:09:34,230
นี่คือ OpenClaw ครับ.

100
00:09:34,230 --> 00:09:41,188
สร้างสำเร็จแล้ว แต่มีปัญหา preview นิดหน่อย ครับ.

101
00:09:41,188 --> 00:09:44,738
ยังดูอัน Hermes ได้ ครับ.

102
00:09:44,738 --> 00:09:50,986
ขยายให้ใหญ่ขึ้น ครับ. นี่คือของ Hermes ครับ.

103
00:09:50,986 --> 00:09:55,388
คล้ายกัน ผมโชว์เพื่อสาธิต ครับ.

104
00:09:55,388 --> 00:10:03,907
แค่รัน prompt ใน Grok ก็ได้ Hermes architecture diagram สวยๆ

105
00:10:03,907 --> 00:10:05,007
ครับ.

106
00:10:05,007 --> 00:10:18,496
ถ้ากด play จะเห็นว่าข้อมูลเข้ามาอย่างไร ถูกประมวลผลอย่างไร และทุกอย่างถูกสร้างอย่างสวยงาม ครับ.

107
00:10:18,496 --> 00:10:25,312
มีคำอธิบาย primary source of evidence ด้วย ครับ.

108
00:10:25,312 --> 00:10:29,856
หมายถึงหลักฐานจาก repo นี้ ครับ.

109
00:10:29,856 --> 00:10:39,370
มี pinned revision ที่อ่านไป และ evidence สำหรับ architecture ครับ.

110
00:10:39,370 --> 00:10:52,575
เช่น markdown files ที่อ่าน agent conversation loop และ models tools กับ security files ครับ.

111
00:10:52,575 --> 00:10:54,279
สวยมาก ครับ.

112
00:10:54,279 --> 00:11:00,811
และโชว์ว่า Hermes เป็นโปรเจกต์ใหญ่แค่ไหน ครับ.

113
00:11:00,811 --> 00:11:09,047
ที่ phase นี้เป็น high level เลยอธิบายทุกอย่างได้ชัด ครับ.

114
00:11:09,047 --> 00:11:13,023
ยังเช็ก folder หรือไฟล์ต่างๆ

115
00:11:13,023 --> 00:11:19,412
ให้ artifact อ่านในระดับโปรเจกต์จริงได้ ครับ.

116
00:11:19,412 --> 00:11:25,802
มีทั้ง high level และเห็นว่าสร้างได้สวย ครับ.

117
00:11:25,802 --> 00:11:31,482
ลองรันอีกที ครับ. อาจมี time delay ครับ.

118
00:11:31,482 --> 00:11:34,322
แต่คลิกวนดูได้ ครับ.

119
00:11:34,322 --> 00:11:42,700
อาจมีปัญหา JavaScript นิดหน่อย แต่คลิกดูองค์ประกอบได้ ครับ.

120
00:11:42,700 --> 00:11:49,374
แม้จะไม่เล่นอัตโนมัติ ก็คลิกดูการทำงานได้ ครับ.

121
00:11:49,374 --> 00:11:56,757
ถ้ากด play story มันจะเล่นทุกอย่างให้อัตโนมัติ ครับ.

122
00:11:56,757 --> 00:11:59,739
พอคลิกคอมโพเนนต์ต่างๆ

123
00:11:59,739 --> 00:12:04,283
จะกระโดดไปที่ path นั้นได้ ครับ.

124
00:12:04,283 --> 00:12:08,259
รวม isolation services ครับ.

125
00:12:08,259 --> 00:12:13,655
พวกนี้คือ level one architecture ครับ.

126
00:12:13,655 --> 00:12:26,576
พอคลิก level one architecture จะเห็น authorization command approval และ tool backends ครับ.

127
00:12:26,576 --> 00:12:32,966
สะดวกมาก ครับ. ลองตัวเลือกอื่นๆ ได้ด้วย ครับ.

128
00:12:32,966 --> 00:12:36,800
นี่คือวิธีทำงานของมัน ครับ.

129
00:12:36,800 --> 00:12:41,202
โปรเจกต์เริ่ม play อีกรอบ ครับ.

130
00:12:41,202 --> 00:12:45,178
นี่คือ story ที่พูดถึง ครับ.

131
00:12:45,178 --> 00:12:50,432
กด play story แล้วมันจะพาไป ส่วนต่างๆ

132
00:12:50,432 --> 00:12:54,124
ของไดอะแกรมอัตโนมัติ ครับ.

133
00:12:54,124 --> 00:12:58,809
เห็นทุกอย่างแบบ interactive ครับ.

134
00:12:58,809 --> 00:13:05,199
ปิดตรงนี้ก่อน ครับ. หวังว่าจะมีประโยชน์ ครับ.

135
00:13:05,199 --> 00:13:11,021
ถ้ามีคำถาม ขอบคุณที่ซัพพอร์ตช่องมาก ครับ.