RussTedrake
commented
3 years ago I spent a little more time looking through the options yesterday, but haven't found one that is obviously good.
To address #13975, I realized pydot could create svg. For moderate size diagrams, that is a reasonable solution for diagram visualization, too.
I went through the entire list of javascript packages in https://codefreezr.github.io/awesome-graphviz/#language-bindings , as recommended by @jwnimmer-tri in #13705. Those links took me to https://github.com/dagrejs, which is the most promising path I've seen from graphviz to a javascript rendering. But even this package doesn't appear to support collapsing/expanding subdiagrams, so I feel the additional value it adds over the python-based svg rendering is not worth the trouble.
Because of the existing SVG solution, I am going to upgrade the feature request of collapsing/expanding here to a "must have". I honestly haven't found a good gojs alternative. I'm almost of the opinion that we should just write our own in d3. I bet I could do some pretty nice graph layout optimization in mathematicalprogram (probably a MILP).
I'm also ok if it takes a different form from collapse/expand. It might be possible to use a combination of max_depth on the graphviz and links in something like dagrejs to open subdiagrams.
rpoyner-tri
jwnimmer-tri
shensquared
zapplelove
(I wrote this in an email for someone potentially willing to help with the cause; but realized it deserves to be here in an issue for anybody that might want to help).
Quick background:
Drake builds system diagrams like Simulink, etc (but programmatically in python/c++, instead of visually). Example here: https://mybinder.org/v2/gh/RobotLocomotion/drake/nightly-release?filepath=tutorials/dynamical_systems.ipynb
You’ll see in the second-to-last cell on that tutorial that, because of it’s c++ origins, we never spent much time visualizing the resulting diagrams. But we offer the ability to kick-out a graphviz .dot file. In jupyter notebooks, we render that to a PNG and display the PNG.
I took a spin earlier this summer and made a version that renders to a js diagramming tool, instead: https://github.com/RobotLocomotion/drake/pull/13644 i did the javascript coding for this in https://observablehq.com/@russtedrake/gojs-for-drake-system-diagrams
It turns out the particular diagramming tool that i choose was rejected because of the licensing implications: https://github.com/RobotLocomotion/drake/issues/13705 but, as you see at the bottom of that issue, it might be possible to simply render the .dot file in js.
I think a few hours of trying some of the js diagramming libraries and deciding what works would result in an immense improvement in the user/student experience. I think one key feature is the ability to expand/collapse nested subdiagrams.