
Sketchviz – Graphviz graphs in a hand-drawn style - feross
https://sketchviz.com
======
pimlottc
Really cool! I like the random perturbations; you can use them to make
squigglevision-style diagrams:

[https://giphy.com/gifs/sketchviz-squigglevision-
WtV9O3ufeqeO...](https://giphy.com/gifs/sketchviz-squigglevision-
WtV9O3ufeqeOqYnYDU)

~~~
ygra
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.

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

[0] [https://wiredjs.com](https://wiredjs.com)

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

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

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

~~~
bruth
> 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!

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

------
krilly
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...](https://jakevdp.github.io/blog/2012/10/07/xkcd-style-plots-in-
matplotlib/)

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

[https://altair-viz.github.io/](https://altair-viz.github.io/).

its exceedingly cool!

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

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

------
sandGorgon
this is very very cool! thanks so much.

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

~~~
mcqueenjordan
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.

~~~
Fellshard
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.

