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
| Tool | How to Configure |
|---|---|
| Claude Desktop | Add to claude_desktop_config.json:<br>macOS: ~/Library/Application Support/Claude/claude_desktop_config.json<br>Windows: %APPDATA%\Claude\claude_desktop_config.json |
| Claude Code | Run: claude mcp add --transport stdio flowzap -- npx -y flowzap-mcp<br>Or add to .mcp.json in your project root. |
| Cursor | Open Settings → Features → MCP Servers → Add Server. Use the same JSON config. |
| Windsurf IDE | Add to ~/.codeium/windsurf/mcp_config.json |
| OpenAI Codex | Add 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 Terminal | Settings → MCP Servers → Click "+ Add" → Paste the JSON config. |
| Zed Editor | Add 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.dev | Create .continue/mcpServers/flowzap.yaml with:<br>name: FlowZap<br>mcpServers:<br> - name: flowzap<br> command: npx<br> args: ["-y", "flowzap-mcp"] |
| Sourcegraph Cody | Add 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:
{
"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
| Tool | Description |
|---|---|
flowzap_validate | Validate FlowZap Code syntax |
flowzap_create_playground | Create a shareable diagram URL |
flowzap_get_syntax | Get FlowZap Code syntax documentation |
Agent-Focused Tools
| Tool | Description |
|---|---|
flowzap_export_graph | Export FlowZap Code as structured JSON graph (lanes, nodes, edges) for reasoning |
flowzap_artifact_to_diagram | Parse HTTP logs, OpenAPI specs, or code into FlowZap diagrams |
flowzap_diff | Compare two versions of FlowZap Code and get structured diff |
flowzap_apply_change | Apply 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:
"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:
"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:
"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:
"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:
- Generate FlowZap Code based on your description
- Validate the code
- Create a playground URL with the appropriate view (workflow, sequence, or architecture) to view and share
FlowZap Code Example
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:
npx skills add flowzap-xyz/flowzap-mcp
- skills.sh listing: https://skills.sh/flowzap-xyz/flowzap-mcp/flowzap-diagrams
- Skill source: skills/flowzap-diagrams/
- Compatible with: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, GitHub Copilot, Cline, Roo Code, Augment, OpenCode, and more.
Links
- FlowZap Website
- FlowZap Code Documentation
- FlowZap MCP Blog
- LLM Context
- Templates Library
- npm Package
- GitHub Repository
License
MIT
常见问题
io.github.flowzap-xyz/flowzap 是什么?
借助 AI assistants 创建工作流图,并通过 FlowZap Code 校验与 playground URL 进行分享和验证。
相关 Skills
网页构建器
by anthropics
面向复杂 claude.ai HTML artifact 开发,快速初始化 React + Tailwind CSS + shadcn/ui 项目并打包为单文件 HTML,适合需要状态管理、路由或多组件交互的页面。
✎ 在 claude.ai 里做复杂网页 Artifact 很省心,多组件、状态和路由都能顺手搭起来,React、Tailwind 与 shadcn/ui 组合效率高、成品也更精致。
前端设计
by anthropics
面向组件、页面、海报和 Web 应用开发,按鲜明视觉方向生成可直接落地的前端代码与高质感 UI,适合做 landing page、Dashboard 或美化现有界面,避开千篇一律的 AI 审美。
✎ 想把页面做得既能上线又有设计感,就用前端设计:组件到整站都能产出,难得的是能避开千篇一律的 AI 味。
网页应用测试
by anthropics
用 Playwright 为本地 Web 应用编写自动化测试,支持启动开发服务器、校验前端交互、排查 UI 异常、抓取截图与浏览器日志,适合调试动态页面和回归验证。
✎ 借助 Playwright 一站式验证本地 Web 应用前端功能,调 UI 时还能同步查看日志和截图,定位问题更快。
相关 MCP Server
GitHub
编辑精选by GitHub
GitHub 是 MCP 官方参考服务器,让 Claude 直接读写你的代码仓库和 Issues。
✎ 这个参考服务器解决了开发者想让 AI 安全访问 GitHub 数据的问题,适合需要自动化代码审查或 Issue 管理的团队。但注意它只是参考实现,生产环境得自己加固安全。
Context7 文档查询
编辑精选by Context7
Context7 是实时拉取最新文档和代码示例的智能助手,让你告别过时资料。
✎ 它能解决开发者查找文档时信息滞后的问题,特别适合快速上手新库或跟进更新。不过,依赖外部源可能导致偶尔的数据延迟,建议结合官方文档使用。
by tldraw
tldraw 是让 AI 助手直接在无限画布上绘图和协作的 MCP 服务器。
✎ 这解决了 AI 只能输出文本、无法视觉化协作的痛点——想象让 Claude 帮你画流程图或白板讨论。最适合需要快速原型设计或头脑风暴的开发者。不过,目前它只是个基础连接器,你得自己搭建画布应用才能发挥全部潜力。