Log inSubmit server
Glyphic logo

Glyphic

by MS-Teja

Generates validated SVG, PNG, and React Flow diagrams from structured JSON through two MCP tools.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Glyphic

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "ms-teja-glyphic": {
      "command": "npx",
      "args": [
        "-y",
        "@glyphicjs/mcp-server"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 2 tools correctly (1mo ago).

Overview

MS-Teja/Glyphic MCP server exposes diagram generation through an MCP interface that runs locally over stdio. It provides one tool for retrieving the DiagramInput schema and another for validating and rendering JSON diagrams. Outputs are produced as native SVG and PNG, with React Flow JSON also available from the underlying Glyphic engine. Reach for it when an agent needs deterministic diagrams from structured data rather than handwritten SVG or a diagram DSL.

Use cases

  • Generate architecture diagrams from agent-produced JSON
  • Render ERDs for database designs
  • Create flowcharts from structured workflows
  • Export deterministic SVG and PNG assets in documentation pipelines

Key features

  • Schema discovery with get_schema
  • Validated JSON diagram rendering
  • Native SVG and PNG output
  • Support for 18 diagram types
  • React Flow JSON output
  • Local stdio execution through npx

Tools2

What Glyphic lets your agent do. Expand a tool for its parameters.

Verified live~7.1k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

19/24 checks healthy over the last 79d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 8d ago via OSV.dev · @glyphicjs/mcp-server (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars10Stargazers on the source repository.
npm downloads125Package downloads in the last 30 days.
Last commit13d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed2Callable tools this server registers over MCP.
Directory activity10 viewsConfig copies, upvotes, and views on AllMCPs.

How Glyphic works

What MS-Teja/Glyphic MCP server does

MS-Teja/Glyphic MCP server lets an AI agent describe a diagram as typed JSON and submit it for rendering. The input follows a DiagramInput schema with diagram-specific properties, such as nodes and edges for graph-based diagrams or other structured collections for timelines, charts, and related formats.

The renderer supports 18 diagram types, including architecture diagrams, ERDs, sequence diagrams, UML class diagrams, state machines, flowcharts, Gantt charts, timelines, Sankey diagrams, Git trees, mindmaps, pie charts, quadrants, user journeys, Kanban boards, C4 diagrams, treemaps, and freeform canvases.

The underlying engine produces SVG and PNG output and can also return React Flow JSON for interactive node-and-edge views. Rendering is handled natively rather than through a headless browser, so the project is suited to local agent workflows, CI jobs, and applications that need generated diagram assets.

How it works

The agent first calls get_schema to inspect the accepted DiagramInput structure. It can then construct a JSON diagram and call render_diagram. The render request must conform to the returned schema; invalid input is rejected during validation instead of being drawn as an incomplete result.

Glyphic calculates layout from semantic diagram data and generates the visual output. This keeps the JSON as a source representation that can be changed, compared, and rendered again. The output is intended to be deterministic and does not require Chromium or another browser runtime.

Setup and configuration

MS-Teja/Glyphic MCP server runs through npx and does not require a separate installation step. A direct stdio configuration is:

config.json
{
  "mcpServers": {
    "glyphic": {
      "command": "npx",
      "args": ["-y", "@glyphicjs/mcp-server"]
    }
  }
}

The README provides configuration examples for Claude Desktop, Cursor, VS Code, Windsurf, and Antigravity. Claude Code can add the same server with claude mcp add glyphic -- npx -y @glyphicjs/mcp-server.

No API key or external service credential is specified for the MCP setup. The repository also documents a separate library and a self-hosted HTTP API, but those are different usage modes from the MCP server.

Tools and capabilities

  • get_schema: returns the JSON schema for DiagramInput so an agent can form valid requests.
  • render_diagram: accepts a schema-conforming declarative diagram and renders it.
  • Generates native SVG and high-resolution PNG output.
  • Supports React Flow JSON output through the Glyphic engine.
  • Handles 18 diagram categories through one validated input model.
  • Supports built-in theme presets and custom palettes in the broader Glyphic input model.

Limitations and notes

The render request must follow the DiagramInput schema. Agents should inspect get_schema before generating unfamiliar diagram types or properties.

MS-Teja/Glyphic MCP server is focused on rendering structured diagrams; it does not expose general-purpose image editing or free-form drawing tools. Although the project can emit React Flow JSON, the MCP listing specifically identifies schema inspection and diagram rendering as its exposed tools.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Glyphic

Add an MCP stdio entry that runs `npx -y @glyphicjs/mcp-server`, or use the documented Claude Code command.

Yes. The README provides a Claude Desktop MCP configuration using `npx` and `@glyphicjs/mcp-server`.

It supports 18 types, including architecture, ERD, sequence, UML class, state machine, flowchart, Gantt, timeline, Sankey, Git tree, mindmap, pie, quadrant, user journey, Kanban, C4, treemap, and freeform canvas diagrams.

The engine generates native SVG and PNG output and can also provide React Flow JSON for interactive diagrams.

Related MCP servers

All in Data Visualization All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewGlyphic AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/ms-teja-glyphic?style=directory)](https://allmcps.com/mcp/ms-teja-glyphic)
HTML Embed
<a href="https://allmcps.com/mcp/ms-teja-glyphic"><img src="https://allmcps.com/api/badge/ms-teja-glyphic?style=directory" alt="Glyphic on AllMCPs" /></a>