約莫在今年七月份將Hermes agent安裝在樹莓派 5/8GB中，同時玩票性質地用openrouter的一些免費模型來測試這位助理的邊界，有時恰逢一些強大開源模型釋出免費試用期間，例如hy3:free或glm5.2:free，其建置專案和skill的能耐真的不錯，除了不容易出現幻覺之外，還可互動討論方案的優劣比較，並實際跑一次測試讓人看到效果。
當完成專案建置後，為了未來可重複使用，習慣會讓Hermes agent將專案轉成skill。近期看到Archify skill 這款可用在專案解析並轉製為可視化架構圖的開源技能，就想讓Hermes agent直接學會這個技能，往後直接將專案轉成架構圖給我。(OS: 這類讓我偷懶提升效率的工具最吸引我~~)
什麼是Archify Skill?
Archify 是一款專為專案程式碼結構分析與視覺化設計的 AI 代理技能，它的核心使命是扮演開發者的「架構通靈師」，透過深度解讀專案原始碼，自動抽絲剝繭出系統的組件關係。
• 核心功能：
Archify 在底層高度依賴 Node.js 的 AST(抽象語法樹)解析器。它能像資深工程師一樣，逐行閱讀你的專案程式碼(如 Node.js、Python 等)，分析出模組間的依賴性(Dependencies)、資料流向與調用關係。隨後，它會自動將這些複雜的關聯轉譯為 Mermaid.js 語法，並直接打包輸出成一個開箱即用的 architecture.html 互動式網頁圖表。
• 使用情境：
- 接手接案/開源舊專案(Legacy Code): 面對動輒數十個資料夾、毫無文件的陌生代碼，丟給 Archify 即可在一分鐘內看懂全局。
- 技術文件自動化: 在 CI/CD 流程或專案重構時，快速為 GitHub 儲存庫(Repository)產出最新的 Runtime 執行期架構圖。
- 團隊同步與溝通： 開會前讓 AI 自動畫好圖表，避免口頭溝通落差。
將Archify技能安裝到Hermes agent中
手邊環境是將Hermes agent利用docker部署在Ubuntu 24.04 LTS server的樹莓派 5/8GB中，因此直接利用下列docker指令即可安裝Archify技能，其中hermes-agent是自定義的容器名稱，而official/creative/archify 是經過 Nous Research 官方審查、核可並納入Hermes agent擴充清單的穩定版本，其安裝時，系統會自動在背景準備所需的依賴環境。
docker exec -it hermes-agent hermes skills install official/creative/archify
利用官方docker映像檔部署的Hermes agent有其特定的目錄結構，同時也建議一併掛載持久化的資料卷(例如 -v ~/.hermes:/opt/data)，除了避免容器重啟後的資料遺失現象，也可使Archify技能安裝後的宣告規範與說明書(SKILL.md)自動下載至容器內 /opt/data/skills/creative/archify/ 路徑。另外，樹莓派容器內必須內建 Node.js 環境(建議 v20+ 以上)，Archify 才能順利執行程式碼的語法樹分析。
完成安裝後，建議重啟hermes-agent容器，並用下列指令查看是否Archify技能是否已包含在技能表中並顯示狀態為enabled，如下圖紅框所示。
docker exec -it hermes-agent hermes skills list
利用提示詞製作架構圖與 Mermaid 語法除錯技巧
a. 透過Telegram讓Hermes agent解析專案並製作架構圖的提示詞
之前曾讓Hermes agent 做一個提醒通知的專案，並儲存成reminder-notifier skill，主要功能有兩個，如下:
- 將我的會議和行程等等瑣碎雜務提供給它，並讓其在開始前一個小時用telegram通知我。
- 每周日中午12:00將已過期的任務取消掉。
說穿了，就是日常事務的流水帳通知，並定期清理，形成閉環。(OS: 雖然就是一個個cron任務，但就想把Hermes agent當助理來用，試試邊界~~)
剛好可讓Archify來解析reminder-notifier skill並輸出架構圖，提示詞如下，html檔案產出如下圖:
"使用 archify 技能，分析位於 /opt/data/skills/reminder-notifier 的代碼結構，並幫我畫出它的系統執行期架構圖（Runtime Architecture），並儲存成檔名為architecture.html在 /opt/data/skills/reminder-notifier 路徑中。"
b. 遇到 Syntax Error ?!
然而，經google chrome開啟該html檔案時，其中一個架構圖框架顯示Syntax Error，表示mermaid語法有錯誤，如下圖。
接續下方提示詞來修正。(OS: 這也說明human in the loop的必要性~)
請重新檢查並修正 architecture.html 中的 Mermaid 程式碼。請特別注意：
1. 如果節點名稱包含減號 -（例如 reminder-notifier）或空格，請務必使用雙引號刮起來，像是 A["reminder-notifier"]。
2. 確保所有的箭頭 -->、括號與語法完全符合 Mermaid 標準。
請修正完畢後，直接覆蓋並重新寫入該 HTML 檔案。"
c. 背景顏色與流程圖箭頭都是黑色?!
兩個架構圖均已正常顯示，但因為 Mermaid 預設套用了淺色主題，而導致架構圖中的黑色箭頭與黑色背景重疊，導致不易解讀。繼續以提示詞修正如下:
請幫我更新 architecture.html 檔案。在 <script> 初始設定 Mermaid 的地方（或是包裹 Mermaid 的程式碼最上方），加入深色主題設定 theme: 'dark'。
修改範例：
如果檔案內有 mermaid.initialize，請確保它包含：
mermaid.initialize({ startOnLoad: true, theme: 'dark' });
如果是純 Markdown 語法，請在第一行加上 %%{init: {'theme':'dark'}}%%。
修改完成後請直接覆蓋並重新寫入該html檔案。"
 |
| OS: 看著bot工作時的內容，也挺療癒的~~ |
沒有留言:
張貼留言