Формат XML-файла Draw.io?

Я создал фигуру в draw.io и экспортировал ее, чтобы получить XML-файл, который выглядит так:

<mxlibrary>[{"xml":"vZTNcoIwEMefJnckXjxarF7aXvoEKawk05Blwirap+8SooLa0XbaZoaZ7H8/sssPImRW7VZe1foZC7BCPgqZeUTqd9UuA2tFmphCyIVI04QfkS6/8E6CN6mVB0f3JKR9wlbZDfRKLzS0t1EoPW5qIR88kiL1FuSE7ZgJnmA3Oj1H5yA/hB5bGHUVQmNLK8AKyO85pDUF6Rgxi2kaTKkPaTKKqonNHXNPQ/Imznl9Znkx8wsSNBeD89yugCKO22pD8FqrvPO2DIw1TRUfspjwttGqwPZgkMd3yNCiD6VkFhZ71sbagT4Lq9PR0UBfhsW6sqZ0rFlYU1eYzzeufArWYtpRgcZ8DKhUuB1YUJghsjGZJNS32M69x7aJyt2YhzjTn+H8DZrT21/wX4A8A9O9H5MrO48yYX0V1xjPObz/5rMfY7j59yXf58Xm6TYLvtFl9wk=","w":190,"h":130,"aspect":"fixed","title":"notes"}]</mxlibrary>

Можно ли вставить новую вершину, используя эти данные? Я даже не знаю, с чего начать.


xml mxgraph draw.io
person dyarbrough    schedule 19.12.2019    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы просматриваете XML, сжатый с использованием алгоритма сжатия Deflate. Очевидно, вы захотите распаковать его перед работой с ним.

JGraph, создателям отличного Draw.io приложение для рисования/диаграмм, предоставьте ссылку онлайн-инструмент преобразования декомпрессии. Вот mxGraphModel, связанный с вашими сжатыми данными после их распаковки с помощью этого инструмента:

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="" style="group;rotatable=0;" vertex="1" connectable="0" parent="1">
      <mxGeometry width="190" height="130" as="geometry"/>
    </mxCell>
    <mxCell id="3" value="Notes" style="rounded=0;whiteSpace=wrap;html=1;shadow=1;strokeColor=#CCCCCC;fillColor=#999999;fontColor=#FFFFFF;align=left;spacingLeft=4;resizable=0;movable=0;editable=0;connectable=0;allowArrows=0;rotatable=0;" vertex="1" parent="2">
      <mxGeometry width="190" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="4" value="" style="rounded=0;whiteSpace=wrap;html=1;shadow=1;strokeColor=#CCCCCC;align=left;verticalAlign=top;spacingLeft=4;movable=0;resizable=0;connectable=0;allowArrows=0;rotatable=0;" vertex="1" parent="2">
      <mxGeometry y="30" width="190" height="100" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

См. также Извлечение XML из mxfiles< /strong> на сайте Draw.io.

person kjhughes    schedule 19.12.2019
comment
Хорошо, но я все еще не уверен, как это использовать. Документация довольно скудная; есть ли примеры? - person dyarbrough; 20.12.2019
comment
Просто добавьте вершину вручную в программу, сохраните XML и сравните разницу между до и после XML. Это скажет вам, как именно нужно изменить XML, чтобы добавить нужную вершину. Затем напишите код для обновления XML, используя ваш любимый язык программирования, такой как XSLT, JavaScript, Prolog и т. д. — стандартное на тот момент программирование XML. Перекомпрессуйте по мере необходимости. - person kjhughes; 20.12.2019
comment
В качестве альтернативы используйте их JS API. Фигура имеет массив точек, в который можно добавить другую: mxShape.prototype.points - person kjhughes; 20.12.2019
comment
Разве не существует API, который просто позволяет мне добавлять форму на основе XML? Я не смог найти ни одного. Я не знаю, что вы имеете в виду под своим первым комментарием. Вы имеете в виду использование graph.insertVertex? Извините, я новичок в mxgraph, и мне тяжело :/ - person dyarbrough; 20.12.2019
comment
Вы можете либо написать общий код обработки XML (используя любой язык, который вам подходит) для XML вне их API, либо вы можете использовать их JS API для их структур JS. - person kjhughes; 20.12.2019

arrow_upward
1
arrow_downward

Наконец-то это заработало. Посмотрите mxCodec пример здесь . Итак, сначала получите несжатый xml для узла, как описано kjhughes, или через меню Extras -> Edit Diagram в Draw.io. Затем вы можете добавить узел следующим образом:

var xml = '<root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell><mxCell id="3" value="World!" vertex="1"><mxGeometry x="200" y="150" width="80" height="30" as="geometry"/></mxCell><mxCell id="4" value="" edge="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell></root>';
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
var elt = doc.documentElement.firstChild;
var cells = [];

while (elt != null)
{
  cells.push(codec.decode(elt));
  elt = elt.nextSibling;
}

graph.addCells(cells);

Замените xml любым XML для вашего узла. Кроме того, убедитесь, что не включаете

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

поскольку это родители по умолчанию, и их включение нарушит график, вызвав бесконечную рекурсию.

person dyarbrough    schedule 26.12.2019