Who FlowZap Is For

Is FlowZap for me if I'm building AI agents?

Absolutely. Although FlowZap can be used by any Business Analyst or Developer, it is designed for solopreneurs and AI builders who need to visualize agent workflows—like "trend scraper → content generator → scheduler bot"—without wrestling with Mermaid syntax or dragging boxes in Miro. If you vibe-code in Cursor, Windsurf, Bolt, Lovable, GPT, Claude, chances are you'll hit that moment where logic branches tangle or you can't explain your multi-agent handoffs. FlowZap is your lightning-fast AI sketchpad: prompt it, get **triple-view diagrams** (Workflow + Sequence + Architecture), tweak the code, iterate.

Where does FlowZap fit in my workflow?

Vibe coding is building fast with AI tools (Lovable, Bolt, GPT, Claude, Windsurf, Cursor, etc.) by describing apps in plain English and getting instant prototypes—speed over perfection. FlowZap supercharges this by visualizing the underlying process: turn a GPT outline like "viral TikTok scheduler using AI" into a flowchart with lanes for "AI Analyzer" and "Scheduler Bot," then toggle to sequence view to see timing quirks like delayed API responses killing the fun. It's the creative accelerator that spots inefficiencies before your prototype crashes.

I use Cursor/Claude/Windsurf—how does FlowZap integrate?

Install the `flowzap-mcp` npm package and add it to your AI assistant's MCP configuration. Then prompt "Design e-commerce recommendation engine workflow," and your AI calls FlowZap's tools to validate code and create shareable playground URLs. In Cursor or Windsurf, embed FlowZap Code as comments to link functions to visual nodes, or paste AI browser outputs (Comet, Gemini, Dia) that auto-fill FlowZap's modal and generate diagrams in 5 seconds.

Creative Workflows for AI Builders

How do I go from brainstorm to diagram with GPT or Perplexity?

Start in Perplexity: "Outline a viral TikTok content scheduler using AI for trend analysis." It gives steps like "scrape trends → generate captions → schedule posts." Copy-paste that into FlowZap's AI generator—boom, flowchart with "AI Analyzer," "Content Creator," "Scheduler Bot" lanes. Edit the FlowZap Code to add a "human approval loop" if automation feels risky, then feed the diagram back to GPT: "Implement this FlowZap workflow in Node.js" for structured functions mirroring your visual logic. No more "why did that break?" moments—you've mapped it first.

Can FlowZap help me debug multi-agent systems?

Yes. Diagram agents like "Flight Search (GPT-powered) + Hotel Matcher (Claude-optimized) + Itinerary Builder (custom logic)" with FlowZap's loops and conditionals—workflow view shows parallel paths for budget vs. luxury; sequence mode timelines API handoffs. Spot a bottleneck in Claude's response time? Edit the text code, regenerate in seconds, refine in Cursor. It's a visual debugger for AI orchestrations, turning complex builds into elegant systems instead of chaotic scripts.

What's a "vibe remix" session with Bolt or Lovable?

Prototype a fitness tracker in Lovable ("gamified challenges with badges"), then pipe the app's process into FlowZap via MCP: "user inputs → AI scoring → badge unlocks." The sequence view reveals timing quirks like delayed badges killing engagement. Share the interactive diagram link with collaborators—they suggest tweaks in-browser, you update the code once, no Zoom explanations. Lovable handles UI; FlowZap diagrams the backend flow; Cursor polishes the logic.

How do AI browsers like Comet or Dia work with FlowZap?

Paste "I'm building an AI agent—generate steps in FlowZap" into Comet's Assistant, and it auto-fills FlowZap's modal with your prompt, clicks "GENERATE FLOWZAP CODE NOW!", and returns formatted code for instant diagram viewing. Gemini in Chrome or Dia parse your intent from chat context and inject steps into the modal; Genspark's Super Agent triggers generation hands-free; Fellou adapts for solo workflows. It's **Prompt → Modal → Generate → Code → Diagram** automation, no manual formatting—review and tweak visually.

Real Workflow Examples

Show me a concrete example for e-commerce with AI.

Vibe-coding a Shopify store in Cursor: "User signs up, AI suggests products, cart auto-fills if they vibe." Prompt FlowZap: "Onboarding flow—user enters interests, AI recommends 3 products, if confirmed auto-add to cart and email, else loop for more suggestions (max 2 retries)." Get FlowZap Code with lanes for User, AI Recommender, Cart—workflow shows decision diamonds for "vibe confirmed?"; sequence timelines AI call to cart sync. Tweak for edge cases ("low stock" branch) in under 5 minutes, then code it in Cursor with the diagram as your blueprint.

What about a social media automation agent?

Brainstorm in Perplexity: "TikTok scheduler scrapes trends, generates captions, posts at peak times." Drop that into FlowZap's AI generator for a flowchart with "Trend Scraper → Caption Generator → Post Scheduler → Analytics Tracker." Toggle sequence view to see API delays between scraping and posting—add a retry loop if the generator times out. Export the code to GPT for Python implementation or use it as pseudo-code in Bolt for rapid prototyping.

