ASCIIToSVG: Convert ASCII Diagrams to Beautiful SVGs

https://github.com/dhobsd/asciitosvg#asciitosvg

by ingve • 8 years ago

118 22 8 years ago

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

ingve• 8 years ago

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

z3t4• 8 years ago

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.

koboll• 8 years ago

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

yardshop• 8 years ago

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.

blitmap• 8 years ago

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

yonilevy3• 8 years ago

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.

megalodon• 8 years ago

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

yonilevy3• 8 years ago

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

systoll• 8 years ago

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.

jankovicsandras• 8 years ago

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

remcob• 8 years ago

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?

app4soft• 8 years ago

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

yichiban• 8 years ago

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

gitgud• 8 years ago

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

cryptonector2• 8 years ago

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

sitkack• 8 years ago

cryptonector2• 8 years ago

Nice!

enriquto• 8 years ago

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

cup-of-tea• 8 years ago

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

ASCIIToSVG: Convert ASCII Diagrams to Beautiful SVGs

Related Stories