glyphic — MCP-сервер для Claude Code: диаграммы из JSON
Превращает типизированный JSON в SVG, PNG или React Flow JSON. Пригодится, когда агенту нужно рисовать диаграммы по структуре, а не координатам.
claude mcp add glyphic -- npx -y @glyphicjs/mcp-serverЧто делает glyphic
Glyphic принимает строгий JSON с массивами nodes и edges, entities или commits и отдаёт готовую диаграмму. Схема описана на Zod, поэтому кривой вывод модели возвращается точной ошибкой ещё до рендера — цикл «сгенерировал, проверил, поправил, отрисовал» получается коротким.
Поддерживается 18 типов: архитектура, sequence, ERD, UML-классы, конечные автоматы, блок-схемы, Gantt, таймлайны, Sankey, Git-деревья, майндмапы, круговая, квадрант, user journey, Kanban, C4, treemap и свободный холст. Раскладку считают elkjs и d3-hierarchy, PNG растеризует Rust через @resvg/resvg-js. Ни DOM, ни headless-браузера, ни Chromium — сервер спокойно живёт в CI, Lambda или контейнере.
Запускается по stdio через npx, ставить глобально ничего не надо. Для Claude хватит одной команды, для остальных клиентов — записи в MCP-конфиге. Если нужен свой эндпоинт, движок можно поднять как HTTP-сервис и не тащить библиотеку в каждый клиент.
Какие задачи решает
- собрать ERD для схемы блога из описания таблиц
- отрисовать архитектуру сервиса без ручной расстановки координат
- получить PNG диаграммы в CI-пайплайне без Chromium
- выдать интерактивный React Flow JSON для канваса
- перерисовать диаграмму после правки JSON, не ломая раскладку
Примеры запросов агенту
- Нарисуй ERD для блога с users, posts и comments
- Сделай диаграмму архитектуры из этого JSON и сохрани в
diagram.png - Отрисуй sequence-диаграмму по шагам ниже
Как установить glyphic
Командой платформы
claude mcp add glyphic -- npx -y @glyphicjs/mcp-serverКомандой платформы
codex mcp add glyphic -- npx -y @glyphicjs/mcp-serverФайл настроек
{
"mcpServers": {
"glyphic": {
"command": "npx",
"args": [
"-y",
"@glyphicjs/mcp-server"
]
}
}
}Файл настроек
{
"servers": {
"glyphic": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@glyphicjs/mcp-server"
]
}
}
}Командой платформы
gemini mcp add glyphic npx -y @glyphicjs/mcp-serverПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о glyphic
Как установить glyphic в Claude Code?
Одна команда: claude mcp add glyphic -- npx -y @glyphicjs/mcp-server. Сервер запустится по stdio через npx, отдельная установка не нужна.
Что делает glyphic?
Принимает типизированный JSON с узлами и связями и возвращает SVG, PNG или React Flow JSON. Схема проверяется до рендера, поэтому ошибки в выводе модели видно сразу.
Какие типы диаграмм поддерживаются?
18 типов: архитектура, sequence, ERD, UML-классы, конечные автоматы, блок-схемы, Gantt, таймлайны, Sankey, Git-деревья, майндмапы, круговая, квадрант, user journey, Kanban, C4, treemap и свободный холст.