Can I map a multi-LLM workflow (GPT + Claude + custom logic)?

Yes—diagram a travel planner: "Flight Search (GPT) runs parallel to Hotel Matcher (Claude), then Itinerary Builder (your code) merges results." FlowZap's workflow view shows parallel branches; sequence mode reveals if Claude's response lags. Edit loops for retries ("if flight unavailable, re-search alternate dates") and conditionals ("if budget tier, skip premium hotels"), syncing changes live across views.

Technical Deep Dives

What is FlowZap Code and why should I care?

FlowZap Code is a lightweight DSL (LANE, NODE, LOOP fragments) that AI generates but you can edit like text—more intuitive than PlantUML, more controllable than black-box tools. For vibe coders, it's pseudo-code that renders as diagrams: embed it in Cursor as comments linking functions to nodes, version-control it in Git, or share it with clients who don't read code. Example: `LOOP [retry up to 3 times] APICall ValidationCheck` becomes a visual retry arrow, no UML knowledge needed.

What is the .fz file format?

The `.fz` file extension is FlowZap's native "Diagrams as Code" format—plain UTF-8 text files containing FlowZap Code. Save your diagrams as `.fz` files to version-control them in Git, share them with teammates, or load them into any FlowZap session. It's human-readable, AI-friendly, and works seamlessly with your existing dev workflow. Click the "Save to .fz file" option in the FlowZap Code modal to download your current diagram.

How do I use FlowZap with Claude, Cursor, or Windsurf (MCP)?

Install the `flowzap-mcp` npm package: add `{"mcpServers": {"flowzap": {"command": "npx", "args": ["-y", "flowzap-mcp"]}}}` to your AI assistant's MCP config. This gives your AI 8 tools: `flowzap_validate` (validate syntax), `flowzap_create_playground` (create shareable playground URLs), `flowzap_get_syntax` (get the DSL docs), `flowzap_export_graph` (parse to a structured JSON graph), `flowzap_artifact_to_diagram` (convert HTTP logs / OpenAPI / code into diagrams), `flowzap_diff` (compare two versions), `flowzap_apply_change` (apply structured patch ops), and `flowzap_compliance_check` (SOC2 / GDPR / PIPL audit). No authentication required—it uses FlowZap's public APIs with built-in rate limiting (30 requests/minute).

What public APIs does FlowZap offer?

FlowZap provides two public API endpoints: `POST /api/validate` validates FlowZap Code syntax (30 requests/min per IP), and `POST /api/playground/create` generates ephemeral playground URLs with 60-minute TTL (5 requests/min, 50/day per IP). Both are free, require no authentication, and are designed for AI assistants and automation tools. Abuse may result in IP blocking.

What's triple view and why is it genius for AI builders?

One FlowZap Code toggles between **three views**: Workflow (horizontal task swimlanes), Sequence (vertical interaction timelines), and Architecture (system diagrams with shapes and connections)—edit in one, update the others instantly. For multi-agent systems, workflow shows parallel GPT/Claude paths; sequence reveals API handoff delays like "Claude takes 3s to respond, killing real-time vibes"; architecture visualizes your system design with components and connections. Spot issues, add async handling, iterate without rebuilding. It's bidirectional analysis for complex builds—like having X-ray vision for your agent logic.

For AI Agents

How do AI agents discover FlowZap?

FlowZap publishes a full set of well-known discovery surfaces so an agent can find and understand it autonomously, with zero human setup. The entry points are the A2A Agent Card at https://flowzap.xyz/.well-known/agent-card.json, the capabilities manifest at https://flowzap.xyz/.well-known/capabilities.json, the LLM context files at https://flowzap.xyz/llms.txt and https://flowzap.xyz/llms-full.txt, and the crawl rules in https://flowzap.xyz/robots.txt. An agent that fetches the Agent Card learns FlowZap's skills, interfaces, and endpoints in a single request, then can immediately start validating and rendering diagrams.

What is the A2A Agent Card?

flowzap.xyz exposes an Agent Card at https://flowzap.xyz/.well-known/agent-card.json following the A2A (Agent-to-Agent) Protocol v1.0 discovery spec. The card declares FlowZap's identity and description, its two interfaces (MCP over Streamable HTTP at /mcp, and HTTP REST at /api), and its 8 skills (the same 8 MCP tools) in the standardized AgentSkill format. Any A2A-compatible agent can read it once and know exactly how to talk to FlowZap.

How can an agent use FlowZap without MCP setup?

Skip MCP entirely and call the public REST endpoints directly—no authentication, and CORS is enabled so browser-based agents work too. POST FlowZap Code to https://flowzap.xyz/api/validate to lint it, or POST to https://flowzap.xyz/api/playground/create to get a shareable, interactive playground URL (60-minute TTL). Example:

curl -X POST https://flowzap.xyz/api/playground/create \
  -H "Content-Type: application/json" \
  -d '{"code":"LANE A\nNODE Start\nNODE End\nStart->End"}'

The response returns a JSON payload containing the playground URL you can hand back to your user.

What is the SOC2/GDPR/PIPL compliance check?

