
Show HN: Ascii to SVG - ivanceras
https://ivanceras.github.io/elm-examples/elm-bot-lines/
======
sigvef
In a perfect world, everything is generated from ASCII diagram sources:
[https://github.com/sigvef/sigvehtml](https://github.com/sigvef/sigvehtml) .

~~~
TazeTSchnitzel
Oh, this is amazing.

I wondered how it figured out to use the elephant JPEG from the ASCII art.
Well:

    
    
      def educated_guess_at_image():
          return 'http://pensivetoaster.com/wp-content/uploads/2013/05/elephant-banner.jpg'
    

([https://github.com/sigvef/sigvehtml/blob/e2cfa586f43aacbb374...](https://github.com/sigvef/sigvehtml/blob/e2cfa586f43aacbb374b700cacf788471299dd2c/sigvehtml.py#L112-L113))

Very xkcd 221.

~~~
iverjo
I guess one could train a Convolutional Neural Network to convert the ASCII
art to an actual image. Something like this, but for ASCII:
[http://sketchy.eye.gatech.edu/](http://sketchy.eye.gatech.edu/)

~~~
cmiller1
Wow, that works surprisingly well. I drew a terrible cat face, and it managed
to get it dead on.

------
Rexxar
It looks nice but the SVG generated seems _incredibly_ big. Every ascii
characters seems to be replaced by one svg element.

(You can have a hint at this behaviour because some pixel are "more black"
when an area is covered by two SVG elements)

edit: killercup as made a similar comment with answer from the author,
[https://news.ycombinator.com/item?id=12621863](https://news.ycombinator.com/item?id=12621863)

~~~
skrebbel
Is that a practical problem? Sounds like it would compress very well.

~~~
vertex-four
Network isn't the only issue - speed of processing, and memory usage, are both
things people should care about a lot more than they do.

This is equivalent to wrapping every character of your website's text in a
div, precisely positioning it - at a large enough scale, or with a dynamic
page, it's just eventually going to cause performance issues or even lock-ups.

------
zokier
In the "Safety-Control" chart, C++ is turned into C. That seems like fairly
major problem

~~~
Iv
Or, alternatively, a pretty bold statement.

------
Animats
Years ago I had a program that turned ASCII diagrams like that into line
drawing characters.

    
    
        ┏━━━━━━━━━━━┓  ┏━━━━━━━┓
        ┃ Like this ┣━━┫  Box  ┃
        ┗━━━━━━━━━━━┛  ┗━━━━━━━┛
    

It's an easy transformation. You only have to look at 3 lines at a time, and
then only at 3x3 blocks of characters. This would be a fun transformation to
put in a text editor.

The line drawing characters in Unicode (and originally on the DEC VT100)
aren't expressive enough. They lack arrows and round corners. With SVG, you
can do more.

There are a lot of people who just can't use a draw program. Not sure why. I
use Inkscape for this sort of thing, or sometimes LibreOffice Draw.

~~~
l_zzie
Emacs has this: org mode and Dita.

~~~
endgame
Ditaa link: [http://ditaa.sourceforge.net/](http://ditaa.sourceforge.net/)

------
mungoman2
Looks good. I hope it's compatible with the emacs Artist package.
[https://www.emacswiki.org/emacs/ArtistMode](https://www.emacswiki.org/emacs/ArtistMode)

~~~
dangom
This reminds me of Ditaa[1]. Org-mode offers support for it, so you can
basically draw diagrams with Artist Mode and have org-babel convert them for
you[2].

[1] [http://ditaa.sourceforge.net/](http://ditaa.sourceforge.net/) [2]
[http://orgmode.org/worg/org-contrib/babel/languages/ob-
doc-d...](http://orgmode.org/worg/org-contrib/babel/languages/ob-doc-
ditaa.html)

~~~
JumboCopter
Or asciidiagram (
[https://github.com/Twinside/asciidiagram](https://github.com/Twinside/asciidiagram)
), clearly inspired by ditaa

------
captn3m0
I was currently using
[http://shaky.github.bushong.net/](http://shaky.github.bushong.net/) for the
same purpose. Except, this just did canvas, instead of SVG.

------
omegote
Wow, it's great! It'd be cool to have some kind of export option, I thought
right-clicking it would make it but it doesn't.

BTW, a related project of mine to create mind maps in the browser:
[https://josetomastocino.github.io/mindmapit/](https://josetomastocino.github.io/mindmapit/)

------
bholdr
Great! Perfect complement for [http://asciiflow.com](http://asciiflow.com)

------
killercup
Cool!

It seems to not recognize shapes and instead renders them using a bunch of
lines, though (just like in the ASCII version). This is visible, at least in
Safari 10.

~~~
ivanceras
Yep, I want to add an optimizer to reduce the svg elements into paths and into
simplest form possible, when I have more time.

~~~
akie
Would this [https://github.com/svg/svgo](https://github.com/svg/svgo) help?

~~~
ivanceras
Have tried it, but it seems it can't reduce seperate lines into paths. I'll
have to reduce the separate lines first in my first pass.

~~~
nerdponx
Would you be able to repurpose algorithms from ImageMagick for this?

------
transfire
Shame those old-school graphics characters aren't easily typed (the ones DOS
used or even older the ones Commodores supported).

~~~
jasonm23
I built a thing in Emacs to do that

[https://github.com/ocodo/.emacs.d/blob/master/plugins/ibm-
bo...](https://github.com/ocodo/.emacs.d/blob/master/plugins/ibm-box-drawing-
hydra.el)

------
zimbatm
1\. Use [http://asciiflow.com/](http://asciiflow.com/) to generate diagram

2\. Use Ascii to SVG

------
foxhop
I made an ascii diagram a long while back for my uri parser
([https://bitbucket.org/russellballestrini/miniuri/src](https://bitbucket.org/russellballestrini/miniuri/src))

The SVG version looks amazing! Great work!

Is there any way to easily "download" the result or do I just copy paste the
code into a file?

I was able to use chrome "developer mode" to inspect the rendered svg tag and
copy the element into a file named miniuri.svg

Inkscape is happy to load it up! I think providing a "download" button would
be useful though.

~~~
ivanceras
This is a work in progress, the SVG generated is bloated, I'll plugged in an
optimizer later on when I got enough time.

~~~
foxhop
I'm not looking for it to be optimized just easier to download and save the
result. Great work!

------
amelius
Will something like this become part of Markdown?

~~~
nerdponx
Please, no. Maybe as a "plug-in" like MathJax, or a drop-in replacement for
syntax highlighting in code blocks fenced off by "```svg ```". But please
don't bloat the Markdown core.

------
thomasweiser
It's built with Elm ([http://elm-lang.org/](http://elm-lang.org/))

Source code: [https://github.com/ivanceras/elm-examples/tree/master/elm-
bo...](https://github.com/ivanceras/elm-examples/tree/master/elm-bot-lines)

------
userbinator
What environment cannot render ASCII text but can render SVG? I think
converting in the other direction could be a lot more useful.

~~~
kazinator
This is useful in a plain-text based document system, for producing nicer
rendered output. Box diagrams typed up in a man page can be rendered more
nicely in a HTML version.

It could also serve as part of the markup input language in a system like
asciidoc. The benefit is that the source resembles the output.

In this man page, I have lots of occurrences of

    
    
      <-->
    

[http://www.nongnu.org/txr/txr-manpage.html](http://www.nongnu.org/txr/txr-
manpage.html)

in verbatim code which could be turned into a nicer arrow.

Also, textual diagrams occur:

[http://www.nongnu.org/txr/txr-
manpage.html#N-03E5CED9](http://www.nongnu.org/txr/txr-
manpage.html#N-03E5CED9)

[http://www.nongnu.org/txr/txr-
manpage.html#N-027AA48B](http://www.nongnu.org/txr/txr-
manpage.html#N-027AA48B)

~~~
myfonj
For displaying "inline glyphs" made of sequence of consecutive characters
there is option to use font with corresponding ligatures baked in, such as
Fira Code [0].

[0] [https://github.com/tonsky/FiraCode](https://github.com/tonsky/FiraCode)

~~~
kazinator
Yikes, LICENSE! Full of how it may or may not be sold phrases requiring a
lawyer to understand to answer the question, "can I stick this font into a PDF
that could end up in some software distro that could end up being for sale".
The LICENSE appears to involve users into a contract; i.e. is not a pure
license grant. 2-Clause BSD or fsck it.

In a HTML rendering, references to exotic fonts are pretty much a nonstarter,
unless you include them in the page.

------
wlievens
Reminds me of ditaa which is also pretty awesome. I even use it in an
(internal) production tooo to generate a manual.

------
sprobertson
Isn't SVG already ASCII to SVG?

~~~
jasonm23
rim-shot

------
sehugg
Funny, I just started using this:
[https://github.com/dhobsd/asciitosvg](https://github.com/dhobsd/asciitosvg)

------
acz
Reminds me Markdeep [https://casual-effects.com/markdeep/](https://casual-
effects.com/markdeep/)

------
partycoder
ASCII to dot (graphviz) would be interesting.

~~~
pacomerh
Yes, I thought this would be interesting too, check this out:
[http://blog.scottlogic.com/2015/11/18/d3-ascii.html](http://blog.scottlogic.com/2015/11/18/d3-ascii.html)

------
hayd
This would be great as a latex macro (or however it might work), having
diagrams inline in the source would be amazing.

------
nickodell
Two corner cases:

    
    
        +----+
        |test|
        +----+
        
        +------+
        | test +-->
        +------+

------
xixixao
Small challenge: Add overtype for OS X users.

Also make the divider draggable.

Nice work!

------
j_m_b
It's Foo Bar Baz Qux... not Moo. =)

------
milen
Shameless plug: If you're on a Mac and want an app to create those ASCII
diagrams, check out Monodraw [1]. I've just released an update [2, 3] which
allows you to define to define snippets / templates which you can easily re-
use: seems perfect to define snippets for this website.

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

[2] [https://blog.helftone.com/monodraw-snippets-update-sneak-
pee...](https://blog.helftone.com/monodraw-snippets-update-sneak-peek/)

[3] [https://blog.helftone.com/monodraw-snippets-update-
released/](https://blog.helftone.com/monodraw-snippets-update-released/)

~~~
seer
I just wanted to thank you for this incredibly useful piece of software - I've
used it even for creating diagrams on its own as it's very user friendly, and
the ability to "render to ascii" is just an added bonus :)

------
EJTH
This is actually really awesome. Good job!

------
edw519

      WW    WW    WW    HH     HH    YY      YY     ??
       WW   WW   WW     HH     HH     YY    YY    ??  ??
        WW  WW  WW      HHHHHHHHH      YY  YY        ??
         WW WW WW       HH     HH       YYYY       ??
          WWWWW         HH     HH        YY        ??
           WWW          HH     HH        YY        ??

~~~
iamarsen
Why not?

