FlowVision
FlowVision,一键分析项目代码 · 自动生成架构流程图 · 可视化编辑 · MCP 实时同步
Ask AI about FlowVision
Powered by Claude · Grounded in docs
I know everything about FlowVision. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
功能亮点
AI 智能生成用自然语言描述需求,AI 自动生成完整流程图。 支持 OpenAI / Anthropic / DeepSeek / Ollama 多模型。 |
联网搜索集成 GrokSearch MCP 服务器,AI 对话可联网搜索实时信息,结合搜索结果生成更准确的流程图。 |
项目分析导入本地或 GitHub 项目,AI 深度分析代码结构、 技术栈、设计模式,生成可视化架构图。 |
MCP 协议集成内置 MCP 服务器 + 支持接入外部 MCP 服务器。支持 Claude Desktop、Cursor、VS Code 等 AI 客户端实时同步操作流程图。 |
可视化编辑拖拽节点与连线,39 种节点类型覆盖 8 种图表(流程图、ER图、类图、时序图、 用例图、状态图、活动图、功能结构图),四向连接,自动布局,撤销 / 重做,导出 PNG / JSON / Markdown。 |
斜杠命令系统输入 |
AI Prompt 生成AI 辅助生成高质量流程图 Prompt,描述场景即可 获得优化的提示词,提升流程图生成质量。 |
Agent 日志详细的操作日志追踪,支持步骤追踪、耗时统计、 状态监控、分类标签、性能指标。 |
截图展示
| 主界面 | 设置面板 |
|---|---|
![]() | ![]() |
快速开始
Web 开发模式
# 1. 克隆仓库
git clone https://github.com/YangXiaoMian/FlowVision.git
cd FlowVision
# 2. 安装依赖
pnpm install
# 3. 启动开发环境(前端 + 后端)
pnpm dev
前端运行在 http://localhost:5173,后端运行在 http://localhost:3001。
桌面应用
FlowVision 提供 Electron 桌面端,支持 Windows、macOS、Linux 三平台:
# 1. 安装依赖
pnpm install
# 2. 构建桌面应用(会先编译前后端,再执行 electron-builder)
pnpm build:desktop
# 3. 发布前检查(先跑测试,再构建桌面端并执行 smoke 测试)
pnpm release:check
构建完成后,安装包输出在 packages/desktop/dist/ 目录。
| 平台 | 格式 | 说明 |
|---|---|---|
| Windows | .exe | NSIS 安装包 |
| macOS | .dmg | 磁盘镜像 |
| Linux | .AppImage | 免安装运行 |
自动构建:推送版本号格式的标签(如
1.0.0)会触发 GitHub Actions 自动编译三平台安装包,可在 Releases 页面下载。
macOS 签名说明:macOS 构建需要有效的 Apple 开发者证书,否则
.dmg安装后会提示"未知开发者",用户需在「系统设置 → 隐私与安全性」中手动允许打开。如需绕过,可在下载后执行:xattr -cr /Applications/FlowVision.app
联网搜索配置
FlowVision 默认集成 GrokSearch MCP 服务器,为 AI 对话提供联网搜索能力。
1. 安装依赖
确保系统已安装 Python 和 uvx:
# 安装 uv(包含 uvx)
curl -LsSf https://astral.sh/uv/install.sh | sh
2. 配置环境变量
在项目根目录 .env 文件中添加:
GROK_API_URL=https://your-api-endpoint/v1
GROK_API_KEY=your-api-key
3. 启用搜索
在设置 → MCP 服务中,找到 GrokSearch 服务器,点击连接按钮启用。连接成功后,在 AI 对话输入框旁点击搜索图标(🌍)即可开启联网搜索模式。
也可以在设置 → MCP 服务中添加其他自定义 MCP 服务器。
MCP 集成
内置 MCP 服务器
FlowVision 暴露 23 个 MCP 工具,AI 客户端可直接操作流程图:
| 工具 | 说明 |
|---|---|
get_graph | 获取当前流程图完整结构 |
add_node | 添加节点 |
remove_node | 删除节点 |
update_node | 更新节点属性 |
connect_nodes | 连接两个节点 |
apply_diff | 批量变更(增 / 删 / 改) |
list_nodes | 列出所有节点摘要 |
get_node | 获取单个节点详情 |
get_stats | 获取图统计信息 |
clear_graph | 清空画布 |
remove_edge | 删除指定连线 |
search_nodes | 按关键词搜索节点 |
get_subgraph | 获取节点及其连通子图 |
update_edge | 修改连线标签 / 类型 / 动画 |
export_graph | 导出为 Mermaid 格式文本 |
batch_add_nodes | 批量添加多个节点 |
batch_connect_nodes | 批量创建多条连线 |
auto_layout | 触发自动布局 |
validate_graph | 验证图表完整性 |
get_diagram_info | 获取当前图表类型和配置 |
clone_node | 克隆指定节点 |
move_node | 移动节点位置 |
set_diagram_type | 设置图表类型 |
客户端配置
在 Claude Desktop、Cursor 或其他 MCP 客户端中添加:
{
"mcpServers": {
"flowvision": {
"url": "http://localhost:3001/mcp"
}
}
}
接入外部 MCP 服务器
在设置 → MCP 服务中可以添加自定义 MCP 服务器:
- Stdio 传输:通过子进程启动 MCP 服务器(如 GrokSearch)
- SSE 传输:连接到 SSE 端点
- HTTP 传输:连接到 Streamable HTTP 端点
技术架构
flowvision/
├── packages/
│ ├── frontend/ React 18 · TypeScript · React Flow · Zustand · Tailwind CSS
│ ├── backend/ Fastify · Node.js · SSE 流式传输 · WebSocket · MCP 客户端
│ ├── analyzer/ 代码分析引擎 · AI 驱动的架构提取
│ └── desktop/ Electron 桌面壳 · 跨平台打包
├── turbo.json Turborepo 构建编排
└── pnpm-workspace.yaml
完整技术栈
| 层 | 技术 |
|---|---|
| 前端 | React 18 · TypeScript · React Flow v12 · Zustand · Tailwind CSS · Vite 5 |
| 后端 | Fastify · Node.js · SSE · WebSocket · MCP Client SDK |
| AI | OpenAI · Anthropic · DeepSeek · Ollama 多模型切换 |
| MCP | @modelcontextprotocol/sdk · 23 个服务端工具 + 外部客户端连接 |
| 桌面 | Electron · electron-builder |
| 构建 | pnpm 9 · Turborepo · GitHub Actions CI/CD |
API
REST 端点
AI 相关
| 方法 | 路径 | 说明 |
|---|---|---|
| POST | /api/ai/generate | 同步生成流程图 |
| POST | /api/ai/generate-stream | 流式生成(SSE) |
| GET | /api/ai/models | 获取模型列表 |
| GET | /api/ai/config | 获取 Provider |
分析
| 方法 | 路径 | 说明 |
|---|---|---|
| POST | /api/analyze | 分析项目代码 |
文件
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/files | 读取项目文件树 |
| GET | /api/file-content | 读取文件内容 |
| GET | /api/file-context | 获取项目上下文 |
| GET | /api/browse-dirs | 浏览目录 |
| GET | /api/github-tree | GitHub 仓库文件 |
| GET | /api/gitee-tree | Gitee 仓库文件 |
MCP 客户端管理
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/mcp/servers | 获取所有服务器配置 |
| POST | /api/mcp/servers | 添加/更新服务器 |
| DELETE | /api/mcp/servers/:id | 删除服务器 |
| POST | /api/mcp/servers/:id/connect | 连接服务器 |
| POST | /api/mcp/servers/:id/disconnect | 断开服务器 |
| POST | /api/mcp/servers/:id/test | 测试连接 |
| GET | /api/mcp/tools | 获取所有工具 |
| POST | /api/mcp/call-tool | 调用指定服务器工具 |
| POST | /api/mcp/call | 智能搜索调用工具 |
其他
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /health | 健康检查 |
快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl+Z | 撤销 |
Ctrl+Y | 重做 |
Ctrl+E | 导出 PNG |
Delete | 删除选中节点 |
未来规划
| 状态 | 功能 |
|---|---|
| ✅ 已完成 | AI Prompt 生成子页面 |
| ✅ 已完成 | 斜杠命令系统(/help /clear /export 等) |
| ✅ 已完成 | 下载操作 Toast 通知 |
| ✅ 已完成 | 文件浏览器状态持久化 |
| ✅ 已完成 | 四向连接接口与贝塞尔连线 |
| ✅ 已完成 | 统计面板(语言 / Token / 图表分析) |
| ✅ 已完成 | Agent 日志详情展开 |
| ✅ 已完成 | 增强数据备份(单项导出 / 标签页持久化) |
| ✅ 已完成 | MCP 工具集完善(23 个工具,支持所有图表类型) |
| ✅ 已完成 | Prompt 生成支持画布与项目上下文选择 |
| ✅ 已完成 | 模板命令(/template) |
| ✅ 已完成 | 39 种节点类型(流程图/ER/类图/时序图/用例图/状态图/活动图/功能结构图) |
| ✅ 已完成 | 15 个场景模板 + 13 种图表类型模板 |
| ✅ 已完成 | 增强 AI 提示词(完整节点参考、边关系、数据字段) |
| ✅ 已完成 | MCP 客户端管理(接入外部 MCP 服务器) |
| ✅ 已完成 | 联网搜索(GrokSearch MCP 集成) |
| ✅ 已完成 | 增强 Agent 日志(步骤追踪、耗时统计、状态监控) |
| ✅ 已完成 | macOS 标题栏原生适配 |
| 规划中 | 多人协作实时编辑(WebRTC / CRDT) |
| 规划中 | 流程图版本历史与对比 |
| 规划中 | 自定义节点模板市场 |
| 规划中 | 导出为可执行代码(Python / TypeScript / Mermaid) |
| 规划中 | 移动端适配(PWA) |
| 规划中 | 本地 AI 模型增强支持(LM Studio / llama.cpp) |
| 规划中 | 插件系统:自定义分析器与导出器 |
| 规划中 | 代码注释与流程图双向同步 |
| 规划中 | AI 生成结果可编辑提示词(Prompt Tuning) |
许可证
Star 趋势
友情链接
- LinuxDo - Linux.do论坛
- React - React 官方文档
- Electron - Electron 官方网站
- Vite - Vite 官方文档
- Fastify - Fastify 官方文档
- Model Context Protocol - MCP 官方文档
- pnpm - pnpm 官方文档
- GrokSearch - AI 联网搜索 MCP 服务器


