glyphic

在线体验 · 快速开始 · 示例集 · 文档 · 18 种图表类型

---

快速开始

Glyphic 接收 LLM 提供的结构化数据，并输出完整的图表。你可以通过三种方式使用它。

1. MCP 服务——30 秒内添加到 AI Agent

它通过 npx 使用 stdio 运行，无需安装：

# Claude Code
claude mcp add glyphic -- npx -y @glyphicjs/mcp-server

对于 Cursor、Claude Desktop、VS Code、Windsurf 和 Antigravity，请将其添加到客户端的 MCP 配置中：

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

然后只需提出请求：“绘制一张包含用户、帖子和评论的博客 ERD。” 模型生成 JSON、调用工具，渲染后的图表便会以内嵌形式显示。请参阅 MCP 设置指南。

2. 库

npm install @glyphicjs/core @glyphicjs/schema

import { processDiagram } from "@glyphicjs/core";
import { writeFileSync } from "node:fs";

const result = await processDiagram({
  type: "architecture",
  title: "Web App",
  nodes: [
    { id: "web", label: "Web App", shape: "rounded", icon: "fab-react" },
    { id: "api", label: "API", shape: "hexagon", icon: "fas-bolt" },
    { id: "db", label: "PostgreSQL", shape: "database", icon: "fas-database" }
  ],
  edges: [
    { source: "web", target: "api", label: "REST" },
    { source: "api", target: "db", label: "SQL" }
  ]
});

writeFileSync("diagram.png", result.png);   // Buffer (high-res PNG)
writeFileSync("diagram.svg", result.svg);   // string (scalable SVG)
console.log(result.reactFlow);              // interactive React Flow JSON

请参阅 核心 API 参考。

3. 可自托管的 HTTP API

需要在自有端点后运行它？Glyphic 可以作为 HTTP 服务进行自托管，封装完全相同的引擎——输入相同的 schema，输出相同的 SVG/PNG/React Flow——这样，你的产品或平台就能生成图表，而无需将库分发给每个客户端。

适用对象

• Agent 和 LLM 应用构建者——将图表生成功能作为单次工具调用开放，让模型描述图表，而不是绘制图表。
• 平台团队——通过一个经过验证的 schema，将图表生成功能直接集成到产品中。
• CI 和文档流水线——获得确定性、逐字节一致、可版本化的输出，无需安装或维护 Chromium。
• React 开发者——开箱即用地获取交互式 React Flow JSON，而不只是静态图像。

介绍

Glyphic 是一种基于结构化数据生成图表的基础设施。 你向它提供严格的语义 JSON 文档——包含 nodes 和 edges、entities 或 commits 的数组——它便会返回经过润色的图表，格式包括：

• SVG——纯粹、可缩放的矢量标记（支持无障碍访问：role="img" + <title>）。
• PNG——高分辨率栅格图像，通过 Rust 原生渲染（@resvg/resvg-js）。
• React Flow JSON——将节点和边映射为可交互的 React Flow 画布。

它通过一个经过验证的 schema 支持 18 种图表类型（架构图、时序图、ERD、UML 类图、状态机、流程图、甘特图、时间线、桑基图、Git 树、思维导图、饼图、象限图、用户旅程图、看板、C4 图、树图和自由画布）。

为什么

没错——现代大模型可以直接用 SVG 画出简洁的六框流程图。去问问它；对于一次性图表，这就是合适的工具。这并不是在赌模型「不会画图」。

问题在于，画出来的 SVG 是一张静态图片。 每次生成的结果都不一样，而一旦涉及真正的图表——大量节点和后续编辑——它就会在这些场景中彻底崩溃；要改一个框，就得重新生成整个图表，结果还会发生偏移。Glyphic 将图表视为数据：模型用有类型的 JSON 描述图表的含义，再由真正的引擎进行渲染。无论模型变得多强，这种做法都有三个站得住脚的理由：

1. 面向机器创作的契约，而不是 DSL。 输入采用严格的 Zod 模式。模型输出格式错误时，会在渲染开始前返回精确且可修复的错误——因此「生成 → 验证 → 修复 → 渲染」循环非常简单。Mermaid 之类的 DSL 遇到一个拼写错误（-->|label|）就会解析失败并崩溃。
2. 可作为基础设施部署。 布局由真正的图引擎（elkjs、d3-hierarchy/d3-sankey）计算，SVG 则由 Rust 栅格化为 PNG（@resvg/resvg-js）——无需 DOM、无头浏览器或 Chromium。它可以作为普通的 Node 依赖，在 CI 任务、Lambda、Agent 循环或 Docker 容器中运行。无论模型能力如何，这一点都不变。
3. 规模扩展后依然低成本、完整无损。 手工绘制大型图表意味着要输出数千个坐标 token——速度慢、成本高，还可能超出模型的输出上限，导致内容截断、渲染损坏。模型改为输出紧凑的语义 JSON；复杂的几何布局则以确定性方式生成。

而且，由于布局由真正的引擎负责，图表能够缩放并保持可编辑：它可以嵌套集群，并让边线绕开障碍物；而手工放置的 SVG 会变成穿过方框的对角线。它的输出逐字节一致（可进行版本管理和快照测试），JSON 也始终是可信的唯一数据源，你可以对比差异并重新渲染——而不是依赖一堆绝对坐标搭成的纸牌屋。

