0

tool which maintains smooth lines between items, once set, and lets reorganize items manually with a mouse, dragging them all around; and possibly, allowing for icons inside items, and a titleenter image description here

1

2 Answers 2

2

https://app.diagrams.net/ is open source and can be used in browser or downloaded. I made a small example, but didn't find an easy way to share it without using google drive, so I'll just paste the code here. To see the example go to the site and click Decide later when it asks where you want to save your diagram. Then in the top menu, click Extras > Edit Diagram... delete the existing code, paste the following code and click OK. I did some math typesetting in one node, if that's interesting. To display it correctly, click Extras > Mathematical Typesetting. To navigate horizontally use Shift + Scroll, vertically use Scroll and zoom with Ctrl + scroll.

<mxGraphModel dx="984" dy="918" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="hgWrqfutmgsVAFmiys-L-7" value="" style="swimlane;startSize=20;horizontal=1;containerType=tree;fillColor=none;strokeColor=none;" vertex="1" parent="1">
      <mxGeometry x="20" y="330" width="710" height="380" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-17" value="" style="orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;fillColor=#e51400;strokeColor=#B20000;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" source="hgWrqfutmgsVAFmiys-L-66" target="hgWrqfutmgsVAFmiys-L-18" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-18" value="" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Helvetica;fontSize=12;fontColor=rgba(0, 0, 0, 1);align=center;strokeColor=rgba(0, 0, 0, 1);fillColor=rgba(255, 255, 255, 1);" vertex="1" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry x="440" y="180" width="60" height="30" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-19" value="" style="edgeStyle=entityRelationEdgeStyle;curved=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;fillColor=#e51400;strokeColor=#B20000;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" edge="1" source="hgWrqfutmgsVAFmiys-L-66" target="hgWrqfutmgsVAFmiys-L-24" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-30" style="edgeStyle=entityRelationEdgeStyle;curved=1;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;endArrow=none;endFill=0;fillColor=#0050ef;strokeColor=#001DBC;" edge="1" parent="hgWrqfutmgsVAFmiys-L-7" source="hgWrqfutmgsVAFmiys-L-20" target="hgWrqfutmgsVAFmiys-L-18">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-20" value="\( \int_a^b x^2 dx \)" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Helvetica;fontSize=12;fontColor=rgba(0, 0, 0, 1);align=center;strokeColor=rgba(0, 0, 0, 1);fillColor=rgba(255, 255, 255, 1);" vertex="1" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry x="260" y="200" width="100" height="40" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-23" value="" style="orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fillColor=#e51400;strokeColor=#B20000;" edge="1" target="hgWrqfutmgsVAFmiys-L-20" source="hgWrqfutmgsVAFmiys-L-24" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="190" y="500" as="sourcePoint" />
      </mxGeometry>
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-24" value="" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Helvetica;fontSize=12;fontColor=rgba(0, 0, 0, 1);align=center;strokeColor=rgba(0, 0, 0, 1);fillColor=rgba(255, 255, 255, 1);" vertex="1" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry x="80" y="87.5" width="100" height="40" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-33" value="" style="orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;fillColor=#e51400;strokeColor=#B20000;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" target="hgWrqfutmgsVAFmiys-L-34" source="hgWrqfutmgsVAFmiys-L-20" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="120" y="420" as="sourcePoint" />
      </mxGeometry>
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-34" value="" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Helvetica;fontSize=12;fontColor=rgba(0, 0, 0, 1);align=center;strokeColor=rgba(0, 0, 0, 1);fillColor=rgba(255, 255, 255, 1);" vertex="1" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry x="440" y="100" width="70" height="30" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-41" value="" style="edgeStyle=entityRelationEdgeStyle;curved=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;fillColor=#0050ef;strokeColor=#001DBC;" edge="1" target="hgWrqfutmgsVAFmiys-L-42" source="hgWrqfutmgsVAFmiys-L-20" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="120" y="420" as="sourcePoint" />
      </mxGeometry>
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-42" value="" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Helvetica;fontSize=12;fontColor=rgba(0, 0, 0, 1);align=center;strokeColor=rgba(0, 0, 0, 1);fillColor=rgba(255, 255, 255, 1);" vertex="1" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry x="80" y="252.5" width="100" height="40" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-63" value="" style="shape=message;html=1;whiteSpace=wrap;html=1;outlineConnect=0;rounded=1;fillColor=#fff2cc;strokeColor=#d6b656;gradientColor=#ffd966;" vertex="1" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry x="107.5" y="257.5" width="45" height="30" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-64" value="" style="orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fillColor=#0050ef;strokeColor=#001DBC;" edge="1" target="hgWrqfutmgsVAFmiys-L-65" source="hgWrqfutmgsVAFmiys-L-20" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="200" y="437.5" as="sourcePoint" />
      </mxGeometry>
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-65" value="" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Helvetica;fontSize=12;fontColor=rgba(0, 0, 0, 1);align=center;strokeColor=rgba(0, 0, 0, 1);fillColor=rgba(255, 255, 255, 1);" vertex="1" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry x="440" y="252.5" width="120" height="27.5" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-68" value="" style="group" vertex="1" connectable="0" parent="hgWrqfutmgsVAFmiys-L-7">
      <mxGeometry x="260" y="67.5" width="100" height="60" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-66" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="hgWrqfutmgsVAFmiys-L-68">
      <mxGeometry y="20" width="100" height="40" as="geometry" />
    </mxCell>
    <mxCell id="hgWrqfutmgsVAFmiys-L-67" value="&lt;div align=&quot;left&quot;&gt;Title&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;align=left;fillColor=none;strokeColor=none;" vertex="1" parent="hgWrqfutmgsVAFmiys-L-68">
      <mxGeometry width="100" height="20" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>
0

the most related software tool i know is Diaenter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.