doc/BPM/graphic_editor/drawio/format_1.md

1 mxGraph

наконец-то я нашел способ, как открыть файл draw io xml в mxGraph используется функция декодирования для преобразования файла draw io xml в файл mxgraph xml.

2 Структура файла

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="Electron" modified="2025-04-30T17:34:16.644Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36" etag="-x75WuX34FlAKsySl98P" version="20.7.4" type="device">
  <diagram name="Page-1" id="8ce9d11a-91a2-4d17-14d8-a56ed91bf033">
    <mxGraphModel dx="1143" dy="828" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" background="none" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="17ea667e15c223fc-2" value="Invite reviewers" style="rounded=1;whiteSpace=wrap;html=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Verdana;fontSize=12;align=center;" parent="1" vertex="1">
          <mxGeometry x="90" y="110" width="120" height="80" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Вот подробный комментарий к каждой строке вашего XML-файла:

<?xml version="1.0" encoding="UTF-8"?>

• Объявление XML: Эта строка указывает, что документ является XML-файлом версии 1.0 и использует кодировку UTF-8. Это важно для правильного отображения символов.

<mxfile host="Electron" modified="2025-04-30T17:34:16.644Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36" etag="-x75WuX34FlAKsySl98P" version="20.7.4" type="device">

• Корневой элемент mxfile: Этот элемент представляет файл диаграммы. Атрибуты включают:
  • host: Указывает, что файл был создан в приложении Electron.
  • modified: Дата и время последнего изменения файла в формате UTC.
  • agent: Информация о системе и версии программного обеспечения, использованного для создания файла.
  • etag: Уникальный идентификатор для отслеживания изменений файла.
  • version: Версия приложения Draw.io, использованного для создания файла.
  • type: Тип устройства, на котором был создан файл (в данном случае "device").

  <diagram name="Page-1" id="8ce9d11a-91a2-4d17-14d8-a56ed91bf033">

• Элемент diagram: Этот элемент представляет отдельную диаграмму внутри файла. Атрибуты:
  • name: Имя диаграммы (в данном случае "Page-1").
  • id: Уникальный идентификатор диаграммы.

    <mxGraphModel dx="1143" dy="828" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" background="none" math="0" shadow="0">

• Элемент mxGraphModel: Этот элемент описывает модель графа диаграммы. Атрибуты:
  • dx и dy: Смещения по осям X и Y для отображения.
  • grid: Указывает, включена ли сетка (1 - включена).
  • gridSize: Размер ячейки сетки.
  • guides: Указывает, включены ли направляющие (1 - включены).
  • tooltips: Указывает, включены ли подсказки (1 - включены).
  • connect: Указывает, включена ли возможность соединения элементов (1 - включена).
  • arrows: Указывает, включены ли стрелки (1 - включены).
  • fold: Указывает, включена ли возможность сворачивания элементов (1 - включена).
  • page: Указывает, используется ли разбиение на страницы (1 - используется).
  • pageScale: Масштаб страницы.
  • pageWidth и pageHeight: Ширина и высота страницы.
  • background: Цвет фона (в данном случае "none" - без фона).
  • math: Указывает, используется ли поддержка математических формул (0 - не используется).
  • shadow: Указывает, включены ли тени (0 - не включены).

      <root>

• Элемент root: Этот элемент содержит корневые ячейки диаграммы.

        <mxCell id="0" />

• Элемент mxCell: Это базовая ячейка, представляющая корень графа. У нее есть только атрибут id, который равен "0".

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

• Элемент mxCell: Это ячейка, которая является дочерней по отношению к корневой ячейке. Атрибуты:
  • id: Уникальный идентификатор ячейки (в данном случае "1").
  • parent: Указывает, что эта ячейка является дочерней для ячейки с id="0".

        <mxCell id="17ea667e15c223fc-2" value="Invite reviewers" style="rounded=1;whiteSpace=wrap;html=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Verdana;fontSize=12;align=center;" parent="1" vertex="1">

• Элемент mxCell: Это ячейка, представляющая графический элемент диаграммы. Атрибуты:
  • id: Уникальный идентификатор ячейки.
  • value: Текстовое значение, отображаемое в ячейке (в данном случае "Invite reviewers").
  • style: Стиль ячейки, включающий параметры, такие как закругленные углы, обертка текста, тени и т.д.
  • parent: Указывает, что эта ячейка является дочерней для ячейки с id="1".
  • vertex: Указывает, что это вершинный элемент (1 - да).

          <mxGeometry x="90" y="110" width="120" height="80" as="geometry" />

• Элемент mxGeometry: Этот элемент описывает геометрию ячейки. Атрибуты:
  • x и y: Позиция ячейки на холсте (координаты верхнего левого угла).
  • width: Ширина ячейки.
  • height: Высота ячейки.
  • as: Указывает, что это геометрия (в данном случае "geometry").

      </root>

