Show HN: Ascii to SVG | Hacker News Reader

Show HN: Ascii to SVG

ivanceras.github.io

416 pointsivanceras76 comments

Open articleView on HN

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

Wow man, sigvehtml is actually used in production!

Source: https://github.com/sigvef/arktis/blob/master/index.sigvehtml

Rendered website: http://arkt.is/

Would make scraping so much easier!

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

Very xkcd 221.

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/

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

Source: http://xkcd.com/221/

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

   because some pixel are "more black" when an area is covered by two SVG elements

How can you possibly see that? This definitely needs a lot of more work on adding optimizer to reduce the elements into simplest form possible. Right now, this is just trying to put into screen what should it look like, it would be nice to have a more simplified SVG version up to primitive levels such as rect, circle, etc.

    How can you possibly see that?

Short answer : I'm writing a drawing software and I've become pixel sensitive.

Technical answer : you are creating 1 pixel wide horizontal/vertical line with integer coordinates. Sadly in SVG this mean you writing your line between two pixel lines. So you don't write 1 black pixel but two semi-transparent black pixels. On white background the result is two RGB(127,127,127) pixels.

When two line overlaps you write semi-transparent black pixel twice and you end with two RGB(191,191,191) pixels.

You can hide this behaviour by shifting everything by 0.5 or using a retina display.

I noticed this too. I guess not everyone sees this kind of stuff?

http://i.imgur.com/wfY6e5Z.png

I definitely don't see that one: imgur says "Page not found".

The link works for me. Are you sure you don't have some sort of browser add-on that messes with imgur URLs?

Yep, I'm sure. It seems to be working now for me as well.

A lot of us are on HiDPI Macs where it doesn't happen http://i.imgur.com/olgPVRa.png

> […] or using a retina display.

Any HiDPI display will work, not just Apple's. Shifting by 0.5 in both directions is a quick win though.

> using a retina display.

^^^ SO IMPORTANT. I returned to working with SVG seriously for a project last year, and was bitten by pixel-alignment rendering behavior along these lines. This was frustrating, as it was completely hidden during initial development by the fact that I was working on a retina-class display. On low-dpi, the rendering artifacts were quite noticeable. Compounding matters, the specifics varied by the SVG renderer (web browser) in use which also made it harder to identify the worst problem cases. Fortunately, it was noticed by an internal, design-sensitive user first!

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

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.

SVG images with lots of small individual objects don't perform very well (processing & rendering).

I dunno -- it was visually apparent to me immediately when I opened the page. I thought it was maybe a deliberate "dotted-line" effect at first.

line { shape-rendering: crispEdges; }

This gets rid of the "more black" problem, but you lose the antialiasing effect which makes shapes with curves look horrible. Could try and apply it to only straight lines I suppose?

Created a rust version https://github.com/ivanceras/svgbobrus

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

Yep, has a lot more to do :(

Or, alternatively, a pretty bold statement.

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.

I keep the Unicode box drawing characters in my XCompose configuration. For example the sequence 〈ComposeKey〉 〈#〉 〈-〉 〈-〉 produces ━ (The thin horizontal line). Not too difficult to type, even compared to the ascii approach. Also quite easy to remember — the # looks like a box, so all the box drawing sequences start on it.

Emacs has this: org mode and Dita.

Ditaa link: http://ditaa.sourceforge.net/

And aa2u

Looks good. I hope it's compatible with the emacs Artist package. https://www.emacswiki.org/emacs/ArtistMode

Haven't used emacs but base from the looks of it, it should render the text created in emacs-ArtistMode nicely. Try copy-pasting what you have in the text-editor, we'll see.

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/ [2] http://orgmode.org/worg/org-contrib/babel/languages/ob-doc-d...

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

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

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/

Great! Perfect complement for http://asciiflow.com

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.

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

Would this https://github.com/svg/svgo help?

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.

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

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

I built a thing in Emacs to do that

https://github.com/ocodo/.emacs.d/blob/master/plugins/ibm-bo...

1. Use http://asciiflow.com/ to generate diagram

2. Use Ascii to SVG

I made an ascii diagram a long while back for my uri parser (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.

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

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

Will something like this become part of Markdown?

It would be nice. Someday, it will come.

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.

How about markdeep? https://casual-effects.com/markdeep/

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

Source code: https://github.com/ivanceras/elm-examples/tree/master/elm-bo...

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

Actually I use a tool similar to this (ditaa) to generate drawings in an automatically generated reference manual frop ascii code diagrams in source code. There's definitely a good use for it.

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

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-027AA48B

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

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.

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

Isn't SVG already ASCII to SVG?

rim-shot

Funny, I just started using this: https://github.com/dhobsd/asciitosvg

Reminds me Markdeep https://casual-effects.com/markdeep/

ASCII to dot (graphviz) would be interesting.

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

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

Two corner cases:

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

Small challenge: Add overtype for OS X users.

Also make the divider draggable.

Nice work!

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

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

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

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

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

I have a license, but it seems unmaintained.

This is actually really awesome. Good job!

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

Why not?

Reply on news.ycombinator.com