I don't know about 4 and 5, but I think https://app.diagrams.net/ satisfies your other requirements, based on my understanding of what you are after. If it doesn't support IE8 it can be downloaded, if that helps. I made a small example, but didn't find aa 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="1462" dy="774" 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="DKqlomN4Phpn-QGfdmuO-1" value="Orgchart 1" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};comic=0;" parent="1" vertex="1">
<mxGeometry y="60" width="560" height="340" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-2" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;startArrow=none;endArrow=none;rounded=0;" parent="DKqlomN4Phpn-QGfdmuO-1" source="DKqlomN4Phpn-QGfdmuO-4" target="DKqlomN4Phpn-QGfdmuO-5" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<UserObject label="Parent" treeRoot="1" id="DKqlomN4Phpn-QGfdmuO-4">
<mxCell style="whiteSpace=wrap;html=1;align=center;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" parent="DKqlomN4Phpn-QGfdmuO-1" vertex="1">
<mxGeometry x="190" y="70" width="120" height="60" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="DKqlomN4Phpn-QGfdmuO-5" value="Collapsible child" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" parent="DKqlomN4Phpn-QGfdmuO-1" vertex="1">
<mxGeometry x="200" y="180" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-7" value="" style="edgeStyle=elbowEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;elbow=horizontal;startArrow=none;endArrow=none;" parent="DKqlomN4Phpn-QGfdmuO-1" source="DKqlomN4Phpn-QGfdmuO-4" target="DKqlomN4Phpn-QGfdmuO-8" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<UserObject label="Other parent which collapses" treeRoot="1" id="DKqlomN4Phpn-QGfdmuO-8">
<mxCell style="whiteSpace=wrap;html=1;align=center;treeFolding=0;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};expand=0;movable=1;resizable=1;rotatable=1;deletable=1;editable=1;connectable=1;" parent="DKqlomN4Phpn-QGfdmuO-1" vertex="1">
<mxGeometry x="350" y="70" width="120" height="60" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="DKqlomN4Phpn-QGfdmuO-13" value="Orgchart 2" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};comic=0;" parent="1" vertex="1">
<mxGeometry x="681" y="60" width="560" height="340" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-14" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;startArrow=none;endArrow=none;rounded=0;" parent="DKqlomN4Phpn-QGfdmuO-13" source="DKqlomN4Phpn-QGfdmuO-15" target="DKqlomN4Phpn-QGfdmuO-16" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<UserObject label="Parent" treeRoot="1" id="DKqlomN4Phpn-QGfdmuO-15">
<mxCell style="whiteSpace=wrap;html=1;align=center;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" parent="DKqlomN4Phpn-QGfdmuO-13" vertex="1">
<mxGeometry x="190" y="70" width="120" height="60" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="DKqlomN4Phpn-QGfdmuO-16" value="Collapsible child" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" parent="DKqlomN4Phpn-QGfdmuO-13" vertex="1">
<mxGeometry x="200" y="180" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-19" value="Other parent that does not collapse" style="rounded=0;whiteSpace=wrap;html=1;comic=0;" parent="DKqlomN4Phpn-QGfdmuO-13" vertex="1">
<mxGeometry x="400" y="70" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-21" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;endArrow=none;endFill=0;" parent="DKqlomN4Phpn-QGfdmuO-13" source="DKqlomN4Phpn-QGfdmuO-19" target="DKqlomN4Phpn-QGfdmuO-15" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-24" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;startArrow=none;endArrow=none;rounded=0;" parent="DKqlomN4Phpn-QGfdmuO-13" source="DKqlomN4Phpn-QGfdmuO-16" target="DKqlomN4Phpn-QGfdmuO-25" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="880" y="190" as="sourcePoint" />
</mxGeometry>
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-25" value="Collapsible grandchild" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" parent="DKqlomN4Phpn-QGfdmuO-13" vertex="1">
<mxGeometry x="330" y="180" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-26" value="Like orgchart 2 with "styling"." style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};comic=0;" parent="1" vertex="1">
<mxGeometry x="1" y="560" width="560" height="340" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-27" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;startArrow=none;endArrow=none;rounded=0;" parent="DKqlomN4Phpn-QGfdmuO-26" source="DKqlomN4Phpn-QGfdmuO-28" target="DKqlomN4Phpn-QGfdmuO-29" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<UserObject label="Parent" treeRoot="1" id="DKqlomN4Phpn-QGfdmuO-28">
<mxCell style="whiteSpace=wrap;html=1;align=center;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};absoluteArcSize=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;shadow=1;gradientColor=#7ea6e0;" parent="DKqlomN4Phpn-QGfdmuO-26" vertex="1">
<mxGeometry x="190" y="70" width="120" height="60" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="DKqlomN4Phpn-QGfdmuO-29" value="Collapsible child" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};rounded=1;glass=1;absoluteArcSize=1;shadow=1;fillColor=#cce5ff;strokeColor=#36393d;" parent="DKqlomN4Phpn-QGfdmuO-26" vertex="1">
<mxGeometry x="200" y="180" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-30" value="Other parent that does not collapse" style="rounded=1;whiteSpace=wrap;html=1;comic=0;glass=1;absoluteArcSize=1;shadow=1;fillColor=#e6d0de;strokeColor=#996185;gradientColor=#d5739d;" parent="DKqlomN4Phpn-QGfdmuO-26" vertex="1">
<mxGeometry x="400" y="70" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-31" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;endArrow=none;endFill=0;" parent="DKqlomN4Phpn-QGfdmuO-26" source="DKqlomN4Phpn-QGfdmuO-30" target="DKqlomN4Phpn-QGfdmuO-28" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-32" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;startArrow=none;endArrow=none;rounded=0;" parent="DKqlomN4Phpn-QGfdmuO-26" source="DKqlomN4Phpn-QGfdmuO-29" target="DKqlomN4Phpn-QGfdmuO-33" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="880" y="190" as="sourcePoint" />
</mxGeometry>
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-33" value="Collapsible grandchild" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};rounded=1;glass=1;absoluteArcSize=1;shadow=1;fillColor=#60a917;strokeColor=#2D7600;fontColor=#ffffff;" parent="DKqlomN4Phpn-QGfdmuO-26" vertex="1">
<mxGeometry x="330" y="180" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-34" value="
" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};comic=0;strokeColor=none;fillColor=none;collapsible=0;" parent="1" vertex="1">
<mxGeometry x="610" y="510" width="560" height="420" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-35" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;startArrow=none;endArrow=none;rounded=0;" parent="DKqlomN4Phpn-QGfdmuO-34" source="DKqlomN4Phpn-QGfdmuO-36" target="DKqlomN4Phpn-QGfdmuO-37" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<UserObject label="Parent" treeRoot="1" id="DKqlomN4Phpn-QGfdmuO-36">
<mxCell style="whiteSpace=wrap;html=1;align=center;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};absoluteArcSize=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;shadow=1;gradientColor=#7ea6e0;" parent="DKqlomN4Phpn-QGfdmuO-34" vertex="1">
<mxGeometry x="190" y="70" width="120" height="60" as="geometry" />
</mxCell>
</UserObject>
<mxCell id="DKqlomN4Phpn-QGfdmuO-37" value="Collapsible child" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};rounded=1;glass=1;absoluteArcSize=1;shadow=1;fillColor=#cce5ff;strokeColor=#36393d;" parent="DKqlomN4Phpn-QGfdmuO-34" vertex="1">
<mxGeometry x="200" y="180" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-38" value="Other parent that does not collapse" style="rounded=1;whiteSpace=wrap;html=1;comic=0;glass=1;absoluteArcSize=1;shadow=1;fillColor=#e6d0de;strokeColor=#996185;gradientColor=#d5739d;" parent="DKqlomN4Phpn-QGfdmuO-34" vertex="1">
<mxGeometry x="400" y="70" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-39" style="edgeStyle=none;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;endArrow=none;endFill=0;" parent="DKqlomN4Phpn-QGfdmuO-34" source="DKqlomN4Phpn-QGfdmuO-38" target="DKqlomN4Phpn-QGfdmuO-36" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-40" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;startArrow=none;endArrow=none;rounded=0;" parent="DKqlomN4Phpn-QGfdmuO-34" source="DKqlomN4Phpn-QGfdmuO-37" target="DKqlomN4Phpn-QGfdmuO-41" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="880" y="190" as="sourcePoint" />
</mxGeometry>
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-41" value="Collapsible grandchild" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};rounded=1;glass=1;absoluteArcSize=1;shadow=1;fillColor=#60a917;strokeColor=#2D7600;fontColor=#ffffff;" parent="DKqlomN4Phpn-QGfdmuO-34" vertex="1">
<mxGeometry x="330" y="180" width="100" height="60" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-46" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;startArrow=none;endArrow=none;rounded=0;" parent="DKqlomN4Phpn-QGfdmuO-34" source="DKqlomN4Phpn-QGfdmuO-37" target="DKqlomN4Phpn-QGfdmuO-47" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="931" y="690" as="sourcePoint" />
</mxGeometry>
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-47" value="<div>Collapsible grandchild that likes math.</div><div>\( \int_a^b \frac{1}{x} dx \)<br></div>" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};rounded=1;glass=1;absoluteArcSize=1;shadow=1;fillColor=#cce5ff;strokeColor=#36393d;" parent="DKqlomN4Phpn-QGfdmuO-34" vertex="1">
<mxGeometry x="140" y="280" width="220" height="70" as="geometry" />
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-45" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;shadow=1;fillColor=#008a00;strokeColor=#005700;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="670" y="500" as="sourcePoint" />
<mxPoint x="730" y="550" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="DKqlomN4Phpn-QGfdmuO-44" value="Like orgchart 2 but without visible container boarders. " style="rounded=1;whiteSpace=wrap;html=1;shadow=1;glass=1;comic=0;fillColor=#008a00;fontColor=#ffffff;strokeColor=#005700;" parent="1" vertex="1">
<mxGeometry x="561" y="450" width="120" height="60" as="geometry" />
</mxCell>
</root>
</mxGraphModel>