SkillFoxx
Telegram

Diagram Design — скилл

Скилл рисует редакторские диаграммы как самостоятельные файлы HTML и SVG: архитектура, блок-схемы, ER, воронки и еще около сорока типов

  • 66 822 ★ репозитория
  • Последний коммит
  • MIT
СкиллВыбор редакции

Расширенный доступ

Почему такой уровень

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

cathrynlavery/diagram-designАвтор:Cathryn Lavery

Установка

Ручная установка

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

После установки в /plugin включите автообновление для маркетплейса diagram-design.

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

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

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

Что делает

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

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

Подходит, если

  • Нужна архитектурная схема или блок-схема, которая выглядит как часть бренда, а не шаблон
  • Нужно перерисовать исходник Mermaid, draw.io или Excalidraw в чистый HTML и SVG
  • Нужно подобрать палитру и шрифты диаграмм под сайт проекта

Не подходит, если

  • Хватает таблицы, списка или одного предложения
  • Нужен редактируемый исходник в формате конкретного редактора, а не готовый HTML

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

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

Ограничения

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

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

Частые вопросы

Диаграммы нужно куда-то экспортировать?

Нет. Каждый файл это самостоятельный HTML со встроенным SVG и CSS, он открывается прямо в браузере, без сборки и внешних зависимостей.

Можно применить фирменные цвета?

Да. Попросите онбординг по адресу сайта, скилл вытянет палитру и шрифты с главной страницы, покажет предлагаемые изменения и после подтверждения запишет их в стиль.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Скилл рисует по короткой JSON-спецификации анимированные диаграммы 45 типов и сохраняет их в HTML, SVG, PNG, GIF и MP4

СкиллРасширенный доступ936

Скилл рисует архитектурную схему системы в виде одного HTML-файла с SVG, кнопками копирования и экспорта в PNG и PDF

СкиллМинимальный доступ7,6 тыс.

Скилл рисует диаграммы с китайской типографикой: 45 типов, один HTML без внешних шрифтов, экспорт SVG и PNG, перерисовка Mermaid.

СкиллМинимальный доступ50

Скилл читает репозиторий, статью или PDF и рисует интерактивную архитектурную схему с бегущими потоками данных

СкиллРасширенный доступ126

Скилл рисует диаграмму в стиле Excalidraw по текстовому запросу и отдает ссылку на редактор, анимацию и PNG.

СкиллРасширенный доступ85

Скилл для редактируемых диаграмм draw.io из текста, кода, Terraform, Kubernetes, SQL и OpenAPI с экспортом и самопроверкой

СкиллРасширенный доступ10,7 тыс.

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

ИнструментОфициальныйЗвезды репозиторияГлавное отличие
Diagram Design (эта карточка)нет66 822
Anatomyнет26 920скилл рисует интерактивные изометрические иллюстрации в SVG
SeeCodeнет936скилл рисует по короткой JSON-спецификации анимированные диаграммы 45
MLViewнет466плагин для Claude Code

Из блога

Коротко о README

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

Бейдж для README

Исходный 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.**

Сообщить о проблеме