FlowForge
wentong2022-arch/flowforge-skillClaude Code скилл для создания профессиональных .drawio диаграмм из естественного языка. Поддерживает 11 типов макетов, 5 цветовых тем, ортогональную маршрутизацию стрелок и двуязычные подписи. Подходит для архитекторов и разработчиков.
Установка
git clone https://github.com/wentong2022-arch/flowforge-skill.gitREADME
FlowForge
Claude Code скилл, превращающий текстовые описания в профессиональные draw.io диаграммы — блок-схемы, архитектурные схемы, сравнения и многое другое.
English | 中文
Что такое FlowForge?
FlowForge — это скилл для Claude Code, который генерирует профессиональные .drawio диаграммы из текстовых описаний на естественном языке. Просто опишите, что нужно — CI/CD пайплайн, системную архитектуру, сравнение алгоритмов — и FlowForge создаст чистый, аккуратно размеченный draw.io XML-файл, готовый к открытию в draw.io desktop или app.diagrams.net.
Почему draw.io XML?
- Редактируемость — сгенерированную диаграмму можно доработать в любом редакторе draw.io.
- Переносимость — работает в браузерах, десктопных приложениях, расширениях VS Code, Confluence и т.д.
- Детерминированная генерация — абсолютные координаты и явные стили позволяют Claude создавать стабильные, предсказуемые макеты.
Возможности
- 11 алгоритмов компоновки —
flow,flow-vertical,compare,layers,loop,tree,hub,columns,matrix,funnel,timeline,sequence - 5 цветовых тем —
tech-blue(по умолчанию),morandi,mint,terracotta,indigo - Умные принципы цвета — адаптивный цветовой бюджет; синий доминирует со стратегическими акцентами, исключая «радужный» антипаттерн
- Ортогональная маршрутизация стрелок — чистые прямоугольные изгибы без диагоналей
- Двуязычные подписи — китайский / английский с сохранением технических аббревиатур
- Workflow со скетчем — перед генерацией XML показывает ASCII-набросок для подтверждения
Установка
Вариант 1: как плагин Claude Code (рекомендуется)
# В Claude Code
/plugin install https://github.com/winstonyoyo/flowforge-skillИли добавьте в маркетплейс плагинов и установите оттуда.
Вариант 2: ручная установка скилла
Клонируйте репозиторий и скопируйте директорию скилла в папку скиллов Claude Code:
git clone https://github.com/winstonyoyo/flowforge-skill.git
cp -r flowforge-skill/skills/FlowForge ~/.claude/skills/
# Или для проектного скоупа:
cp -r flowforge-skill/skills/FlowForge ./.claude/skills/Использование
В Claude Code просто опишите, что хотите нарисовать:
Draw a flowchart for our user signup process
画一个 RAG 检索流程图
Compare PPO vs DPO vs GRPO algorithms
帮我画一个微服务架构图
Или используйте slash-команду /FlowForge явно:
/FlowForge "OAuth 2.0 authorization code flow"
/FlowForge path/to/design-doc.md --type layers --theme morandi
Рабочий процесс
- Опишите что хотите нарисовать
- Выберите тему (или оставьте
tech-blueпо умолчанию) - Проверьте ASCII-набросок — FlowForge показывает планируемую структуру перед генерацией XML
- Откройте
.drawioфайл в draw.io и доработайте при необходимости
Цветовые темы
| Тема | Стиль | Лучше всего для |
|---|---|---|
tech-blue | Сине-серый + тёплые акценты | Технический контент, системная документация (по умолчанию) |
morandi | Приглушённый шалфей + дымчатый фиолетовый | Дизайн-портфолио, брендовые презентации |
mint | Мятный зелёный + тёплый жёлтый | Продуктовые флоу, пользовательские пути |
terracotta | Землистая глина + песок | Бизнес-стратегия, операции |
indigo | Насыщенный индиго + фиолетовый | Технические презентации, запуски |
Типы диаграмм
| Тип | Код | Лучше всего для |
|---|---|---|
| Линейный флоу | flow | Последовательные шаги A → B → C |
| Вертикальный флоу | flow-vertical | Процессы сверху вниз |
| Сравнение | compare | A vs B бок о бок |
| Стек слоёв | layers | Многоуровневые архитектуры |
| Цикл | loop | Итеративные процессы (CI/CD, циклы обучения) |
| Дерево | tree | Иерархии, таксономии |
| Хаб и спицы | hub | Одно ядро, много ветвей |
| Параллельные колонки | columns | 3+ параллельных концепции |
| Матрица | matrix | Многомерные сравнения |
| Воронка | funnel | Фильтрация, конверсия |
| Таймлайн | timeline | Эволюция версий |
| Последовательность | sequence | Взаимодействие компонентов |
Галерея
9 примеров диаграмм, сгенерированных FlowForge, охватывающих все 5 тем и наиболее используемые типы диаграмм — исходные .drawio файлы находятся в gallery/.
Многоуровневая архитектура (layers × tech-blue + мультицвет)
Сравнение алгоритмов (columns + loop × tech-blue)
Дерево решений (tree × mint)
Хаб и спицы (hub × indigo)
Таймлайн (timeline × terracotta)
Полный индекс
| # | Диаграмма | Тип | Тема |
|---|---|---|---|
| 01 | Пайплайн сбора данных | flow-vertical + ветвление | tech-blue |
| 02 | Умный пайплайн запросов к данным | flow-vertical (длинный, с цветовым ритмом) | tech-blue |
| 03 | Архитектура платформы экономических данных | layers (5 уровней) | мультицвет по слоям |
| 04 | Алгоритмы PPO vs DPO vs GRPO | columns (горизонтальное × вертикальное сравнение с циклами) | tech-blue + акценты |
| 05 | LLM full-stack архитектура | layers (6 уровней + сквозная панель) | полная палитра |
| 06 | Традиционная vs AI-усиленная команда данных | compare | morandi |
| 07 | Дерево решений по выбору хранилища | tree | mint |
| 08 | Хаб возможностей агента | hub | indigo |
| 09 | Таймлайн эволюции LLM | timeline | terracotta |