OpenFlowKit MCP
Холст для диаграмм, на котором Claude Code и Codex рисуют по MCP: схемы из Mermaid, D2 и Structurizr, карта репозитория, экспорт в SVG и PDF
- 971 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускается через `npx` и правит файлы `.openflow.json` и `.ofk` в репозитории, а при плагине добавляет навык агенту
- Карта репозитория GitHub читает данные с GitHub, для закрытого репозитория на странице вводится токен только на чтение
- Ассистент в приложении отправляет запросы выбранному провайдеру с вашим ключом из браузера
Установка
- Работает в
Ручная установка
claude mcp add -s user openflowkit -- npx -y openflowkit mcpНужен Node 20.11 или новее. После перезапуска агента нажмите Connect agent в приложении.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускается через `npx` и правит файлы `.openflow.json` и `.ofk` в репозитории, а при плагине добавляет навык агенту
- Карта репозитория GitHub читает данные с GitHub, для закрытого репозитория на странице вводится токен только на чтение
- Ассистент в приложении отправляет запросы выбранному провайдеру с вашим ключом из браузера
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
OpenFlowKit состоит из веб-холста для диаграмм, MCP-сервера и командной строки `openflowkit` на одном движке. Сервер ставится командой `npx -y openflowkit mcp`. Когда в браузере открыт холст на app.openflowkit.com и агент связан с ним кнопкой Connect agent, агент рисует прямо на нем: создает и обновляет диаграммы, двигает и перекрашивает фигуры, делает снимок экрана, чтобы проверить результат, и отдает файлы SVG, PNG, PDF, JSON или анимированный SVG. Каждое изменение агента отменяется одним шагом, как правка пользователя. Если приложение не запущено, те же операции правят файлы `.openflow.json` в репозитории. Всего у сервера 29 инструментов: 16 операций редактора вроде `create_diagram`, `update_diagram`, `get_diagram`, `style`, `screenshot`, `export` и 13 для файлов и репозиториев, среди них `discover_architecture`, `drift_report` и `explain_element`. Диаграмма хранится как текст на собственном языке, который можно править в панели кода. Mermaid, D2 и Structurizr вставляются в нее и конвертируются, программа показывает список того, что перенести не удалось. Команды `npx openflowkit render`, `validate`, `convert`, `discover` и `drift` рисуют SVG, проверяют файлы, набрасывают модель C4 по репозиторию и сообщают, что код ушел от нарисованной архитектуры. Для pull request есть GitHub Action, который комментирует изменения диаграмм.
Для кого. Для разработчиков и архитекторов, которые просят Claude Code, Cursor или Codex нарисовать схему системы и потом править ее руками, и для команд, которые хранят архитектуру в репозитории рядом с кодом.
Подходит, если
- Нужна схема архитектуры по репозиторию, которую агент нарисует, а вы доправите мышью
- В документации лежат диаграммы Mermaid, D2 или Structurizr, и их надо перевести в редактируемый вид
- Архитектурную модель хочется хранить в файле `architecture.ofk` и ловить расхождение с кодом командой `drift` в CI
- Нужен экспорт диаграммы в SVG, PDF или PNG прямо из диалога с агентом
- В pull request нужен комментарий о том, как изменились диаграммы
Не подходит, если
- Нужна совместная правка в реальном времени: диаграммой делятся снимком или копией, одновременной работы нет
- Вам нужен только текст Mermaid для вставки в статью: достаточно `mcp-mermaid`, он проверяет синтаксис и экспортирует картинку
- Холст нужен на устройстве без современного настольного браузера с WebGL
Пример запроса к агенту
Нарисуй архитектуру этого репозитория в OpenFlowKit, а потом сделай выбранные мной блоки красными и добавь кэш перед APIMCP
- Транспорт
- stdio, http
- Авторизация
- не нужна
Ограничения
- Для сервера и командной строки нужен Node 20.11 или новее, для запуска холста из исходников Node 22.22. Холст работает в современном настольном браузере с WebGL, автотесты идут в Chromium.
- Рисовать на холсте агент может, только пока приложение запущено и связано кнопкой Connect agent. Вариант через собственный коннектор в чат-приложениях claude.ai и ChatGPT показывает диаграмму карточкой в чате, но не на холсте.
- Веб-вариант для агентов в браузере через WebMCP автор называет экспериментальным.
- Для карты репозитория GitHub нужен доступ к нему, для закрытого репозитория на странице вводится токен только на чтение. Ассистент в приложении работает со своим ключом и отправляет запросы выбранному провайдеру.
- Автор собирает базовую статистику использования, ее отключают в настройках, а план Pro для команд только готовится.
Как отключить. Для Claude Code выполните `claude mcp remove openflowkit` либо удалите плагин командой `claude plugin uninstall openflowkit@openflowkit`. В других клиентах уберите блок `openflowkit` из MCP-конфигурации. Диаграммы лежат в браузере и в файлах `.openflow.json`, раздел Home позволяет скачать все сразу.
Частые вопросы
Как ИИ рисует диаграмму в OpenFlowKit?
Агент вызывает `create_diagram` с текстом на языке диаграмм или Mermaid, `get_diagram` возвращает текст так, чтобы ваши ручные правки сохранились, а `update_diagram` сообщает, что пришлось отбросить. Результат агент проверяет инструментом `screenshot`.
Можно ли подключить OpenFlowKit без установки на компьютер?
В чат-приложениях claude.ai, Claude Desktop и ChatGPT добавьте собственный коннектор `https://mcp.openflowkit.com/mcp` и выберите вариант без входа. Диаграмма придет карточкой в чате с кнопкой Open in OpenFlowKit.
Как получить карту GitHub-репозитория?
Введите `owner/repo` в пустой холст и нажмите Map repo, либо откройте `app.openflowkit.com/#/map/github/<owner>/<repo>`. Каждая стрелка показывает файл и строку, откуда она взята. Локальную копию картируют командой `npx openflowkit map . --html map.html`.
Как ловить расхождение архитектуры и кода?
Положите `architecture.ofk` рядом с кодом и запускайте `npx openflowkit drift .` в CI: команда завершается с кодом 1, когда код ушел от модели. Черновик модели создает `npx openflowkit discover . --out architecture.ofk`.
Какие форматы принимает и отдает OpenFlowKit?
На вход идут Mermaid (flowchart, sequenceDiagram, stateDiagram, erDiagram, classDiagram, mindmap и другие), Structurizr DSL и D2. На выход PNG в одно- и двукратном размере, SVG, PDF, JSON и анимированный SVG, а Copy as Mermaid дает текст для README.
Остаются ли мои диаграммы в браузере?
Да, диаграммы хранятся в браузере. Наружу что-то уходит только по вашему действию: ассистент с вашим ключом шлет запрос выбранному провайдеру, ссылка для обмена загружает зашифрованную копию, карта репозитория читает данные с GitHub.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыОфициальный MCP-сервер draw.io: агент строит диаграммы из XML или Mermaid и открывает их в редакторе draw.io
Скилл рисует проверенные схемы архитектуры, процессов, последовательностей и потоков данных в один интерактивный HTML-файл
Smart Drawio
Smart Drawio Next
MCP-сервер и скилл для редактируемых диаграмм draw.io: агент создает XML по описанию, проверяет связи, чинит теги и применяет темы
MCP-сервер для диаграмм Mermaid: рисует схему в браузере с автообновлением и сохраняет в SVG, PNG или PDF
Next AI Draw.io: MCP-сервер и плагин, в которых агент рисует диаграммы draw.io на живом холсте в браузере, а вы правите их вручную
Скилл рисует редакторские диаграммы как самостоятельные файлы HTML и SVG: архитектура, блок-схемы, ER, воронки и еще около сорока типов
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| OpenFlowKit (эта карточка) | нет | не нужна | 971 | |
| MCP Mermaid | нет | не нужна | 649 | только генерация mermaid-диаграмм и графиков с проверкой синтаксиса и экспортом, без холста для ручной правки |
| Excalidraw MCP | да | не нужна | 5 667 | рисует диаграммы в стиле от руки Excalidraw прямо в чате |
| Draw.io MCP Server | да | не нужна | 5 824 | официальный сервер draw.io: диаграммы из XML или Mermaid открываются в редакторе draw.io |
Коротко о README
Репозиторий содержит приложение холста, пакет MCP-сервера и командной строки в `mcp-server/`, плагины для Claude Code и Codex с навыком `skills/openflowkit/SKILL.md`, действие GitHub Action в `action/`, Dockerfile для самостоятельного размещения и документацию архитектуры. Главная страница проекта дает таблицу способов подключить агента, список инструментов, таблицу форматов импорта и экспорта и раздел о конфиденциальности.