glyphic — Claude Code MCP server: diagrams from JSON
Turns typed JSON into SVG, PNG or React Flow JSON. Useful when an agent should describe a diagram instead of placing coordinates.
claude mcp add glyphic -- npx -y @glyphicjs/mcp-serverWhat glyphic does
Glyphic takes a strict JSON document — arrays of nodes and edges, or entities, or commits — and returns a finished diagram. The schema is Zod-based, so bad model output comes back as a precise error before anything renders. Generate, validate, fix, render.
Eighteen types are covered: architecture, sequence, ERD, UML class, state machines, flowcharts, Gantt, timelines, Sankey, Git trees, mindmaps, pie, quadrant, user journeys, Kanban, C4, treemaps and a freeform canvas. Layout comes from elkjs and d3-hierarchy; PNG rasterisation is handled by Rust through @resvg/resvg-js. No DOM, no headless browser, no Chromium to install — it runs as an ordinary Node dependency in a CI job, a Lambda or a container.
It speaks stdio over npx, so there is nothing to install globally. Claude needs one command; other clients get an MCP config entry. Teams that want their own endpoint can self-host the same engine as an HTTP service rather than shipping the library to every client.
What it helps with
- generate an ERD for a blog schema from table descriptions
- draw a service architecture without hand-placing coordinates
- produce diagram PNGs in CI without Chromium
- emit interactive React Flow JSON for a canvas
- re-render a diagram after a JSON edit without breaking layout
Example prompts for the agent
- Render this JSON as an architecture diagram and write
diagram.png - Turn the steps below into a sequence diagram
How to install glyphic
Platform CLI
claude mcp add glyphic -- npx -y @glyphicjs/mcp-serverPlatform CLI
codex mcp add glyphic -- npx -y @glyphicjs/mcp-serverConfig file
{
"mcpServers": {
"glyphic": {
"command": "npx",
"args": [
"-y",
"@glyphicjs/mcp-server"
]
}
}
}Config file
{
"servers": {
"glyphic": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@glyphicjs/mcp-server"
]
}
}
}Platform CLI
gemini mcp add glyphic npx -y @glyphicjs/mcp-serverStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about glyphic
How do I install glyphic in Claude Code?
Run claude mcp add glyphic -- npx -y @glyphicjs/mcp-server. The server starts over stdio via npx, so no separate install is required.
What does glyphic do?
It accepts typed JSON with nodes and edges and returns SVG, PNG or React Flow JSON. The schema is validated before rendering, so mistakes in model output surface early.
Which diagram types does glyphic support?
Eighteen: architecture, sequence, ERD, UML class, state machines, flowcharts, Gantt, timelines, Sankey, Git trees, mindmaps, pie, quadrant, user journeys, Kanban, C4, treemaps and a freeform canvas.
