Sponsored by Deepsite.site

Flowzap

Created By
flowzap-xyz11 days ago
The FlowZap MCP Server bridges AI coding assistants and FlowZap's diagramming engine, letting LLMs generate real, shareable Workflow, Sequence and Architecture diagrams in seconds. Pretty ones. It installs in one command — npx -y flowzap-mcp — with no authentication required. It works with Claude Desktop, Cursor, Windsurf, Zed, Warp, Cline, Roo Code, Continue.dev, OpenAI Codex, and more. The core tools let AI agents validate FlowZap Code syntax, fetch syntax docs, and create shareable but temporary playground URLs (one-hour TTL). Diagrams are exported as structured JSON graphs (lanes, nodes, edges) so AI agents can reason over them. It is listed on the official MCP registry (registry.modelcontextprotocol.io), npm, GitHub, among others. Use it with its SKILL . md file for cleaner results: npx skills add flowzap-xyz/flowzap-mcp --skill flowzap-diagrams Security: No Authentication Required - Public endpoints only; No User Data Stored. Playground sessions are ephemeral (60-minute TTL, non-guessable cryptographic tokens); No Tracking. No cookies or persistent identifiers Logs to stderr only - Security events never exposed to MCP clients.
Overview

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)
  • Sequence diagram quality: every cross-lane request needs a matching response edge; define edges in chronological order; 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_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)

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:

  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:"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)
}

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

License

MIT

Server Config

{
  "mcpServers": {
    "flowzap": {
      "command": "npx",
      "args": [
        "flowzap-mcp@1.3.5"
      ]
    }
  }
}
Recommend Servers
TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.
EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.
MiniMax MCPOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.
AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.
Serper MCP ServerA Serper MCP Server
Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.
MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs
Amap Maps高德地图官方 MCP Server
RedisA Model Context Protocol server that provides access to Redis databases. This server enables LLMs to interact with Redis key-value stores through a set of standardized tools.
Playwright McpPlaywright MCP server
Tavily Mcp
Howtocook Mcp基于Anduin2017 / HowToCook (程序员在家做饭指南)的mcp server,帮你推荐菜谱、规划膳食,解决“今天吃什么“的世纪难题; Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"
BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.
WindsurfThe new purpose-built IDE to harness magic
Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
ChatWiseThe second fastest AI chatbot™
Y GuiA web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers.
CursorThe AI Code Editor
Baidu Map百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
DeepChatYour AI Partner on Desktop