MCP

Renderizar 18 tipos de diagramas determinísticos a partir de typed JSON

Para quem quer que um modelo emita SVG/PNG a partir de JSON e não pode aceitar DSL nem navegador headless; sem instalação separada, e a primeira tentativa deve renderizar um flowchart em SVG.

Official source · Glyphic

Install

npx -y @glyphicjs/mcp-server

Para quem

Para quem quer que um modelo produza diagramas a partir de typed JSON e não pode aceitar DSL nem navegador headless. A redação oficial é: o modelo descreve o diagrama, o Glyphic renderiza, deterministic SVG & PNG, 18 types, validated before it draws, no DSL and no headless browser.

É diagram infrastructure que você pode possuir e continuar construindo, não uma hospedagem Mermaid online. A saída pode ser SVG, PNG ou React Flow JSON.

Página oficial:

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

Concluir a primeira tentativa em 3 minutos

Use só o caminho MCP oficial: stdio via npx, no install.

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

A configuração equivalente tem command igual a npx, e args igual a -y e @glyphicjs/mcp-server. Não procure um instalador que não aparece. O texto oficial também lista a instalação de biblioteca npm install @glyphicjs/core @glyphicjs/schema; na primeira tentativa, não mude para chamadas de biblioteca.

Pré-requisito: esta máquina consegue executar npx. Prepare typed JSON que atenda ao “single validated schema”, e escolha primeiro flowchart, o tipo nomeado oficialmente. Não há tabela de campos JSON; não invente chaves em falta. Também não invente nomes de funções de ferramentas MCP.

Local da configuração: claude mcp add ou mcpServers.glyphic. As notas oficiais de instalação só mencionam Claude Code; não nomeiam outros produtos cliente nem caminhos de ficheiros de configuração.

Primeira chamada: peça ao servidor para renderizar este flowchart e peça só SVG. Sinal de sucesso: devolve SVG validado (o texto oficial diz accessible: role="img" + <title>), e nenhum navegador foi iniciado.

Não leia “navegador headless” como risco zero. A renderização ainda ocorre nesta máquina, e o PNG passa por @resvg/resvg-js (Rust). A descrição JSON entra no processo de renderização.

Casos de uso

Caso 1: primeiro um diagrama vetorial escalável. Envie o typed JSON de um flowchart e obtenha SVG. O texto oficial diz pure, scalable vector markup. Não é dado um teto de nós.

Caso 2: o mesmo payload ou outro tipo precisa de imagem raster, ou de dados de tela interativa. Obtenha PNG (high-resolution raster, rendered natively via Rust), ou React Flow JSON (nodes/edges mapped for an interactive React Flow canvas). Os 18 tipos também incluem architecture, sequence, ERD, UML class, state machines, Gantt, timelines, Sankey, Git trees, mindmaps, pie, quadrant, user journeys, Kanban, C4, treemaps e freeform canvas. Não trate nomes de funções de biblioteca que não aparecem como ponto de entrada de retorno.

Limites

Limites de instalação: o caminho MCP principal é npx -y @glyphicjs/mcp-server; o caminho de biblioteca é outro conjunto de pacotes npm. Não misture com a primeira tentativa.

Limites de capacidade: 18 tipos, um schema, três saídas. O texto oficial não menciona hospedagem remota, segredos nem pré-visualização no navegador. Não assuma que tipos de diagrama não listados estão disponíveis.