Claude Mermaid MCP

MCP-сервер для диаграмм Mermaid: рисует схему в браузере с автообновлением и сохраняет в SVG, PNG или PDF

221 ★ репозитория
Последний коммит 2 нояб. 2026

veelenga/claude-mermaidАвтор:Vitalii Elenhaupt

Установка

Работает в: Claude Code
Codex
Cursor
SourceCraft
Koda
Coddy

Ручная установка

/plugin marketplace add veelenga/claude-mermaid

Затем /plugin install claude-mermaid@claude-mermaid и перезапуск Claude Code; MCP-сервер настраивается сам.

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

Сервер запускает браузер без окна для рендера и локальный веб-сервер на портах 3737–3747
Инструмент mermaid_save записывает файл по пути, который задает агент

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Claude Mermaid — MCP-сервер, который открывает диаграмму Mermaid в браузере и обновляет страницу, пока вы правите схему вместе с агентом. Для рендера служит инструмент mermaid_preview: он принимает код диаграммы, идентификатор превью, формат, тему (default, forest, dark, neutral), цвет фона, размер и масштаб. Сохраняет результат инструмент mermaid_save в SVG, PNG или PDF по указанному пути. Живое превью доступно только для SVG и работает через WebSocket на локальных портах 3737–3747. Диаграмму можно двигать мышью, масштабировать средствами браузера и скачивать из окна просмотра. Несколько превью живут параллельно под разными идентификаторами. В комплекте идет скилл с рекомендациями по построению диаграмм, а рабочие файлы лежат в каталоге ~/.config/claude-mermaid/live.

Для кого. Разработчикам и техническим писателям, которые рисуют архитектурные схемы и последовательности с агентом и хотят видеть результат сразу.

Подходит, если

Схему архитектуры правят в диалоге, и браузер должен обновляться после каждой правки
Диаграмму для документации сохраняют в SVG, PNG или PDF по заданному пути
Несколько схем ведут одновременно, например архитектуру и поток запросов
Агенту нужны подсказки по хорошей структуре диаграммы из встроенного скилла

Не подходит, если

Нужен готовый редактор диаграмм с мышиным рисованием: схема строится кодом Mermaid, а мышь только двигает готовую картинку
Среда без Node.js и браузера: рендер запускается через пакет на Node и открывает страницу локально
Нужна живая правка PNG или PDF: живое превью работает только для SVG

Пример запроса к агенту

Нарисуй диаграмму последовательности входа через OAuth и сохрани ее в docs/auth-flow.svg

MCP

Транспорт: stdio
Авторизация: не нужна

Ограничения

Сервер занимает один из локальных портов 3737–3747 и открывает вкладку браузера на компьютере, где запущен агент, поэтому на удаленной машине без браузера превью не откроется. Для рендера используется puppeteer, и в редких средах пакет не находится: README советует поставить claude-mermaid глобально или переустановить плагин. Живое превью доступно только для формата SVG, PNG и PDF строятся при сохранении.

Как отключить. Удалите плагин командой /plugin uninstall claude-mermaid или выполните claude mcp remove mermaid. Для установки через npm добавьте npm uninstall -g claude-mermaid. Рабочие файлы можно стереть в ~/.config/claude-mermaid.

Частые вопросы

Как подключить сервер к Cursor или Codex?

Для Codex выполните codex mcp add mermaid claude-mermaid, для Cursor добавьте в .cursor/mcp.json сервер mermaid с командой claude-mermaid. Предварительно пакет ставят глобально командой npm install -g claude-mermaid.

Какие инструменты открывает сервер?

Два: mermaid_preview рендерит диаграмму и открывает живое превью, mermaid_save сохраняет текущую диаграмму по указанному пути. Оба принимают идентификатор превью, по нему агент возвращается к нужной схеме.

Где хранятся рабочие файлы?

В каталоге ~/.config/claude-mermaid/live. Там лежат живые превью, поэтому они переживают перезапуск сервера.

Что делать, если puppeteer не найден?

Поставьте пакет глобально командой npm install -g claude-mermaid или переустановите плагин в Claude Code. README называет эту ошибку редкой и привязанной к среде.

