Поддержка Mermaid

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

Что такое Mermaid?

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

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

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

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

Из буфера обмена

1. Скопируйте синтаксис Mermaid в буфер обмена
2. В Diagrammix3 перейдите в File → Import → Mermaid from Clipboard
3. Диаграмма будет создана на вашем холсте

Из файла

1. Перейдите в File → Import → Mermaid File...
2. Выберите файл .mmd или .mermaid
3. Диаграмма будет импортирована на ваш холст

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

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

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

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

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

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

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

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

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

Экспорт текущей диаграммы

1. Перейдите в File → Export → Mermaid...
2. Выберите место сохранения
3. Диаграмма экспортируется как файл .mmd

Копирование как Mermaid

1. Выделите фигуры, которые хотите экспортировать (или выделите все с помощью Cmd+A)
2. Перейдите в Edit → Copy as Mermaid
3. Вставьте синтаксис Mermaid в нужное место

Редактирование импортированных диаграмм

После импорта диаграммы Mermaid становятся нативными объектами Diagrammix. Вы можете:

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

Связь с исходным кодом Mermaid не сохраняется — изменения вносятся непосредственно в объекты диаграммы.

Ограничения

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

Советы

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