system-design-visualizer-tool

用途：把架构图、流程图等静态系统设计图片转成可交互、可探索的可视化，便于理解与讲解。主要能力：使用 OpenAI GPT-4o Vision 分析上传图片并生成 Mermaid.js 图；将 Mermaid 转成 React Flow 交互图；点击节点可获取 AI 生成的组件详情；无 API Key 时以 Mock 模式运行示例数据。使用方式：克隆仓库后安装依赖并配置环境变量。命令：git clone https://github.com/mallahyari/system-design-visualizer.git；cd system-design-visualizer；npm install；npm run dev，访问 http://localhost:5173。在根目录 .env 中设置 VITE_OPENAI_API_KEY=your_openai_api_key_here，未提供密钥则使用 Mock 模式。流程分三步：上传图片、生成 Mermaid、转换为交互图。适用场景：系统设计学习、架构评审、技术文档可视化。限制：依赖 OpenAI API，可能遇到 401 未授权、429 频率限制；图片过大建议压缩（最大 20MB）；Mermaid 解析对语法有要求；React Flow 容器需明确高度。其他收费或价格信息暂未提供。