Show HN: ShakyDraw – Hand-drawn block diagrams from plain text | Hacker News Reader

Show HN: ShakyDraw – Hand-drawn block diagrams from plain text

shakydraw.com

140 pointssankha9350 comments

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

This is really great! Is there a way to paste/import a previously exported graph and preserve edit capabilities?

That's a very good question that comes up quite often. Unfortunately, that's not currently supported :(

In fact, it's technically impossible to recover all the information that was originally present in the Monodraw document because the conversion to text is inherently lossy. Now, you can probably try to use some heuristics to recover as much information as possible (e.g., detect boxes, arrows). That would certainly work in many simple cases where there's no overlapping shapes.

Having said that, I've got other, higher priority updates planned in the pipeline before I can even consider whether to tackle this problem.

you could maybe embed the original ascii, or a meta representation of it in the generated image?

Should I use moondraw with a wacom tablet, or just the trackpad?

I would say trackpad, it's less drawing - more diagrams.

Monodraw is awesome. Some folks in my team use it to create page layout prototypes (to force minimalism)

Windows really needs a Monodraw.

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

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

That looks great! What are the export formats? This would be a fantastic way to create TikZ diagrams.

It supports text (ASCII and Unicode modes), PNG and SVG.

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

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

http://www.drawexpress.com/

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

This looks great. I can't say the same about their website which feels like a mess and really doesn't sell what otherwise seems like a very useful app.

Just bought this now, after watching the video and trying out the "lite" version on Android. It really is brilliant.

wow that was actually really cool just watching the demo; if I weren't currently in debt to the app store I'd totally try it

Came here wanting this, found it in the comments. OP, it's cool and all - but I'm never going to manually type out box diagrams. I don't write e-zines or NFO's for warez releases.

Can combo it with http://asciiflow.com/

While going the other way is not possible directly, but you can use something like asciiflow.com to make a ASCII diagram easily and paste it in ShakyDraw.

This is what I came here to say. It's easy to draw freehand. It's painfully slow to draw with ASCII.

You might wanna take a look at PlantUML or similar

http://plantuml.com

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

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.

I was just thinking that. It should go both ways :D

MyScript offers an API that does this. You need to feed it all the motions/sequence of points that make up the shape (known as "online OCR"), it won't work with a static document.

Demo: https://webdemo.myscript.com/views/shape.html

There are tools available to draw ASCII diagrams easily, like asciiflow.com or asciidraw.com. Their output can be directly pasted into ShakyDraw.

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

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 [1] https://github.com/ivanceras/spongedown

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

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.

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

This looks like it uses a very similar algorithm to https://github.com/dbushong/shaky , which is a port of @mraleph's 2012 talk (@mraleph is cited in this site's about page)

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

Chracters all appear as tofu on iOS safari.

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

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)

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

We need ShakyDraw + Asciiflow to be 1 instrument

Damn useful and easy to create flow diagrams.

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

http://plantuml.com/activity-diagram-legacy

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

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

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.

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

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.

this page has to be bookmarked. well done

http://www.asciidraw.com/#Draw

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

How are you copy/pasting?

Edit: never mind. Got it. Brilliant.

Reply on news.ycombinator.com