MCP

Render 18 deterministic diagram types from typed JSON

For anyone who wants a model to emit SVG/PNG from JSON and cannot accept a DSL or a headless browser; no separate install, and the first run should render one flowchart as SVG.

Official source · Glyphic

Install

npx -y @glyphicjs/mcp-server

Who it is for

For anyone who wants a model to produce diagrams from typed JSON and cannot accept a DSL or a headless browser. The official wording is: the model describes the diagram, Glyphic renders it, deterministic SVG & PNG, 18 types, validated before it draws, no DSL and no headless browser.

It is diagram infrastructure you can own and keep building, not hosted online Mermaid. Output can be SVG, PNG, or React Flow JSON.

Official page:

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

First try in 3 minutes

Use only the official MCP path: stdio via npx, no install.

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

The equivalent config sets command to npx, and args to -y and @glyphicjs/mcp-server. Do not hunt for an installer that never appears. Official docs also list the library install npm install @glyphicjs/core @glyphicjs/schema; do not switch to library calls on the first try.

Prerequisites: this machine can run npx. Prepare typed JSON that matches the “single validated schema”, and pick flowchart first because that is the type official docs name. Official docs give no JSON field table; do not invent missing keys. Do not invent MCP tool function names either.

Config location: claude mcp add or mcpServers.glyphic. Official install notes mention only Claude Code; they do not name other client products or config file paths.

First call: have the server render this flowchart, and request SVG only. Success signal: it returns validated SVG (official docs say accessible: role="img" + <title>), and no browser was launched.

Do not treat “headless browser” as zero risk. Rendering still happens on this machine, and PNG goes through @resvg/resvg-js (Rust). The JSON description enters the render process.

Usage examples

Example 1: produce a scalable vector diagram first. Submit flowchart typed JSON and take SVG. Official docs say pure, scalable vector markup. No node-count cap is given.

Example 2: the same payload or another type needs a raster image, or interactive canvas data. Take PNG (high-resolution raster, rendered natively via Rust), or take React Flow JSON (nodes/edges mapped for an interactive React Flow canvas). The 18 types also include architecture, sequence, ERD, UML class, state machines, Gantt, timelines, Sankey, Git trees, mindmaps, pie, quadrant, user journeys, Kanban, C4, treemaps, and freeform canvas. Do not treat library function names that never appear as return entry points.

Limits

Install limits: the main MCP path is npx -y @glyphicjs/mcp-server; the library path is a different set of npm packages. Do not mix it with the first try.

Capability limits: 18 types, one schema, three outputs. Official docs do not mention remote hosting, secrets, or a browser preview. Do not assume unlisted diagram types are available.