FlowZap MCP Server
Enables creation and validation of workflow diagrams using FlowZap's visual diagramming tool and FlowZap Code DSL, generating shareable playground URLs for workflow visualizations.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@FlowZap MCP Servercreate a flowchart for user login with forgot password option"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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,taskboxNode 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 { # LabelSequence 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 macOS: Windows: |
Claude Code | Run: Or add to |
Cursor | Open Settings → Features → MCP Servers → Add Server. Use the same JSON config. |
Windsurf IDE | Add to |
OpenAI Codex | Add to
Or run: |
Warp Terminal | Settings → MCP Servers → Click "+ Add" → Paste the JSON config. |
Zed Editor | Add to
|
Cline (VS Code) | Open Cline sidebar → MCP Servers icon → Edit |
Roo Code (VS Code) | Add to |
Continue.dev | Create
|
Sourcegraph Cody | Add to VS Code |
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:
"command": "C:\\Program Files\\nodejs\\npx.cmd"Find your npx path with:
where.exe npx
Available Tools
Core Tools
Tool | Description |
| Validate FlowZap Code syntax |
| Create a shareable diagram URL |
| Get FlowZap Code syntax documentation |
Agent-Focused Tools
Tool | Description |
| Export FlowZap Code as structured JSON graph (lanes, nodes, edges) for reasoning |
| Parse HTTP logs, OpenAPI specs, or code into FlowZap diagrams |
| Compare two versions of FlowZap Code and get structured diff |
| 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-mcpskills.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
License
MIT
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/flowzap-xyz/flowzap-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server