←Назад к блогу

Автоматизация создания диаграмм с помощью Mermaid CLI и инструментов ИИ

2025-04-24•6 мин чтения

Создание диаграмм всегда было одной из моих наименее любимых частей документирования. Я тратил часы на перемещение блоков и все равно получал что-то любительское. Это изменилось, когда я открыл для себя Mermaid. В этом посте я расскажу, как я использую Mermaid CLI для создания диаграмм с помощью одного лишь текста, и как инструменты искусственного интеллекта полностью преобразили и оптимизировали этот процесс.

Что такое Mermaid?

Mermaid — это бесплатный инструмент с открытым исходным кодом, который преобразует текст в диаграммы, подобно тому, как Markdown преобразует текст в отформатированный контент. Он полностью бесплатен под лицензией MIT, поэтому вы можете использовать его для работы или личных целей, не беспокоясь о лицензионных платежах. Его можно использовать для создания всевозможных диаграмм, таких как:

  • Блок-схемы
  • Диаграммы последовательности
  • Диаграммы классов
  • Диаграммы «сущность-связь»
  • Диаграммы Ганта
  • Круговые диаграммы
  • Карты пути пользователя
  • Графики Git
  • Диаграммы состояний
  • И многое другое

Больше всего мне нравится то, что мне больше никогда не приходится перетаскивать блоки. Я просто пишу текст, а Mermaid создает диаграмму. После многих лет борьбы с традиционными инструментами для создания диаграмм этот подход кажется откровением.

Начало работы с Mermaid CLI

Я начал использовать Mermaid в браузере, но версия CLI (интерфейс командной строки) — это то место, где происходит настоящее волшебство. Она позволяет преобразовывать ваши текстовые диаграммы в реальные файлы изображений, которые вы можете вставлять в документы, презентации или куда угодно. И это очень просто в использовании.

Базовый синтаксис для использования Mermaid CLI:

npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png

Эта команда:

  • npx @mermaid-js/mermaid-cli: Запускает инструмент Mermaid CLI без необходимости глобальной установки
  • -i diagram.mmd: Указывает входной файл, содержащий определение вашей диаграммы Mermaid
  • -o diagram.png: Устанавливает имя выходного файла и формат (в данном случае PNG)

Вы также можете генерировать SVG-файлы, которые масштабируемы и идеально подходят для использования в Интернете:

npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg

Вы также можете быстро просматривать свой код Mermaid онлайн с помощью таких инструментов, как MermaidChart, что отлично подходит для тестирования и обмена диаграммами без установки чего-либо.

Создание первой диаграммы Mermaid

Начнем с простой блок-схемы. Создайте файл с именем flowchart.mmd со следующим содержимым:

flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process 1]
B -->|No| D[Process 2]
C --> E[End]
D --> E

Теперь сгенерируйте PNG-изображение этой диаграммы:

npx @mermaid-js/mermaid-cli -i flowchart.mmd -o flowchart.png

Это создаст чистую, профессионально выглядящую блок-схему, показывающую простой процесс принятия решений, например:

Простая блок-схема, показывающая процесс принятия решений

Вы можете использовать этот же подход для любого типа диаграмм, поддерживаемых Mermaid.

Например, если вам нужно визуализировать архитектуру системы (как я делал недавно), вы можете создать что-то вроде этого:

flowchart TD
Client([Web Browser]) --HTTP/HTTPS--> LB[Load Balancer]
LB --> API1[API Server 1]
LB --> API2[API Server 2]
API1 --> DB[(Database)]
API2 --> DB
API1 --> Cache[(Redis Cache)]
API2 --> Cache

Что дает следующую диаграмму:

Диаграмма архитектуры, показывающая веб-серверы, балансировщик нагрузки и базу данных

Как ИИ ускоряет создание диаграмм

Вот где искусственный интеллект становится решающим фактором. Вместо ручного написания диаграмм Mermaid, инструменты ИИ, такие как Cursor и Windsurf, могут анализировать текстовые описания и автоматически генерировать для вас определения диаграмм.

