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
2 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>