FlowZap MCP 服务器

使用 Claude、Cursor、Windsurf 以及其他 8 种兼容 MCP 的工具等 AI 助手创建工作流、序列和架构图。

FlowZap 是一款可视化工作流绘图工具，使用一种名为 FlowZap Code 的基于文本的 DSL。此 MCP 服务器允许 AI 助手为您创建图表。

什么是 FlowZap？

FlowZap 使用 FlowZap Code DSL 将文本提示转换为三视图图表（工作流、序列和架构）。它不是 Mermaid，也不是 PlantUML——它是一种专为简洁性和 AI 生成而设计的独特领域特定语言。

关键事实：

仅有 4 种形状：circle、rectangle、diamond、taskbox
节点属性使用冒号：label:"Text"
边标签使用等号：[label="Text"]
处理句柄：n1.handle(right) -> n2.handle(left)
通道（Lane）显示标签必须与左大括号在同一行：laneName { # Label
序列图质量：每个跨通道请求在下一个主要请求之前都需要一个匹配的响应边；按时间顺序定义边；保持严格的“请求 → 响应 → 下一个请求”节奏；没有孤立节点

安装

FlowZap MCP 服务器适用于任何支持模型上下文协议 (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 服务器。请改用公共 API。

JSON 配置

所有工具使用相同的 JSON 配置格式：

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

Windows 用户： 如果工具未显示，请使用绝对路径：
"command": "C:\\Program Files\\nodejs\\npx.cmd"
使用以下命令查找您的 npx 路径：where.exe npx

可用工具

核心工具

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

代理（Agent）专注工具

工具	描述
`flowzap_export_graph`	将 FlowZap Code 导出为结构化 JSON 图（通道、节点、边）以供推理
`flowzap_artifact_to_diagram`	将 HTTP 日志、OpenAPI 规范或代码解析为 FlowZap 图表
`flowzap_diff`	比较两个版本的 FlowZap Code 并获取结构化差异
`flowzap_apply_change`	应用结构化补丁操作（插入/移除/更新节点/边）

使用示例

基本图表创建

询问您的 AI 助手：

“生成此应用程序中当前登录流程的序列图”
“为订单处理系统创建一个工作流图”
“为微服务 API 网关创建一个架构图”
“制作一个显示用户注册流程的流程图”
“绘制一个包含构建、测试和部署阶段的 CI/CD 流水线图”

代理专注工作流

将 HTTP 日志解析为图表：

"Here are my nginx access logs. Create a sequence diagram showing the request flow."

代理使用 flowzap_artifact_to_diagram 并设置 artifactType: "http_logs"。

分析图表结构：

"Which steps in this workflow touch the database?"

代理使用 flowzap_export_graph 获取 JSON 图，然后对其进行查询。

显示更改内容：

"I updated the workflow. What's different from the previous version?"

代理使用 flowzap_diff 来比较新旧代码。

安全的增量更新：

"Add a logging step after the API call in this diagram."

代理使用 flowzap_apply_change 和结构化补丁，而不是重新生成。

助手将：

根据您的描述生成 FlowZap Code
验证代码
创建一个带有适当视图（工作流、序列或架构）的操场 URL，以便查看和共享

FlowZap Code 示例

sales { # Sales Team
  n1: circle label:"Order Received"
  n2: rectangle label:"Submit Order"
  n5: rectangle label:"Receive decision"
  n1.handle(right) -> n2.handle(left)
  n2.handle(bottom) -> fulfillment.n3.handle(top) [label="Submit"]
}

fulfillment { # Fulfillment
  n3: rectangle label:"Review Order"
  n4: rectangle label:"Return decision"
  n3.handle(right) -> n4.handle(left)
  n4.handle(top) -> sales.n5.handle(bottom) [label="Approved"]
}

安全性

无需身份验证 - 仅使用公共 FlowZap API
无用户数据访问 - 无法读取您的图表或帐户
本地运行 - MCP 服务器在您的机器上运行
SSRF 保护 - 仅连接到 flowzap.xyz
速率限制 - 客户端每分钟 30 个请求
输入验证 - 最大代码大小 50KB

代理技能 (skills.sh)

通过 skills.sh 为 40 多种兼容的编码代理安装 FlowZap 技能：

npx skills add flowzap-xyz/flowzap-mcp

skills.sh 列表： https://skills.sh/flowzap-xyz/flowzap-mcp/flowzap-diagrams
技能源码： skills/flowzap-diagrams/
兼容：Claude Code, Cursor, Windsurf, Codex, Gemini CLI, GitHub Copilot, Cline, Roo Code, Augment, OpenCode 等。

链接

许可证

MIT

FlowZap MCP Server