Скиллы для схем и диаграмм в Claude Code и Codex

Какой скилл для какой задачи

• Архитектура, workflow, sequence и data flow с проверкой раскладки стрелок — Archify.
• Около сорока типов диаграмм в вашем фирменном стиле — Diagram Design.
• Технические SVG и UML по описанию — Fireworks Tech Graph.
• Редактируемые файлы draw.io из Terraform, Kubernetes и SQL — drawio-skill и Draw.io MCP Server.
• Схемы в стиле от руки — Excalidraw MCP и Excalidraw Diagram Skill.
• HTML-страница вместо ASCII-схем в терминале — visual-explainer.
• Архитектурная схема в темной теме одним файлом — генератор архитектурных диаграмм.

Различие между инструментами в том, что вы получаете на выходе. Archify, Diagram Design, Fireworks Tech Graph и генератор отдают готовые файлы HTML или SVG. drawio-skill и Excalidraw отдают файлы, которые можно доработать руками в редакторе.

Готовые схемы одним файлом

Archify

Archify, 77 тыс. ★ репозитория. Агент описывает систему в типизированном JSON, а рендерер на Node.js проверяет схему и собирает HTML с SVG. Типов пять: архитектура, workflow, sequence, data flow и жизненный цикл состояний, можно подать и Mermaid. Валидатор проверяет раскладку, маршруты стрелок и подписи и при ошибке возвращает подсказку, что поправить. Готовый файл умеет искать узлы и трассировать пути. Нужен Node.js. Редактора для ручной правки нет. Риск средний.

npx skills add tt-a1i/archify -g

Diagram Design

Diagram Design, 43 тыс. ★ репозитория, рисует около сорока типов диаграмм: архитектуру, блок-схемы, последовательности, ER, таймлайны, квадранты, Sankey, диаграмму Исикавы, Гант и другие. Каждая диаграмма это отдельный файл HTML со встроенным SVG. Скилл подбирает палитру и шрифты бренда по публичной главной странице сайта, для закрытых страниц их задают вручную. Результат статичен. Риск средний.

• для Claude Code /plugin marketplace add cathrynlavery/diagram-design, затем /plugin install diagram-design@diagram-design
• для Codex codex plugin marketplace add cathrynlavery/diagram-design, затем codex plugin add diagram-design@diagram-design

Fireworks Tech Graph

Fireworks Tech Graph, 12 тыс. ★ репозитория, превращает описание в SVG через Python-скрипт с проверкой: ищет пересечения линий, читаемость подписей и соответствие стилю. Двенадцать визуальных стилей и до четырнадцати типов диаграмм, включая UML и облачную архитектуру. Экспорт в PNG, автономный HTML с зумом или анимированный GIF. Скилл работает локально и не отправляет данные наружу, риск низкий.

npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy

Генератор архитектурных диаграмм

Генератор архитектурных диаграмм, 7 тыс. ★ репозитория, собирает схему в темной теме: компоненты окрашиваются по типу, группы безопасности выделяются пунктиром, под схемой идут карточки с деталями. Стиль один, шрифт JetBrains Mono подгружается с Google Fonts. Работает в Claude Code и Claude Desktop. Скилл состоит из инструкций и шаблона, риск низкий.

unzip architecture-diagram.zip -d ~/.claude/skills/

visual-explainer

visual-explainer, 10 тыс. ★ репозитория, вместо ASCII-схем в терминале отдает готовую HTML-страницу: архитектуру, диаграммы Mermaid с зумом, разбор диффов, ревью планов и слайды. Работает в Claude Code, Cursor, Codex, OpenCode, Gemini CLI и других. Риск средний: скилл пишет файлы на диск.

• для Claude Code /plugin marketplace add nicobailon/visual-explainer, затем /plugin install visual-explainer@visual-explainer-marketplace

Редактируемые схемы

drawio-skill

drawio-skill, 10 тыс. ★ репозитория, делает файлы .drawio, которые можно править. Скилл планирует раскладку, пишет XML, экспортирует PNG, сам проверяет наложения и обрезанные подписи и исправляет до двух раз. Строит диаграммы из кода, Terraform, Kubernetes, docker-compose, SQL DDL, OpenAPI и CI, конвертирует Mermaid и фото доски. Нужен CLI draw.io desktop. Скилл читает вывод terraform show, docker inspect и kubectl, поэтому риск средний.

npx skills add Agents365-ai/drawio-skill -g

Draw.io MCP Server

Draw.io MCP Server, 6 тыс. ★ репозитория, ведет сама команда draw.io. Размещенный сервер https://mcp.draw.io/mcp рисует диаграмму прямо в чате и ничего не требует ставить, но отправляет содержимое диаграммы на сервер draw.io. Локальный вариант запускается через npx -y @drawio/mcp, открывает диаграмму в редакторе и понимает XML, CSV и Mermaid. Отрисовка в чате работает только в клиентах с поддержкой MCP Apps, в остальных сервер вернет XML текстом.

• для Claude Code /plugin marketplace add jgraph/drawio-mcp, затем /plugin install drawio@drawio

Excalidraw

Excalidraw MCP, 5 тыс. ★ репозитория, рисует диаграммы в стиле от руки прямо в чате с анимацией прорисовки и дает открыть их для правки и экспорта на excalidraw.com. Нужен клиент с поддержкой MCP Apps: Claude, VS Code, Goose и другие. Есть готовый удаленный адрес, а для локального запуска нужны Node 18 и сборка командой pnpm install && pnpm run build.

Excalidraw Diagram Skill, 5 тыс. ★ репозитория, генерирует JSON-файлы Excalidraw, где форма элементов отражает смысл: веер для связи один ко многим, таймлайн для последовательности. Встроенный рендер на Playwright позволяет агенту увидеть результат и исправить наложения. Работает в Claude Code и OpenCode, ставится копированием в .claude/skills. Для проверки нужен Chromium через Playwright.

Что учесть

Скиллы без пометки об агенте ставятся командой npx skills add, а флаг -a codex направляет установку в Codex. Для инструментов с маркетплейсом команды отдельные, они показаны выше. Размещенные серверы draw.io и Excalidraw передают содержимое диаграмм по сети: не отправляйте им схемы внутренней инфраструктуры. Подобрать инструмент под стек поможет Foxx AI, а другие скиллы лежат в разделе скиллов.