Flowzap MCP

🚀 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 enables AI assistants to create diagrams for you.

🚀 Quick Start

FlowZap MCP Server allows you to leverage AI assistants to generate various types of diagrams. It's compatible with multiple coding tools that support the Model Context Protocol (MCP).

✨ Features

• Unique DSL: FlowZap uses a distinct domain - specific language, FlowZap Code, to transform text prompts into triple - view diagrams (Workflow, Sequence & Architecture).
• Simple Shapes: Only 4 shapes are used: circle, rectangle, diamond, taskbox.
• Attribute Syntax: Node attributes use colons (label:"Text"), and edge labels use equals ([label="Text"]).
• Sequence Diagram Quality: Ensures proper cross - lane requests and responses, and edges are defined chronologically with no orphaned nodes.

📦 Installation

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

All Compatible Coding Tools

⚠️ Important Note

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

⚠️ Important Note

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

💻 Usage Examples

Basic Usage

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"

Advanced Usage

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:

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

📚 Documentation

Core Tools

Agent - Focused Tools

FlowZap Code Example

sales { # Sales Team
  n1: circle label:"Order Received"
  n2: rectangle label:"Validate Order"
  n3: diamond label:"Valid?"
  n1.handle(right) -> n2.handle(left)
  n2.handle(right) -> n3.handle(left)
  n3.handle(right) -> fulfillment.n4.handle(left) [label="Yes"]
}

fulfillment { # Fulfillment
  n4: rectangle label:"Process Order"
  n5: circle label:"Complete"
  n4.handle(right) -> n5.handle(left)
}

🔧 Technical Details

• 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

💡 Usage Tip

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.

📄 License

MIT

📚 Links

• FlowZap Website
• FlowZap Code Documentation
• FlowZap MCP Blog
• LLM Context
• Templates Library
• npm Package
• GitHub Repository