Что показывает зеленая точка в превью?

Соединение страницы с сервером по WebSocket: зеленая точка означает связь, красная — переподключение. Кнопка со значком центра возвращает диаграмму в исходное положение.

Обсуждение

Вопросов и отзывов пока нет.

MCP-серверы

MCP Mermaid

MCP-сервер для генерации mermaid-диаграмм и графиков с проверкой синтаксиса и экспортом в svg, png и файл

MCP-серверРасширенный доступ649

Mermaid CLI

Mermaid CLI обрабатывает диаграммы внутри Markdown: создает SVG и заменяет текстовые блоки ссылками на готовые изображения.

CLIРасширенный доступ5,2 тыс.

Draw.io MCP Server

Официальный

Официальный MCP-сервер draw.io: агент строит диаграммы из XML или Mermaid и открывает их в редакторе draw.io

MCP-серверРасширенный доступ5,8 тыс.

Excalidraw MCP Server

Excalidraw MCP Server, CLI & Agent Skill

Живой холст Excalidraw для агента: создает, правит и экспортирует диаграммы через MCP или CLI, видит свою работу по скриншотам и сохраняет .excalidraw в репозит

MCP-серверРасширенный доступ2,6 тыс.

Next AI Draw.io

Next AI Draw.io: MCP-сервер и плагин, в которых агент рисует диаграммы draw.io на живом холсте в браузере, а вы правите их вручную

ПлагинРасширенный доступ36,9 тыс.

Smart Drawio

Smart Drawio Next

MCP-сервер и скилл для редактируемых диаграмм draw.io: агент создает XML по описанию, проверяет связи, чинит теги и применяет темы

MCP-серверРасширенный доступ366

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

Инструмент	Официальный	Авторизация	Звезды репозитория	Главное отличие
Claude Mermaid (эта карточка)	нет	не нужна	221
MCP Mermaid	нет	не нужна	649	рендерит диаграммы в изображение, у Claude Mermaid живое превью в браузере
mermaid-skill	нет		300	только скилл с подсказками, без сервера и превью

Коротко о README

README показывает возможности сервера, три способа установки (плагин, npm, исходники), настройку для Codex, Cursor, Cline и других клиентов, параметры двух инструментов, принцип живого обновления и советы по устранению ошибок.

Бейдж для README

Исходный SKILL.md

---
name: mermaid-diagrams
description: Creating and refining Mermaid diagrams with live reload. Use when users want flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, or any other Mermaid visualization, and when writing, editing, restyling, or reviewing a Mermaid block in a Markdown file. Provides best practices for syntax, styling, and the iterative workflow using mermaid_preview and mermaid_save tools.
allowed-tools: mcp__mermaid__mermaid_preview, mcp__mermaid__mermaid_save, mcp__plugin_claude-mermaid_mermaid__mermaid_preview, mcp__plugin_claude-mermaid_mermaid__mermaid_save
---

# Mermaid Diagram Expert

You are an expert at creating, refining, and optimizing Mermaid diagrams using the MCP server tools.

## Core Workflow

1. **Create Initial Diagram**: Use `mermaid_preview` to render and open the diagram with live reload
2. **Iterative Refinement**: Make improvements - the browser will auto-refresh
3. **Save Final Version**: Use `mermaid_save` when satisfied

## Tool Usage

### mermaid_preview

Always use this when creating or updating diagrams:

- `diagram`: The Mermaid code
- `preview_id`: Descriptive kebab-case ID (e.g., `auth-flow`, `architecture`)
- `format`: Use `svg` for live reload (default)
- `theme`: `default`, `forest`, `dark`, or `neutral`
- `background`: `white`, `transparent`, or hex colors
- `size`, `scale`: Adjust for quality/size

**Key Points:**

- Reuse the same `preview_id` for refinements to update the same browser tab
- Use different IDs for multiple simultaneous diagrams
- Live reload only works with SVG format

### mermaid_save

Use after the diagram is finalized:

- `save_path`: Where to save (e.g., `./docs/diagram.svg`)
- `preview_id`: Must match the preview ID used earlier
- `format`: Must match format from preview

## Diagram Types

Сообщить о проблеме