diagram-mcp

Servidor MCP que convierte texto de diagramas como código en archivos PNG en tu disco. Sin navegador, sin red, sin servicio externo. Útil para generar diagramas de flujo para incluir en documentación, tickets o READMEs.

Herramientas

• render_diagram: convierte código a un PNG y devuelve la ruta del archivo

• preview_diagram: dibuja el diagrama como arte de texto, directamente en la conversación, sin escribir ningún archivo

• validate_diagram: analiza e informa de errores con números de línea, sin escribir nada

• diagram_syntax: la referencia del lenguaje

Related MCP server: Vizdown-MCP

Instalación

Requiere Node 20.12+.

git clone https://github.com/JVmano/diagram-mcp.git
cd diagram-mcp
npm install
npm run build

Luego, regístralo con Claude Code:

claude mcp add diagram --scope user \
  --env DIAGRAM_MCP_OUTPUT_DIR=$HOME/Documents/diagram-renders \
  -- node "$(pwd)/dist/index.js"

O añádelo a mano a .mcp.json / tu configuración de usuario:

{
  "mcpServers": {
    "diagram": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/diagram-mcp/dist/index.js"],
      "env": { "DIAGRAM_MCP_OUTPUT_DIR": "/absolute/path/to/renders" }
    }
  }
}

Reinicia la sesión y pide un diagrama. Vuelve a ejecutar npm run build después de traer los cambios.

Lenguaje

title "Reward approval flow"
direction TB

node event "Conversion recorded" shape=rounded
node auto "Auto-approve?" shape=diamond size=200x100
node queue "Manual review queue"

event -> auto
auto -> queue "no"

Formas: rect, rounded, ellipse, diamond, hexagon. Conexiones: from -> to ["label"] [style=solid|dashed]. Las posiciones con at=x,y son opcionales. Si las omites, la disposición coloca las formas. Llama a diagram_syntax para la referencia completa.

Configuración

Todo es opcional y todo tiene valores por defecto. Consulta .env.example. Los renders se guardan en DIAGRAM_MCP_OUTPUT_DIR (por defecto ~/Documents/diagram-renders). Una outputPath explícita debe permanecer dentro de ese directorio o del directorio de trabajo, a menos que DIAGRAM_MCP_ALLOW_ANY_OUTPUT_PATH=true.

Desarrollo

npm test          # unit tests
npm run test:e2e  # builds, then drives the server over stdio
npm run verify    # typecheck, test, build, e2e

El analizador, la disposición y la generación de SVG en src/core se comparten con un proyecto local de editor de diagramas; npm run check:sync los compara con él cuando está clonado en el directorio de al lado.

Licencia

MIT