How do I install Glyphic?

Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does Glyphic need an API key?

No required environment variable is listed on this record.

What transport does Glyphic use?

Glyphic runs locally over stdio.

When was Glyphic last checked?

Last checked 2026-11-09. Generate 18 diagram types from structured JSON natively. Built for LLMs and agents.

Glyphic MCP server

Power your agent

Add this server

The publisher's own command. Not a PlugMCP endpoint.

Add to Cursor Add to VS Code Run on PlugMCP

Host a copy with our keys and logs.

Local command

npx -y @glyphicjs/[email protected]

Claude Code has no install link for a local command. Copy the command below and run it in a terminal.

shClaude Code

1claude mcp add io.github.ms-teja-glyphic -- npx -y @glyphicjs/mcp-server@1.0.2

Run in a terminal.

jsonClaude Desktop

1{2  "mcpServers": {3    "io.github.ms-teja-glyphic": {4      "command": "npx",5      "args": [6        "-y",7        "@glyphicjs/[email protected]"8      ]9    }10  }11}

claude_desktop_config.json

Local · npmPublisher installStep-by-step: add this in Claude

Remote URL or a command on your machine? How the two installs differ

Run on PlugMCP

Host a copy with our keys and logs.

A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.

Launch

Server facts

Local

Transport: stdio
Version: 1.0.2
Last checked

Tools

No tool list yet. Remote servers get one after the first health check.

FAQ

Questions

Quick Start

Glyphic gives an LLM structured data in and hands you a finished diagram out. Use it three ways.

1. MCP server — add to your AI agent in 30 seconds

It runs over stdio via npx, no install:

# Claude Code
claude mcp add glyphic -- npx -y @glyphicjs/mcp-server

For Cursor, Claude Desktop, VS Code, Windsurf, and Antigravity, add it to your client's MCP config:

{
  "mcpServers": {
    "glyphic": { "command": "npx", "args": ["-y", "@glyphicjs/mcp-server"] }
  }
}

Then just ask: "Draw an ERD for a blog with users, posts, and comments." The model emits the JSON, calls the tool, and the rendered diagram appears inline. See the MCP setup guide.

2. Library

npm install @glyphicjs/core @glyphicjs/schema

import { processDiagram } from "@glyphicjs/core";
import { writeFileSync } from "node:fs";

const result = await processDiagram({
  type: "architecture",
  title: "Web App",
  nodes: [
    { id: "web", label: "Web App", shape: "rounded", icon: "fab-react" },
    { id: "api", label: "API", shape: "hexagon", icon: "fas-bolt" },
    { id: "db", label: "PostgreSQL", shape: "database", icon: "fas-database" }
  ],
  edges: [
    { source: "web", target: "api", label: "REST" },
    { source: "api", target: "db", label: "SQL" }
  ]
});

writeFileSync("diagram.png", result.png);   // Buffer (high-res PNG)
writeFileSync("diagram.svg", result.svg);   // string (scalable SVG)
console.log(result.reactFlow);              // interactive React Flow JSON

See the Core API reference.

3. Self-hosted HTTP API

Need it behind your own endpoint? Glyphic can be self-hosted as an HTTP service that wraps the exact same engine — same schema in, same SVG/PNG/React Flow out — so your product or platform can generate diagrams without shipping the library to every client.

Who it's for

Agent & LLM-app builders — expose diagram generation as a single tool call and let the model describe it, not draw it.
Platform teams — embed diagram generation directly in your product behind one validated schema.
CI & docs pipelines — deterministic, byte-identical, versionable output with no Chromium to install or babysit.
React developers — get interactive React Flow JSON out of the box, not just static images.

What

Glyphic is infrastructure for generating diagrams from structured data. You give it a strict, semantic JSON document — arrays of nodes and edges, or entities, or commits — and it returns a polished diagram as:

SVG — pure, scalable vector markup (accessible: role="img" + <title>).
PNG — high-resolution raster, rendered natively via Rust (@resvg/resvg-js).
React Flow JSON — nodes/edges mapped for an interactive React Flow canvas.

It supports 18 diagram types (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) behind a single validated schema.

Why

Yes — a modern LLM can draw a clean six-box flowchart as raw SVG. Go ask one; for a single throwaway diagram, that's the right tool. This isn't a bet that models "can't draw."

The problem is that a drawn SVG is a dead picture. It comes out different every generation, it falls apart exactly where real diagrams live — many nodes and later edits — and to change one box you regenerate the whole thing and it drifts. Glyphic treats the diagram as data: your model describes what it means as typed JSON, and a real engine renders it. Three reasons that holds up no matter how good the model gets:

