mcpField
F
Flowzap

Flowzap

Remote
github.com/flowzap-xyzMedia & Design5Updated 5w ago
Repository

About Flowzap

Flowzap is an MCP server for creating and editing diagrams with AI coding assistants. It uses the FlowZap Code DSL and supports workflows from validation and structured edits to shareable playgrounds.

Key features

  1. 01Create workflow, sequence, architecture, and mind map diagrams
  2. 02Validate and repair FlowZap Code
  3. 03Convert logs, OpenAPI specs, or code into diagrams
  4. 04Export graph data and compare diagram versions
  5. 05Apply structured changes to diagram elements
  6. 06Run SOC2, GDPR, and PIPL checks on data-flow diagrams

Use cases

  1. 01Create a shareable architecture diagram from a description
  2. 02Turn HTTP logs into a sequence diagram
  3. 03Apply a small change without regenerating a diagram
  4. 04Review a data-flow diagram for listed compliance frameworks

MCP support

The MCP server exposes FlowZap diagram creation, validation, editing, graph export, and compliance tools to compatible AI clients. It can create shareable playground URLs for diagrams.

Configuration

Remote servers need no local install. Pick your client, then copy the config or install in one click.

Endpointhttps://flowzap.xyz/mcp
Copy install command
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.

Packages
npmflowzap-mcp2.1.0

Tools

7
ParameterTypeRequiredDescription
codestringYesFlowZap Code to validate

Details

From the project README

FlowZap MCP Server

npm version MCP

Create workflow, sequence, architecture, and mind map 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 quad-view diagrams (Workflow, Sequence, Architecture & Mind Map) 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:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Claude CodeRun: claude mcp add --transport stdio flowzap -- npx -y flowzap-mcp
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:
[mcp_servers.flowzap]
command = "npx"
args = ["-y", "flowzap-mcp"]
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:
{"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:
name: FlowZap
mcpServers:
- name: flowzap
command: npx
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:

{
  "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
ToolDescription
flowzap_validateValidate FlowZap Code syntax
flowzap_fixDeterministically repair mechanical FlowZap Code errors (numbering, inferred handles, label syntax, missing lane labels, emoji/control chars) and return the repaired code plus the corrections applied
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).
Mind Map Tools
ToolDescription
flowzap_mindmap_validateValidate FlowZap Code syntax and mind-map readiness
flowzap_mindmap_approveCheck if code is suitable for Mind Map rendering (diamonds/taskboxes = ERROR)
flowzap_mindmap_templateGenerate a ready-to-extend Mind Map tree skeleton
flowzap_mindmap_create_playgroundCreate a playground URL with ?view=mindmap

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.

Repair Invalid Code:

"My FlowZap Code fails validation. Fix the mechanical errors for me."

The agent uses flowzap_fix to deterministically repair numbering, inferred handles, label syntax, lane labels, emoji and control characters, then validates the repaired code. Anything the repairer cannot fix is reported as-is — it never invents content.

Compliance Audit:

"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.

Mind Map Creation:

"Create a mind map about AI agent architecture"

The agent uses flowzap_mindmap_template to generate a skeleton, then validates and creates a playground with ?view=mindmap.

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

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/fixPOST30/minDeterministically repair mechanical FlowZap Code errors and return the repaired code + applied corrections
/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:

npx skills add flowzap-xyz/flowzap-mcp

Public MCP Adoption Signals

Official Listings

Links

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.