_{同一个包含 44 个节点的规范。上方：让当前的前沿模型生成原始 SVG——方框没问题，但边线对角穿过形状，而且无法编辑，只能重新生成。下方：Glyphic 渲染相同的 JSON——层级嵌套，边线绕开障碍物，同时保留可编辑的可信数据源。
方法：两者均由同一个模型（Claude Opus 4.8）根据同一份简述生成——上方要求模型一次性手写 SVG；下方要求模型输出 Glyphic 的有类型 JSON，再使用 @glyphicjs/core 渲染（ELK 布局 + resvg，无浏览器）。作者相同，内容相同——区别仅在于「绘制」与「描述」的分界。}

对比

特性	Glyphic	Claude Artifacts	Mermaid	D2
输入格式	有类型的 JSON（Zod 模式）	自然语言 → SVG	文本 DSL	文本 DSL
无需浏览器即可渲染	✅ Rust（resvg）	N/A（仅限云端）	❌ Puppeteer/Chromium	✅ Go 二进制文件
不依赖特定模型	✅ 任何支持 JSON 的大模型	❌ 仅限 Claude	✅	✅
模式验证	✅ Zod + 可修复错误	❌	❌ 解析失败即崩溃	❌
原生 MCP 服务	✅ @glyphicjs/mcp-server	N/A（内置于 Claude）	❌	❌
React Flow 输出	✅ 交互式节点/边	❌	❌	❌
确定性输出	✅ 逐字节一致	❌	⚠️ 大致一致	✅
许可证	FSL → Apache-2.0	专有	MIT	MPL-2.0

请参阅完整对比和基准测试。

功能

• 🧩 18 种图表类型，共用一套经过验证的架构 — 查看全部。
• 🎨 主题 — 内置预设（"theme": "dark"，以及 light / pastel / mono），也可使用完整的自定义调色板。主题指南。
• 🖌️ 样式 — 视觉风格预设："style": "compact"（默认）、clean、minimal 或手绘风格 sketch。样式指南。
• 📺 宽高比适配 — 通过留白自动将图表调整至整洁的 16:9 / 9:16 画框（或设置 "aspectRatio"），绝不裁剪。
• 🔤 字体 — 可使用任意 Google Font（"theme": { "fontFamily": "Outfit" }）或自带的 .ttf。
• 🖼️ 原生图标 — 可加入任意 FontAwesome 图标（"icon": "fas-database"、"icon": "fab-aws"），也可通过 customIcons 使用自己的 SVG。
• 📐 真实布局 — elkjs + d3 负责计算嵌套结构（VPC/集群）、鸡爪/UML 标记以及绕过障碍物的边线路径，在手动放置的 SVG 会变成穿过方框的对角线乱线时，依然能保持整洁。
• ⚡ 原生 PNG — 使用 Rust 光栅化，无需无头浏览器。
• ♿ 无障碍输出 — 每个 SVG 都带有 role="img" 和 <title>。
• 🔒 从设计上保障安全 — 严格的输入验证、SVG 输出转义/清理和大小限制，可抵御恶意输入。
• 🧪 多种输出格式 — 一次调用即可生成 SVG、高分辨率 PNG 和 React Flow JSON。

支持的图表

18 种一等图表类型 — 在 示例画廊 和 图表类型参考 中查看。

架构图（嵌套 VPC/集群）	C4 上下文图	流程图
时序图	状态机	ERD（鸡爪表示法）
UML 类图	思维导图	甘特图
时间线	用户旅程图	看板
饼图	象限图	桑基图
Git 图	矩形树图	画布（自由绘制 SVG）

Monorepo 架构

由 pnpm + Turborepo 构成的 Monorepo，包含三个开源库。

Package	内容
@glyphicjs/schema	纯 Zod 验证层 — 面向 LLM 的契约。渲染前验证模型输出。
@glyphicjs/core	引擎：布局适配器、场景图、SVG 渲染和光栅化。
@glyphicjs/mcp-server	官方 Model Context Protocol 服务 — 将 Glyphic 作为原生工具提供给 Claude Desktop / Cursor。

添加一种新的图表类型，只需在 packages/core/src/registry.ts 中添加一个条目，再提供架构和布局适配器 — 详见 CONTRIBUTING。

文档

• 📚 文档首页
• 🖼️ 示例画廊 — 展示每种类型的渲染效果
• 🧩 图表类型参考 — 全部 18 种类型的架构
• 🖌️ 样式与宽高比适配
• 🎨 主题、字体与图标
• 🛠️ Core API
• 🔌 MCP 服务
• 🤝 参与贡献

博客

• 📌 介绍 Glyphic：为 LLM 和 Agent 提供数据化图表 — 从这里开始
• 🏗️ 为什么 Glyphic 是基础设施，而不是应用
• 🎨 Glyphic 的所有功能
• ⚖️ Glyphic 与其他方案的比较
• 🤖 为什么 AI 绘制的图表无法扩展
• 🔬 AI 图表比较是否公平？方法说明

支持

• 🐛 问题与功能请求 — github.com/MS-Teja/Glyphic/issues
• 📚 文档 — 文档首页
• ❤️ 赞助开发 — github.com/sponsors/MS-Teja

许可证

LICENSE — FSL / MIT。

---