ASCIIToSVG: Convert ASCII Diagrams to Beautiful SVGs | Hacker News Reader

ASCIIToSVG: Convert ASCII Diagrams to Beautiful SVGs

github.com

118 pointsingve22 comments

Really important tip for anyone that wants to show off something that has a visual output: show the output!

According to [0], the illustrations in "ØMQ - The Guide" [1] are made using asciitosvg. See, for example, the illustration following the "Divide and Conquer" heading:

http://zguide.zeromq.org/page:all#Divide-and-Conquer

[0] https://9vx.org/post/simplistic-diagrams-with-ascii-art/

[1] http://zguide.zeromq.org/page:all

This is included on the GitHub page:

https://github.com/dhobsd/asciitosvg/blob/master/logo.svg

but not linked into the README for some reason.

This looks a lot nicer than what is shown on the 0MQ page, or more modern at least.

Sometimes the product have not been polished, or it's a concept, so you need to sell the product before even showing it. Once the customer has made his/her mind they are unlikely to change it. And then you work with the customer to improve the product to meet their expectations. Meanwhile if you would have shown the product/prototype without any selling they would have made up their mind and never come back or given any feedback. I know you are a busy person, and so am I - I just want to see the damn output, I don't have time to run it and see for myself even if it just takes 10 minutes. But if I'm not willing to do that, then it's very unlikely I'll invest in it anyway, even if it's very good.

>Sometimes the product have not been polished, or it's a concept, so you need to sell the product before even showing it.

Then, at minimum, you still need to make a mockup of the result

This is also neat: https://casual-effects.com/markdeep/

Good job! I totally agree with the author on this:

> So I thought, "What if I could combine all these things and start writing markdown documents for my technical designs -- complete with ASCII art diagrams -- that I could then prettify for presentation purposes?"

If it's intended to be embedded in Markdown documents and published as web sites, it could be a web component.

I made an experimental one [0] and here's a demo [1].

I'm too lazy to follow through so hoping someone to make a full-fledged web component for it.

[0] https://www.webcomponents.org/element/ichiban/ascii-diagram [1] https://www.webcomponents.org/element/ichiban/ascii-diagram/...

That's pretty cool. This demo is convincing me to look at using them in my own projects

> Aren't there already things that do this?

> Well, yes. There is a project called ditaa that has this functionality. Sort of. But it's written in Java [...]

> So I reimplemented it in PHP. [...]

Who wants to do the NodeJS, Python, Go, Rust and Haskell reimplementations?

> Who wants to do the NodeJS, Python, Go, Rust and Haskell reimplementations?

I already requested as issue[0] Python port. In comments to this issue some user give me link to `aafigure`[1,2] project, that available as plugin[3] for AsciiDoc too.

[0] https://github.com/dhobsd/asciitosvg/issues/10

[1] https://launchpad.net/aafigure

[2] http://pythonhosted.org/aafigure

[3] https://github.com/hwmaier/asciidoc-aafigure-filter

Kinda related, I want an app that takes a picture of a hand drawn diagram and converts that to SVG (or whatever format I could later edit digitally). That would be a great way to bootstrap a large diagram, as it seems all diagram editors lose to pen & paper.

ImageTracer is a simple raster image tracer and vectorizer, 100% free, Public Domain.

Available in JavaScript (works both in the browser and with Node.js), "desktop" Java and "Android" Java:

https://github.com/jankovicsandras/imagetracerjs

https://github.com/jankovicsandras/imagetracerjava

https://github.com/jankovicsandras/imagetracerandroid

Not exactly what you described, but I'm a big fan of Grafio for iPad as a diagram tool, because 'sketching' is the primary input. You can't import something from paper, but if you've got an iPad around, you can draw on it like paper, and it'll give you the neater & better aligned counterparts of the things as you draw them.

Much better than pulling shapes out of a toolbox. Or typing.

Something like the Live Trace tool in Illustrator but for simple shapes? Would be really interesting to try to build that.

Not sure what that is, but probably not -- it should be able to detect simple geometrical shapes (and label them), lines/arrows between shapes, and ofcourse text. Perhaps I'll try to build that :)

If you want to look at research papers for inspiration, the term to look for seems to be "sketch recognition". E.g. this paper for UML diagrams: https://www.aaai.org/Papers/Symposia/Spring/2002/SS-02-08/SS...

link is broken but google cache works, thanks a lot!

Nice!

Tomorrow I'll try this with JavE: http://jave.de/

But what's the point ? The ASCII version will always be more beautiful !

An existing solution exists but it's written in Java, so he writes one in PHP... Oook.

Reply on news.ycombinator.com