hudsonkit/arc
hudsonkit
Инструмент для создания интерактивных архитектурных диаграмм как кода: типизированная JSON-схема, React-рендерер, визуальный редактор, импорт Mermaid и экспорт в PNG, SVG, GIF, MP4.
Arc — это набор инструментов для визуального объяснения программных систем. Он позволяет описывать архитектуру в типизированном JSON или TypeScript, редактировать её на холсте или в коде и экспортировать результат в PNG, SVG, GIF и MP4.
Ключевые возможности
- Типизированная JSON-схема для описания архитектурных диаграмм и изометрических видов
- React-рендерер для встраивания диаграмм в веб-приложения
- Визуальный редактор для работы с диаграммами на холсте
- Импорт Mermaid-диаграмм (flowchart, state, sequence) в редактируемые данные Arc
- Экспорт в PNG, SVG, GIF и MP4, включая анимированные маршруты потоков
- CLI и MCP-сервер для работы с диаграммами из командной строки и агентов
Для каких задач подходит
- Создание онбординг-руководств и интерактивных статей по архитектуре системы
- Проведение дизайн-ревью с возможностью исследовать слои архитектуры
- Визуализация последовательностей запросов и взаимодействий между сервисами
- Поддержание диаграмм в актуальном состоянии вместе с кодом в репозитории
- Генерация анимированных GIF или MP4 для README и презентаций
Подробнее
Arc хранит исходник диаграммы в репозитории рядом с кодом, поэтому изменения архитектуры можно обсуждать и обновлять в том же пул-реквесте, что и код. Диаграмма описывается в типизированной JSON-схеме или TypeScript, что даёт проверку типов и возможность генерировать данные программно. Для визуальной работы предусмотрен редактор на холсте, а для встраивания в приложения — React-рендерер. Импорт из Mermaid позволяет начать с существующих flowchart, state или sequence-диаграмм и продолжить работу в Arc, применяя собственные раскладки и темы. При этом рендеры и каталоги диаграмм из сторонних Mermaid-инструментов не импортируются — только исходный текст поддерживаемого синтаксиса. Экспорт в PNG, SVG, GIF и MP4 покрывает как статичные изображения для документации, так и анимированные демонстрации потоков. CLI и MCP-сервер дают возможность работать с диаграммами из командной строки или через агентов. Стоит учитывать, что проект молодой (13 звёзд), а поддержка Mermaid ограничена определённым синтаксисом, поэтому перед миграцией сложных диаграмм нужно свериться с документацией по покрытию импорта.
Частые вопросы
Как установить arc?
Отдельной команды установки в README нет — склонируйте репозиторий и следуйте инструкции из README:
git clone https://github.com/hudsonkit/arc.gitКакие задачи решает arc?
Arc решает задачу создания и поддержки архитектурных диаграмм как кода: вы описываете систему в JSON или TypeScript, редактируете визуально или в коде и экспортируете в нужный формат. Инструмент также помогает импортировать существующие Mermaid-диаграммы и встраивать интерактивные схемы в документацию или приложения.
Какие форматы Mermaid поддерживаются для импорта?
Arc импортирует Mermaid flowcharts и state-диаграммы в редактируемые данные архитектуры, а sequence-диаграммы отображает нативно с пошаговым воспроизведением. Рендеры и темы сторонних Mermaid-инструментов не импортируются — только исходный текст поддерживаемого синтаксиса.
Можно ли использовать Arc в коммерческих проектах?
Да, проект распространяется под лицензией MIT, которая разрешает коммерческое использование при сохранении уведомления об авторских правах.
Чем Arc отличается от обычных редакторов диаграмм?
Arc хранит исходник диаграммы в репозитории как типизированные данные, что позволяет версионировать и обновлять её вместе с кодом. Кроме того, он поддерживает интерактивные виды, анимацию потоков и экспорт в GIF и MP4, а также предоставляет CLI и MCP-сервер.
О репозитории
Язык
Лицензия
Звёзды
13
Форки
0
Открытые issues
0
Контрибьюторы
0
Создан
11.01.2026
Обновлён
19.10.2026