
Shaky: ASCII Diagram to PNG - tambourine_man
http://shaky.github.bushong.net/
======
AstroJetson
I use this tool almost every day turning sequence diagrams into drawings.
[https://www.websequencediagrams.com](https://www.websequencediagrams.com)
While the "back of a napkin"style is hip, management seems to prefer cleaner
drawings. I'd use shakey, if it made "professional" drawings.

~~~
aembleton
That looks like it's using Dot notation:
[https://en.wikipedia.org/wiki/DOT_%28graph_description_langu...](https://en.wikipedia.org/wiki/DOT_%28graph_description_language%29)

I like to use [http://www.graphviz.org/](http://www.graphviz.org/) to convert
from DOT to PNG.

~~~
ygra
Uhm, if the only thing you base that assumption on is the use of -> to mark a
line with an arrowhead ... sure. But it's pretty far from dot, actually.

~~~
bnegreve
They are similar in that they are both languges that can be used to specify
diagrams.

~~~
ygra
dot describes graphs. Sequence diagrams aren't really graphs in my book.

------
davidjgraph
These ideas always seem to top HN. They are cute, but interactive diagram
editors have been around a while and, unfortunately, are just faster to use
and are more flexible.

Maybe it'd make more sense to just have one of these tools implement export to
ACSII?

~~~
dr_zoidberg
I think the appeal would be that, since it's text based, it's already
supported by git/mercurial/svn/name-your-vcs. A binary format would need some
sort of history/diff support inside it to work well with a specific plugin for
s VCS. An XML-based format would integrate well with a VCS, but you lose the
clarity of the ASCII based diagrams.

It may seem "cute" or "toyish", but I woudl try to use it before giving an
opinion. I certainly did that with markdown and ended up moving a lot of docs
to that format, right in the repos with the code.

~~~
bphogan
This. I would love, as an author and teacher, to keep my flowcharts, diagrams,
etc with my book code.

Right now I'm using SVG for that, but it's kinda rotten.

~~~
davidjgraph
Is that same problem, i.e. you want to be able to diff your diagrams or do you
want the actual data format embedded in your document.

If it's the second, you can embed XML within SVG or a PNG. If you draw
something simple in draw.io [0] (which I do co-author) and then "File->Export
As" either "SVG with XML" or "PNG with XML" the diagram data is stored within
the display format itself. This way you can just reload the SVG+XML or PNG+XML
and carry on editing. But the PNG and SVG display as you'd normally expect.

Does that solve your problem?

[0] [https://www.draw.io/?splash=0](https://www.draw.io/?splash=0)

------
captn3m0
This works very well with diagrams created using
[http://asciiflow.com/](http://asciiflow.com/)

Just tried it out and the export->copy->paste->save worked really, really
well.

~~~
storrgie
Is a great service, but I'd love to have something I can use locally. A _lot_
of my time diagramming is spent disconnected, transitioning over photos of
whiteboards to actual diagrams.

Are you aware of anything that is a local client?

~~~
txutxu
There is years ago asciio, works well on linux environments, some distros have
it already packaged, otherwise you can pull it from CPAN.

Looks something like this:
[http://wiki.cornempire.net/_media/asciiart/diagram1.png](http://wiki.cornempire.net/_media/asciiart/diagram1.png)

~~~
otterpro
Asciio should be available as a package. For example, in Debian, it can be
installed:

    
    
        sudo apt-get install asciio

------
gricardo99
This visual editor allows you to easily draw the ASCII diagrams to begin with
(for placing in code):

[http://asciiflow.com/](http://asciiflow.com/)

------
chaosfox
ditaa makes some much nicer diagrams:
[http://ditaa.sourceforge.net/](http://ditaa.sourceforge.net/)

~~~
tambourine_man
I like Shaky's rough style better

~~~
anigbrowl
Matter of taste I suppose, but I find the rought style almost as irritating as
ASCII diagrams themselves. Both involve a _lot_ of visual noise which is a
huge distraction from the semantic content, for me. With something like Shaky,
the combination of handwritten-looking text but the perfect consistency of
computer fonts just creates an 'uncanny valley' scenario where my focus is
drawn to the artificiality of the textural qualities - like bad CG in an old
or low-budget film - rather than the assimilating the basic shapes and
relationships that they are meant to present.

When I see something like this part of me always silently wonders 'if you
think these handwritten-style fonts are so cool, why didn't you write your
whole Readme in the same font? Probably because deep down, you know it's
actually hard to read, so why make your diagrams hard to read?'

------
Tehnix
Ah, love it! I've taken to primarily doing ASCII figures when I write papers
or other things. This along with Monodraw[0] will make a nice suite of tools!
(absolutely love the shaky lines, reminds me of XKCD style)

[0] [http://monodraw.helftone.com/](http://monodraw.helftone.com/)

------
metasean
[https://github.com/dbushong/shaky](https://github.com/dbushong/shaky) (last
touched by the author 3 years ago)

------
grhmc
My impression is most people don't know about graphviz and dot, and implement
these sorts of tools to fill this (admittedly big) gap.

~~~
vidarh
Graphviz is great if you either want to automatically generate diagrams of
huge graphs, or if you care more about structure than appearance.

But creating pretty diagrams with Graphviz/dot is an exercise in pain.

I love seeing more of these tools, and plan to integrate several of them in
the scripts I use to build my blog, not to supplant the cases where I use
Graphviz, but to augment them for the many situations where I want to do
diagrams that need more precise control than Graphviz does.

(My personal Graphviz self-flagellation exercise involves an XSL file to
convert the SVG output from dot to something prettier:
[https://github.com/vidarh/diagram-tools](https://github.com/vidarh/diagram-
tools) )

~~~
atombender
I use Mermaid [1]. It has similar layout algorithms as Graphiviz/dot, and is
significantly prettier out of the box.

Mermaid has multiple renderers (including a client-side JavaScript one),
including SVG, so you can trivially style all your diagrams using CSS. It can
also process diagrams embedded in Markdown.

That said, just like Graphviz, its weak points is "messy" diagrams. But it
supports subgraphs, which can help making them cleaner.

[1] [https://github.com/knsv/mermaid](https://github.com/knsv/mermaid)

------
leoc
I tried it with

    
    
        +-----+-----+  +-----+-----+
        |     |     |  |     |    /|
        |     |     |  |     |   / |
        |  *  |  *--+--+> *  |  /  |
        |  |  |     |  |  |  | /   |
        |  |  |     |  |  |  |/    |
        +--+--+-----+  +--+--+-----+
           |              |
           |              |
           v              v
    
          foo            bar
    

Close, just needs a little work. Also, is there any way to get a permalink to
some specific diagram?

------
mnw21cam
A non-shaky mode would be great too.

------
willvarfar
The 'drawn' -style output is cute. Would be nice if there were dot renderers
that did 'artistic' renderings of diagrams.

~~~
vidarh
Dot has a SVG output mode that's reasonably easy to tweak/manipulate. I did an
XSL file that adds gradients and drop-shadows to the Dot output back in the
day [1] and there are a number of annoying corner cases to deal with, but it's
not too horrible; would've been easier in something other than XSL though.

[1] [https://github.com/vidarh/diagram-
tools](https://github.com/vidarh/diagram-tools)

~~~
willvarfar
Very nice! I've used little .ps icon files before, and been generally unhappy
with the whole thing.

At its heart, graphviz is great. But the tools so need a nice little
modernizing.

At the basic level, I found myself being very repetitive because its not
possible for graphviz nodes to inherit attributes from others etc. No CSS kind
of hierarchy.

------
Aardwolf
That is pretty awesome!

I only found two bugs:

1) if you type just something small, like "asdf", it doesn't render. It seems
to require you to start with a long horizontal line to make it properly
calculate the width.

2) this one is understandable, but, if you want to write code that decrements
something, e.g. x--, it renders the -- as horizontal line instead.

------
dakull
Is it just me or the ASCII diagrom looks way better than the generated faux-
comic-PNG?

------
tenfingers
There's also aafigure:
[https://pythonhosted.org/aafigure/](https://pythonhosted.org/aafigure/)

------
diegoloop
It would be great if there is a some kind of tool with predefined objects like
the square, table, start and so on. So you can easily added to your text

------
TazeTSchnitzel
Doesn't work for me. I click the button and I get a blank PNG.

Edit: Oh, you have to edit the field for it to actually render it, okay. That
wasn't obvious.

------
crimsonalucard
It's like turning a painting back into a sketch, or maybe not. I'm confused...
which comes first? ascii or sketch?

------
nashashmi
It should have support for emoticons.

~~~
cmstoken
Agreed.

------
tsukikage
Neat. Could really do with supporting diagonal lines / \

~~~
dpw
Yeah. This bit me on the first ascii diagram of mine I tried it on. But other
than that, very neat.

