Bienvenue sur FlowZap, l'application pour créer des diagrammes avec Rapidité, Clarté et Contrôle.

Présentation du serveur MCP FlowZap : la voie la plus rapide entre un agent LLM et des diagrammes interactifs

07/09/2025

Tags: MCP, Agents, npm, API, Claude, Cursor, Windsurf

Jules Kovac

Jules Kovac

Business Analyst, Founder

Présentation du serveur MCP FlowZap : la voie la plus rapide entre un agent LLM et des diagrammes interactifs

Mise à jour janvier 2026 : Nous avons simplifié l'intégration MCP ! Le nouveau package npm flowzap-mcp remplace l'ancien serveur MCP complexe. Installation en une commande, aucune authentification requise.

 

🚀 Nouvelle méthode recommandée : Package npm

 

Pour Claude Desktop

Ajoutez à votre claude_desktop_config.json :

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

Emplacements du fichier de config :

  • macOS : ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows : %APPDATA%\Claude\claude_desktop_config.json

 

Pour Cursor

Ajoutez la même configuration dans les paramètres MCP de Cursor.

 

Pour Windsurf IDE

Ajoutez à votre ~/.codeium/windsurf/mcp_config.json :

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

Utilisateurs Windows : Si les outils n'apparaissent pas dans Cascade, utilisez le chemin absolu :

{
  "mcpServers": {
    "flowzap": {
      "command": "C:\\Program Files\\nodejs\\npx.cmd",
      "args": ["-y", "flowzap-mcp"]
    }
  }
}

Trouvez votre chemin npx avec : where.exe npx

 

Tous les outils de developpement compatibles

Le serveur MCP FlowZap fonctionne avec tout outil supportant le Model Context Protocol (MCP). Voici la liste complete :

| Outil | Comment configurer | |-------|-------------------| | Claude Desktop | Ajouter a claude_desktop_config.json :
macOS : ~/Library/Application Support/Claude/claude_desktop_config.json
Windows : %APPDATA%\Claude\claude_desktop_config.json | | Claude Code | Executer : claude mcp add --transport stdio flowzap -- npx -y flowzap-mcp
Ou ajouter a .mcp.json a la racine du projet. | | Cursor | Parametres → Fonctionnalites → Serveurs MCP → Ajouter un serveur. Utiliser la meme config JSON. | | Windsurf IDE | Ajouter a ~/.codeium/windsurf/mcp_config.json | | OpenAI Codex | Ajouter a ~/.codex/config.toml :
[mcp_servers.flowzap]
command = "npx"
args = ["-y", "flowzap-mcp"]
Ou executer : codex mcp add flowzap -- npx -y flowzap-mcp | | Warp Terminal | Parametres → Serveurs MCP → Cliquer "+ Ajouter" → Coller la config JSON. | | Zed Editor | Ajouter a settings.json :
{"context_servers": {"flowzap": {"command": "npx", "args": ["-y", "flowzap-mcp"]}}} | | Cline (VS Code) | Barre laterale Cline → Icone Serveurs MCP → Modifier cline_mcp_settings.json | | Roo Code (VS Code) | Ajouter a .roo/mcp.json dans le projet ou les parametres globaux. | | Continue.dev | Creer .continue/mcpServers/flowzap.yaml avec :
name: FlowZap
mcpServers:
- name: flowzap
command: npx
args: ["-y", "flowzap-mcp"] | | Sourcegraph Cody | Ajouter a settings.json VS Code via la configuration openctx.providers. |

Non compatible : Replit et Lovable.dev supportent uniquement les serveurs MCP distants via URL. Ils ne peuvent pas utiliser le package npm FlowZap MCP directement. Utilisez l'API publique a la place.

 

Pour Comet Browser / Autres assistants IA

Comet et les navigateurs IA similaires ne supportent pas les serveurs MCP personnalises directement. Ils peuvent :

  1. Générer du FlowZap Code en utilisant la documentation de syntaxe sur flowzap.xyz/flowzap-code
  2. Créer des URLs playground via l'API publique :
    curl -X POST https://flowzap.xyz/api/playground/create \
      -H "Content-Type: application/json" \
      -d '{"code": "sales { n1: circle label:\"Start\" }"}'
    

 

Outils disponibles (v1.2.0)

 

Outils de base

| Outil | Description | |-------|-------------| | flowzap_validate | Valider la syntaxe FlowZap Code | | flowzap_create_playground | Créer une URL de diagramme partageable | | flowzap_get_syntax | Obtenir la documentation de syntaxe |

 

Outils orientés agents (v1.1.0+)

| Outil | Description | |-------|-------------| | flowzap_export_graph | Exporter le FlowZap Code en graphe JSON structuré (lanes, nœuds, arêtes) pour le raisonnement IA | | flowzap_artifact_to_diagram | Parser des logs HTTP, specs OpenAPI ou code en diagrammes FlowZap (crée automatiquement l'URL playground) | | flowzap_diff | Comparer deux versions de FlowZap Code et obtenir un diff structuré | | flowzap_apply_change | Appliquer des opérations de patch structurées (insert/remove/update nœuds/arêtes) - crée automatiquement l'URL playground |

 

Exemples d'utilisation

Demandez à votre assistant IA :

  • « Crée un diagramme de workflow pour un système de traitement de commandes »
  • « Fais un flowchart montrant le flux d'inscription utilisateur »
  • « Diagramme un pipeline CI/CD avec les étapes build, test et deploy »

L'assistant va :

  1. Générer du FlowZap Code basé sur votre description
  2. Valider le code
  3. Créer une URL playground que vous pouvez voir et partager

 

Sécurité

  • Aucune authentification requise — Utilise uniquement les APIs publiques FlowZap
  • Aucun accès aux données utilisateur — Ne peut pas lire vos diagrammes ou votre compte
  • Exécution locale — Le serveur MCP tourne sur votre machine
  • Protection SSRF — Se connecte uniquement à flowzap.xyz

 

Endpoints API publics

Ces endpoints sont disponibles pour les intégrations externes (sans authentification) :

| Endpoint | Méthode | Limite | Description | |----------|---------|--------|-------------| | /api/validate | POST | 30/min | Valider la syntaxe FlowZap Code | | /api/playground/create | POST | 5/min, 50/jour | Créer une URL playground éphémère (TTL 15 min) |

Note : La génération de code par IA (/api/ai-generate) nécessite une authentification et est réservée aux utilisateurs FlowZap connectés.

 

Liens

 

Ancienne méthode (Dépréciée)

⚠️ Les endpoints MCP distants ci-dessous sont dépréciés. Utilisez le package npm ci-dessus.

FlowZap MCP : le pont ouvert et « agent‑friendly » vers des diagrammes métier réels.

Retour à tous les articles du blogue