
Show HN: ShakyDraw – Hand-drawn block diagrams from plain text - sankha93
http://shakydraw.com/
======
milen
If you're on macOS, definitely check out Monodraw [1] as a quick and easy way
to create such diagrams (then copy + paste into ShakyDraw). Just remember to
set your document alphabet to ASCII and you're good to go (from the
inspector).

Full disclosure: I'm the developer of Monodraw. If you have any questions,
happy to answer here.

[1] [https://monodraw.helftone.com](https://monodraw.helftone.com)

~~~
mr_ali3n
It's pretty lame to promote your product on someone else's thread. Just
saying.

~~~
madmax108
It's called marketing a relevant product to a relevant crowd. Just saying.

------
zzzeek
I want the opposite. Draw a block diagram on paper, scan it, and get a super
swank omnigraffle-style diagram from it (or a top-notch ASCII art diagram).

~~~
teleclimber
I use the DrawExpress app for exactly that. It's brilliant.

[http://www.drawexpress.com/](http://www.drawexpress.com/)

~~~
jonahx
Fantastic idea. I'd love a web-based version I could use on the laptop.

------
dan-compton
Great! The easy problem is solved. Now let's do the reverse so that I can
hand-draw ditaa diagrams.

~~~
r00fus
That's exactly what I was going to say - the "hand drawn" diagram on the right
is better looking, but the left hand is far more accessible and arguably have
more utility.

That said, this is a really cool demo.

------
sigvef
In a perfect world, everything is generated from ASCII diagram sources:
[https://github.com/sigvef/sigvehtml](https://github.com/sigvef/sigvehtml) .

------
jmcphers
If you like this, try SvgBobRus[0], which also converts plain-text diagrams
into graphics (and has a larger vocabulary). There's also Spongedown[1], which
makes it possible to embed these diagrams in your Markdown files and render
the whole thing to HTML + SVG.

[0]
[https://github.com/ivanceras/svgbobrus](https://github.com/ivanceras/svgbobrus)
[1]
[https://github.com/ivanceras/spongedown](https://github.com/ivanceras/spongedown)

------
King-Aaron
Well executed solution to a problem I don't understand as one that needs
solving?

------
storrgie
And where is stated mraleph codebase to go from ascii to an image? I'd like a
command line tool to convert locally, or this open sourced so I can host a
local version.

~~~
eddyg
You may be interested in this recent HN discussion on converting ASCII
drawings to SVG:
[https://news.ycombinator.com/item?id=14422777](https://news.ycombinator.com/item?id=14422777)

------
Animats
Aw. I wrote something last year to translate old documents with plain text
boxes and arrows to Unicode line drawing characters. This was a small part of
another project. It's here:

[https://github.com/John-
Nagle/pasv/blob/master/src/Util/picf...](https://github.com/John-
Nagle/pasv/blob/master/src/Util/picfix.py)

------
Gaelan
Chracters all appear as tofu on iOS safari.

~~~
saagarjha
That's because your browser is too narrow to display the text, so it's
wrapping.

------
sequence7
In Edge I'm getting the following error which means no diagram gets rendered:

    
    
        SCRIPT5007: Unable to get property 'ready' of undefined or null reference
        bundle.min.js (1,5413)

~~~
sankha93
Oops! Will take a look into it and fix this right away.

------
diimdeep
We need ShakyDraw + Asciiflow to be 1 instrument

------
mr_ali3n
Damn useful and easy to create flow diagrams.

~~~
problems
You might also check out Plant UML - they have a much simpler language to
type.

[http://plantuml.com/activity-diagram-legacy](http://plantuml.com/activity-
diagram-legacy)

------
grigy
Very useful and would be more useful in form of an API that could be used with
Markdown text.

------
johnnyg
I wish there was a feature to double click a phrase and auto draw the ASCII
box around it.

~~~
averagewall
If it had that, somebody would wish you could draw arrows, move and resize
boxes by dragging, etc. Then you've got a full blown ASCII drawing program.
They already exist as a few people have mentioned in this thread. So you can
use them for what they're good at and copy/paste their output into ShakeyDraw.

------
mclightning
hmm. isnt this like more difficult than actually drawing it?

~~~
OJFord
I thought that at first - but what if you want a digital copy; what's the
plainest, whitest thing you can find to draw on, and do you have a scanner?

Obviously a lot of the time if you're going to the deliberate trouble of
creating a digital image, you'd probably prefer it didn't look hand drawn...
but I can imagine seeing it in repo readmes; that sort of thing. Actually
that's quite appealing - because you could source control the ASCII too.

------
lozzo
this page has to be bookmarked. well done

------
adictator
[http://www.asciidraw.com/#Draw](http://www.asciidraw.com/#Draw)

^This is what I use to generate the boxes and other useful shapes & then put
that into shakydraw.

~~~
webwanderings
How are you copy/pasting?

Edit: never mind. Got it. Brilliant.

