# glyphic

Turns typed JSON into SVG, PNG or React Flow JSON. Useful when an agent should describe a diagram instead of placing coordinates.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 10
- Author: MS-Teja
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/MS-Teja/Glyphic
- Updated: 2026-10-15
- HTML: https://affpapa.org/en/nevibecode/mcp/glyphic

## What it does

Glyphic takes a strict JSON document — arrays of `nodes` and `edges`, or `entities`, or `commits` — and returns a finished diagram. The schema is Zod-based, so bad model output comes back as a precise error before anything renders. Generate, validate, fix, render.

Eighteen types are covered: 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. Layout comes from `elkjs` and `d3-hierarchy`; PNG rasterisation is handled by Rust through `@resvg/resvg-js`. No DOM, no headless browser, no Chromium to install — it runs as an ordinary Node dependency in a CI job, a Lambda or a container.

It speaks stdio over `npx`, so there is nothing to install globally. Claude needs one command; other clients get an MCP config entry. Teams that want their own endpoint can self-host the same engine as an HTTP service rather than shipping the library to every client.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add glyphic -- npx -y @glyphicjs/mcp-server
```

### Codex

**Platform CLI**
```bash
codex mcp add glyphic -- npx -y @glyphicjs/mcp-server
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "glyphic": {
            "command": "npx",
            "args": [
                "-y",
                "@glyphicjs/mcp-server"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "glyphic": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@glyphicjs/mcp-server"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add glyphic npx -y @glyphicjs/mcp-server
```

## When to use it
- generate an ERD for a blog schema from table descriptions
- draw a service architecture without hand-placing coordinates
- produce diagram PNGs in CI without Chromium
- emit interactive React Flow JSON for a canvas
- re-render a diagram after a JSON edit without breaking layout

## Example prompts
- Render this JSON as an architecture diagram and write `diagram.png`
- Turn the steps below into a sequence diagram

## Similar
- [REA](https://affpapa.org/en/nevibecode/mcp/rea.md) — MCP server · ★ 386989
- [GitHub](https://affpapa.org/en/nevibecode/mcp/github.md) — MCP server · ★ 33918
- [Netdata](https://affpapa.org/en/nevibecode/mcp/netdata.md) — MCP server · ★ 81115
- [browser-use](https://affpapa.org/en/nevibecode/mcp/browser-use.md) — MCP server · ★ 119160
- [Codebase Memory](https://affpapa.org/en/nevibecode/mcp/codebase-memory.md) — MCP server · ★ 47392
- [mcp-server](https://affpapa.org/en/nevibecode/mcp/mcp-server.md) — MCP server · ★ 43872

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md