К основному содержанию
субагент CX Codex

mermaid-expert — субагент для Claude Code: диаграммы Mermaid из кода

Субагент рисует диаграммы Mermaid: флоучарты, последовательности, ERD, архитектуру. Пригодится, когда нужна схема в документации или README.

Установить в Claude Code · Через маркетплейс плагинов Все способы и платформы ↓
/plugin marketplace add wshobson/agents
/plugin install documentation-generation@claude-code-workflows
Открыть на GitHub

Что делает mermaid-expert

Субагент выбирает подходящий тип диаграммы под данные, следит за читаемостью и добавляет подписи. В работе опирается на синтаксис graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, gitGraph, journey, quadrantChart и timeline.

На выходе — готовый код диаграммы, инструкции по рендерингу и вариант со стилизацией. Автор советует давать обе версии: базовую и оформленную, с комментариями к сложному синтаксису. Модель в конфигурации — haiku.

Ставится в Claude через маркетплейс плагинов, для Codex и Cursor — файлом в каталоге агентов. Если проект уже использует другой генератор диаграмм, этот субагент будет дублировать работу: проверьте, чем команда рисует схемы сейчас.

Какие задачи решает

  • собрать флоучарт процесса из описания
  • нарисовать sequence-диаграмму для API
  • сгенерировать ERD по схеме базы
  • оформить архитектуру сервиса для README
  • построить диаграмму состояний или user journey

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

  • Нарисуй sequence-диаграмму для нашего API авторизации
  • Сделай ERD по таблицам users, orders и payments
  • Построй флоучарт обработки заказа и добавь стили

Как установить mermaid-expert

1Через маркетплейс плагинов

/plugin marketplace add wshobson/agents
/plugin install documentation-generation@claude-code-workflows

2Вручную: положить файлы

.claude/agents/mermaid-expert.md

Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст

Из того же набора342

Весь набор →
frontend-security-coder Субагент для безопасного клиентского кода: гасит XSS, настраивает CSP и проверяет работу с DOM. Пригодится, когда пишете или ревьюите фронтенд. CX Codex ★ 41 729звёзд репо frontend-mobile-development-mobile-developer Субагент для React Native, Flutter и нативных приложений iOS/Android: архитектура, офлайн-синхронизация, оптимизация сборки и публикация в сторах. CX Codex ★ 41 729звёзд репо deps-upgrade Планирует и выполняет поэтапное обновление зависимостей проекта: оценивает риски, ищет ломающие изменения и подсказывает путь миграции. CX Codex ★ 41 729звёзд репо error-analysis Слэш-команда для системного разбора ошибок: от стектрейса до распределённой трассировки. Пригодится, когда падает прод или баг не ловится локально. CX Codex ★ 41 729звёзд репо smart-debug Слэш-команда разбирает сообщения об ошибках и стек-трейсы, строит гипотезы о причине сбоя и предлагает исправление. Пригодится, когда баг воспроизводится не всегда. CX Codex ★ 41 729звёзд репо sql-migrations Готовит скрипты миграций SQL для PostgreSQL, MySQL и SQL Server с откатом и проверками целостности данных. Пригодится, когда менять схему на живой базе. CX Codex ★ 41 729звёзд репо database-cloud-optimization-database-optimizer Субагент для разбора медленных запросов, индексов и схемы. Пригодится, когда база тормозит или её пора масштабировать. CX Codex ★ 41 729звёзд репо data-pipeline Слэш-команда для Claude, Codex и Cursor: помогает спроектировать пайплайн, написать код загрузки, dbt-модели и проверки качества данных. CX Codex ★ 41 729звёзд репо

Похожие

mermaid-diagrams davila7 Скилл учит агента писать диаграммы Mermaid: классы, последовательности, ERD, C4, флоучарты. Пригодится, когда нужно задокументировать архитектуру или схему БД. 1 180установок mermaid-diagram-generator patricio0312rev Скилл рисует диаграммы Mermaid прямо в markdown: блок-схемы, sequence, ERD, состояния и классы. Пригодится, когда нужно показать поток запроса или схему базы в документации. CX Codex +1 331установок design-doc-mermaid SpillwaveSolutions Генерирует диаграммы Mermaid и техническую документацию по коду или описанию задачи. Подходит для оформления GitHub wiki, системных архитектур и схем баз данных. CX Codex +1 80 700установок utility-mermaid-diagrams product-on-purpose Помогает создавать корректные диаграммы Mermaid для PRD и технических спецификаций, подбирая подходящий тип из 15 вариантов и проверяя синтаксис. CX Codex +1 736установок pretty-mermaid imxv Рендерит Mermaid-диаграммы в SVG, PNG или ASCII/Unicode без браузера. Пригодится для документации, README и терминалов. CX Codex +1 4 500установок beautiful-mermaid intellectronica Рендерит диаграммы Mermaid в векторные SVG и растровые PNG через библиотеку Beautiful Mermaid. Пригодится для визуализации архитектуры, баз данных и рабочих процессов. CX Codex +1 1 800установок

Рядом в теме «Тексты и документация»

Все субагенты по теме «Тексты и документация» →

Вопросы о mermaid-expert

Как установить mermaid-expert в Claude?

Через маркетплейс плагинов: сначала /plugin marketplace add wshobson/agents, затем /plugin install documentation-generation@claude-code-workflows. Файл агента ложится в .claude/agents/mermaid-expert.md.

Что делает mermaid-expert?

Создаёт диаграммы Mermaid: флоучарты, последовательности, ERD, диаграммы состояний, Gantt, архитектурные схемы. Отдаёт код диаграммы, инструкции по рендерингу и вариант со стилизацией.

Какие типы диаграмм он поддерживает?

graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, gitGraph, journey, quadrantChart и timeline.

Исходный текст

mermaid-expert.md · MIT
---
name: mermaid-expert
description: Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.
model: haiku
---

You are a Mermaid diagram expert specializing in clear, professional visualizations.

## Focus Areas

- Flowcharts and decision trees
- Sequence diagrams for APIs/interactions
- Entity Relationship Diagrams (ERD)
- State diagrams and user journeys
- Gantt charts for project timelines
- Architecture and network diagrams

## Diagram Types Expertise

```
graph (flowchart), sequenceDiagram, classDiagram,
stateDiagram-v2, erDiagram, gantt, pie,
gitGraph, journey, quadrantChart, timeline
```

## Approach

1. Choose the right diagram type for the data
2. Keep diagrams readable - avoid overcrowding
3. Use consistent styling and colors
4. Add meaningful labels and descriptions
5. Test rendering before delivery

## Output

- Complete Mermaid diagram code
- Rendering instructions/preview
- Alternative diagram options
- Styling customizations
- Accessibility considerations
- Export recommendations

Always provide both basic and styled versions. Include comments explaining complex syntax.

© Seth Hobson · MIT · wshobson/agents

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой