FlowVision

🔮 FlowVision

AI 驱动的智能流程图设计工具

一键分析项目代码 · 自动生成架构流程图 · 可视化编辑 · MCP 实时同步 · 联网搜索

功能亮点

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/ 目录。

自动构建：推送版本号格式的标签（如 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 客户端可直接操作流程图：

客户端配置

在 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

API

AI 相关

分析

文件

MCP 客户端管理

其他

快捷键

未来规划

许可证

MIT

Star 趋势

友情链接

• LinuxDo - Linux.do论坛
• React - React 官方文档
• Electron - Electron 官方网站
• Vite - Vite 官方文档
• Fastify - Fastify 官方文档
• Model Context Protocol - MCP 官方文档
• pnpm - pnpm 官方文档
• GrokSearch - AI 联网搜索 MCP 服务器