The `flowzap_compliance_check` tool runs an automated architectural review of a FlowZap Code data-flow diagram against the SOC2, GDPR, and PIPL frameworks. An LLM analyzes the diagram—tracing how data flows between lanes and nodes—and returns a Markdown audit report flagging risks, missing safeguards, and framework-specific findings. It is rate-limited to 3 checks per day per client, making it ideal for a quick "is my architecture compliant?" pass before deeper manual review.

What LLM context files does FlowZap provide?

FlowZap ships machine-readable context files so agents can ingest accurate, up-to-date documentation instead of guessing: https://flowzap.xyz/llms.txt (concise site index), https://flowzap.xyz/llms-full.txt (full deep documentation in Markdown), https://flowzap.xyz/.well-known/capabilities.json (structured capabilities manifest), https://flowzap.xyz/docs/mcp.json (MCP server identity, tools, and transport config), and https://flowzap.xyz/openapi.json (OpenAPI spec for the REST endpoints). Fetch these whenever you need ground truth about FlowZap's API surface.

Is FlowZap MCP compatible with Streamable HTTP transport?

Yes. Beyond the STDIO npm package (`flowzap-mcp`), FlowZap exposes a Streamable HTTP MCP endpoint at https://flowzap.xyz/mcp speaking MCP protocol version 2025-06-18 over JSON-RPC 2.0. Any MCP client that supports the Streamable HTTP transport—Claude Desktop's remote mode, custom agents, or HTTP-based orchestrators—can connect directly to that URL without installing anything locally.

Templates & Exports

Where can I find ready-to-use workflow templates?

Visit [flowzap.xyz/templates](https://flowzap.xyz/templates) to browse **250+ production-ready templates**, including **50 Architecture Diagram Templates** (Microservices, Event-Driven, CQRS, Serverless, Saga, Circuit Breaker and more) plus 200+ workflow templates. Filter by domain (e-commerce, healthcare, finance) or use case (onboarding, automation, approval flows). Each template is a downloadable `.fz` file you can load directly into FlowZap, customize, and make your own. Perfect for kickstarting projects or learning FlowZap Code patterns.

Can I export my diagrams to n8n or Make.com?

Yes! FlowZap can export your workflow diagrams to n8n JSON and Make.com blueprint formats. Open the FlowZap Code modal, click the export option for your target platform, and you'll get a JSON file ready to import. Note: FlowZap is a design tool—you'll still need to configure credentials and test in n8n/Make.com, but the structure and flow logic transfers automatically.

Comparisons for AI Builders

FlowZap vs. Mermaid.js for developers?

Mermaid requires manual Markdown (`graph TD; A-->B`); FlowZap's AI writes it for you from "design onboarding flow," then lets you tweak. Mermaid wins for Git embeds; FlowZap wins for speed and **triple views**—generate a sequence diagram without memorizing syntax, perfect for prototyping in Bolt before formalizing in code.

FlowZap vs. Miro for agent workflows?

Miro is collaborative chaos—great for whiteboarding but overkill for structured agent flows. FlowZap's prompt-first generation (23 seconds to **triple diagrams**) beats dragging shapes post-brainstorm, with editable code for version control. Use Miro for team ideation; FlowZap for turning vague vibes into deployable logic maps that Cursor understands.

Why not just use Claude to describe workflows?

Claude outputs text—FlowZap renders interactive visuals with toggleable views, loops, and decision branches that non-coders grasp. Pair them: Claude designs the workflow ("onboarding with retries"), FlowZap diagrams it, you code it. The diagram becomes documentation, training material, and a debugging reference, not buried in a chat log.

Getting Started

How do I start using FlowZap today?

Go to [flowzap.xyz](https://flowzap.xyz), open the AI modal, paste "map a TikTok scheduler agent: trend analysis → caption gen → post scheduler," hit generate, view **triple diagrams**. Test with AI browsers: in Comet's Assistant, say "use FlowZap to map AI agent steps," and it auto-fills the modal. For MCP integration, install `flowzap-mcp` via npx—see the [MCP Quickstart guide](https://flowzap.xyz/blog/introducing-the-flowzap-mcp-server).

Where can I see examples?

Check [flowzap.xyz/templates](https://flowzap.xyz/templates) for **250+ ready-to-use templates**, including **50 Architecture Diagram Templates** (Microservices, Event-Driven, CQRS, Serverless, Saga, Circuit Breaker and more) plus 200+ workflow templates across domains like e-commerce, healthcare, and automation. Watch @JulesFlowZap YouTube for a 23-second prompt-to-diagram demo. Blog posts like "Supercharge Your Vibe Coding Flow" have copy-paste prompts for viral schedulers and recommendation engines.

What's the learning curve?

Zero if you vibe-code—if you can prompt GPT, you can use FlowZap. Paste a description, get a diagram, edit code if you want control (but AI handles 90%). Advanced users tweak LOOP/LANE syntax or use the MCP tools; beginners just click "VIEW DIAGRAM" and iterate visually.

Vibe check: FlowZap is the AI builder's secret weapon for turning scattered prompts into structured systems—register to try it, it's free!