Недавно мне пришлось создать диаграмму архитектуры для проекта AWS + Drupal со сложной архитектурой. Без ИИ это заняло бы значительное время, чтобы составить карту всех компонентов и связей. Вместо этого я передал спецификации проекта ИИ-помощнику Cursor, попросил его извлечь компоненты системы и их взаимосвязи, и получил код Mermaid, который помог мне более эффективно создать диаграмму.

Использование ИИ Cursor для создания диаграмм

Cursor — это IDE с мощным ИИ, который понимает как код, так и естественный язык. Его способность интерпретировать технические описания и преобразовывать их в структурированный синтаксис Mermaid впечатляет. Вот мой обычный рабочий процесс:

  1. Скопируйте соответствующий текст, описывающий концепцию, которую вы хотите визуализировать
  2. Используйте запрос типа: «Сгенерируйте диаграмму Mermaid на основе этого описания»
  3. Cursor проанализирует текст и сгенерирует соответствующий синтаксис Mermaid
  4. Сохраните сгенерированный код Mermaid в файл .mmd
  5. Используйте Mermaid CLI для преобразования его в изображение

Например, вы можете дать Cursor такие инструкции:

  • «Создайте блок-схему Mermaid, показывающую процесс регистрации пользователя»
  • «Сгенерируйте диаграмму последовательности Mermaid для этого потока запросов API»
  • «Преобразуйте эту временную шкалу проекта в диаграмму Ганта Mermaid»
  • «Создайте диаграмму классов Mermaid на основе описания этой модели предметной области»

За считанные секунды вы получите полную диаграмму Mermaid, которая точно представляет вашу концепцию.

Идем дальше с ИИ Windsurf

Windsurf (от Codeium) использует ИИ для дальнейшей автоматизации диаграмм. Его модели ИИ могут анализировать целые кодовые базы или наборы документации для создания скриптов, которые:

  1. Сканируют текстовые файлы на наличие описаний, которые можно визуализировать
  2. Извлекают ключевые элементы и взаимосвязи
  3. Генерируют соответствующий синтаксис Mermaid на основе типа контента
  4. Автоматически запускают Mermaid CLI для создания изображений диаграмм
  5. Включают эти диаграммы в ваши документы

Это создает непрерывный рабочий процесс документирования, где ваши диаграммы остаются синхронизированными с вашим письменным контентом. ИИ может обнаруживать, когда ваш код или документация значительно изменяются, что требует обновления диаграмм, делая весь процесс почти автоматическим.

Расширенные типы диаграмм

Mermaid поддерживает множество типов диаграмм помимо простых блок-схем. Вот некоторые полезные для документирования архитектуры:

Диаграммы последовательности

Идеально подходят для иллюстрации взаимодействия компонентов во времени:

sequenceDiagram
participant User
participant API
participant Database

User->>API: GET /products
API->>Database: Query products
Database-->>API: Return results
API-->>User: JSON response

Что дает следующая диаграмма последовательности:

Диаграмма последовательности, показывающая поток запросов API между пользователем, API и базой данных

Диаграммы классов

Идеально подходят для демонстрации объектно-ориентированного дизайна:

classDiagram
class Order {
    +String id
    +Date createdAt
    +OrderStatus status
    +calculateTotal()
}
class Customer {
    +String id
    +String name
    +String email
    +placeOrder()
}
Customer "1" -- "many" Order: places

Что дает следующая диаграмма классов:

Диаграмма классов, показывающая классы Customer и Order с их взаимосвязью

Диаграммы «сущность-связь»

Отлично подходят для проектирования баз данных:

erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER }|..|{ DELIVERY_ADDRESS : uses

Что дает следующая диаграмма «сущность-связь»:

Диаграмма «сущность-связь», показывающая взаимосвязи между клиентом, заказом, позицией в заказе и адресом доставки

Практические примеры

Mermaid CLI можно использовать для различных задач визуализации, включая документирование архитектуры системы (как упоминалось ранее), а также для:

Планирование проектов

Для планирования проектов вы можете создать диаграмму Ганта, показывающую этапы и зависимости:

gantt
title Project Timeline
dateFormat  YYYY-MM-DD
section Research
Requirements gathering :a1, 2025-01-01, 10d
Market research       :after a1, 7d
section Development
Frontend development  :b1, 2025-01-18, 14d
Backend development   :b2, 2025-01-18, 21d
section Testing
Integration testing   :c1, after b1 b2, 7d
User acceptance       :c2, after c1, 7d

Что дает следующую визуализацию временной шкалы:

Диаграмма Ганта, показывающая временную шкалу проекта с этапами разработки

Документирование процессов

Для документирования бизнес-процессов Mermaid может создавать понятные блок-схемы:

flowchart TD
Start([Customer order]) --> A{Stock available?}
A -->|Yes| B[Process payment]
A -->|No| C[Backorder process]
B --> D[Ship product]
C --> E[Notify customer]
D & E --> End([Complete order])

Что дает следующую блок-схему процесса:

Блок-схема процесса, показывающая рабочий процесс заказа клиента

Будущие возможности с ИИ и автоматизацией

Сочетание Mermaid CLI и инструментов ИИ открывает захватывающие возможности для автоматизации документирования. Я предвижу систему, которая могла бы:

  1. Отслеживать файлы документации на предмет изменений
  2. Использовать ИИ для выявления контента, который может быть визуализирован
  3. Генерировать соответствующий синтаксис Mermaid на основе контента
  4. Автоматически запускать Mermaid CLI для создания новых изображений диаграмм
  5. Интеллектуально встраивать диаграммы в документацию с надлежащим контекстом

Такая настройка позволила бы поддерживать диаграммы в синхронизации с документацией без ручного вмешательства. Хотя я еще не создал эту систему, текущие инструменты ИИ и Mermaid CLI делают ее полностью возможной.

Советы по улучшению диаграмм

  1. Используйте осмысленные формы: Mermaid предлагает различные формы узлов для различения различных типов компонентов (базы данных, сервисы, внешние системы)
  2. Добавляйте цвета для ясности: Используйте цвета для группировки связанных компонентов или выделения важных элементов
  3. Сохраняйте простоту: Избегайте перегрузки диаграмм; создавайте несколько сфокусированных диаграмм вместо одной сложной
  4. Используйте подграфы: Группируйте связанные компоненты вместе с помощью подграфов, чтобы показать логические границы
  5. Добавляйте заголовки и описания: Сделайте ваши диаграммы самодостаточными с четкими заголовками и краткими описаниями

В итоге

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

В сочетании с инструментами ИИ процесс становится еще более эффективным. Эти инструменты могут помочь генерировать код диаграмм из описаний, делая его доступным даже для тех, кто не обладает глубокими техническими знаниями.

Вот несколько заключительных мыслей об использовании Mermaid:

  • Кривая обучения: Синтаксис относительно прост для изучения, особенно если вы уже знакомы с markdown или другими текстовыми форматами.
  • Интеграция: Диаграммы Mermaid работают на многих платформах, включая GitHub, Notion и другие системы документирования.
  • Стоимость: Будучи инструментом с открытым исходным кодом под лицензией MIT, Mermaid бесплатен для использования в любых целях.
  • Эффективность: Создание диаграмм на основе текста может быть быстрее, чем традиционное создание диаграмм, как только вы освоите синтаксис.
  • Простота настройки: Использование npx для запуска Mermaid CLI устраняет проблемы с установкой.

Если вы хотите улучшить свой процесс документирования, попробуйте Mermaid для вашего следующего проекта. Возможность создавать профессиональные диаграммы непосредственно из текстовых описаний, с потенциальной помощью инструментов ИИ, может просто изменить ваш подход к визуализации в работе.