FlowZap MCP-Server

Erstellen Sie Workflow-, Sequenz- und Architekturdiagramme mit KI-Assistenten wie Claude, Cursor, Windsurf und 8 weiteren MCP-kompatiblen Tools.

FlowZap ist ein visuelles Workflow-Diagramm-Tool mit einer textbasierten DSL namens FlowZap Code. Dieser MCP-Server ermöglicht es KI-Assistenten, Diagramme für Sie zu erstellen.

Was ist FlowZap?

FlowZap verwandelt Text-Prompts in Drei-Ansichten-Diagramme (Workflow, Sequenz & Architektur) unter Verwendung der FlowZap Code DSL. Es ist NICHT Mermaid, NICHT PlantUML – es ist eine einzigartige domänenspezifische Sprache, die auf Einfachheit und KI-Generierung ausgelegt ist.

Wichtige Fakten:

• Nur 4 Formen: circle, rectangle, diamond, taskbox

• Knotenattribute verwenden Doppelpunkte: label:"Text"

• Kantenbeschriftungen verwenden Gleichheitszeichen: [label="Text"]

• Handles erforderlich: n1.handle(right) -> n2.handle(left)

• Das Label für die Lane-Anzeige muss in derselben Zeile wie die öffnende Klammer stehen: laneName { # Label

• Qualität von Sequenzdiagrammen: Jede Cross-Lane-Anfrage benötigt eine passende Antwortkante vor der nächsten größeren Anfrage; definieren Sie Kanten in chronologischer Reihenfolge; halten Sie einen strikten Rhythmus von Anfrage → Antwort → nächste Anfrage ein; keine verwaisten Knoten

Related MCP server: Draw.io MCP Server

Installation

Der FlowZap MCP-Server funktioniert mit jedem Tool, das das Model Context Protocol (MCP) unterstützt:

Alle kompatiblen Coding-Tools

Nicht kompatibel: Replit und Lovable.dev unterstützen nur Remote-MCP-Server über URL. Verwenden Sie stattdessen die Public API.

JSON-Konfiguration

Alle Tools verwenden dasselbe JSON-Konfigurationsformat:

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

Windows-Benutzer: Wenn Tools nicht erscheinen, verwenden Sie den absoluten Pfad:

"command": "C:\\Program Files\\nodejs\\npx.cmd"

Finden Sie Ihren npx-Pfad mit: where.exe npx

Verfügbare Tools

Core-Tools

Agenten-fokussierte Tools

Anwendungsbeispiele

Grundlegende Diagrammerstellung

Fragen Sie Ihren KI-Assistenten:

• "Generiere ein Sequenzdiagramm des aktuellen Anmelde-Flows, der in dieser App implementiert ist"

• "Erstelle ein Workflow-Diagramm für ein Auftragsabwicklungssystem"

• "Erstelle ein Architekturdiagramm für ein Microservices-API-Gateway"

• "Erstelle ein Flussdiagramm, das den Benutzerregistrierungs-Flow zeigt"

• "Diagrammiere eine CI/CD-Pipeline mit Build-, Test- und Deploy-Stufen"

Agenten-fokussierte Workflows

HTTP-Logs in Diagramme parsen:

"Here are my nginx access logs. Create a sequence diagram showing the request flow."

Der Agent verwendet flowzap_artifact_to_diagram mit artifactType: "http_logs".

Diagrammstruktur analysieren:

"Which steps in this workflow touch the database?"

Der Agent verwendet flowzap_export_graph, um einen JSON-Graphen zu erhalten, und fragt diesen dann ab.

Zeigen, was sich geändert hat:

"I updated the workflow. What's different from the previous version?"

Der Agent verwendet flowzap_diff, um alten und neuen Code zu vergleichen.

Sichere inkrementelle Updates:

"Add a logging step after the API call in this diagram."

Der Agent verwendet flowzap_apply_change mit einem strukturierten Patch anstelle einer Neugenerierung.

Der Assistent wird:

1. FlowZap Code basierend auf Ihrer Beschreibung generieren

2. Den Code validieren

3. Eine Playground-URL mit der entsprechenden Ansicht (Workflow, Sequenz oder Architektur) erstellen, um sie anzusehen und zu teilen

FlowZap Code-Beispiel

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"]
}

Sicherheit

• Keine Authentifizierung erforderlich - Verwendet nur öffentliche FlowZap-APIs

• Kein Zugriff auf Benutzerdaten - Kann Ihre Diagramme oder Ihr Konto nicht lesen

• Läuft lokal - Der MCP-Server läuft auf Ihrem Computer

• SSRF-geschützt - Verbindet sich nur mit flowzap.xyz

• Ratenbegrenzt - 30 Anfragen/Minute clientseitig

• Eingabevalidierung - 50 KB maximale Codegröße

Agent Skill (skills.sh)

Installieren Sie den FlowZap-Skill für über 40 kompatible Coding-Agenten über skills.sh:

npx skills add flowzap-xyz/flowzap-mcp

• skills.sh-Auflistung: https://skills.sh/flowzap-xyz/flowzap-mcp/flowzap-diagrams

• Skill-Quelle: skills/flowzap-diagrams/

• Kompatibel mit: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, GitHub Copilot, Cline, Roo Code, Augment, OpenCode und mehr.

Links

• FlowZap Website

• FlowZap Code Dokumentation

• FlowZap MCP Blog

• LLM Context

• Vorlagen-Bibliothek

• npm Paket

• GitHub Repository

Lizenz

MIT

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers

Tools

• flowzap_apply_changeA
• flowzap_artifact_to_diagramB
• flowzap_create_playgroundA
• flowzap_diffA
• flowzap_export_graphA
• flowzap_get_syntaxB
• flowzap_validateA