diagram-mcp

MCP-сервер, который превращает текст диаграммы в формате «диаграмма как код» в PNG-файлы на вашем диске. Ни браузера, ни сети, ни внешних сервисов. Полезен для создания блок-схем, которые можно вставлять в документацию, тикеты или README.

Инструменты

• render_diagram: превращает код в PNG и возвращает путь к файлу

• preview_diagram: рисует диаграмму в виде текстового арта прямо в диалоге, не создавая файлов

• validate_diagram: разбирает код и сообщает об ошибках с номерами строк, ничего не записывает

• diagram_syntax: справочник по языку

Related MCP server: Vizdown-MCP

Установка

Требуется Node 20.12+.

git clone https://github.com/JVmano/diagram-mcp.git
cd diagram-mcp
npm install
npm run build

Затем зарегистрируйте его в Claude Code:

claude mcp add diagram --scope user \
  --env DIAGRAM_MCP_OUTPUT_DIR=$HOME/Documents/diagram-renders \
  -- node "$(pwd)/dist/index.js"

Или добавьте его вручную в .mcp.json / ваш пользовательский конфиг:

{
  "mcpServers": {
    "diagram": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/diagram-mcp/dist/index.js"],
      "env": { "DIAGRAM_MCP_OUTPUT_DIR": "/absolute/path/to/renders" }
    }
  }
}

Перезапустите сессию, а затем попросите нарисовать диаграмму. После получения изменений снова выполните npm run build.

Язык

title "Reward approval flow"
direction TB

node event "Conversion recorded" shape=rounded
node auto "Auto-approve?" shape=diamond size=200x100
node queue "Manual review queue"

event -> auto
auto -> queue "no"

Фигуры: rect, rounded, ellipse, diamond, hexagon. Соединения: from -> to ["label"] [style=solid|dashed]. Указание позиций через at=x,y необязательно. Если их опустить, компоновка расставит фигуры сама. Вызовите diagram_syntax для полного справочника.

Конфигурация

Всё необязательно, у всего есть значения по умолчанию. См. .env.example. Результаты рендеринга сохраняются в DIAGRAM_MCP_OUTPUT_DIR (по умолчанию ~/Documents/diagram-renders). Явный outputPath должен находиться внутри этой директории или рабочей директории, если только не установлено DIAGRAM_MCP_ALLOW_ANY_OUTPUT_PATH=true.

Разработка

npm test          # unit tests
npm run test:e2e  # builds, then drives the server over stdio
npm run verify    # typecheck, test, build, e2e

Парсер, компоновка и генерация SVG в src/core используются совместно с локальным проектом редактора диаграмм; npm run check:sync сравнивает их с ним, когда он расположен в соседней директории.

Лицензия

MIT