Sketchviz – Graphviz graphs in a hand-drawn style | Hacker News Reader

Sketchviz – Graphviz graphs in a hand-drawn style

sketchviz.com

288 pointsfeross27 comments

Really cool! I like the random perturbations; you can use them to make squigglevision-style diagrams:

https://giphy.com/gifs/sketchviz-squigglevision-WtV9O3ufeqeO...

Even cooler!

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.

It can be combined with Wired Elements [0] for the whole hand-drawn experience!

[0] https://wiredjs.com

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.

Pretty neat. How does it work? Are you the creator?

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).

> this is really just stringing a bunch of existing tools together

This is essentially what all developers do to varying degrees. The whole is greater than the sum of its parts!

Yes. Great work. That is one of my favourite tools.

Nice. Is there a library and/or command line tool?

this is just awesome. I suppose it'd be hard to add it to the graphviz binaries.

Matplotlib has XKCDify which is similar[0]. It's great for rough or estimated graphs that are not to be read accurately.

[0]: https://jakevdp.github.io/blog/2012/10/07/xkcd-style-plots-i...

the author of this post is the creator of Altair - a declarative visualization library in python built on Vega.

https://altair-viz.github.io/.

its exceedingly cool!

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.

Also of interest: Wolfram's `XKCDConvert` function (https://resources.wolframcloud.com/FunctionRepository/resour...) in Mathematica. This allows you to convert plots, charts, diagrams, etc to XKCD style.

this is very very cool! thanks so much.

Nice idea, however it would be lot easier and faster for my to draw the digram than it would take to write the code in strange language.

People who use Graphviz tend to know the basic Graphviz language, but, probably more importantly, it's easy for tools to generate it.

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.

You might be wrong about this; you should try graphviz to find out.

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.

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.

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.

See:

https://www.graphviz.org/documentation/

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.

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.

Reply on news.ycombinator.com