Glyphic

Glyphic is an open-source diagram engine whose core idea is "diagrams are data, not drawings." It lets AI agents generate production-grade diagrams from structured JSON, without SVG, Mermaid, or a browser, supports deterministic SVG and PNG output, covers 18 diagram types, and validates before drawing, with no DSL and no headless browser. Glyphic provides diagram infrastructure for LLMs and agents, which users can own and build upon.

Purpose

Glyphic is designed to solve the problem of AI directly drawing SVG: the SVG drawn is a dead image, each generation result is different, and it easily breaks down when there are many nodes and during subsequent edits; changing one box requires regenerating the entire diagram and causes drift. Glyphic treats diagrams as data, the model uses typed JSON to describe the meaning of the diagram, and a real engine handles rendering.

Main capabilities

• The input is semantic JSON defined by a strict Zod schema (arrays of nodes and edges, entities, commits, etc.), and the output is: pure scalable vector markup SVG (with accessibility: role="img" + <title>), high-resolution PNG rendered natively via Rust (@resvg/resvg-js), and React Flow JSON for an interactive React Flow canvas.
• Supports 18 diagram types: architecture diagrams, sequence diagrams, ERD, UML class diagrams, state machines, flowcharts, Gantt charts, timelines, Sankey diagrams, Git trees, mind maps, pie charts, quadrant charts, user journeys, kanban, C4, tree diagrams, and free canvas, all under one validated schema.
• Layout is computed by real graph engines (elkjs, d3-hierarchy / d3-sankey), and SVG is rasterized to PNG by Rust (@resvg/resvg-js), with no DOM, no headless browser, and no Chromium. It can run as an ordinary Node dependency in CI jobs, Lambda, agent loops, or Docker containers.
• Output is byte-for-byte consistent (versionable, snapshot-testable), and JSON is the source of truth that can be used for diffing and re-rendering.
• Supports nested clusters and edge routing that avoids obstacles.
• Themes: built-in presets ("theme": "dark", as well as light / pastel / mono) or a fully custom palette.
• Styles: Visual personality presets: "style": "compact" (default), clean, minimal, or hand-drawn sketch.
• Aspect ratio framing: Automatically fits clean 16:9 / 9:16 frames (or set "aspectRatio"), by padding rather than cropping.
• Fonts: Any Google Font ("theme": { "fontFamily": "Outfit" }) or your own .ttf.
• Native icons: Any FontAwesome icon ("icon": "fas-database", "icon": "fab-aws") or your own SVG via customIcons.
• Accessible output: Every SVG carries role="img" and <title>.
• Construction safety: Strict input validation, SVG output escaping/sanitization, and size limits to defend against malicious input.
• A single call can output SVG, high-resolution PNG, and React Flow JSON.

How to Use

Glyphic can be used in three ways:

1. MCP server—add it to an AI agent in 30 seconds. Run via npx over stdio, no installation required. Works with Cursor, Claude Desktop, VS Code, Windsurf, and Antigravity; add it to your client's MCP configuration. Then just ask: "Draw an ERD for a blog with users, posts, and comments." The model outputs JSON, calls the tool, and the rendered diagram appears inline. See the MCP setup guide.
2. Core API—see the Core API reference.
3. Self-hosted HTTP API—when you need it behind your own endpoint, Glyphic can be self-hosted as an HTTP service wrapping the exact same engine—same schema input, same SVG/PNG/React Flow output—letting your product or platform generate diagrams without shipping a library to every client.

When to Use It

• Agent and LLM application builders—expose diagram generation as a single tool call, letting the model describe rather than draw.
• Platform teams—embed diagram generation directly into a product behind a validated schema.
• CI and documentation pipelines—deterministic, byte-for-byte consistent, versionable output, with no need to install or babysit Chromium.
• React developers—get interactive React Flow JSON out of the box, not just static images.

Limitations

The materials do not provide specific information about pricing, cost, platforms, or results. Glyphic is an open-source project under the FSL / MIT license.

Project Structure

Glyphic is a pnpm + Turborepo monorepo containing three open-source libraries. Adding a new diagram type only requires adding an entry in packages/core/src/registry.ts, plus a schema and a layout adapter—see CONTRIBUTING.

Related links: online playground, quick start, example gallery, documentation, 18 diagram types. Repository file navigation, issues and feature requests, sponsoring development, and more.