Glyphic 是一个开源图表引擎,其核心理念是“图表是数据,不是绘图”。它让 AI 智能体从结构化 JSON 生成生产级图表,无需 SVG、Mermaid 或浏览器,支持确定性 SVG 与 PNG 输出,覆盖 18 种图表类型,并在绘制前进行校验,不依赖 DSL 和无头浏览器。Glyphic 为 LLM 和智能体提供图表基础设施,用户可以拥有并基于它构建。
用途
Glyphic 旨在解决 AI 直接绘制 SVG 的问题:绘制出的 SVG 是一张死图,每次生成结果不同,在节点多和后续编辑时容易崩溃,修改一个框就需要重新生成整个图并发生漂移。Glyphic 将图表视为数据,模型用类型化 JSON 描述图表含义,由真实引擎负责渲染。
主要能力
- 输入为严格的 Zod schema 定义的语义 JSON(节点与边数组、实体、提交等),输出为:纯可缩放向量标记 SVG(具备可访问性:role="img" + <title>)、通过 Rust 原生渲染的高分辨率 PNG(@resvg/resvg-js)、以及用于交互式 React Flow 画布的 React Flow JSON。
- 支持 18 种图表类型:架构图、时序图、ERD、UML 类图、状态机、流程图、甘特图、时间线、桑基图、Git 树、思维导图、饼图、象限图、用户旅程、看板、C4、树状图以及自由画布,均在一个经过校验的 schema 之下。
- 布局由真实图引擎(elkjs、d3-hierarchy / d3-sankey)计算,SVG 由 Rust(@resvg/resvg-js)栅格化为 PNG,无 DOM、无无头浏览器、无 Chromium。可在 CI 任务、Lambda、智能体循环或 Docker 容器中作为普通 Node 依赖运行。
- 输出字节级一致(可版本化、可快照测试),JSON 是可用于差异对比和重新渲染的事实来源。
- 支持嵌套集群和绕过障碍物的边路由。
- 主题:内置预设("theme": "dark",以及 light / pastel / mono)或完整自定义调色板。
- 样式:视觉个性预设:"style": "compact"(默认)、clean、minimal 或 hand-drawn sketch。
- 宽高比取景:自动适配干净的 16:9 / 9:16 帧(或设置 "aspectRatio"),通过填充而非裁剪。
- 字体:任意 Google Font("theme": { "fontFamily": "Outfit" })或自有 .ttf。
- 原生图标:任意 FontAwesome 图标("icon": "fas-database"、"icon": "fab-aws")或通过 customIcons 使用自有 SVG。
- 可访问输出:每个 SVG 都带有 role="img" 和 <title>。
- 构造安全:严格的输入校验、SVG 输出转义/清理和大小限制,抵御恶意输入。
- 一次调用可输出 SVG、高分辨率 PNG 和 React Flow JSON。
使用方式
Glyphic 有三种使用方式:
- MCP 服务器——30 秒内添加到 AI 智能体。通过 npx 以 stdio 运行,无需安装。适用于 Cursor、Claude Desktop、VS Code、Windsurf 和 Antigravity,将其添加到客户端的 MCP 配置中。然后只需提问:“为包含用户、帖子和评论的博客绘制 ERD。”模型输出 JSON,调用工具,渲染好的图表内联出现。参见 MCP 设置指南。
- 核心 API——参见 Core API 参考。
- 自托管 HTTP API——需要放在自己的端点后面时,Glyphic 可自托管为 HTTP 服务,包装完全相同的引擎——相同 schema 输入,相同 SVG/PNG/React Flow 输出——让您的产品或平台无需向每个客户端交付库即可生成图表。
适用场景
- 智能体与 LLM 应用构建者——将图表生成暴露为单个工具调用,让模型描述而非绘制。
- 平台团队——在一个经过校验的 schema 后面,将图表生成直接嵌入产品。
- CI 与文档流水线——确定性、字节级一致、可版本化的输出,无需安装或照看 Chromium。
- React 开发者——开箱即用获得交互式 React Flow JSON,而不仅仅是静态图像。
限制
资料未提供关于收费、价格、平台、效果的具体信息。Glyphic 为开源项目,采用 FSL / MIT 许可证。
项目结构
Glyphic 是一个 pnpm + Turborepo 单体仓库,包含三个开源库。添加新图表类型只需在 packages/core/src/registry.ts 中增加一个条目,加上一个 schema 和一个布局适配器——参见 CONTRIBUTING。
相关链接:在线演练场、快速开始、示例画廊、文档、18 种图表类型。仓库文件导航、问题与功能请求、赞助开发等。