Easy App
กลับไปหน้ารีวิว Repo
รีวิว Repoร่าง

รีวิว Archify — agent skill เปลี่ยนไอเดียหรือ codebase เป็น diagram แบบ interactive

vibe-coder
รีวิว Archify — agent skill เปลี่ยนไอเดียหรือ codebase เป็น diagram แบบ interactive

ข้อมูล Repo

tt-a1i/archify
ภาษา
JavaScript
ดาว
77,447
สร้างเมื่อ
แก้ไขล่าสุด
ร่าง

เปลี่ยนสถานะผ่าน API: PATCH /api/reports/19a149f7-9041-4ff9-9b3a-8e303eccb01c

แคปชันสำหรับ Facebook

พิมพ์อธิบายระบบประโยคเดียว แล้วได้ diagram ที่คลิกเล่นได้ ไม่ใช่รูปนิ่ง ๆ Archify เป็น agent skill ที่ให้ AI agent วาด architecture, workflow หรือ sequence diagram เป็น HTML แบบ interactive ✅ ติดตั้งคำสั่งเดียว ใช้กับ Claude Code, Codex, Cursor, OpenCode ✅ สั่ง agent อ่าน repo แล้วทำผัง architecture ที่อ้างอิงโค้ดจริงได้ ✅ แก้ต่อในแชท เช่น "add Redis" หรือ "highlight the rollback path" ✅ ได้ไฟล์ HTML ไฟล์เดียว ส่งต่อให้คนอื่นเปิดได้เลย ✅ มีธีมมืด/สว่าง และ export PNG / share card ไม่ได้จำกัดแค่งานโค้ด คนใช้ทำแผนเที่ยวหรือ learning map ก็มี ติดตั้ง: npx skills add tt-a1i/archify -g 🔗 https://github.com/tt-a1i/archify #AgentSkills #ClaudeCode #Diagram #SystemDesign #OpenSource

ภาพปกแบบ HTML สด

แสดงจาก HTML ต้นฉบับที่ใช้สร้างภาพ ดาวน์โหลดเป็น PNG 1080×1350 ได้ทันที

สรุป

Archify เป็น agent skill สำหรับ Claude Code, Codex, Cursor และ OpenCode ที่เปลี่ยนคำอธิบายหรือ repo ให้เป็น diagram แบบ interactive ในไฟล์ HTML ไฟล์เดียว คลิกดู trace เส้นทาง สลับธีม และ export PNG ได้ license MIT

คืออะไร

tt-a1i/archify เป็น agent skill ที่ช่วยให้ AI agent ของคุณเปลี่ยนไอเดีย คำถาม หรือแผนงาน ให้กลายเป็น interactive diagram ในรูปแบบ HTML ที่คลิก ซูม สลับธีม และแชร์ต่อได้ ใช้งานได้กับ Cursor, Claude Code, Codex CLI และ OpenCode และถ้ามี repo อยู่แล้วก็สั่งให้ agent อ่านโค้ดมาสร้าง architecture diagram ที่มี source รองรับได้

หน้าโปรเจกต์อยู่ที่ tt-a1i.github.io/archify และมี gallery ของตัวอย่างที่เก็บไว้ในโปรเจกต์ รวม 11 ตัวอย่าง พร้อม JSON source และ validation receipts

ข้อมูล ณ 5 ต.ค. 2026: ดาว 77.4k, fork 5.2k, language หลักคือ JavaScript

จุดเด่น

  • ติดตั้งคำสั่งเดียว แล้วอธิบายสิ่งที่อยากได้เป็นภาษาธรรมดา เช่น "Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback."
  • ไม่บังคับว่าต้องมี repo ถ้าอยากได้ diagram ที่อ้างอิงโค้ดจริง ให้สั่ง agent อ่าน repo ก่อน
  • refine ในแชทต่อได้ เช่น "add Redis", "move auth to the left", หรือ "highlight the rollback path" โดย typed source ยังอยู่ครบ
  • เลือกได้ 5 ชนิดไดอะแกรม: Architecture, Workflow, Sequence, Data Flow และ Lifecycle
  • output เป็น HTML ไฟล์เดี่ยวที่ self-contained ดาวน์โหลดมาเปิดในเบราว์เซอร์ได้เลย ไม่ต้องมี Archify ติดตั้งไว้ และส่งต่อให้คนอื่นแล้วยังใช้ interaction ได้ด้วย
  • มีธีมสว่าง/มืด และเมนู Export ทั้ง copy PNG, ดาวน์โหลดแบบ static/motion และทำ Route Share Card / Reach Share Card ขนาด 1200x630
  • มีหน้า Proof Lab และเคสจริงที่ trace repo mco-org/mco ที่ commit 9f1a1cf ไว้ให้ดู
  • เจ้าของ repo ระบุไว้ว่าเป็น #1 ในรายการ GitHub Trending รายสัปดาห์ all-language (ภาพหลักฐานเผยแพร่เมื่อ 1 ก.ย. 2026) และถูก QbitAI เขียนข่าวและสัมภาษณ์

