flowchart - How to automatically apply flow layout when opening xml file in draw.iodiagrams.net? - Stack Overflow

admin管理员组

文章数量:1432620

Below is the content of a programmatically created xml file for draw.io.

I defined a flow layout for a parent element (id="1"), using style="childLayout=flowLayout;flowOrientation=west;".

If I open that file in draw.io, instead of applying the wanted flow layout, all elements are located at x=0, y=0:

If I slightly move one of the elements, the layout is applied/updated and I see the expected flow diagram:

=> How can I adapt the xml file to tell draw.io to immediately apply the wanted layout to the elements when opening the file?

I would like to avoid

a) that my users need to manually move elements to trigger the layout operation for the file

b) that I have to calculate explicit coordinates while creating the xml file for draw.io

If there is no xml option to trigger the layout operation, maybe there is some python or javascript api, that I could use as workaround: locally simulate opening the file, trigger the layout operation and save a new file, including explicit coordinate values?

draw_io_xml_file.drawio:

<?xml version="1.0" ?>
<mxfile host="app.diagrams">
  <diagram name="my flow chart">
    <mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" style="childLayout=flowLayout;flowOrientation=west;" parent="0"/>
        <object id="bus1" label="bus1">
          <mxCell style="shape=ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
            <mxGeometry as="geometry" width="80" height="80"/>
          </mxCell>
        </object>
        <object id="bus2" label="bus2">
          <mxCell style="shape=ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
            <mxGeometry as="geometry" width="80" height="80"/>
          </mxCell>
        </object>
        <object id="load1" label="load1" bus="bus2">
          <mxCell style="shape=rectangle;whiteSpace=wrap;html=1;" vertex="1" parent="1">
            <mxGeometry as="geometry" width="80" height="40"/>
          </mxCell>
        </object>
        <mxCell id="load1_edge" source="bus2" target="load1" edge="1" parent="1">
          <mxGeometry as="geometry"/>
        </mxCell>
        <object id="line1" label="line1" bus0="bus1" bus1="bus2">
          <mxCell source="bus1" target="bus2" edge="1" parent="1">
            <mxGeometry as="geometry"/>
          </mxCell>
        </object>
        <object id="gen1" label="gen1" bus="bus1">
          <mxCell style="shape=rectangle;whiteSpace=wrap;html=1;" vertex="1" parent="1">
            <mxGeometry x="0" y="0" as="geometry" width="80" height="40"/>
          </mxCell>
        </object>
        <mxCell id="gen1_edge" edge="1" source="gen1" target="bus1" parent="1">
          <mxGeometry as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Edit: For the case, that this is not possible in draw.io, I also created a draw.io feature request here:

本文标签： flowchartHow to automatically apply flow layout when opening xml file in drawiodiagramsnetStack Overflow