Diagram infrastructurefor AI agents.
Library. API. MCP server. No vendor lock-in, no headless browser. An npm package that turns typed JSON into SVG, PNG, and React Flow JSON — from any model.
npm install @glyphicjs/core @glyphicjs/schema
01 — The landscape
Three approaches. Two problems.
Beautiful, but locked
Brilliant diagrams with custom themes, icons, and fonts. Genuinely impressive output. But it's a closed SaaS, cloud-only, and there's no open source rendering engine. You can't npm install it.
Open, but heavy
Open source and embeddable — the right instinct. But Mermaid needs Puppeteer (~300 MB Chromium) to render server-side. DSL grammars are fragile — one typo crashes the whole render.
Open, fast, embeddable
Typed JSON in, native SVG/PNG out. Rust rasterization, no browser, no DSL. Works with any model. Library, API, or MCP server — you own the pipeline.
02 — Why Glyphic
Built for pipelines, not chat windows.
No headless browser
Rust-native rasterization via resvg. No Chromium, no Puppeteer, no --no-sandbox. Deploy to Lambda, Cloud Run, CI, Docker — anywhere Node runs.
Any LLM, any pipeline
Works with any model that outputs JSON — Claude, GPT, Gemini, Llama, local models. No vendor coupling. Switch models without changing your diagram pipeline.
React Flow output
Every render returns nodes/edges positioned for an interactive React Flow canvas. Embed zoomable, pannable diagrams in your product with zero rendering code.
Typed schema + validation
Zod-validated input contract. Malformed model output returns a fixable error, not a crash. Self-correcting agent loops become trivial: render → validate → fix → render.
Self-host everything
Run the HTTP API on your own infra. Docker, bare metal, Kubernetes. Your data, your SLA, no cloud dependency. Also works as an npm library or MCP server.
Rust-native performance
Renders in tens of milliseconds, not seconds. ~20 MB footprint vs ~300 MB for Puppeteer. Cold start in hundreds of ms vs seconds for Chromium.
03 — Performance
~50ms
median render time
0 MB
Chromium required
1
npm install
04 — Use cases
Where it fits.
CI/CD Pipelines
Generate architecture diagrams as build artifacts. Define your diagram as JSON next to your infra-as-code, render in CI, commit the PNG. Output is deterministic — snapshot-test it.
# GitHub Action
- name: Render diagrams
run: |
npx @glyphicjs/core render \
arch.json -o docs/arch.pngAgent Platforms
Drop it into LangChain, CrewAI, AutoGen, or your own agent loop as a diagram-generation tool. Any model, any orchestrator, no Puppeteer in the agent process.
// LangChain tool
const diagramTool = new DynamicTool({
name: "render_diagram",
func: async (json) => {
const { png } = await processDiagram(
JSON.parse(json)
);
return png.toString("base64");
},
});Internal Docs
Auto-generate ERDs from your schema, architecture diagrams from infra-as-code, sequence diagrams from API traces. Keep visual docs fresh without manual drawing.
// Generate ERD from DB schema
const erd = await processDiagram({
type: "erd",
entities: tables.map(t => ({
id: t.name,
attributes: t.columns.map(c => ({
name: c.name, type: c.type,
key: c.isPK ? "PK" : c.isFK ? "FK" : undefined,
})),
})),
relationships: foreignKeys,
});SaaS Products
Embed interactive diagrams in your product using the React Flow JSON output. Users see polished, zoomable diagrams — you wrote zero rendering code.
// Embed in your React app
import { ReactFlow } from "@xyflow/react";
const { reactFlow } = await processDiagram(input);
<ReactFlow
nodes={reactFlow.nodes}
edges={reactFlow.edges}
fitView
/>Dev Tools
IDE vendors, code intelligence platforms, documentation tools — embed native diagram rendering without shipping Chromium to your users.
// MCP server for any IDE
{
"mcpServers": {
"glyphic": {
"command": "npx",
"args": ["-y", "@glyphicjs/mcp-server"]
}
}
}05 — Integrate
Three ways to render.
// claude_desktop_config.json
{
"mcpServers": {
"glyphic": {
"command": "npx",
"args": ["-y", "@glyphicjs/mcp-server"]
}
}
}
// Ask: "diagram our OAuth flow."
// The model writes the JSON, Glyphic returns the PNG.06 — License
Open source, fair competition.
Schema + MCP server are MIT. Use them however you want.
Core engine is FSL-1.1-ALv2. Free to use, modify, self-host, and redistribute — the only restriction is you can't resell it as a competing commercial diagram service. Every version goes full Apache 2.0 two years after release.
Use it in your product. Embed it in your pipeline. Self-host it for your team. Fork it and modify it. All fine.
Start building.
Add diagram generation to your agent, pipeline, or product in minutes.
npm install @glyphicjs/core @glyphicjs/schema
claude mcp add glyphic -- npx -y @glyphicjs/mcp-server