MS-Teja/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:
For Cursor, Claude Desktop, VS Code, Windsurf, and Antigravity, add it to your client's MCP config:
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
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" + ).
- **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:
1. **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|).
2. **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.
3. **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.