GitHub 儲存庫映射
貼上公開 GitHub 儲存庫網址或擁有者／儲存庫路徑，讓瀏覽器識別元件、檔案與連線。箭頭會連回產生各個關係的原始檔案與程式碼行。
從畫布、程式碼或儲存庫建立架構圖
OpenFlowKit 是開源的架構圖繪製工作室，專為開發者與技術團隊打造。它結合視覺化畫布、圖表即程式碼工作流程、儲存庫映射、C4 風格架構視圖與代理輔助編輯，因此系統可以先行勾勒、由文字產生，或從原始碼衍生。
產品採用在地優先架構：託管應用程式不需要帳戶，靜態自託管版本也沒有產品後端或資料庫。公開 GitHub 儲存庫可在瀏覽器中讀取，而私有儲存庫映射則可透過 CLI 從本機檢出內容執行。圖表維持可編輯狀態，也可透過文件所述的連結工作流程匯出或分享。
核心功能
畫布與以圖表即程式碼
以徒手或結構化方式繪製圖表，並匯入或撰寫 Mermaid、D2 或 Structurizr。文字與畫布呈現會保留在同一份可編輯圖表中。
代理原生圖表繪製
連線 Claude Code、Codex、Cursor、VS Code、Claude Desktop、Windsurf 或其他 MCP 用戶端。本機伺服器提供 29 項工具，可用於繪圖、讀取、重新排列、設定樣式、截圖、匯出及儲存庫操作。
架構建模
透過互相連線的架構視圖建立系統模型，包括 C4 風格的內容、容器與元件視角。也可以將儲存庫開啟為 C4 模型，並將證據連結固定至其讀取的提交。
具技術感知的圖表樣式
只要輸入 PostgreSQL、Redis 或 Kubernetes 等技術名稱，即可自動比對超過 2,000 個 AWS、Azure、Google Cloud、CNCF 與開發者圖示。
自託管與本機儲存
從檔案主機提供靜態建置版本，或在 Docker 中執行。圖表會保留在每位訪客的瀏覽器中；選用的僅檢視分享功能則使用獨立部署的 Worker 儲存密文。
實際使用情境
探索不熟悉的程式碼庫
貼上公開儲存庫，產生已發現服務、檔案與連線的映射，接著選取箭頭以檢視其背後的原始檔案與程式碼行。使用唯讀映射進行探索，或將其複製到畫布中重新排列。
記錄系統架構
從系統內容、容器或元件視圖開始，並讓相關架構層級保持連線。這有助於在 C4 風格模型中記錄服務、資料儲存、外部系統及其關係。
在程式碼與視覺化思考之間切換
將 Mermaid、D2 或 Structurizr 描述轉換為可編輯的視覺化圖表，或使用畫布將結構化圖形與徒手筆記、圖片、表情符號及圖表結合。
與編碼代理協作
要求 MCP 連線代理繪製儲存庫架構、修改選取的元素、加入快取、重新設定圖表樣式，或將圖表程式碼轉換為可編輯文件。檢視每項變更，並將其作為單一步驟復原。
託管私有圖表工作區
透過提供靜態建置版本或使用 Docker，在內部網域或本機環境執行 OpenFlowKit。將文件保留在瀏覽器中，並在需要僅檢視連結時選擇性部署分享 Worker。
Pros and Cons
Pros
- 在同一畫布中支援多種起點：徒手繪圖、圖表程式碼、儲存庫映射與代理指令。
- 儲存庫箭頭提供檔案與程式碼行的證據，讓產生的架構映射更容易對照原始碼進行檢查。
- MCP 伺服器可讓支援的代理透過 29 項工具編輯開啟的圖表，且變更可復原。
- 採用 MIT 授權的開源軟體，並提供可自託管或在 Docker 中執行的靜態建置版本。
- 支援 C4 風格的互連視圖，以及針對廣泛雲端與開發者技術的自動技術圖示比對。
Cons
- 瀏覽器儲存庫映射僅限公開 GitHub 儲存庫；私有儲存庫需要使用本機 CLI 工作流程。
- 儲存庫映射會從匯入項目與組態檔案推斷關係，而不是執行程式碼；大型儲存庫會在所述的讀取限制內進行取樣。
- 未內建團隊同步功能：自託管文件會保留在每位訪客的瀏覽器中，而僅檢視分享需要獨立部署 Worker。
FAQ
如何設定 OpenFlowKit？
OpenFlowKit 可在不需帳戶的託管瀏覽器工作室中使用。自託管版本是靜態網頁應用程式，可從資料夾提供服務或在 Docker 中執行；建置專案需要 Node 22.22 或更新版本。
OpenFlowKit 支援哪些工作流程？
您可以在畫布上繪圖、貼上或撰寫 Mermaid、D2 或 Structurizr、匯入儲存庫映射，或連線 MCP 用戶端。產生的圖表仍是可編輯文件，而代理所做的變更可以逐步復原。
OpenFlowKit 可以映射私有 GitHub 儲存庫嗎？
公開 GitHub 儲存庫可直接在瀏覽器中映射，不需要 API 金鑰或安裝。私有儲存庫必須使用 CLI 從本機檢出內容進行映射；該 CLI 包含在 MCP 伺服器套件中。
儲存庫映射有哪些限制？
儲存庫映射器會從匯入項目和組態檔案推導連線，而不是執行應用程式。瀏覽器映射適用於公開 GitHub 儲存庫，並受 GitHub 未驗證讀取限制約束；大型儲存庫會依照文件所述的檔案數量與總大小限制進行取樣。
支援哪些代理與 AI 工作流程？
MCP 伺服器可與 Claude Code、Codex、Cursor、VS Code、Claude Desktop、Windsurf 及其他 MCP 用戶端搭配使用。它會在使用者的電腦上執行，不需要自有的 API 金鑰。透過雲端模型提出的 AI 請求，仍受該供應商的資料處理方式與使用費用約束。
Quick Facts
- 類別
- 開發者工具；架構圖繪製
- 平台
- 可透過靜態檔案或 Docker 自託管的網頁應用程式
- 授權
- 採 MIT 授權的開源軟體
- 代理介面
- 具備 29 項圖表與儲存庫工具的 MCP 伺服器
- 圖表輸入
- 畫布繪圖、Mermaid、D2、Structurizr、GitHub 儲存庫
- 帳戶模式
- 託管工作室可在不需帳戶的情況下使用
OpenFlowKit 替代品
Lucid Train
Lucid Train 是一款 local-first AI coding harness，可將 repository 程式碼轉成架構圖，並以圖作為 coding agents 的規格。提供桌面版與輕量 Rust CLI，支援本地模型或自有 API keys。
Cherry Blossom
Cherry Blossom 是一款瀏覽器版 PCB 編輯器，可將自然語言提示轉成可編輯的原理圖、PCB 佈局與製造檔案。支援 AI 輔助電路板草圖、驗證檢查與開放匯出。
ByteAsk
ByteAsk 是專為 C 與 C++ 打造的終端機優先 AI coding agent，先編輯儲存庫再用真實編譯器、除錯器、sanitizer 與測試驗證變更，並提供免費方案與付費方案。
Epherem
Epherem 是適用於 Lovable、Bolt、v0、Replit、Cursor 與 Claude Code 等 AI 程式設計工具打造網頁應用程式的靜態安全掃描器，檢查原始碼與相依套件中的常見安全錯誤，分類呈現結果並提供修正建議，無須執行應用程式。
CreateOS Sandbox
CreateOS Sandbox 是以 Firecracker micro-VM 執行程式與 agent 工作負載的隔離運算環境，支援私有網路、SDK、CLI 與 MCP 程式化控制。
GitBot
GitBot 是以瀏覽器為基礎的本機工作區，可使用 Claude Code、Codex 或 OpenCode 建立可重複使用的程式設計機器人，並在儲存庫資料夾中執行，支援持續執行緒與可設定權限。