MS-Teja/Glyphic

<div align="center"> <h1>Glyphic</h1> <p><b>Machine-first diagramming infrastructure.</b></p> <p>Turn pure, semantic JSON into beautiful native SVG &amp; PNG diagrams — built for LLMs and autonomous agents, with no headless browser.</p> </div> <p align="center"> <a href="#quick-start">Quick Start</a> · <a href="./docs/examples/README.md">Examples Gallery</a> · <a href="./docs/README.md">Documentation</a> · <a href="#supported-diagrams">18 Diagram Types</a> </p> <p align="center"> <img src="./docs/examples/01_cloud_architecture.png" alt="Cloud architecture diagram" width="320" /> <img src="./docs/examples/31_dark_cicd_pipeline.png" alt="Dark-mode CI/CD pipeline" width="430" /> </p>

---

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.

You can use it three ways: as a library (@glyphicjs/core), as an MCP server (so Claude Desktop / Cursor can draw diagrams as a native tool), or as a self-hosted HTTP API.

Why

If an LLM needs to produce a diagram today, it has two bad options:

1. Draw raw SVG/Canvas. LLMs have no visual cortex — ask one to place nodes by absolute coordinate and they overlap, text overflows, and connectors cut straight through other shapes.
2. Emit a DSL like Mermaid. Mermaid's syntax is finicky (-->|label|) and a single typo cra