• Закрывающий тег root: Завершает элемент root, который содержит все ячейки диаграммы.

    </mxGraphModel>

• Закрывающий тег mxGraphModel: Завершает элемент mxGraphModel, который описывает модель графа.

  </diagram>

• Закрывающий тег diagram: Завершает элемент diagram, который представляет отдельную диаграмму.

</mxfile>

• Закрывающий тег mxfile: Завершает корневой элемент mxfile, который содержит всю информацию о файле диаграммы.

Таким образом, этот XML-файл описывает диаграмму, созданную в Draw.io, включая ее структуру, элементы и их свойства.

3 Напиши фрагмент xml, который вставляет в верхнюю часть диаграммы название диаграмму "Диаграмма 1"

Чтобы вставить название диаграммы "Диаграмма 1" в верхнюю часть существующей диаграммы в формате XML для Draw.io, вы можете использовать следующий фрагмент кода. Этот код добавляет текстовый элемент в верхней части диаграммы:

<mxCell id="titleCell" value="Диаграмма 1" style="text;html=1;strokeColor=none;fillColor=none;fontSize=16;fontColor=#000000;align=center;verticalAlign=middle;" parent="1" vertex="1">
  <mxGeometry x="0" y="0" width="200" height="40" as="geometry" />
</mxCell>

Объяснение фрагмента:

• <mxCell>: Это элемент, представляющий ячейку диаграммы.

  • id: Уникальный идентификатор ячейки (в данном случае "titleCell").
  • value: Текст, который будет отображаться (в данном случае "Диаграмма 1").
  • style: Стиль ячейки, который определяет, как текст будет выглядеть. Включает:
    • text: Указывает, что это текстовый элемент.
    • html=1: Указывает, что текст может содержать HTML-форматирование.
    • strokeColor=none: Убирает обводку.
    • fillColor=none: Убирает фон.
    • fontSize=16: Устанавливает размер шрифта.
    • fontColor=#000000: Устанавливает цвет шрифта (черный).
    • align=center: Центрирует текст по горизонтали.
    • verticalAlign=middle: Центрирует текст по вертикали.
  • parent: Указывает, что эта ячейка является дочерней для ячейки с id="1".
  • vertex: Указывает, что это вершинный элемент (1 - да).

• <mxGeometry>: Этот элемент описывает геометрию ячейки.

  • x и y: Позиция ячейки на холсте (в данном случае в верхнем левом углу).
  • width: Ширина ячейки (200 пикселей).
  • height: Высота ячейки (40 пикселей).
  • as: Указывает, что это геометрия (в данном случае "geometry").

Вставка в существующий XML

Чтобы вставить этот фрагмент в существующий XML-файл, добавьте его внутри элемента <root> перед другими элементами <mxCell>, чтобы он отображался в верхней части диаграммы.

4 root mxCell id="0" mxCell id="1" parent="0"

Объяснение элементов <root>, <mxCell id="0" /> и <mxCell id="1" parent="0" />

1. Элемент <root>:

   • Этот элемент служит контейнером для всех ячеек диаграммы. Он определяет иерархию элементов, которые будут отображаться на холсте. Все ячейки, которые вы добавляете в диаграмму, должны находиться внутри этого элемента.

2. Элемент <mxCell id="0" />:

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

3. Элемент <mxCell id="1" parent="0" />:

   • Эта ячейка является дочерней по отношению к ячейке с id="0". Атрибут parent="0" указывает, что эта ячейка принадлежит корневой ячейке. Обычно такие ячейки используются для группировки других элементов или для представления контейнеров, в которых будут находиться графические элементы диаграммы.

Примеры раскрытия элемента с id="1"

Элемент с id="1" может быть раскрыт для добавления других ячеек, которые будут находиться внутри него. Например, вы можете добавить текстовые элементы, фигуры или соединительные линии. Вот несколько примеров:

1. Добавление текстового элемента:

   <mxCell id="text1" value="Название" style="text;html=1;strokeColor=none;fillColor=none;" parent="1" vertex="1">
       <mxGeometry x="50" y="50" width="100" height="30" as="geometry" />
   </mxCell>
   

2. Добавление прямоугольника:

   <mxCell id="rect1" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
       <mxGeometry x="100" y="100" width="120" height="80" as="geometry" />
   </mxCell>
   

3. Добавление соединительной линии:

   <mxCell id="line1" style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.5;entryX=0;entryY=0.5;" parent="1" edge="1">
       <mxGeometry relative="1" as="geometry" />
   </mxCell>
   

Заключение

Элементы <root>, <mxCell id="0" /> и <mxCell id="1" parent="0" /> формируют основную структуру диаграммы в Draw.io. Элемент с id="1" может служить контейнером для других элементов, что позволяет организовать диаграмму и добавлять в неё различные графические компоненты.