io.github.flowzap-xyz/flowzap

编码与调试

by flowzap-xyz

借助 AI assistants 创建工作流图,并通过 FlowZap Code 校验与 playground URL 进行分享和验证。

什么是 io.github.flowzap-xyz/flowzap

借助 AI assistants 创建工作流图,并通过 FlowZap Code 校验与 playground URL 进行分享和验证。

README

FlowZap MCP Server

Create workflow, sequence, and architecture diagrams using AI assistants like Claude, Cursor, Windsurf, and 8 other MCP-compatible tools.

FlowZap is a visual workflow diagramming tool with a text-based DSL called FlowZap Code. This MCP server lets AI assistants create diagrams for you.

What is FlowZap?

FlowZap turns text prompts into triple-view diagrams (Workflow, Sequence & Architecture) using FlowZap Code DSL. It is NOT Mermaid, NOT PlantUML - it is a unique domain-specific language designed for simplicity and AI generation.

Key Facts:

  • Only 4 shapes: circle, rectangle, diamond, taskbox
  • Node attributes use colon: label:"Text"
  • Edge labels use equals: [label="Text"]
  • Handles required: n1.handle(right) -> n2.handle(left)
  • Lane display label must be on the same line as the opening brace: laneName { # Label
  • Sequence diagram quality: every cross-lane request needs a matching response edge before the next major request; define edges in chronological order; keep a strict request → response → next request rhythm; no orphaned nodes

Installation

The FlowZap MCP Server works with any tool that supports the Model Context Protocol (MCP):

All Compatible Coding Tools

ToolHow to Configure
Claude DesktopAdd to claude_desktop_config.json:<br>macOS: ~/Library/Application Support/Claude/claude_desktop_config.json<br>Windows: %APPDATA%\Claude\claude_desktop_config.json
Claude CodeRun: claude mcp add --transport stdio flowzap -- npx -y flowzap-mcp<br>Or add to .mcp.json in your project root.
CursorOpen Settings → Features → MCP Servers → Add Server. Use the same JSON config.
Windsurf IDEAdd to ~/.codeium/windsurf/mcp_config.json
OpenAI CodexAdd to ~/.codex/config.toml:<br>[mcp_servers.flowzap]<br>command = "npx"<br>args = ["-y", "flowzap-mcp"]<br>Or run: codex mcp add flowzap -- npx -y flowzap-mcp
Warp TerminalSettings → MCP Servers → Click "+ Add" → Paste the JSON config.
Zed EditorAdd to settings.json:<br>{"context_servers": {"flowzap": {"command": "npx", "args": ["-y", "flowzap-mcp"]}}}
Cline (VS Code)Open Cline sidebar → MCP Servers icon → Edit cline_mcp_settings.json
Roo Code (VS Code)Add to .roo/mcp.json in project or global settings.
Continue.devCreate .continue/mcpServers/flowzap.yaml with:<br>name: FlowZap<br>mcpServers:<br> - name: flowzap<br> command: npx<br> args: ["-y", "flowzap-mcp"]
Sourcegraph CodyAdd to VS Code settings.json via openctx.providers configuration.

Not Compatible: Replit and Lovable.dev only support remote MCP servers via URL. Use the Public API instead.

JSON Configuration

All tools use the same JSON configuration format:

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

Windows Users: If tools don't appear, use the absolute path:

json
"command": "C:\\Program Files\\nodejs\\npx.cmd"

Find your npx path with: where.exe npx

Available Tools

Core Tools

ToolDescription
flowzap_validateValidate FlowZap Code syntax
flowzap_create_playgroundCreate a shareable diagram URL
flowzap_get_syntaxGet FlowZap Code syntax documentation

Agent-Focused Tools

ToolDescription
flowzap_export_graphExport FlowZap Code as structured JSON graph (lanes, nodes, edges) for reasoning
flowzap_artifact_to_diagramParse HTTP logs, OpenAPI specs, or code into FlowZap diagrams
flowzap_diffCompare two versions of FlowZap Code and get structured diff
flowzap_apply_changeApply structured patch operations (insert/remove/update nodes/edges)

Usage Examples

Basic Diagram Creation

Ask your AI assistant:

  • "Generate a Sequence diagram of the current Sign In flow implemented in this App"
  • "Create a workflow diagram for an order processing system"
  • "Create an architecture diagram for a microservices API gateway"
  • "Make a flowchart showing user registration flow"
  • "Diagram a CI/CD pipeline with build, test, and deploy stages"

Agent-Focused Workflows

Parse HTTP Logs into Diagrams:

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

The agent uses flowzap_artifact_to_diagram with artifactType: "http_logs".

Analyze Diagram Structure:

code
"Which steps in this workflow touch the database?"

The agent uses flowzap_export_graph to get a JSON graph, then queries it.

Show What Changed:

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

The agent uses flowzap_diff to compare old and new code.

Safe Incremental Updates:

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

The agent uses flowzap_apply_change with a structured patch instead of regenerating.

The assistant will:

  1. Generate FlowZap Code based on your description
  2. Validate the code
  3. Create a playground URL with the appropriate view (workflow, sequence, or architecture) to view and share

FlowZap Code Example

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"]
}

