Flowzap

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:

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