Diagram Design

Установка

npx skillfoxx add skills/diagram-design

npx skills add cathrynlavery/diagram-design --skill diagram-design -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .claude/skills
cp -R "$tmp/skills/diagram-design" .claude/skills/diagram-design

npx skills add cathrynlavery/diagram-design --skill diagram-design -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

npx skills add cathrynlavery/diagram-design --skill diagram-design -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .github/skills
cp -R "$tmp/skills/diagram-design" .github/skills/diagram-design

npx skills add cathrynlavery/diagram-design --skill diagram-design -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

npx skills add cathrynlavery/diagram-design --skill diagram-design -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .devin/skills
cp -R "$tmp/skills/diagram-design" .devin/skills/diagram-design

npx skills add cathrynlavery/diagram-design --skill diagram-design -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .cline/skills
cp -R "$tmp/skills/diagram-design" .cline/skills/diagram-design

npx skills add cathrynlavery/diagram-design --skill diagram-design -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .roo/skills
cp -R "$tmp/skills/diagram-design" .roo/skills/diagram-design

npx skills add cathrynlavery/diagram-design --skill diagram-design -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл дает агенту опинионированную систему верстки диаграмм и рисует около сорока типов: архитектуру, блок-схемы, диаграммы последовательностей и состояний, ER и схемы баз данных, таймлайны, дорожки, квадранты, радары, пирамиды, деревья, слои, Венна, Sankey, диаграмму Исикавы, карту Уордли, канбан, карту пути пользователя, столбчатые и линейные графики, Гант и другие. Каждая диаграмма это отдельный файл HTML со встроенным SVG и CSS, без сборки, без JavaScript и без внешних картинок, в трех вариантах: светлый минимал, темный минимал и полный редакторский. По просьбе скилл читает главную страницу сайта, вытягивает палитру и шрифты и подставляет их во все диаграммы. Он также перерисовывает исходники draw.io, Mermaid и Excalidraw в выбранном размере и уровне детализации.

Для кого. Для разработчиков, дизайнеров, технических писателей и продакт-менеджеров, которым нужны аккуратные диаграммы в стиле проекта.

Пример запроса к агенту

Нарисуй архитектурную диаграмму нашего сервиса в HTML и подбери цвета под сайт example.com

Ограничения

Скилл создает статичные файлы HTML и SVG, это не интерактивный редактор диаграмм. Подбор бренда работает по публичной главной странице сайта, для закрытых или сложных страниц палитру и шрифты приходится задавать вручную. Управляемая установка через маркетплейс может перезаписывать правки в references/style-guide.md при обновлении, для ручной правки стиля авторы советуют клонировать репозиторий и ставить локальный путь.

Как отключить. Удалите плагин diagram-design через /plugin в Claude Code или уберите папку скилла из каталога скиллов вашего агента.

Проверка безопасности

• Пишет файлы HTML и SVG в проект
• При онбординге бренда читает указанную страницу сайта по сети

Коротко о README

README представляет скилл для агентов, который рисует редакторские диаграммы как самостоятельные файлы HTML и SVG без теней и без вывода в духе Mermaid. Заявлено около сорока типов, каждый в трех вариантах: светлый минимал, темный минимал и полный редакторский. Отдельно описан онбординг: скилл читает сайт, вытягивает палитру и шрифты и подставляет их во все диаграммы, а также перерисовывает исходники draw.io, Mermaid и Excalidraw. Приведены команды установки для Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro и OpenCode. Лицензия MIT.

SKILL.md

---
name: diagram-design
description: Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, bar, waterfall, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, or database schema diagrams as standalone HTML/SVG/PNG. Redraw .drawio/.drawio.png/.drawio.svg, Mermaid .mmd, or Excalidraw .excalidraw sources at a chosen size/detail; onboard brand tokens from a website; add lifecycle phase maps, semantic patterns, callouts, accessible motion, or sketchy/hand-drawn styling.
license: MIT
metadata:
  version: "2.6"
---

# Diagram Design

Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.

Forty visual types. Semantic patterns describe behavior independently; type references describe layout. Details load from `references/` only when selected.

## 1. Philosophy

**The highest-quality move is usually deletion.**

- Every node represents a distinct idea. Two nodes that always travel together are one node.
- Every connection carries information. If the relationship is obvious from layout, remove the line.
- Coral is editorial, not a flag. 1-2 focal nodes per diagram.
- The schematic isn't done when everything is added. It's done when nothing can be removed.

**Target density: 4/10.**

Похожие