安装
npx -y @glyphicjs/mcp-server适合谁
适合要让模型用 typed JSON 出图,并且不能接受 DSL 或无头浏览器的人。官方写法是:模型描述图,Glyphic 渲染,deterministic SVG & PNG,18 types,validated before it draws,no DSL and no headless browser。
它是你可拥有和继续构建的 diagram infrastructure,不是在线 Mermaid 托管。输出可以是 SVG、PNG,或 React Flow JSON。
官方页面:
https://github.com/MS-Teja/Glyphic
3 分钟完成第一次尝试
只走官方 MCP 路径:stdio via npx,no install。
claude mcp add glyphic -- npx -y @glyphicjs/mcp-server
等价配置是 command 为 npx,args 为 -y 与 @glyphicjs/mcp-server。不要另找未出现的安装器。官方还写了库安装 npm install @glyphicjs/core @glyphicjs/schema,第一次不要改走库调用。
前置条件:本机能跑 npx。准备一份符合“single validated schema”的 typed JSON,类型先选官方点名的 flowchart。官方没有给出 JSON 字段表,缺的键不要编。也不要编造 MCP 工具函数名。
配置位置:claude mcp add 或 mcpServers.glyphic。官方安装注释只写到 Claude Code,没有点名其它客户端产品或配置文件路径。
第一次调用:让服务器渲染这张 flowchart,并只要 SVG。成功信号:返回经过校验后的 SVG(官方写明 accessible:role="img" + <title>),且没有启动浏览器。
不要把“无头浏览器”理解成零风险。渲染仍在本机进行,PNG 会走 @resvg/resvg-js(Rust)。JSON 描述会进入渲染进程。
使用案例
案例一:先出一张可缩放矢量图。提交 flowchart 的 typed JSON,取 SVG。官方写明 pure, scalable vector markup。没有给出节点数量上限。
案例二:同一份或另一类型要栅格图,或要可交互画布数据。取 PNG(high-resolution raster, rendered natively via Rust),或取 React Flow JSON(nodes/edges mapped for an interactive React Flow canvas)。18 类还包括 architecture、sequence、ERD、UML class、state machines、Gantt、timelines、Sankey、Git trees、mindmaps、pie、quadrant、user journeys、Kanban、C4、treemaps 和 freeform canvas。没有出现的库函数名不要当返回入口。
使用边界
安装边界:MCP 主路径是 npx -y @glyphicjs/mcp-server;库路径是另一组 npm 包,不要和第一次尝试混用。
能力边界:18 种类型、一种 schema、三种输出。官方没有写远程托管、密钥或浏览器预览。不要假设未列出的图类型可用。