Draw.io Skill
Draw.io Skill for Claude & Codex
Скиллы для диаграмм draw.io: архитектура, сети, блок-схемы, импорт из Terraform и кода, офлайн-генерация из YAML и экспорт в PNG и SVG
- 292 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл запускает локальный CLI на Node, пишет файлы диаграмм и читает папки проекта при импорте кода и конфигураций
- Необязательная живая правка запускает MCP-сервер через `npx` с версией `latest`
Установка
- Работает в
Ручная установка
npx skills add bahayonghang/drawio-skillsПосле установки перезапустите клиент. Вручную скопируйте `skills/drawio` и, для рисунков в статьи, `skills/drawio-academic-skills` в каталог навыков.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл запускает локальный CLI на Node, пишет файлы диаграмм и читает папки проекта при импорте кода и конфигураций
- Необязательная живая правка запускает MCP-сервер через `npx` с версией `latest`
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Draw.io Skill строит и правит диаграммы draw.io через офлайн-процесс, где главный формат описания — YAML. Агент по запросу вроде `/drawio create a horizontal tech-blue login flow with 6 nodes` пишет спецификацию и локальной командой превращает ее в файл `.drawio`, а рядом кладет вспомогательные файлы `.spec.yaml` и `.arch.json`. Для PNG, PDF, JPG и встроенного SVG используется draw.io Desktop, без него изображение экспортируется как отдельный SVG. Три маршрута: создание, правка и воспроизведение готовой схемы. Есть семь тем оформления, пятнадцать палитр, значки облачных провайдеров, логотипы ИИ-моделей, топология сети с подписями интерфейсов и VLAN. Диаграмму можно получить из Terraform, Kubernetes, Compose, SQL DDL, OpenAPI, GitHub Actions и GitLab CI, а также из связей модулей и классов в Python, JavaScript, TypeScript, Go и Rust. В репозитории два скилла: базовый `drawio` и надстройка `drawio-academic-skills` для рисунков в статьи и диссертации с проверкой подписей, легенд и формул.
Для кого. Для разработчиков, архитекторов и сетевых инженеров, которым нужны редактируемые схемы draw.io из текста и кода, и для авторов статей, оформляющих научные рисунки.
Подходит, если
- Нужна схема архитектуры или сети: файервол, ядро, два сервера приложений и подсеть БД, с подписями интерфейсов и VLAN на связях
- Надо превратить Terraform, манифесты Kubernetes, Compose или OpenAPI в диаграмму без облачных CLI и сети
- Есть готовый файл `.drawio`, и его нужно перенести в YAML-пакет для повторяемой правки: `--input-format drawio --export-spec`
- Требуется схема связей модулей и классов проекта на Python, TypeScript, Go или Rust из локальной папки
- Нужен рисунок для статьи в стиле IEEE: надстройка `drawio-academic-skills` отдает `.drawio`, YAML, JSON и SVG
Не подходит, если
- Нужно воспроизвести чужую диаграмму с лучшей точностью: автор советует для этого проект `drawio-scientific-illustrator`, ветку `dev`
- Нужна живая правка в браузере как основной способ: она опциональна, работает только в базовом скилле и требует MCP-сервера
- Нужны экспорт в PNG и PDF без draw.io Desktop: без него остается отдельный SVG
- Вам не нужна среда Node 20: командный процесс из YAML требует Node 20 и новее
Пример запроса к агенту
Нарисуй сетевую топологию в теме `tech-blue`: файервол, коммутатор ядра, два сервера приложений и закрытая подсеть базы данныхОграничения
Для офлайн-процесса нужен Node 20 или новее. Изображения в 300 dpi выдает draw.io Desktop; без него остается отдельный SVG. Локальные PNG и JPEG добавляются как ресурсы, SVG и многостраничные ресурсы в первой версии не поддержаны. Для рисунков в научные работы запрос нужно направлять в надстройку, а базовый скилл публикационных проверок не применяет.
Живая правка через MCP-сервер `@next-ai-drawio/mcp-server` необязательна и касается только базового скилла, надстройка к MCP не обращается. Автор прямо называет предпочтительный путь для воспроизведения схем: проект `drawio-scientific-illustrator`, ветка `dev`. После установки скиллов клиент нужно перезапустить.
Как отключить. Удалите папки `drawio` и `drawio-academic-skills` из каталога навыков клиента. Если подключали MCP-сервер, уберите запись `drawio` из конфигурации Claude или из `config.toml` Codex.
Частые вопросы
Как поставить Draw.io Skill в Claude Code или Codex?
Выполните `npx skills add bahayonghang/drawio-skills` и перезапустите клиент. Вручную копируют папку `skills/drawio` в каталог навыков клиента, а для публикационных задач рядом кладут `skills/drawio-academic-skills`, потому что надстройка ищет соседний `../drawio`.
Нужен ли MCP-сервер?
Нет. Создание, правка и экспорт идут без него. MCP `@next-ai-drawio/mcp-server` нужен только для необязательной живой правки в браузере, и только в базовом скилле.
Какие форматы экспорта доступны?
С установленным draw.io Desktop скилл выдает PNG в 300 dpi, PDF, JPG и встроенный `.drawio.svg`. Без него остается отдельный SVG.
Из чего можно получить диаграмму автоматически?
Из Terraform, Kubernetes, Compose, SQL DDL, OpenAPI, GitHub Actions и GitLab CI, а также из связей модулей и классов в Python, JavaScript, TypeScript, Go и Rust. Все импортеры работают офлайн, без облачных CLI и Graphviz.
Для чего нужна надстройка drawio-academic-skills?
Для рисунков в статьи и диссертации. Она проверяет аудиторию и издание, подписи и легенды, точность формул и ожидания к форматам A4, Word и LaTeX, а рисунок относит к архитектуре, дорожной карте или процессу. Ей нужен соседний скилл `drawio`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для редактируемых диаграмм draw.io из текста, кода, Terraform, Kubernetes, SQL и OpenAPI с экспортом и самопроверкой
Скилл рисует редакторские диаграммы как самостоятельные файлы HTML и SVG: архитектура, блок-схемы, ER, воронки и еще около сорока типов
Официальный MCP-сервер draw.io: агент строит диаграммы из XML или Mermaid и открывает их в редакторе draw.io
Next AI Draw.io: MCP-сервер и плагин, в которых агент рисует диаграммы draw.io на живом холсте в браузере, а вы правите их вручную
Плагин Codex перерисовывает научный рисунок по образцу на живом холсте draw.io шаг за шагом, затем проверяет файл и экспортирует PNG, SVG, PDF или JPG
Скилл, который строит диаграммы Excalidraw по описанию и проверяет их вид через рендер в Playwright
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Draw.io Skill (эта запись) | нет | 292 | ||
| drawio-skill | нет | 10 307 | другой скилл draw.io из текста, кода, Terraform и SQL; здесь офлайн-пакет YAML с надстройкой для научных рисунков | |
| Draw.io MCP Server | да | не нужна | 5 695 | официальный MCP-сервер draw.io, а здесь скилл с локальным CLI, где MCP необязателен |
| drawio-ai-kit | нет | 659 | скиллы и CLI под схемы AWS, Azure, GCP и BPMN, а здесь шире по темам, импортерам и экспорту |
Коротко о README
Описание открывается предупреждением, что основной путь работы — офлайн из YAML, а MCP-сервер необязателен. Затем идут два скилла, список возможностей, порядок выбора среды выполнения, установка и необязательная настройка живой правки. Завершают быстрый старт с примерами запросов и командами оболочки, которые рендерят и проверяют пакет.
Бейдж для README
Исходный SKILL.md
---
name: drawio
version: "2.8.0"
description: "Create, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org charts, Mermaid/CSV conversion, existing .drawio bundles, style presets, themes, and non-publication formula diagrams. For publication figures (paper, thesis, IEEE, camera-ready) use drawio-academic-skills instead."
license: MIT
homepage: https://github.com/bahayonghang/drawio-skills
compatibility: "Node 20+ for the YAML/CLI workflow. draw.io Desktop produces the default 300dpi PNG (plus PDF/JPG or embedded .drawio.svg); without it, image exports fall back to a standalone SVG. No MCP server is required for offline authoring; the optional live-refinement backend needs a browser/MCP provider."
platforms: [macos, linux, windows]
metadata:
category: visual-design
tags:
- diagram
- drawio
- architecture
- flowchart
- network-topology
- uml
- mermaid
- csv
- design-system
- math
argument-hint: [diagram-description-or-instruction]
allowed-tools: Read, Write, Bash, AskUserQuestion
---
# Draw.io Base Skill
Create, edit, validate, replicate, import, and export draw.io diagrams through a YAML-first offline workflow. It is the single maintained base for sibling overlays and owns the local CLI, schemas, references, themes, palettes, examples, style presets, and export helpers.
## Scope
Use this base skill for general draw.io work: software/system architecture; network topologies and infrastructure maps; flowcharts, swimlanes, process maps, and org charts; UML class/sequence/state/ER; Mermaid and CSV conversion; structured redraw and non-academic replication; formula-bearing technical diagrams; `.drawio` import, sidecar export, and local validation.
For paper, thesis, IEEE, journal, manuscript, or publication-ready figure requests, route to the sibling `drawio-academic-skills` overlay; the base does not apply academic publication gates. Without the overlay, render the local YAML bundle but report that overlay policy was not applied.
## Runtime Stack
Use the lightest path that satisfies the request:
- **Offline Authoring Path (default)** — the YAML spec generates the final `.drawio` plus the default delivered image, a **300dpi PNG** via draw.io Desktop (standalone SVG fallback).