Поддержка Mermaid

Diagrammix3 поддерживает импорт и экспорт диаграмм с использованием синтаксиса Mermaid — популярного текстового языка описания диаграмм.

Что такое Mermaid?

Mermaid — это инструмент создания диаграмм на основе JavaScript, который использует синтаксис, схожий с Markdown, для описания диаграмм. Он широко применяется в документации, вики и README-файлах.

Пример синтаксиса Mermaid:

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Импорт диаграмм Mermaid

Примечание: Импорт и экспорт Mermaid — это функция PRO.

Вставка Mermaid (с предварительным просмотром и проверкой)

Самый быстрый способ разместить Mermaid на холсте — панель Insert Mermaid, которая выполняет предварительный просмотр и проверку диаграммы до её размещения.

1. Перейдите в Edit → Insert Mermaid
2. Вставьте или введите синтаксис Mermaid в редактор
3. По мере ввода Diagrammix проверяет синтаксис в реальном времени и показывает:
   • является ли диаграмма корректной
   • определённый тип диаграммы
   • количество узлов и коннекторов
   
   Ошибки подсвечиваются прямо в редакторе, чтобы вы могли исправить их до размещения на холсте.
4. Нажмите Apply для размещения диаграммы или Cancel для отмены

Вставка Mermaid из буфера обмена проходит ту же проверку, поэтому некорректный синтаксис никогда не приведёт к неисправной диаграмме.

Примечание: Mermaid импортируется путём вставки или ввода в панели Insert Mermaid — отдельной команды «импорт файла» нет. Чтобы перенести файл .mmd, откройте его в любом текстовом редакторе и вставьте его содержимое.

Поддерживаемые типы диаграмм

Diagrammix распознаёт широкий спектр типов диаграмм Mermaid, в том числе:

Остальные типы Mermaid (временная шкала, пользовательский путь, квадрант, диаграмма XY, Sankey, граф Git и другие) распознаются и импортируются, но отображаются как обычный граф из узлов и коннекторов, а не как специализированная компоновка. Панель Insert Mermaid сообщит вам определённый тип до применения.

Синтаксис диаграмм состояний

Диаграммы состояний моделируют состояния объекта и переходы между ними.

Базовая диаграмма состояний:

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

Состояния и переходы:

• [*] обозначает начальное и конечное состояния
• --> создаёт стрелку перехода
• : метка добавляет подписи к переходам
• Вложенные состояния задаются отступами

Составные состояния:

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

Результат: Диаграмма состояний с правильными формами состояний и подписанными переходами.

Примеры импорта

Блок-схема

Входные данные Mermaid:

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Результат: Блок-схема сверху вниз с прямоугольными, скруглёнными и ромбовидными фигурами, соединёнными подписанными стрелками.

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

Входные данные Mermaid:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

Результат: Диаграмма последовательностей с двумя участниками и стрелками сообщений.

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

Входные данные Mermaid:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

Результат: Диаграмма классов UML с отношениями наследования.

Экспорт в Mermaid

Копировать Mermaid

Diagrammix экспортирует в Mermaid через буфер обмена — отдельной команды «экспорт в файл» нет.

1. Выделите фигуры, которые нужно экспортировать, или ничего не выделяйте, чтобы экспортировать весь холст
2. Перейдите в Edit → Copy Mermaid
3. Вставьте синтаксис Mermaid туда, где он нужен (а затем при желании сохраните его в файл .mmd)

Экспорт подстраивается под содержимое выделения: интеллект-карта копируется как синтаксис mindmap, страница с классами или последовательностью UML — как classDiagram / sequenceDiagram; всё остальное экспортируется как flowchart.

Продолжение редактирования в Mermaid (двустороннее преобразование)

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

1. Выделите импортированную диаграмму Mermaid
2. Нажмите кнопку </> (Edit Mermaid Source) на диаграмме
3. Откроется панель Edit Mermaid Source с предварительно заполненным исходным текстом Mermaid
4. Отредактируйте текст и нажмите re-render для обновления диаграммы на месте

Если ваши изменения могут повлиять на структуру диаграммы (например, при удалении узлов, от которых зависят другие элементы), панель заранее перечислит несовместимости, чтобы вы могли принять решение до применения.

Редактирование как нативных объектов

Импортированную диаграмму также можно редактировать напрямую как нативные объекты Diagrammix:

• Перемещать и масштабировать фигуры свободно
• Изменять стили с помощью Инспектора (цвета, шрифты, стили линий)
• Добавлять новые элементы с помощью инструментов Diagrammix
• Изменять соединения перетаскиванием конечных точек
• Применять автоматическую компоновку для реорганизации диаграммы

Совет: Заранее определите, как вы будете поддерживать диаграмму. Используйте редактор исходного кода </>, чтобы сохранить управление через Mermaid, или редактируйте фигуры напрямую для единовременной визуальной доработки. При значительном ручном редактировании диаграмма может расходиться с тем, что даст повторный рендеринг исходного кода.

Ограничения

• Сложное оформление: Директивы стилей Mermaid могут переводиться не полностью
• Подграфы: Преобразуются в сгруппированные фигуры
• Расширенные возможности: Некоторые специфичные для Mermaid функции (например, обработчики нажатий) игнорируются
• Двустороннее преобразование: Экспорт диаграммы, которую вы сильно отредактировали вручную, может не воспроизвести идентичный синтаксис Mermaid — для двустороннего преобразования предпочтительнее использовать редактор исходного кода </>

Советы

1. Приведите в порядок после импорта: Используйте автоматическую компоновку для организации импортированных диаграмм
2. Проверьте связи: Убедитесь, что типы связей импортированы корректно
3. Оформляйте единообразно: Примените стили Diagrammix для профессионального вида
4. Сохраняйте исходники: Держите оригинальные файлы Mermaid под контролем версий