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

npm version MCP

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)

Compliance Tool

ToolDescription
flowzap_compliance_checkRun automated SOC2, GDPR, and PIPL compliance analysis on a FlowZap Code data-flow diagram. Backed by Deepseek LLM with strict rate limits (3/day per IP, 1/hour burst, global 5-min circuit breaker). Returns a shareable ephemeral result URL (60-min TTL).

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.

Compliance Audit:

code
"Check my data flow diagram for SOC2, GDPR, and PIPL compliance."

The agent uses flowzap_compliance_check to run an automated audit and returns a shareable result page.

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

Public API Endpoints

These endpoints are available for external integrations (no authentication required):

EndpointMethodRate LimitDescription
/api/validatePOST30/minValidate FlowZap Code syntax
/api/playground/createPOST5/min, 50/dayCreate ephemeral playground URL (15-min TTL)
/api/compliance-checkPOST5/min, 30/dayRun SOC2/GDPR/PIPL compliance analysis on FlowZap Code. Returns frameworks + shareable result URL (60-min TTL). Backed by Deepseek LLM.

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

Public MCP Adoption Signals

Official Listings

Links

License

MIT

常见问题

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

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

相关 Skills

前端设计

by anthropics

Universal
热门

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

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

编码与调试
未扫描165.3k

网页应用测试

by anthropics

Universal
热门

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

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

编码与调试
未扫描165.3k

网页构建器

by anthropics

Universal
热门

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

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

编码与调试
未扫描165.3k

相关 MCP Server

GitHub

编辑精选

by GitHub

热门

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

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

编码与调试
89.1k

by Context7

热门

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

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

编码与调试
60.0k

by tldraw

热门

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

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

编码与调试
49.5k

评论