Flowzap

by flowzap-xyz

2 stars

263 downloads

Not rated

GitHub

Developer Tools

About

Official FlowZap Code DSL specification, examples, and resources for business process diagramming.

Details

Author: flowzap-xyz
GitHub stars: 2
Downloads: 263
Categories: Developer Tools

- 7 MCP tools for diagram creation and manipulation
- Compatible with 11 popular coding tools
- Supports flowcharts, swimlane, sequence, and architecture diagrams
- URL-based code loading and playground sharing
- AI guidelines and machine-readable schemas for agents
- 250+ ready-to-use diagram templates

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Flowzap

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

From the repository

Install the flowzap-mcp npm package and configure it in your coding tool's MCP settings using JSON configuration. The server exposes 7 tools such as flowzap_validate, flowzap_create_playground, and flowzap_get_syntax.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "flowzap": {
            "flowzap": {
                "command": "npx",
                "args": [
                    "-y",
                    "flowzap-mcp"
                ]
            }
        }
    }
}

McpServers

{
    "flowzap": {
        "command": "npx",
        "args": [
            "-y",
            "flowzap-mcp"
        ]
    }
}

FlowZap Code DSL — Official Syntax & Examples

FlowZap Code is a simple domain-specific language (DSL) for collaborative business process mapping and workflow automation. Write natural, readable code to create flowcharts, swimlane diagrams, sequence diagrams, and architecture diagrams. No technical skills needed! - Website: https://flowzap.xyz - Syntax Guide: flowzap.xyz/flowzap-code - AI Guidelines: flowzap.xyz/flowzap-code-guidelines.md - Templates: flowzap.xyz/templates — 250+ ready-to-use workflow, sequence and architecture diagram templates - MCP Server: flowzap.xyz/docs/mcp — for Claude Desktop, Cursor, Windsurf, and 8 more coding tools - Agent Skill: skills.sh/flowzap-xyz/flowzap-mcp/flowzap-diagrams - npm: flowzap-mcp ---

⚡ Quick example: A wedding planning process


couple { # couple
  n1: circle label:"Start Planning"
  n2: rectangle label:"Define Budget & Priorities"
  n3: rectangle label:"Review Proposals"
  n4: rectangle label:"Make Final Decisions"
  n5: circle label:"Wedding Day!"
  n1.handle(right) -> n2.handle(left)
  n2.handle(right) -> n3.handle(left)
  n3.handle(right) -> n4.handle(left)
  n4.handle(right) -> n5.handle(left)
  n2.handle(bottom) -> planner.n6.handle(top) [label="Hires"]
}

planner { # planner
  n6: rectangle label:"Initial Consultation"
  n7: rectangle label:"Create Planning Timeline"
  n8: rectangle label:"Coordinate Vendors"
  n9: rectangle label:"Final Walkthrough"
  n6.handle(right) -> n7.handle(left)
  n7.handle(right) -> n8.handle(left)
  n8.handle(right) -> n9.handle(left)
  n7.handle(bottom) -> vendors.n10.handle(top) [label="Requests"]
}

vendors { # vendors
  n10: rectangle label:"Receive Requirements"
  n11: diamond label:"Available?"
  n12: rectangle label:"Send Proposal"
  n13: rectangle label:"Confirm Booking"
  n10.handle(right) -> n11.handle(left)
  n12.handle(right) -> n13.handle(left)
  n11.handle(right) -> n12.handle(left) [label="No"]
  n11.handle(bottom) -> n12.handle(bottom) [label="Yes"]
  n12.handle(top) -> couple.n3.handle(bottom) [label="Sends"]
}



Create your free account on https://flowzap.xyz. Then paste the above into your FlowZap workspace to visualize your first workflow, sequence and architecture diagram in seconds.

---

🤝 Contributing


- Fork & submit pull requests with new code examples or suggestions!
- Open issues for syntax questions or documentation fixes.
- See CONTRIBUTING.md for details.

---

📖 Documentation


- Syntax Rules — includes sequence diagram best practices (v1.3.4)
- AI Coding Guidelines — instructions for AI assistants generating FlowZap Code
- Download AI Guidelines — drop this file into your project's

/docs/

 folder for AI coding tools
- Templates Library — 250+ ready-to-use templates for workflows, sequences, and architecture diagrams
- Architecture Diagram Templates — 50 architecture diagram templates (Microservices, Event-Driven, CQRS, Serverless, Saga, and more)
- n8n Workflow JSON Examples — FlowZap Code to n8n JSON export
- Make.com Blueprint Examples — FlowZap Code to Make.com JSON export

Blog


- FlowZap Unveils .fz: True Diagrams as Code for Sequence Diagrams and AI-Native Workflows
- Supercharge Your Vibe Coding Flow with FlowZap: Turn AI Sparks into Structured Magic
- Introducing the FlowZap MCP Server
- The FlowZap Diagram Skill Is Live — Here's Why It Matters
- One Code, Three Views: Flowchart + Sequence + Architecture
- The Top 10 Workflows for CI/CD Pipeline Configuration

---

🤖 For AI Agents & Agentic Browsers


FlowZap provides machine-readable resources for automated discovery:

- Syntax Schema (JSON):

/api/flowzap-code-schema.json


- Well-Known Discovery:

/.well-known/flowzap-code-schema.json


- LLM Context File:

/llms.txt


- Full LLM Context:

/llms-full.txt


- AI Guidelines:

/flowzap-code-guidelines.md


- Syntax Documentation:

/flowzap-code


- OpenAPI Spec:

/.well-known/openapi.json



MCP Server (v1.3.5)


Install the

flowzap-mcp

 npm package for any compatible coding tool:

json
{
  "mcpServers": {
    "flowzap": {
      "command": "npx",
      "args": ["-y", "flowzap-mcp"]
    }
  }
}



Compatible with 11 coding tools: Claude Desktop, Claude Code, Cursor, Windsurf IDE, OpenAI Codex, Warp Terminal, Zed Editor, Cline (VS Code), Roo Code (VS Code), Continue.dev, Sourcegraph Cody.

7 tools available:

flowzap_validate, flowzap_create_playground, flowzap_get_syntax, flowzap_export_graph, flowzap_artifact_to_diagram, flowzap_diff, flowzap_apply_change



URL Parameters

-

?mode=code on /playground/{id}

 auto-opens the code editor dialog
-

?code=<base64url> on /playground` loads FlowZap Code from URL (no API call needed) ---

Training Corpus

For a comprehensive dataset of 200+ real-world examples tailored for LLM training, see: flowzap-xyz/sequence-workflows ---

License

See LICENSE.

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

Claude Desktop / Cursor

McpServers

FlowZap Code DSL — Official Syntax & Examples

⚡ Quick example: A wedding planning process

🤝 Contributing

📖 Documentation

Blog

🤖 For AI Agents & Agentic Browsers

MCP Server (v1.3.5)

URL Parameters

Training Corpus

License

Install

More like this

Sentry

Github

Git

GitLab

Context 7

Playwright