MCP

Renderizar 18 tipos de diagramas deterministas desde typed JSON

Para quien quiere que un modelo emita SVG/PNG desde JSON y no puede aceptar un DSL ni un navegador headless; sin instalación aparte, y el primer intento debe renderizar un flowchart en SVG.

Official source · Glyphic

Install

npx -y @glyphicjs/mcp-server

Para quién

Para quien quiere que un modelo produzca diagramas desde typed JSON y no puede aceptar un DSL ni un navegador headless. La redacción oficial es: el modelo describe el diagrama, Glyphic lo renderiza, deterministic SVG & PNG, 18 types, validated before it draws, no DSL and no headless browser.

Es diagram infrastructure que puedes poseer y seguir construyendo, no un alojamiento Mermaid en línea. La salida puede ser SVG, PNG o React Flow JSON.

Página oficial:

https://github.com/MS-Teja/Glyphic

Completar el primer intento en 3 minutos

Usa solo la ruta MCP oficial: stdio via npx, no install.

claude mcp add glyphic -- npx -y @glyphicjs/mcp-server

La configuración equivalente tiene command igual a npx, y args igual a -y y @glyphicjs/mcp-server. No busques un instalador que no aparece. Lo oficial también escribe la instalación de biblioteca npm install @glyphicjs/core @glyphicjs/schema; en el primer intento no cambies a llamadas de biblioteca.

Requisitos previos: esta máquina puede ejecutar npx. Prepara typed JSON que cumpla el “single validated schema”, y elige primero flowchart, el tipo que nombran las notas oficiales. No hay tabla de campos JSON; no inventes claves que falten. Tampoco inventes nombres de funciones de herramientas MCP.

Ubicación de la configuración: claude mcp add o mcpServers.glyphic. Las notas de instalación oficiales solo mencionan Claude Code; no nombran otros productos cliente ni rutas de archivos de configuración.

Primera llamada: haz que el servidor renderice este flowchart y pide solo SVG. Señal de éxito: devuelve SVG validado (lo oficial indica accessible: role="img" + <title>), y no se lanzó ningún navegador.

No interpretes «navegador headless» como riesgo cero. El renderizado sigue ocurriendo en esta máquina, y el PNG pasa por @resvg/resvg-js (Rust). La descripción JSON entra en el proceso de renderizado.

Casos de uso

Caso 1: primero una figura vectorial escalable. Envía el typed JSON de un flowchart y toma el SVG. Lo oficial dice pure, scalable vector markup. No se da un tope de nodos.

Caso 2: el mismo payload u otro tipo necesita una imagen ráster, o datos de lienzo interactivo. Toma PNG (high-resolution raster, rendered natively via Rust), o React Flow JSON (nodes/edges mapped for an interactive React Flow canvas). Los 18 tipos también incluyen architecture, sequence, ERD, UML class, state machines, Gantt, timelines, Sankey, Git trees, mindmaps, pie, quadrant, user journeys, Kanban, C4, treemaps y freeform canvas. No trates como entrada de retorno nombres de funciones de biblioteca que no aparecen.

Límites

Límites de instalación: la ruta MCP principal es npx -y @glyphicjs/mcp-server; la ruta de biblioteca es otro conjunto de paquetes npm. No la mezcles con el primer intento.

Límites de capacidad: 18 tipos, un schema, tres salidas. Lo oficial no menciona alojamiento remoto, secretos ni vista previa en el navegador. No asumas que hay tipos de diagrama no listados disponibles.