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 title
-
Have a look at graphviz / dot (graphviz.org), plantuml (plantuml.com).– albertNov 21, 2021 at 13:11
3 Answers
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="<div align="left">Title</div>" 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>
Enterprise Architect does provide this.
-
Your answer has been flag as low quality and might be removed; please have a look at What is required for an answer to be high quality? for some tips on how to improve it. Jun 3 at 5:48