Поддержка 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 на холст с помощью панели Вставить Mermaid, которая показывает предпросмотр и проверяет диаграмму перед её размещением.

1. Перейдите в Правка → Вставить Mermaid
2. Вставьте или введите синтаксис Mermaid в редактор
3. По мере ввода Diagrammix проверяет синтаксис, а строка состояния показывает либо описание ошибки, либо Valid · N nodes, M connectors. Проверку также можно запустить в любой момент кнопкой Проверить
4. Нажмите Применить, чтобы разместить диаграмму, или Отмена, чтобы закрыть панель. Применить размещает только корректную диаграмму

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

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

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

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

Остальные типы Mermaid (timeline, user journey, quadrant, XY chart, Sankey, Git graph и другие) распознаются и импортируются, но отображаются как обычный граф из фигур и коннекторов, а не как специализированная компоновка. Используйте Проверить, чтобы увидеть количество узлов и коннекторов перед применением.

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

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

Простая диаграмма состояний:

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

Копировать Mermaid

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

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

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

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

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

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

Если после импорта вы изменили диаграмму на холсте, панель перечислит эти изменения в разделе On-canvas edits that won't be kept («изменения на холсте, которые не сохранятся»), чтобы вы могли решить, продолжать ли перерисовку.

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

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

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

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

Ограничения

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

Советы

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