欢迎使用 FlowZap,快速、清晰、掌控的绘图应用。

介绍 FlowZap MCP 服务器:从 LLM Agent 到交互式流程图的最快路径

2025/9/7

Tags: MCP, Agents, npm, API, Claude, Cursor, Windsurf

Jules Kovac

Jules Kovac

Business Analyst, Founder

介绍 FlowZap MCP 服务器:从 LLM Agent 到交互式流程图的最快路径

2026年1月更新: 我们简化了 MCP 集成!新的 npm 包 flowzap-mcp 取代了旧的复杂 MCP 服务器。一条命令安装,无需认证。

 

🚀 推荐的新方法:npm 包

 

Claude Desktop

claude_desktop_config.json 中添加:

{
  "mcpServers": {
    "flowzap": {
      "command": "npx",
      "args": ["-y", "flowzap-mcp"]
    }
  }
}

配置文件位置:

  • macOS~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows%APPDATA%\Claude\claude_desktop_config.json

 

Cursor

在 Cursor MCP 设置中添加相同配置。

 

Windsurf IDE

添加到 ~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "flowzap": {
      "command": "npx",
      "args": ["-y", "flowzap-mcp"]
    }
  }
}

Windows 用户: 如果工具未在 Cascade 中显示,请使用绝对路径:

{
  "mcpServers": {
    "flowzap": {
      "command": "C:\\Program Files\\nodejs\\npx.cmd",
      "args": ["-y", "flowzap-mcp"]
    }
  }
}

使用以下命令查找 npx 路径:where.exe npx

 

所有兼容的编程工具

FlowZap MCP 服务器可与任何支持 Model Context Protocol (MCP) 的工具配合使用。以下是完整列表:

| 工具 | 配置方法 | |------|---------| | Claude Desktop | 添加到 claude_desktop_config.json
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json | | Claude Code | 运行:claude mcp add --transport stdio flowzap -- npx -y flowzap-mcp
或添加到项目根目录的 .mcp.json。 | | Cursor | 设置 → 功能 → MCP 服务器 → 添加服务器。使用相同的 JSON 配置。 | | Windsurf IDE | 添加到 ~/.codeium/windsurf/mcp_config.json | | OpenAI Codex | 添加到 ~/.codex/config.toml
[mcp_servers.flowzap]
command = "npx"
args = ["-y", "flowzap-mcp"]
或运行:codex mcp add flowzap -- npx -y flowzap-mcp | | Warp Terminal | 设置 → MCP 服务器 → 点击 "+ 添加" → 粘贴 JSON 配置。 | | Zed Editor | 添加到 settings.json
{"context_servers": {"flowzap": {"command": "npx", "args": ["-y", "flowzap-mcp"]}}} | | Cline (VS Code) | Cline 侧边栏 → MCP 服务器图标 → 编辑 cline_mcp_settings.json | | Roo Code (VS Code) | 添加到项目或全局设置中的 .roo/mcp.json。 | | Continue.dev | 创建 .continue/mcpServers/flowzap.yaml
name: FlowZap
mcpServers:
- name: flowzap
command: npx
args: ["-y", "flowzap-mcp"] | | Sourcegraph Cody | 通过 openctx.providers 配置添加到 VS Code settings.json。 |

不兼容: Replit 和 Lovable.dev 仅支持通过 URL 连接的远程 MCP 服务器。它们无法直接使用 FlowZap MCP npm 包。请改用公共 API

 

Comet 浏览器 / 其他 AI 助手

Comet 和类似的 AI 浏览器不直接支持自定义 MCP 服务器。它们可以:

  1. 生成 FlowZap Code 使用 flowzap.xyz/flowzap-code 上的语法文档
  2. 创建 playground URL 通过公共 API:
    curl -X POST https://flowzap.xyz/api/playground/create \
      -H "Content-Type: application/json" \
      -d '{"code": "sales { n1: circle label:\"Start\" }"}'
    

 

可用工具 (v1.2.0)

 

核心工具

| 工具 | 描述 | |------|------| | flowzap_validate | 验证 FlowZap Code 语法 | | flowzap_create_playground | 创建可分享的图表 URL | | flowzap_get_syntax | 获取语法文档 |

 

面向代理的工具 (v1.1.0+)

| 工具 | 描述 | |------|------| | flowzap_export_graph | 将 FlowZap Code 导出为结构化 JSON 图(泳道、节点、边)供 AI 推理 | | flowzap_artifact_to_diagram | 将 HTTP 日志、OpenAPI 规范或代码解析为 FlowZap 图表(自动创建 playground URL) | | flowzap_diff | 比较两个版本的 FlowZap Code 并获取结构化差异 | | flowzap_apply_change | 应用结构化补丁操作(插入/删除/更新节点/边)- 自动创建 playground URL |

 

使用示例

向你的 AI 助手提问:

  • "为订单处理系统创建一个工作流图"
  • "制作一个显示用户注册流程的流程图"
  • "画一个包含构建、测试和部署阶段的 CI/CD 流水线图"

助手会:

  1. 根据你的描述生成 FlowZap Code
  2. 验证代码
  3. 创建一个你可以查看和分享的 playground URL

 

安全性

  • 无需认证 — 仅使用 FlowZap 公共 API
  • 无用户数据访问 — 无法读取你的图表或账户
  • 本地运行 — MCP 服务器在你的机器上运行
  • SSRF 防护 — 仅连接到 flowzap.xyz

 

公共 API 端点

这些端点可供外部集成使用(无需认证):

| 端点 | 方法 | 限制 | 描述 | |------|------|------|------| | /api/validate | POST | 30次/分钟 | 验证 FlowZap Code 语法 | | /api/playground/create | POST | 5次/分钟,50次/天 | 创建临时 playground URL(15分钟有效期) |

注意: AI 代码生成(/api/ai-generate)需要认证,仅对已登录的 FlowZap 用户开放。

 

链接

 

旧方法(已弃用)

⚠️ 以下远程 MCP 端点已弃用。请使用上面的 npm 包。

FlowZap MCP: 面向真实业务流程图的开放、Agent 友好之桥。

返回所有博客文章