{ "markdown": "
\n

Glyphic

\n

A diagram is data, not a drawing.

\n

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.

\n
\n\n

\n \"npm\n \"mcp-server\n \"npm\n \"License:\n \"Sponsor\"\n

\n\n

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

\n\n

\n \"Sketch\n \"Freeform\n

\n\n---\n\n## Quick Start\n\nGlyphic gives an LLM structured data in and hands you a finished diagram out. Use it three ways.\n\n### 1. MCP server — add to your AI agent in 30 seconds\n\nIt runs over stdio via `npx`, no install:\n\n```bash\n# Claude Code\nclaude mcp add glyphic -- npx -y @glyphicjs/mcp-server\n```\n\nFor Cursor, Claude Desktop, VS Code, Windsurf, and Antigravity, add it to your client's MCP config:\n\n```json\n{\n \"mcpServers\": {\n \"glyphic\": { \"command\": \"npx\", \"args\": [\"-y\", \"@glyphicjs/mcp-server\"] }\n }\n}\n```\n\nThen 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](./docs/mcp.md).\n\n### 2. Library\n\n```bash\nnpm install @glyphicjs/core @glyphicjs/schema\n```\n\n```typescript\nimport { processDiagram } from \"@glyphicjs/core\";\nimport { writeFileSync } from \"node:fs\";\n\nconst result = await processDiagram({\n type: \"architecture\",\n title: \"Web App\",\n nodes: [\n { id: \"web\", label: \"Web App\", shape: \"rounded\", icon: \"fab-react\" },\n { id: \"api\", label: \"API\", shape: \"hexagon\", icon: \"fas-bolt\" },\n { id: \"db\", label: \"PostgreSQL\", shape: \"database\", icon: \"fas-database\" }\n ],\n edges: [\n { source: \"web\", target: \"api\", label: \"REST\" },\n { source: \"api\", target: \"db\", label: \"SQL\" }\n ]\n});\n\nwriteFileSync(\"diagram.png\", result.png); // Buffer (high-res PNG)\nwriteFileSync(\"diagram.svg\", result.svg); // string (scalable SVG)\nconsole.log(result.reactFlow); // interactive React Flow JSON\n```\n\nSee the [Core API reference](./docs/api.md).\n\n### 3. Self-hosted HTTP API\n\nNeed 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.\n\n## Who it's for\n\n- **Agent & LLM-app builders** — expose diagram generation as a single tool call and let the model describe it, not draw it.\n- **Platform teams** — embed diagram generation directly in your product behind one validated schema.\n- **CI & docs pipelines** — deterministic, byte-identical, versionable output with no Chromium to install or babysit.\n- **React developers** — get interactive React Flow JSON out of the box, not just static images.\n\n## What\n\n**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:\n\n- **SVG** — pure, scalable vector markup (accessible: `role=\"img\"` + ``).\n- **PNG** — high-resolution raster, rendered natively via Rust (`@resvg/resvg-js`).\n- **React Flow JSON** — nodes/edges mapped for an interactive React Flow canvas.\n\nIt 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.\n\n## Why\n\nYes — 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.\"\n\nThe 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:\n\n1. **A machine-authoring contract, not a DSL.** The input is a strict [Zod](https://zod.dev) 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|`).\n2. **Deployable as infrastructure.** Layout is computed by real graph engines ([`elkjs`](https://github.com/kieler/elkjs), [`d3-hierarchy`](https://github.com/d3/d3-hierarchy)/`d3-sankey`) and SVG is rasterized to PNG by Rust ([`@resvg/resvg-js`](https://github.com/yisibl/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.\n3. **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.\n\nAnd 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.\n\n<p align=\"center\">\n <img src=\"./docs/examples/00_raw_svg_vs_glyphic.png\" alt=\"The same 44-node architecture: a frontier model's one-shot raw SVG (edges tangled diagonally through boxes) above Glyphic's rendering of the identical JSON (nested tiers, routed edges)\" width=\"760\" />\n <br/>\n <sub><b>The same 44-node spec.</b> Top: a current frontier model asked for raw SVG — the boxes are fine, but the edges cut diagonally through shapes and the result can't be edited without regenerating it. Bottom: Glyphic renders the identical JSON — nested tiers, edges routed around obstacles, still an editable source of truth.</sub>\n <br/>\n <sub><i>Method: both produced by the same model (Claude Opus 4.8) from one brief — the top by asking it to hand-write SVG in a single pass; the bottom by asking it to emit Glyphic's typed JSON, then rendering with <code>@glyphicjs/core</code> (ELK layout + resvg, no browser). Same author, same content — only the draw-vs-describe boundary differs.</i></sub>\n</p>\n\n## How it compares\n\n| Feature | Glyphic | Claude Artifacts | Mermaid | D2 |\n|---|---|---|---|---|\n| **Input format** | Typed JSON (Zod schema) | Natural language → SVG | Text DSL | Text DSL |\n| **Renders without a browser** | ✅ Rust (resvg) | N/A (cloud-only) | ❌ Puppeteer/Chromium | ✅ Go binary |\n| **Model-agnostic** | ✅ Any JSON-capable LLM | ❌ Claude only | ✅ | ✅ |\n| **Schema validation** | ✅ Zod + fixable errors | ❌ | ❌ Parse-or-crash | ❌ |\n| **Native MCP server** | ✅ `@glyphicjs/mcp-server` | N/A (built-in to Claude) | ❌ | ❌ |\n| **React Flow output** | ✅ Interactive nodes/edges | ❌ | ❌ | ❌ |\n| **Deterministic output** | ✅ Byte-identical | ❌ | ⚠️ Mostly | ✅ |\n| **License** | FSL → Apache-2.0 | Proprietary | MIT | MPL-2.0 |\n\nSee the [full comparison + benchmarks](./docs/blog/comparison.md).\n\n## Features\n\n- 🧩 **18 diagram types** behind one validated schema — [see them all](#supported-diagrams).\n- 🎨 **Theming** — built-in presets (`\"theme\": \"dark\"`, plus `light` / `pastel` / `mono`) or a full custom palette. [Theming guide](./docs/theming.md).\n- 🖌️ **Styles** — visual personality presets: `\"style\": \"compact\"` (default), `clean`, `minimal`, or hand-drawn `sketch`. [Styles guide](./docs/styles.md).\n- 📺 **Aspect-ratio framing** — auto-fits diagrams to clean 16:9 / 9:16 frames (or set `\"aspectRatio\"`), by padding — never cropping.\n- 🔤 **Fonts** — any Google Font (`\"theme\": { \"fontFamily\": \"Outfit\" }`) or your own `.ttf`.\n- 🖼️ **Native icons** — drop in any FontAwesome icon (`\"icon\": \"fas-database\"`, `\"icon\": \"fab-aws\"`) or your own SVG via `customIcons`.\n- 📐 **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.\n- ⚡ **Native PNG** — Rust rasterization, no headless browser.\n- ♿ **Accessible output** — every SVG ships with `role=\"img\"` and a `<title>`.\n- 🔒 **Safe by construction** — strict input validation, SVG output escaping/sanitization, and size limits to resist malicious input.\n- 🧪 **Multiple outputs** — SVG, high-res PNG, and React Flow JSON from one call.\n\n## Supported Diagrams\n\n18 first-class types — explore them in the **[Examples Gallery](./docs/examples/README.md)** and the **[Diagram Types reference](./docs/diagram-types.md)**.\n\n| | | |\n|---|---|---|\n| **Architecture** (nested VPCs/clusters) | **C4** context | **Flowchart** |\n| **Sequence** | **State** machine | **ERD** (crow's-foot) |\n| **UML Class** | **Mindmap** | **Gantt** |\n| **Timeline** | **User Journey** | **Kanban** |\n| **Pie** | **Quadrant** | **Sankey** |\n| **Git** graph | **Treemap** | **Canvas** (freeform SVG) |\n\n## Monorepo architecture\n\nA `pnpm` + Turborepo monorepo of three open-source libraries.\n\n| Package | What it is |\n|---|---|\n| [`@glyphicjs/schema`](./packages/schema) | The pure Zod validation layer — the LLM-facing contract. Validate model output before rendering. |\n| [`@glyphicjs/core`](./packages/core) | The engine: layout adapters, scene graph, SVG rendering, and rasterization. |\n| [`@glyphicjs/mcp-server`](./packages/mcp-server) | Official Model Context Protocol server — exposes Glyphic as a native tool to Claude Desktop / Cursor. |\n\nAdding a new diagram type is one entry in [`packages/core/src/registry.ts`](./packages/core/src/registry.ts) plus a schema and a layout adapter — see [CONTRIBUTING](./CONTRIBUTING.md).\n\n## Documentation\n\n- 📚 [Documentation home](./docs/README.md)\n- 🖼️ [Examples gallery](./docs/examples/README.md) — every type, rendered\n- 🧩 [Diagram types reference](./docs/diagram-types.md) — schema for all 18 types\n- 🖌️ [Styles & aspect-ratio framing](./docs/styles.md)\n- 🎨 [Theming, fonts & icons](./docs/theming.md)\n- 🛠️ [Core API](./docs/api.md)\n- 🔌 [MCP server](./docs/mcp.md)\n- 🤝 [Contributing](./CONTRIBUTING.md)\n\n## Blog\n\n- 📌 **[Introducing Glyphic: diagrams as data for LLMs and agents](./docs/blog/introducing-glyphic.md)** — start here\n- 🏗️ **[Why Glyphic is infrastructure, not an app](./docs/blog/why-glyphic-is-infrastructure.md)**\n- 🎨 **[Everything Glyphic can do](./docs/blog/everything-glyphic-can-do.md)**\n- ⚖️ **[Glyphic vs. the alternatives](./docs/blog/comparison.md)**\n- 🤖 **[Why AI-drawn diagrams don't scale](./docs/blog/why-llms-cant-draw-svg.md)**\n- 🔬 **[Is the AI-diagram comparison fair? A note on method](./docs/blog/is-the-comparison-fair.md)**\n\n## Support\n\n- 🐛 **Issues & feature requests** — [github.com/MS-Teja/Glyphic/issues](https://github.com/MS-Teja/Glyphic/issues)\n- 📚 **Documentation** — [docs home](./docs/README.md)\n- ❤️ **Sponsor development** — [github.com/sponsors/MS-Teja](https://github.com/sponsors/MS-Teja)\n\n## License\n\n[LICENSE](./LICENSE) — FSL / MIT.\n\n---\n\n<div align=\"center\">\n <b>Give your AI structured data. Let Glyphic handle the drawing.</b>\n</div>\n", "bytes": 12737, "sha": "69534ae583fb1f8dccd0c08221ab3ce588ad892ff34a19701f839c9c56c020a3", "repo_slug": "ms-teja/glyphic", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_ms_teja_glyphic_87f325fa/readme" }