Glyphic MCP server

Glyphic A diagram is data, not a drawing. Your model describes the diagram as typed JSON; Glyphic renders it — deterministic SVG & PNG across 18 types, validated before it draws, with no DSL and no headless browser. Diagram infrastructure for LLMs and agents that you own and build on.

Live playground · Quick Start · Examples Gallery · Documentation · 18 Diagram Types

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

Shortened. The full README is on GitHub.