Скилл для генерации Mermaid-диаграмм

Скилл для Claude Code: генерирует Mermaid-диаграммы и автоматически экспортирует их в PNG/SVG/PDF одной командой.

Почему этот скилл?

Возможность	Этот скилл	Нативный Claude Code	Другие скиллы	MCP-серверы
Написание Mermaid-синтаксиса	✓ С примерами	✓ Встроено	✓ Не всегда	✓ Не всегда
Валидация перед экспортом	✓ Обязательный шаг	✗ Нет валидации	Часто пропускается	Не всегда
Экспорт PNG/SVG/PDF	✓ Автоматически	✗ Требует явного запроса	Обычно один формат	Только веб
Резервный вариант без установки	✓ Kroki через curl	✗ Нет резерва	Требует установки	Требует настройки
Проактивный запуск	✓ Авто при 3+ компонентах	✗ Только по явному запросу	Только вручную	Только вручную
Полный end-to-end workflow	✓ Генерация→Валидация→Экспорт→Отчёт	✗ Только генерация кода	Частично	Частично

Ключевые преимущества перед нативным Claude Code:

Полный пайплайн — Claude Code умеет писать Mermaid-код, но останавливается на .mmd-файле. Этот скилл автоматически выполняет валидацию, экспорт и восстановление после ошибок
Раннее обнаружение ошибок — цикл валидации предотвращает экспорт повреждённых диаграмм
Гибкий экспорт — локальный mmdc или резервный Kroki API (без установки)
Проактивная генерация — автоматически запускается при обсуждении архитектуры, не нужно явно просить «нарисуй диаграмму»

Возможности скилла

Типы диаграмм (11+)

Тип	Назначение	Примеры
Flowchart	Процессы, пайплайны, деревья решений	CI/CD-пайплайн, регистрация пользователя
Sequence	API-вызовы, процессы аутентификации	JWT-аутентификация, микросервисное взаимодействие
Class	OOP-модели, структуры данных	Доменные модели, иерархии наследования
ER	Схемы баз данных	Связи пользователь-заказ-товар
State	Конечные автоматы, жизненные циклы	Статусы заказа, состояния соединения
Gantt	Временны́е шкалы проектов	Планирование итераций, планы релизов
Pie	Пропорции, распределения	Доли рынка, распределение ресурсов
Git	Стратегии ветвления	Модели ветвления, trunk-based development
C4 Context	Высокоуровневая архитектура	Контекст системы, диаграммы контейнеров
Mindmap	Декомпозиция тем	Планирование функций, мозговой штурм

Форматы вывода

PNG — высокое разрешение (2048px), белый фон, несколько тем
SVG — масштабируемая векторная графика, подходит для документации
PDF — для печати

Автоматический запуск

Скилл активируется автоматически при:

Явном запросе диаграммы: «создай flowchart», «нарисуй архитектурную схему»
Объяснении сложных систем: «как работает аутентификация» (3+ компонента)

Как использовать скилл

1. Установка скилла

Claude Code (глобально):

bash

git clone https://github.com/Agents365-ai/creating-mermaid-diagrams.git ~/.claude/skills/creating-mermaid-diagrams

Claude Code (только текущий проект):

bash

git clone https://github.com/Agents365-ai/creating-mermaid-diagrams.git .claude/skills/creating-mermaid-diagrams

OpenClaw:

bash

git clone https://github.com/Agents365-ai/creating-mermaid-diagrams.git skills/creating-mermaid-diagrams

SkillsMP: найдите mermaid на skillsmp.com и установите в один клик.

2. Установка зависимостей

Вариант A: локальный экспорт (mmdc)

bash

npm install -g @mermaid-js/mermaid-cli
mmdc --version

Вариант B: Kroki API (без установки)

bash

# Достаточно curl — ничего устанавливать не нужно!
curl --version

Kroki подходит, если:

установка mmdc завершается ошибкой (проблемы с зависимостями Chromium)
в среде CI нет Node.js
нужно быстро сгенерировать одну диаграмму

3. Начало работы

Опишите желаемое в Claude Code:

Создай sequence-диаграмму аутентификации пользователя с JWT

Нарисуй архитектуру микросервисов для интернет-магазина

Claude выполнит:

Генерацию .mmd-файла
Валидацию синтаксиса (ошибки обнаруживаются до экспорта)
Экспорт в PNG/SVG/PDF
Отчёт с путями к выходным файлам

Рабочий процесс

Скилл использует подход «валидация прежде всего»:

Рабочий процесс скилла

mermaid

flowchart TD
  Start([Запрос пользователя]):::input --> CheckDeps{Проверка зависимостей}:::decision
  CheckDeps -->|mmdc доступен| UseMmdc[Локальный экспорт через mmdc]:::process
  CheckDeps -->|mmdc недоступен| UseKroki[Kroki API]:::process
  UseMmdc --> PickType
  UseKroki --> PickType
  PickType[Выбор типа диаграммы]:::process --> Generate[Генерация .mmd-файла]:::process
  Generate --> Validate{Валидация синтаксиса}:::decision
  Validate -->|Ошибка| Fix[Исправление .mmd-файла]:::warning
  Fix --> Validate
  Validate -->|Успех| Export[Экспорт PNG/SVG/PDF]:::process
  Export --> Report([Отчёт с путями к файлам]):::output

  classDef input fill:#d4edda,stroke:#28a745,color:#155724
  classDef process fill:#cce5ff,stroke:#007bff,color:#004085
  classDef decision fill:#fff3cd,stroke:#ffc107,color:#856404
  classDef warning fill:#f8d7da,stroke:#dc3545,color:#721c24
  classDef output fill:#e2d5f1,stroke:#6f42c1,color:#4a235a

Цветовая легенда: 🟢 Ввод | 🔵 Обработка | 🟡 Решение | 🔴 Предупреждение | 🟣 Вывод

Пример вывода

Запрос:

Создай архитектуру микросервисов для интернет-магазина: API-шлюз, различные сервисы и базы данных

Результат:

Архитектура микросервисов

Структура файлов

creating-mermaid-diagrams/
├── SKILL.md              # Основное описание скилла
├── reference/
│   ├── FLOWCHART.md      # Синтаксис и примеры flowchart
│   ├── SEQUENCE.md       # Синтаксис sequence-диаграмм
│   ├── CLASS-ER.md       # Синтаксис class- и ER-диаграмм
│   └── OTHER-TYPES.md    # State, Gantt, Git, Pie, Mindmap, C4
├── assets/
│   ├── example.mmd       # Пример: архитектура микросервисов
│   ├── example.png
│   ├── workflow.mmd      # Пример: рабочий процесс (EN)
│   ├── workflow.png
│   ├── workflow_cn.mmd   # Пример: рабочий процесс (CN)
│   └── workflow_cn.png
├── README.md             # Документация на китайском (по умолчанию)
└── README_EN.md          # Документация на английском

Лицензия

MIT

Автор

Agents365-ai

GitHub: https://github.com/Agents365-ai
Bilibili: https://space.bilibili.com/441831884

Mermaid-диаграммы

Установка

README

Скилл для генерации Mermaid-диаграмм

Почему этот скилл?

Возможности скилла

Типы диаграмм (11+)

Форматы вывода

Автоматический запуск

Как использовать скилл

1. Установка скилла

2. Установка зависимостей

3. Начало работы

Рабочий процесс

Пример вывода

Структура файлов

Лицензия

Автор

Похожие скиллы

oh-my-mermaid

AntiVibe

Adversarial Spec

Explore Claude Code