Arch Visualizer

自动化代码库架构可视化工具

粘贴任何GitHub仓库URL→ AI解析AST→ 构建依赖关系图→ 生成托管的Eraser.io架构图。

______________________________________________________________________

── 免费设置API密钥（无需信用卡）──────────────────────────

1.GitHub个人访问令牌（PAT）

1. 首选https://github.com/settings/tokens
2. 点击 “生成新令牌（经典）”
3. 所需范围：✅ public_repo （只读即可）
4. 复制 ghp_... 令牌→ 设为 GITHUB_PAT

2.Groq API密钥（免费，无CC）

1. 首选https://console.groq.com
2. 注册Google/GitHub（无信用卡）
3. 仪表盘→ API密钥 → 创建API密钥
4. 复制 gsk_... key → 设为 GROQ_API_KEY

使用的型号： llama3-70b-8192 （免费等级：30个要求/分钟，6000个令牌/分钟）

3.谷歌双子座（可选，无CC）

1. 首选https://aistudio.google.com/app/apikey
2. 使用Google登录→ 创建API密钥
3. 集 GEMINI_API_KEY 和 LLM_PROVIDER=gemini

4.Eraser.io API密钥

1. 在以下网址创建免费帐户https://app.eraser.io（免费版可用）
2. 首选 设置→ API → 生成密钥
3. 复制它→ 设为 ERASER_API_KEY

______________________________________________________________________

── 本地开发───────────────────────────────────────────────────────

后端（FastAPI）

cd backend

# Create virtual environment
python -m venv venv
source venv/bin/activate   # Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Copy env template and fill in keys
cp .env.example .env
# Edit .env with your keys

# Run backend (port 8000)
uvicorn main:app --reload --port 8000

前端（React+Vite）

cd frontend

# Install dependencies
npm install

# Copy env template
cp .env.example .env
# (Leave VITE_BACKEND_URL empty — Vite proxy handles it)

# Run dev server (port 5173)
npm run dev

打开http://localhost:5173

______________________________________________________________________

── 部署──────────────────────────────────────────────────────────────

后端→ Koyeb（免费等级，无CC）

1. 推 backend/ 转到GitHub仓库
2. 注册地址：https://app.koyeb.com（免费等级，无CC）
3. 创建新 服务 → 码头工人 → 指向您的仓库
4. 在Koyeb仪表板中设置环境变量：

- GITHUB_PAT, GROQ_API_KEY, ERASER_API_KEY, LLM_PROVIDER - BACKEND_CORS_ORIGINS=["https://your-app.vercel.app"]

1. 部署——注意公共URL，例如。 https://xxx.koyeb.app

备选方案： Render.com免费版也适用。创建新的Web服务， 选择Docker，设置相同的env变量。

前端→ Vercel（免费等级，无CC）

1. 推 frontend/ 转到GitHub仓库
2. 注册地址：https://vercel.com（免费，无CC）
3. 导入回购→ Vercel自动检测Vite
4. 添加环境变量：

- VITE_BACKEND_URL=https://your-koyeb-backend.koyeb.app

1. 部署→ 得到你的 https://your-app.vercel.app 统一资源定位符

______________________________________________________________________

── 建筑────────────────────────────────────────────────────────────

┌─────────────────────────────────────────────────────────────┐
│                      React Frontend (Vite)                   │
│   Input URL → POST /api/analyze → Render diagram iframe     │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  FastAPI Backend (Python)                     │
│                                                              │
│  1. GitHubService  ── fetch file tree + content             │
│  2. ast_parser     ── Tree-sitter ASTs → FileMetadata       │
│  3. graph_builder  ── NetworkX DiGraph → Graph JSON         │
│  4. LangGraph Agent                                         │
│     ├── Node 1: analyze_architecture (Groq/Gemini LLM)     │
│     │     → parses Graph JSON → generates Eraser DaC        │
│     └── Node 2: create_eraser_diagram (Eraser MCP Client)  │
│           → spawns @eraser-io/mcp via stdio                 │
│           → calls generateDiagram tool                      │
│           → returns hosted diagram URL                      │
└─────────────────────────────────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│              Eraser.io MCP Server (Node.js)                  │
│    Runs as subprocess · communicates via stdio MCP          │
│    Takes Diagram-as-Code → returns hosted eraser.io URL     │
└─────────────────────────────────────────────────────────────┘

______________________________________________________________________

── 技术栈──────────────────────────────────────────────────────────────