JavaScript diagraming software

Question

I have been looking around the internet for an or chart creator with these functionalists to no avail. I've seen some good ones, like d3.js, but I don't know if it fulfills all these requirements, anyone know of any libraries?

Ability to PDF or other format.
Nodes can point to other nodes on the same level. The node that it points to will never have children in this situation.
Zoom in and out / pan.
Compatible with IE-8.
Not using HTML5.
Ability to show and hide children on click.
Styling would be nice as well.

Example diagrams

There is an example in d3.js that does the first diagram to the dot. I am trying to build a tool around it. Will holler if and when its done. — vikramjb, Aug 28, 2014 at 5:48
I've looked all over the place for a d3.js example that does this, it pretty much has all the other requirements/work rounds except collateral nodes from what I could see. If anyone else is interested in ie8 compatibility, here are 2 options i've found: code.google.com/p/explorercanvas and github.com/shawnbot/aight — rich green, Aug 28, 2014 at 19:52

Mathphyte · Accepted Answer · 2021-11-22 19:25:50Z

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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};" 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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};" 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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};" 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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};" 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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};" 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 &quot;styling&quot;." style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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="&#xa;" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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="&lt;div&gt;Collapsible grandchild that likes math.&lt;/div&gt;&lt;div&gt;\( \int_a^b \frac{1}{x} dx \)&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;align=center;verticalAlign=middle;treeFolding=1;treeMoving=1;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;startArrow&quot;:&quot;none&quot;,&quot;endArrow&quot;:&quot;none&quot;};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>

Stack Exchange Network

JavaScript diagraming software

1 Answer 1

Your Answer

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

Hot Network Questions

JavaScript diagraming software

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

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

Related

Hot Network Questions

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