Security

  • No authentication required - Uses only public FlowZap APIs
  • No user data access - Cannot read your diagrams or account
  • Runs locally - The MCP server runs on your machine
  • SSRF protected - Only connects to flowzap.xyz
  • Rate limited - 30 requests/minute client-side
  • Input validation - 50KB max code size

Agent Skill (skills.sh)

Install the FlowZap skill for 40+ compatible coding agents via skills.sh:

bash
npx skills add flowzap-xyz/flowzap-mcp

Links

License

MIT

常见问题

io.github.flowzap-xyz/flowzap 是什么?

借助 AI assistants 创建工作流图,并通过 FlowZap Code 校验与 playground URL 进行分享和验证。

相关 Skills

网页构建器

by anthropics

Universal
热门

面向复杂 claude.ai HTML artifact 开发,快速初始化 React + Tailwind CSS + shadcn/ui 项目并打包为单文件 HTML,适合需要状态管理、路由或多组件交互的页面。

在 claude.ai 里做复杂网页 Artifact 很省心,多组件、状态和路由都能顺手搭起来,React、Tailwind 与 shadcn/ui 组合效率高、成品也更精致。

编码与调试
未扫描114.1k

前端设计

by anthropics

Universal
热门

面向组件、页面、海报和 Web 应用开发,按鲜明视觉方向生成可直接落地的前端代码与高质感 UI,适合做 landing page、Dashboard 或美化现有界面,避开千篇一律的 AI 审美。

想把页面做得既能上线又有设计感,就用前端设计:组件到整站都能产出,难得的是能避开千篇一律的 AI 味。

编码与调试
未扫描114.1k

网页应用测试

by anthropics

Universal
热门

用 Playwright 为本地 Web 应用编写自动化测试,支持启动开发服务器、校验前端交互、排查 UI 异常、抓取截图与浏览器日志,适合调试动态页面和回归验证。

借助 Playwright 一站式验证本地 Web 应用前端功能,调 UI 时还能同步查看日志和截图,定位问题更快。

编码与调试
未扫描114.1k

相关 MCP Server

GitHub

编辑精选

by GitHub

热门

GitHub 是 MCP 官方参考服务器,让 Claude 直接读写你的代码仓库和 Issues。

这个参考服务器解决了开发者想让 AI 安全访问 GitHub 数据的问题,适合需要自动化代码审查或 Issue 管理的团队。但注意它只是参考实现,生产环境得自己加固安全。

编码与调试
83.4k

by Context7

热门

Context7 是实时拉取最新文档和代码示例的智能助手,让你告别过时资料。

它能解决开发者查找文档时信息滞后的问题,特别适合快速上手新库或跟进更新。不过,依赖外部源可能导致偶尔的数据延迟,建议结合官方文档使用。

编码与调试
52.2k

by tldraw

热门

tldraw 是让 AI 助手直接在无限画布上绘图和协作的 MCP 服务器。

这解决了 AI 只能输出文本、无法视觉化协作的痛点——想象让 Claude 帮你画流程图或白板讨论。最适合需要快速原型设计或头脑风暴的开发者。不过,目前它只是个基础连接器,你得自己搭建画布应用才能发挥全部潜力。

编码与调试
46.3k

评论