เหมาะกับใคร

  • คนที่ทำ system design หรืออธิบาย architecture ให้ทีมเข้าใจ แล้วอยากได้ไดอะแกรมที่คลิกดูได้จริงแทนรูปนิ่ง
  • ผู้ใช้ Claude Code, Cursor, Codex CLI หรือ OpenCode ที่อยากได้ skill ช่วยทำเอกสารภาพ
  • คนที่อยากทำแผนท่องเที่ยว learning map หรือไอเดียอื่น ๆ ให้เป็น interactive HTML ที่แชร์ได้
  • ทีมที่อยากได้ output ไฟล์เดี่ยวส่งต่อได้ ไม่ต้องพึ่งเครื่องมืออื่นเวลาเปิดดู

เริ่มต้นใช้งาน

ติดตั้ง (เวอร์ชัน stable ปัจจุบันคือ v3.0.1):

npx skills add tt-a1i/archify -g

ถ้าอยากลองใช้ก่อนติดตั้ง:

npx skills use tt-a1i/archify@archify --agent codex

ถ้าต้องการติดตั้งแบบ non-interactive สำหรับ Cursor:

npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

ส่งข้อความนี้ให้ agent:

Use Archify to diagram a web request: Browser calls the API,
the API checks Redis, and a cache miss queries PostgreSQL and fills the cache.

หรือถ้ามี repo และอยากได้ diagram ที่มี source:

Analyze this repository, then use archify to create a high-level runtime architecture diagram.
Show 8–12 core components, one primary path, external dependencies, and trust boundaries.
Put supporting detail in cards instead of adding more edges.

ข้อควรรู้

  • License: MIT ใช้และดัดแปลงได้ตามเงื่อนไขของ license
  • README มีส่วนผู้สนับสนุน (เช่น Kimi Work, Supercode, OpenLux) พร้อมลิงก์ affiliate/โปรโมชัน ควรแยกให้ออกจากเนื้อหาของตัว skill
  • ความสดใหม่: push ล่าสุด 5 ต.ค. 2026 โปรเจกต์นี้สร้างเมื่อ 15 เม.ย. 2026 อายุประมาณ 5–6 เดือน ยังอยู่ในช่วงเติบโตเร็ว
  • เวอร์ชัน stable ปัจจุบันคือ v3.0.1 และมี changelog ให้ตาม
  • มี open issue 203 รายการ ควรเปิดดูก่อนถ้าจะเอาไปต่อยอด
  • ตัว update checker จะ GET manifest เพื่อแสดงเตือนอย่างเดียว ไม่ดาวน์โหลดหรือติดตั้งอัปเดตเอง ตั้ง ARCHIFY_UPDATE_CHECK_DISABLED=1 เพื่อปิดการติดต่อเครือข่ายได้
  • ไฟล์ HTML ที่ export มา ถ้ามีลิงก์ภายนอกหรือลิงก์แผนที่ จะต้องต่ออินเทอร์เน็ตถึงจะเปิดได้
  • diagram แสดงสิ่งที่เขียนกำหนดไว้ ไม่ได้ไปตรวจระบบจริง (README ระบุไว้ชัดในส่วน profile deployment-ownership)
  • ฟีเจอร์ในตัวอย่างจาก community (เช่น check-in ในแผนเที่ยวเซี่ยงไฮ้) ผู้สร้างเพิ่มเองเฉพาะไฟล์นั้น ไม่ใช่ฟีเจอร์ของ skill

🔗 https://github.com/tt-a1i/archify

ข้อมูลจาก GitHub ณ 5 ต.ค. 2026: ⭐ 77,447 | ภาษา JavaScript | license MIT

ไฟล์แนบ (3)

Easy App — กล่องรายงานจาก AI
v0.7.1 (1496eed)