SkillFoxx
Telegram

diagram-design-zh — скилл

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

  • 50 ★ репозитория
  • Последний коммит
  • MIT
Скилл

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

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

  • Скилл только создает файлы диаграмм по вашему описанию и ничего не запускает на сторонних сервисах.
Все причины и проверки

patrick-xin/diagram-design-zhАвтор:patrick-xin

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/diagram-design-zh

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

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

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

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

  • Скилл только создает файлы диаграмм по вашему описанию и ничего не запускает на сторонних сервисах.

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

Что делает

Скилл создает, перерисовывает и правит диаграммы на китайском языке. Вы описываете, что диаграмма должна сказать, а скилл выбирает подходящий тип из 45 и делает готовую работу. По умолчанию это белый фон и общий стиль, результат лежит в одном HTML-файле со встроенным SVG и подмножеством шрифтов, поэтому диаграмма открывается без сети, сохраняется и пересылается. При необходимости экспорт идет в SVG или PNG. Типы охватывают архитектуру, потоки данных, схемы баз данных, зависимости, развертывание, ER, диаграммы Исикавы, Ганта, тепловые карты и другие. Скилл умеет читать структуру Mermaid или draw.io и перекладывать ее по своим правилам, а не просто менять оформление. Среди опций значки, темная тема, оболочка терминала, пошаговая анимация, примечания и рисованный эффект.

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

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

  • Архитектуру электронной коммерции нужно показать руководителям, далеким от технических деталей
  • Диаграмму последовательности Mermaid надо перерисовать с китайскими подписями
  • Выручку пяти линеек сравнивают за два года в понятной диаграмме
  • Схему базы данных или ER-модель нужно положить в презентацию как одну картинку
  • Нужна обложка для публикации в нестандартном размере

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

  • Нужны диаграммы без китайской типографики: исходный проект diagram-design сделан под английский текст
  • Вам нужна редактируемая диаграмма в draw.io: скилл выдает HTML, SVG и PNG
  • Нужен простой набросок схемы: скилл рассчитан на готовую работу

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

Нарисуй архитектуру электронной коммерции для руководителей, подписи по-китайски, на белом фоне.

Ограничения

Проект основан на `diagram-design` Кэтрин Лавери и добавляет китайскую типографику и готовые работы. Автоматическая установка и обнаружение зависят от того, поддерживает ли ваш агент формат Agent Skills, а установщик `skills` работает только с поддерживаемыми им агентами. Вывод по умолчанию в светлой теме, остальные оформления включаются отдельно. Шрифты встраиваются подмножеством, поэтому при смене текста вручную в готовом файле используйте перегенерацию скиллом. Версия скилла 0.2.0, лицензия MIT, сторонние лицензии перечислены в `THIRD_PARTY_LICENSES.md`.

Как отключить. Удалите папку скилла `diagram-design-zh` из каталога скиллов агента. Готовые HTML, SVG и PNG-файлы остаются у вас и от скилла не зависят.

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

Как установить скилл?

Выполните `npx skills add https://github.com/patrick-xin/diagram-design-zh --skill diagram-design-zh`. Агент должен поддерживать формат Agent Skills.

Сколько типов диаграмм поддерживается?

Сорок пять. Для каждого есть пример в онлайн-галерее проекта, где можно переключать светлую, темную и поясняющую темы.

Можно ли перерисовать готовую схему Mermaid или draw.io?

Да. Скилл читает структуру исходной схемы и перекладывает ее по своим правилам, а не просто меняет оформление.

Работает ли готовый файл без интернета?

Да. Результат лежит в одном HTML-файле со встроенным SVG и подмножеством нужных шрифтов, внешние шрифты не подключаются.

Как выбрать тип, если неясно, какой нужен?

Опишите, что диаграмма должна показать и что должен увидеть читатель. Если вы разрешили выбор агенту, скилл подберет тип и объяснит причину, уточняя только то, что влияет на смысл.

Обсуждение

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

Скиллы
Выбор редакции

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

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

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

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

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

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

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

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

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

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

Draw.io Skill

Draw.io Skill for Claude & Codex

Скиллы для диаграмм draw.io: архитектура, сети, блок-схемы, импорт из Terraform и кода, офлайн-генерация из YAML и экспорт в PNG и SVG

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

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

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

ИнструментОфициальныйАвторизацияЗвезды репозиторияГлавное отличие
diagram-design-zh (эта карточка)нет50
Diagram Designнет66 598исходный скилл с правилами для английских диаграмм; здесь китайская типографика и 45 готовых типов
Claude Mermaidнетне нужна221MCP-сервер, который рисует Mermaid в браузере; здесь перерисовка по своим правилам в автономный HTML

