Редактируемые исходники draw.io рядом с опубликованными схемами

Сохраняйте редактируемый исходник схемы рядом с публикуемым изображением. Картинка показывает текущий результат, а исходник хранит фигуры, соединения и подписи для следующего изменения.

Руководство по форматам draw.io рекомендует .drawio — несжатый XML-формат. SVG и PNG тоже могут содержать данные схемы, поэтому одно расширение изображения не говорит о возможности редактирования. Сохраняйте отдельный исходник, даже если он встроен в экспорт.

Ход примера

Схема показывает те же три вершины и две направленные связи, что и XML ниже. Она отрисована для статьи, а не снята с экрана или экспортирована из редактора.

Сохраните как request-flow.drawio

<mxfile host="app.diagrams.net">
  <diagram id="request-flow" name="Request flow">
    <mxGraphModel>
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="request" value="Request" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="40" width="160" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="validate" value="Validate" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="160" width="160" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="response" value="Response" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="280" width="160" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="first" edge="1" parent="1" source="request" target="validate" style="endArrow=block;">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="second" edge="1" parent="1" source="validate" target="response" style="endArrow=block;">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Элементы mxCell с vertex="1" задают три узла. Два ребра ссылаются на идентификаторы источника и цели, а mxGeometry задаёт позиции и размеры. Изменение видимой подписи отличается от изменения идентификатора, на который ссылается ребро.

Откройте файл в редакторе. Полный файл включает внешние элементы mxfile и diagram. При использовании Extras → Edit Diagram документация редактора исходника описывает mxGraphModel текущей страницы; не путайте этот фрагмент с оболочкой полного файла.

Файл	Назначение
request-flow.drawio	Редактируемый исходник под контролем версий
request-flow.svg или .png	Результат для публикации/отрисовки; проверьте наличие встроенных данных

После изменения снова откройте исходник, проверьте направление каждой стрелки и экспортируйте новое изображение. Проверяйте diff исходника и отрисовку: форматирование может скрыть небольшое изменение связей.

В примере локально проверяются структура XML, уникальность идентификаторов и ссылки соединений. Облачное хранение, действия в интерфейсе редактора и полный цикл экспорта не входят в проверки. Интеграции хранения выбирайте отдельно под свой аккаунт и редактор. Руководство по поиску кода показывает, как сузить набор изучаемых файлов репозитория.