Найти в Дзене
БизнеС++
21 подписчик

Хард мод: как создавать сложные диаграммы в Draw.io через XML — секреты автоматизации

208
2 мин
Рисовать диаграммы вручную — прошлый век. Если вы работаете с большими схемами, регулярно обновляете процессы или просто хотите ускорить создание профессиональных диаграмм, XML в Draw.io — ваш мощный инструмент. В этой статье — хард мод для тех, кто хочет выжать из Draw.io максимум. Без воды, только код и практические примеры. Поехали! Draw.io хранит диаграммы в виде XML-документа с ключевыми тегами: <mxGraphModel>
<root>
<mxCell id="0"/> <!-- Корневой элемент -->
<mxCell id="1" parent="0"/> <!-- Холст -->
<!-- Объекты на диаграмме -->
<mxCell
id="node1"
value="Текст"
style="форматирование"
parent="1"
vertex="1"
edge="1"
/>
</root>
</mxGraphModel> Основные параметры: Пример: диаграмма из двух прямоугольников и стрелки. <mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- Прямоугольник 1 -->
<mxCell
id="node1"
value="Начало"
style="rounded=1;whiteSpace=wrap;f
Оглавление

Рисовать диаграммы вручную — прошлый век. Если вы работаете с большими схемами, регулярно обновляете процессы или просто хотите ускорить создание профессиональных диаграмм, XML в Draw.io — ваш мощный инструмент.

Зачем писать XML вручную?

  • Автоматизация — генерируйте схемы кодом, а не мышкой.
  • Масштабирование — легко править сложные диаграммы без перерисовки.
  • Интеграция — встраивайте генерацию в свои скрипты и CI/CD.

Кому пригодится?

  • Разработчикам, которые документируют архитектуру.
  • Аналитикам, работающим с BPMN и UML.
  • DevOps-инженерам, визуализирующим инфраструктуру.

В этой статье — хард мод для тех, кто хочет выжать из Draw.io максимум. Без воды, только код и практические примеры. Поехали!

Инструкция с рабочим кейсом

Подготовка

  • Откройте Draw.io (desktop или web-версия).
  • Создайте новый файл (или откройте существующий).
  • Переключитесь в XML-режим:
    Файл → Открыть из → XML (или Alt+Shift+X).

2. Анализ структуры XML

Draw.io хранит диаграммы в виде XML-документа с ключевыми тегами:

<mxGraphModel>
<root>
<mxCell id="0"/> <!-- Корневой элемент -->
<mxCell id="1" parent="0"/> <!-- Холст -->
<!-- Объекты на диаграмме -->
<mxCell
id="node1"
value="Текст"
style="форматирование"
parent="1"
vertex="1"
edge="1"
/>
</root>
</mxGraphModel>

Основные параметры:

  • id — уникальный идентификатор.
  • parent — к какому слою относится элемент.
  • vertex="1" — это фигура (прямоугольник, круг и т.д.).
  • edge="1" — это связь (стрелка).
  • style — определяет цвет, шрифт, форму.

3. Создание простой диаграммы

Пример: диаграмма из двух прямоугольников и стрелки.

<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>

<!-- Прямоугольник 1 -->
<mxCell
id="node1"
value="Начало"
style="rounded=1;whiteSpace=wrap;fillColor=#f5f5f5;"
parent="1"
vertex="1"
/>

<!-- Прямоугольник 2 -->
<mxCell
id="node2"
value="Конец"
style="shape=ellipse;fillColor=#d4e6ff;"
parent="1"
vertex="1"
/>

<!-- Стрелка -->
<mxCell
id="edge1"
source="node1"
target="node2"
style="edgeStyle=none;endArrow=classic;"
parent="1"
edge="1"
/>
</root>
</mxGraphModel>

Как вставить:

  1. Скопируйте код.
  2. В Draw.io откройте XML-редактор (Alt+Shift+X).
  3. Вставьте код → Применить.

5. Правка и экспорт

  • Редактирование: меняйте параметры style, value, position прямо в XML.
  • Экспорт: Файл → Экспорт → PNG/SVG/PDF (или встраивайте XML в документацию).

Заключение

Преимущества метода:

  • Скорость — массовое создание объектов без кликов.
  • Гибкость — тонкая настройка стилей и связей.
  • Версионность — XML можно хранить в Git.

Когда использовать:

  • При частом обновлении диаграмм.
  • Для интеграции с кодом (например, генерация архитектуры из Terraform).
  • Если нужен хард мод вместо ручного рисования.
Совет: Начните с малого — попробуйте изменить готовый XML из примеров, чтобы понять логику.
Если нужно углубиться в конкретные теги или стили — спрашивайте в коменатариях!