Коротко о README

README на китайском перечисляет возможности, показывает галерею из 45 типов, описывает установку через skills CLI, примеры запросов, импорт и экспорт и тестирование. Проект благодарит автора исходного diagram-design.

Бейдж для README

Исходный SKILL.md

---
name: diagram-design-zh
description: 生成、重绘或修改中文图表，默认输出带内联 SVG 和内嵌字体的独立 HTML；可导出 PNG/SVG。用于架构、流程、数据比较、计划、关系与空间示意图，以及 Mermaid/draw.io 重绘；支持品牌样式、字体更换和可选动效。不用于一般网页或应用界面开发。
license: MIT
metadata:
  version: "0.2.0"
---

# 图表设计

用中文排版规则与共享样式生成通用、白底、开箱即用的图表。默认交付自包含 HTML + 内联 SVG；文件不依赖远程字体或脚本。

## 0. 载入策略与样式选择

- 每次任务读本入口与 [style-guide.md](references/style-guide.md) 的通用规则，默认样式数据见 [default.json](styles/default.json)。默认直接制图；用户未要求品牌定制时，不以首次品牌问答阻塞制图。
- 用 `scripts/profiles.py resolve --project <项目根>` 解析项目样式（见 [profiles.md](references/profiles.md)）；命名档案只覆盖数据，未覆盖项从当前默认合并，不写安装目录。缺失/无效选择明确报错，不悄悄换品牌。
- 使用档案时简要说明本次生效档案，便于及时发现串样式，不设置确认停顿。
- 用户要求自己的颜色/字体时读 [onboarding.md](references/onboarding.md)。区分本张成品与命名项目档案；只改用户要求的范围。用户已明确给值和作用范围时直接执行；推导品牌映射或扩大持久化范围前给 diff 提案。
- 选定类型后读对应 `type-*.md`，参考其 `assets/example-*.html` 的结构；当前默认合并档案数据后决定颜色与字体，不把示例的旧值当用户样式。
- 规则适用关系：用户明确的内容/投放要求 → 对应类型、模式、尺寸的条件规则 → 通用默认。类型数量预算是默认清晰度目标，不能覆盖用户内容要求；数学、端点、守卫等含义不变量与动效控制器限额仍须满足。事实保真、有效无障碍、单文件契约始终成立。

## 1. 默认处理

保留读者理解所需的信息，减少装饰；默认无阴影、渐变、图标、纹理或动效。用层次和间距组织内容，通常以 1–2 个 accent 焦点引导阅读。类型的数量编码与明确皮肤可有自己的形状词汇。

## 2. 任务边界

用户要求图表就完成图表。表格或文字更适合时可以解释并建议，但不自行用它替换已明确要求的交付物。仅当信息缺失或选择会实质改变含义时澄清；用户说“你选/随便什么图”视为授权选型，说明理由后直接做。

## 3. 选型：语义模式与视觉类型

排队容量、策略判定、信任边界、风险补偿、结构化产物或生命周期推进等行为承载含义时，读 [semantic-patterns.md](references/semantic-patterns.md) 选一个主模式，再选布局类型；没有匹配模式就直接选类型。阶段框架的泳道/时间线分工以该模式文档为准。

类型或变体名未直接出现在下表时，用 `python3 <技能目录>/scripts/catalog.py <名称>` 查询 [资源清单](references/catalog.json)，只载入匹配参考。

### 类型路由（45 内置）

| 要画的是…… | 类型 | 参考 |
|---|---|---|
| 系统的组件与连接（架构 / 拓扑） | **架构图**（改造前后对照用「变更对比」变体） | [type-architecture.md](references/type-architecture.md) |
| 软件实际落位（环境 / 主机 / 副本 / 网络边界） | **部署图** | [type-deployment.md](references/type-deployment.md) |
| 带分支的决策逻辑（流程图 / 决策 / 审批） | **流程图** | [type-flowchart.md](references/type-flowchart.md) |
| 参与者之间按时间的消息（时序图 / 调用链 / 请求响应） | **时序图** | [type-sequence.md](references/type-sequence.md) |
| 状态 + 转移 + 守卫（状态机 / 订单状态 / 生命周期） | **状态机**（单主体生命周期叙事用「生命周期相位图」语义模式） | [type-state.md](references/type-state.md) |
| 一层楼/一个场地连同房与楼从上看（办公室/校园/仓库布局） | **轴测平面图** | [type-axonometric-plan.md](references/type-axonometric-plan.md) |

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