起因
之前在把公司專案從 polyrepo 轉成 monorepo 時，花了不少時間處理 circular dependency 的問題。
當時沒有好用的視覺化工具可以看 package 之間的相依關係，只能靠 Nx 的 nx graph 和官方文件慢慢理。整理完是整理完了，但過程很土法煉鋼。
那次經驗之後就一直想：如果有一個工具可以直接把相依性畫成圖，還能高亮哪裡有 circular dependency，應該會方便很多。
於是就開始做了。
開發
Tech stack 是 React 19 + TanStack Router + Vite，視覺化用 D3.js，狀態管理用 Zustand，UI 用 Tailwind CSS + Radix UI。
這次的開發方式跟以前很不一樣。我用 Claude Code 搭配 BMad 來開發。BMad 是一套 AI agent 協作框架，裡面有不同角色的 agent（analyst、architect、dev 等等）。我的工作基本上就是：
- 跟各個 agent 確認需求：例如讓 analyst 釐清功能範圍、讓 architect 決定技術方案
- 遇到問題時做決策：當 AI 提出多種方案時，選擇哪一種來推進
整個過程我幾乎沒開過 local dev server。就是一直跟 AI 對話、看它改 code、commit、再繼續。偶爾跑一下 build 確認沒壞掉。
本以為 D3.js 的力導向圖會很難搞，結果 AI 生成的效果意外的好。節點可以拖曳、可以縮放、有 minimap，circular dependency 的地方會用紅色高亮。
UI 的部分大概花了幾週的零碎時間就做完了。
轉折
做到一半去 Google 了一下 “monorepo dependency visualization”，發現市面上已經有不少類似的工具：
- Nx Console 內建的 graph view
- Madge 可以生成 dependency graph
- 還有一些付費的 SaaS 產品
但真正讓我決定停下來的原因是：Nx 推出了 Self-Healing CI 功能。
這個功能可以讓 AI 在 CI pipeline 中自動偵測 monorepo 裡的問題，然後自動開 PR 修復。這代表 Nx 已經不只是做視覺化了，而是直接往 AI 協作的方向走。我本來想解決的「看到問題、手動修」這條路，他們正在用更根本的方式解決——讓 AI 自動修。
面對一個有完整生態系、有團隊在全職開發的工具，再做一個視覺化分析器的意義就不大了。
現狀
這個專案就先擱著了。
UI prototype 還是可以玩，跑的是 mock data（首次載入可能要等一下，Render 免費方案會 spin down）：
學到的事
這次最大的收穫不是技術，而是一個很簡單的道理：
AI 讓 build 變快了，但 validate 的重要性反而更高。
以前做一個 side project 要花幾個月，所以在動手之前會比較謹慎地評估。現在用 AI 幾週就能做出 MVP，反而容易跳過市場驗證就開始寫 code。
如果重來一次，我會先花一兩天做這些事：
- 把現有的競品都試一遍，確認它們真的沒解決我的問題
- 想清楚「誰會用」和「為什麼他們要用我的而不是現有的」
- 確認這個痛點是不是只有我有
歸根究底，不管開發速度多快，核心問題還是：有沒有解決用戶的痛點，以及解決的方式是否比現有方案更好。 AI 讓打造產品變容易了，但找到值得打造的東西，還是得靠自己。