AIKraft/Skills/mermaid

mermaid

Create flowcharts, sequence diagrams, state machines, class diagrams, Gantt charts, and mindmaps using simple text-based syntax. Best for process flows, API interactions, and technical documentation. NOT for data-driven charts (use vega), quick KPI visuals (use infographic), or layered system architecture (use architecture).

markdown-viewer official Дизайн

Что делает навык

Навык визуализирует диаграммы (блок-схемы, последовательности, состояния, классы, ER, Ганта, mindmap) с помощью текстового синтаксиса Mermaid. Он решает задачу создания технической документации, схем процессов и взаимодействий API.

Когда применять

  • Создание блок-схем процессов и диаграмм последовательностей API
  • Визуализация диаграмм состояний и классов для технической документации
  • Построение диаграмм Ганта для планирования задач
  • Генерация mindmap для структурирования информации

Как работает

  1. Определите тип диаграммы (flowchart, sequence, state, class, ER, gantt, mindmap)
  2. Определите узлы с указанием форм и соедините их стрелками
  3. Используйте flowchart вместо устаревшего graph для поддержки подграфов
  4. Оберните код диаграммы в блок ```mermaid
  5. Соблюдайте правила синтаксиса: используйте ID подграфов для ссылок, кавычки для текста с пробелами и избегайте списков с пробелами после точки

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

Создай блок-схему процесса авторизации пользователя с использованием flowchart TD
Построй диаграмму последовательности взаимодействия между клиентом и сервером
Сгенерируй mindmap для структуры проекта с узлами в кавычках

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «mermaid» из репозитория: # https://github.com/markdown-viewer/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r mermaid/ ~/.claude/skills/mermaid/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.