Agent Skills

Diagram Maker — генерация диаграмм из текстового описания

Загружай этот скилл когда нужно превратить словесное описание в диаграмму: блок-схему процесса, sequence-диаграмму взаимодействия, схему архитектуры сервисов или ER-схему базы данных. Выход всегда в синтаксисе Mermaid.

When to use

Do NOT use to

What this skill does

Вход: natural language описание (текст на stdin, файл или прямо в чате).

Выход:

  1. Код Mermaid нужного типа (flowchart / sequence / architecture / er)
  2. Или интерактивный HTML-график (bar / line / pie / scatter) через Chart.js
  3. Рекомендация, как отрендерить результат:
    • mermaid.live — быстрый онлайн-рендер
    • mmdc (mermaid-cli) — локальный рендер в PNG/SVG/PDF
    • MCP-сервер mermaid — рендер прямо из агента
  4. (опционально) markdown-файл с mermaid-блоком через scripts/mermaid_to_markdown.py

How to work

Шаги при генерации диаграммы:

  1. Уточни тип диаграммы. Если пользователь не назвал тип — определи по описанию: процесс/алгоритм → flowchart; обмен сообщениями во времени → sequence; сервисы и связи → architecture; сущности и связи БД → er. Если неоднозначно — спроси или предложи наиболее вероятный тип.

  2. Составь mermaid-код. Используй шаблоны из templates/ как стартовую точку. Бери узлы и связи ТОЛЬКО из описания пользователя, не выдумывай лишние. Именуй узлы коротко и осмысленно.

  3. Проверь синтаксис. Прогони код через scripts/mermaid_to_markdown.py (валидирует кавычки и спецсимволы) или вставь в mermaid.live. Убедись, что все связи замкнуты (каждый упомянутый узел соединён хотя бы одной стрелкой) и нет «висячих» узлов.

  4. Отрендерь. Предложи пользователю mermaid.live, mermaid-cli (mmdc) или MCP-рендер. Если нужен файл — сформируй markdown с mermaid-блоком.

Быстрый запуск скрипта

# Из файла с описанием
python3 scripts/mermaid_to_markdown.py --type flowchart input.txt --output out.md

# Из stdin
echo "A -> B -> C" | python3 scripts/mermaid_to_markdown.py --type flowchart

# С заголовком секции
python3 scripts/mermaid_to_markdown.py --type er --title "Схема БД" schema.txt

# Bar chart из CSV
python3 scripts/mermaid_to_markdown.py --type bar --input data.csv --output chart.html

Data visualization examples

1. Bar chart — сравнение категорий

<canvas id="chart1"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('chart1'), {
  type: 'bar',
  data: {
    labels: ['Free', 'Starter', 'Pro', 'Enterprise'],
    datasets: [{ data: [12, 28, 45, 72], backgroundColor: '#1C1C1A', borderRadius: 4 }]
  },
  options: { responsive: true, plugins: { legend: { display: false } } }
});
</script>

2. Line chart — временной ряд

<canvas id="chart2"></canvas>
<script>
new Chart(document.getElementById('chart2'), {
  type: 'line',
  data: {
    labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт'],
    datasets: [{ data: [10, 25, 18, 32, 28], borderColor: '#1C1C1A', fill: false }]
  },
  options: { responsive: true }
});
</script>

3. Pie chart — структура данных

<canvas id="chart3"></canvas>
<script>
new Chart(document.getElementById('chart3'), {
  type: 'pie',
  data: {
    labels: ['Organic', 'Direct', 'Referral', 'Social'],
    datasets: [{ data: [40, 25, 20, 15] }]
  },
  options: { responsive: true }
});
</script>

Mermaid examples

4. Flowchart — блок-схема оформления заказа

Описание: «Пользователь добавляет товар в корзину. Если товар в наличии — переходим к оформлению, иначе показываем сообщение о недоступности. После оформления отправляем заказ на склад.»

flowchart TD
    A[Пользователь] --> B{Товар в наличии?}
    B -- Да --> C[Оформление заказа]
    B -- Нет --> D[Сообщение: недоступен]
    C --> E[Отправка на склад]
    D --> A

5. Sequence — оформление подписки

Описание: «Клиент отправляет запрос на подписку. Сервис проверяет платёж, списывает средства и возвращает подтверждение. При ошибке платежа клиент получает сообщение об ошибке.»

sequenceDiagram
    participant C as Клиент
    participant S as Сервис
    participant P as Платёжный шлюз
    C->>S: Запрос на подписку
    S->>P: Проверка платежа
    P-->>S: Успех
    S->>C: Подтверждение
    S-->>C: Ошибка платежа

6. Architecture — микросервисы

flowchart LR
    subgraph Frontend
        Web[Web-клиент]
    end
    subgraph Backend
        API[API Gateway]
        Auth[Auth Service]
        Orders[Orders Service]
    end
    subgraph Data
        DB[(PostgreSQL)]
        Cache[(Redis)]
    end
    Web --> API
    API --> Auth
    API --> Orders
    Orders --> DB
    Orders --> Cache

7. ER — схема базы данных

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        int customer_id FK
        date created_at
    }
    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
    }
    PRODUCT {
        int id PK
        string title
        decimal price
    }

Constraints & gotchas

Reference

Boundaries

Evidence and completion gate

Run the documented command against the user’s actual input. Report the command, exit status, files changed or produced, and relevant stdout/stderr. Separate blocked or pre-existing failures from failures introduced by the current work. Do not call the result complete when the script was only described or when an artifact was not reopened and checked.

This site is open source. View this page on GitHub.