Is there a point to this? I've long been wanting to implement hand-drawn styles for our interactive graph editing component, but one part that kept me from doing it was that I had no idea how to keep the strokes stable enough to not induce seizures when editing. At least I don't want everything wobbling around when I draw lines or move a node. And I couldn't find a good way to incrementally just roughen up subsequent parts of a stroke.
Looks great, really like the look of it. For me it always helps, when my daily tools look pleasing. Somehow makes working with them less tiring.
Also working with Graphviz was a great experience while my thesis. Simple and easy enough to 'sketch out', but at the time it offers all needed tools to expand these sketches into something complex. Great tool! Sadly my work uses draw.io which is the exact opposite. For quick sketches on my phone I use MindNode.
Hey, that's me, actually. Thanks for calling it pretty neat!
As I mention on the about page, this is really just stringing a bunch of existing tools together, so most of the credit goes to those folks:
- the Graphviz contributors for creating everyone's favourite 1990s-era graphing tool
- Mike Daines for viz.js, which uses Emscripten to compile Graphviz to JavaScript
- Preet Shihn, for RoughJS, which has the algorithms to transform shapes into scruffier shapes
- GitHub user @ismay, who made a wrapper for RoughJS to make operating on SVGs, which Graphviz can emit as output, braindead simple
I just duct-taped things together and did some of the tedious fit-and-finish stuff. For example, ensuring fonts render consistently regardless of whether you were previewing in the editor, downloading the PNG (which generates locally for speed) or embedding the graph on another website (which generates in an AWS Lambda using a headless Chrome to render it).
Another neat graphviz trick is using vuejs (or now sketchviz!) to provide the UI, then layering JS to make the nodes clickable as a visual programming interface.
Others have mentioned generation and speed, but there's a much more important piece, IMO:
Maintainability. With declarative text-based diagramming, you can check these in as text files, and when the system evolves or the diagram has a need to change, it's easy to make a change and re-generate the image.
This. With the right tooling, you can embed diagrams as part of a larger document using a code block, which can be tuned and maintained as the system it's describing changes.
Once you learn the rules for the type of diagram you're making, it's much simpler than opening up <diagram tool of choice> and trying to shuffle the pieces around to make room for the change, or re-sketching the whole diagram from scratch on a piece of paper.
You’re catching shit in part because the “strange language” is a kind of standard tool in its niche (automatic graph layouts & drawing). It’s called “DOT” and may be regarded as venerable, if a touch obscure.
Absolutely this. If I'm making a diagram for a presentation I'm going to draw it manually so it looks just right. When we're debugging dataflow graphs with 4000 nodes, graphviz is the one and only.
Thanks! A lot of the good stuff (e.g. stress majorization and the Jaccard distance model stolen for neato -Gmodel=subset) was done in the 2000s. Probably people criticize because they see B&W graphics, Times-Roman and splines rendered 1pt wide and we didn't use XML or JSON.
Drawing a single diagram will be faster, true. But adding even a single new node which requires re-layouting the whole thing to make space would require you to redraw the whole diagram, whereas in Graphviz/DOT it’s literally just adding one line of code.
I literally started using GraphViz last Friday, and I'm never giving it up now. My handwriting looks like I've spent the last twenty-five years typing. GraphViz gives me maintainable and updatable diagrams. I just installed the MediaWiki extension on our internal tech wiki.
Not if you're trying to use it in a slide show, or share it with other people over email. I work in a high security environment, so even if I could draw it better/faster by hand, I cant pull out my phone and take a picture.
https://giphy.com/gifs/sketchviz-squigglevision-WtV9O3ufeqeO...