Servidor MCP de FlowZap

Crea diagramas de flujo, de secuencia y de arquitectura utilizando asistentes de IA como Claude, Cursor, Windsurf y otras 8 herramientas compatibles con MCP.

FlowZap es una herramienta de diagramación visual de flujos con un DSL basado en texto llamado FlowZap Code. Este servidor MCP permite que los asistentes de IA creen diagramas por ti.

¿Qué es FlowZap?

FlowZap convierte prompts de texto en diagramas de triple vista (Flujo, Secuencia y Arquitectura) utilizando el DSL FlowZap Code. NO es Mermaid, NO es PlantUML; es un lenguaje de dominio específico único diseñado para la simplicidad y la generación mediante IA.

Datos clave:

• Solo 4 formas: circle, rectangle, diamond, taskbox

• Los atributos de nodo usan dos puntos: label:"Texto"

• Las etiquetas de borde usan el signo igual: [label="Texto"]

• Maneja los conectores: n1.handle(right) -> n2.handle(left)

• La etiqueta de visualización de carril (lane) debe estar en la misma línea que la llave de apertura: laneName { # Etiqueta

• Calidad del diagrama de secuencia: cada solicitud entre carriles necesita un borde de respuesta coincidente antes de la siguiente solicitud importante; define los bordes en orden cronológico; mantén un ritmo estricto de solicitud → respuesta → siguiente solicitud; sin nodos huérfanos.

Instalación

El servidor MCP de FlowZap funciona con cualquier herramienta que admita el Protocolo de Contexto de Modelo (MCP):

Todas las herramientas de codificación compatibles

No compatible: Replit y Lovable.dev solo admiten servidores MCP remotos mediante URL. Usa la API pública en su lugar.

Configuración JSON

Todas las herramientas utilizan el mismo formato de configuración JSON:

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

Usuarios de Windows: Si las herramientas no aparecen, usa la ruta absoluta:

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

Encuentra tu ruta de npx con: where.exe npx

Herramientas disponibles

Herramientas principales

Herramientas enfocadas en agentes

Ejemplos de uso

Creación básica de diagramas

Pide a tu asistente de IA:

• "Genera un diagrama de secuencia del flujo de inicio de sesión actual implementado en esta aplicación"

• "Crea un diagrama de flujo para un sistema de procesamiento de pedidos"

• "Crea un diagrama de arquitectura para una puerta de enlace de API de microservicios"

• "Haz un diagrama de flujo que muestre el proceso de registro de usuario"

• "Diagrama un pipeline de CI/CD con etapas de compilación, prueba y despliegue"

Flujos de trabajo enfocados en agentes

Analizar registros HTTP en diagramas:

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

El agente utiliza flowzap_artifact_to_diagram con artifactType: "http_logs".

Analizar la estructura del diagrama:

"Which steps in this workflow touch the database?"

El agente utiliza flowzap_export_graph para obtener un grafo JSON y luego lo consulta.

Mostrar qué cambió:

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

El agente utiliza flowzap_diff para comparar el código antiguo y el nuevo.

Actualizaciones incrementales seguras:

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

El agente utiliza flowzap_apply_change con un parche estructurado en lugar de regenerar.

El asistente hará lo siguiente:

1. Generar FlowZap Code basado en tu descripción

2. Validar el código

3. Crear una URL de playground con la vista adecuada (flujo, secuencia o arquitectura) para ver y compartir

Ejemplo de FlowZap Code

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

Seguridad

• No requiere autenticación - Utiliza solo APIs públicas de FlowZap

• Sin acceso a datos de usuario - No puede leer tus diagramas o cuenta

• Se ejecuta localmente - El servidor MCP se ejecuta en tu máquina

• Protegido contra SSRF - Solo se conecta a flowzap.xyz

• Límite de tasa - 30 solicitudes/minuto del lado del cliente

• Validación de entrada - Tamaño máximo de código de 50KB

Habilidad de agente (skills.sh)

Instala la habilidad de FlowZap para más de 40 agentes de codificación compatibles a través de skills.sh:

npx skills add flowzap-xyz/flowzap-mcp

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

• Fuente de la habilidad: skills/flowzap-diagrams/

• Compatible con: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, GitHub Copilot, Cline, Roo Code, Augment, OpenCode y más.

Enlaces

• Sitio web de FlowZap

• Documentación de FlowZap Code

• Blog de FlowZap MCP

• Contexto LLM

• Biblioteca de plantillas

• Paquete npm

• Repositorio de GitHub

Licencia

MIT