A machine-authoring contract, not a DSL. The input is a strict Zod schema. Malformed model output comes back as a precise, fixable error before anything renders — so generate → validate → fix → render loops are trivial. DSLs like Mermaid parse-or-crash on a single typo (-->|label|).
Deployable as infrastructure. Layout is computed by real graph engines (elkjs, d3-hierarchy/d3-sankey) and SVG is rasterized to PNG by Rust (@resvg/resvg-js) — no DOM, no headless browser, no Chromium. It runs in a CI job, a Lambda, an agent loop, or a Docker container as a normal Node dependency. This stays true regardless of model capability.
Cheap and intact at scale. Hand-drawing a large diagram means emitting thousands of coordinate tokens — slow, costly, and liable to blow the model's output limit and truncate into a broken render. Your model emits compact semantic JSON instead; the heavy geometry is generated deterministically.

And because a real engine owns the layout, the diagram scales and stays editable: it nests clusters and routes edges around obstacles where hand-placed SVG turns into diagonal lines cutting through boxes, its output is byte-identical (versionable, snapshot-testable), and the JSON stays a source of truth you can diff and re-render — not a house of cards of absolute coordinates.

How it compares

Feature	Glyphic	Claude Artifacts	Mermaid	D2
Input format	Typed JSON (Zod schema)	Natural language → SVG	Text DSL	Text DSL
Renders without a browser	✅ Rust (resvg)	N/A (cloud-only)	❌ Puppeteer/Chromium	✅ Go binary
Model-agnostic	✅ Any JSON-capable LLM	❌ Claude only	✅	✅
Schema validation	✅ Zod + fixable errors	❌	❌ Parse-or-crash	❌
Native MCP server	✅ `@glyphicjs/mcp-server`	N/A (built-in to Claude)	❌	❌
React Flow output	✅ Interactive nodes/edges	❌	❌	❌
Deterministic output	✅ Byte-identical	❌	⚠️ Mostly	✅
License	FSL → Apache-2.0	Proprietary	MIT	MPL-2.0

See the full comparison + benchmarks.

Features

🧩 18 diagram types behind one validated schema — see them all.
🎨 Theming — built-in presets ("theme": "dark", plus light / pastel / mono) or a full custom palette. Theming guide.
🖌️ Styles — visual personality presets: "style": "compact" (default), clean, minimal, or hand-drawn sketch. Styles guide.
📺 Aspect-ratio framing — auto-fits diagrams to clean 16:9 / 9:16 frames (or set "aspectRatio"), by padding — never cropping.
🔤 Fonts — any Google Font ("theme": { "fontFamily": "Outfit" }) or your own .ttf.
🖼️ Native icons — drop in any FontAwesome icon ("icon": "fas-database", "icon": "fab-aws") or your own SVG via customIcons.
📐 Real layout — elkjs + d3 compute nesting (VPCs/clusters), crow's-foot/UML markers, and edge routing around obstacles — staying clean at the node counts where hand-placed SVG tangles into diagonals through boxes.
⚡ Native PNG — Rust rasterization, no headless browser.
♿ Accessible output — every SVG ships with role="img" and a <title>.
🔒 Safe by construction — strict input validation, SVG output escaping/sanitization, and size limits to resist malicious input.
🧪 Multiple outputs — SVG, high-res PNG, and React Flow JSON from one call.

Supported Diagrams

18 first-class types — explore them in the Examples Gallery and the Diagram Types reference.


Architecture (nested VPCs/clusters)	C4 context	Flowchart
Sequence	State machine	ERD (crow's-foot)
UML Class	Mindmap	Gantt
Timeline	User Journey	Kanban
Pie	Quadrant	Sankey
Git graph	Treemap	Canvas (freeform SVG)

Monorepo architecture

A pnpm + Turborepo monorepo of three open-source libraries.

Package	What it is
`@glyphicjs/schema`	The pure Zod validation layer — the LLM-facing contract. Validate model output before rendering.
`@glyphicjs/core`	The engine: layout adapters, scene graph, SVG rendering, and rasterization.
`@glyphicjs/mcp-server`	Official Model Context Protocol server — exposes Glyphic as a native tool to Claude Desktop / Cursor.

Adding a new diagram type is one entry in packages/core/src/registry.ts plus a schema and a layout adapter — see CONTRIBUTING.

Documentation

📚 Documentation home
🖼️ Examples gallery — every type, rendered
🧩 Diagram types reference — schema for all 18 types
🖌️ Styles & aspect-ratio framing
🎨 Theming, fonts & icons
🛠️ Core API
🔌 MCP server
🤝 Contributing

Blog

📌 Introducing Glyphic: diagrams as data for LLMs and agents — start here
🏗️ Why Glyphic is infrastructure, not an app
🎨 Everything Glyphic can do
⚖️ Glyphic vs. the alternatives
🤖 Why AI-drawn diagrams don't scale
🔬 Is the AI-diagram comparison fair? A note on method

Support

🐛 Issues & feature requests — github.com/MS-Teja/Glyphic/issues
📚 Documentation — docs home
❤️ Sponsor development — github.com/sponsors/MS-Teja

License

LICENSE — FSL / MIT.