Show HN: Ascii to SVG

In a perfect world, everything is generated from ASCII diagram sources: <a href="https:&#x2F;&#x2F;github.com&#x2F;sigvef&#x2F;sigvehtml" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;sigvef&#x2F;sigvehtml</a> .

It looks nice but the SVG generated seems <i>incredibly</i> big. Every ascii characters seems to be replaced by one svg element.<p>(You can have a hint at this behaviour because some pixel are &quot;more black&quot; when an area is covered by two SVG elements)<p>edit: killercup as made a similar comment with answer from the author, <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=12621863" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=12621863</a>

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

Years ago I had a program that turned ASCII diagrams like that into line drawing characters.<p><pre><code> ┏━━━━━━━━━━━┓ ┏━━━━━━━┓ ┃ Like this ┣━━┫ Box ┃ ┗━━━━━━━━━━━┛ ┗━━━━━━━┛ </code></pre> It&#x27;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.<p>The line drawing characters in Unicode (and originally on the DEC VT100) aren&#x27;t expressive enough. They lack arrows and round corners. With SVG, you can do more.<p>There are a lot of people who just can&#x27;t use a draw program. Not sure why. I use Inkscape for this sort of thing, or sometimes LibreOffice Draw.

Looks good. I hope it&#x27;s compatible with the emacs Artist package. <a href="https:&#x2F;&#x2F;www.emacswiki.org&#x2F;emacs&#x2F;ArtistMode" rel="nofollow">https:&#x2F;&#x2F;www.emacswiki.org&#x2F;emacs&#x2F;ArtistMode</a>

I was currently using <a href="http:&#x2F;&#x2F;shaky.github.bushong.net&#x2F;" rel="nofollow">http:&#x2F;&#x2F;shaky.github.bushong.net&#x2F;</a> for the same purpose. Except, this just did canvas, instead of SVG.

Wow, it&#x27;s great! It&#x27;d be cool to have some kind of export option, I thought right-clicking it would make it but it doesn&#x27;t.<p>BTW, a related project of mine to create mind maps in the browser: <a href="https:&#x2F;&#x2F;josetomastocino.github.io&#x2F;mindmapit&#x2F;" rel="nofollow">https:&#x2F;&#x2F;josetomastocino.github.io&#x2F;mindmapit&#x2F;</a>

Great! Perfect complement for <a href="http:&#x2F;&#x2F;asciiflow.com" rel="nofollow">http:&#x2F;&#x2F;asciiflow.com</a>

Cool!<p>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.

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

1. Use <a href="http:&#x2F;&#x2F;asciiflow.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;asciiflow.com&#x2F;</a> to generate diagram<p>2. Use Ascii to SVG

I made an ascii diagram a long while back for my uri parser (<a href="https:&#x2F;&#x2F;bitbucket.org&#x2F;russellballestrini&#x2F;miniuri&#x2F;src" rel="nofollow">https:&#x2F;&#x2F;bitbucket.org&#x2F;russellballestrini&#x2F;miniuri&#x2F;src</a>)<p>The SVG version looks amazing! Great work!<p>Is there any way to easily &quot;download&quot; the result or do I just copy paste the code into a file?<p>I was able to use chrome &quot;developer mode&quot; to inspect the rendered svg tag and copy the element into a file named miniuri.svg<p>Inkscape is happy to load it up! I think providing a &quot;download&quot; button would be useful though.

Will something like this become part of Markdown?

It&#x27;s built with Elm (<a href="http:&#x2F;&#x2F;elm-lang.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;elm-lang.org&#x2F;</a>)<p>Source code: <a href="https:&#x2F;&#x2F;github.com&#x2F;ivanceras&#x2F;elm-examples&#x2F;tree&#x2F;master&#x2F;elm-bot-lines" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ivanceras&#x2F;elm-examples&#x2F;tree&#x2F;master&#x2F;elm-bo...</a>

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

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

Isn&#x27;t SVG already ASCII to SVG?

Funny, I just started using this: <a href="https:&#x2F;&#x2F;github.com&#x2F;dhobsd&#x2F;asciitosvg" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dhobsd&#x2F;asciitosvg</a>

Reminds me Markdeep <a href="https:&#x2F;&#x2F;casual-effects.com&#x2F;markdeep&#x2F;" rel="nofollow">https:&#x2F;&#x2F;casual-effects.com&#x2F;markdeep&#x2F;</a>

ASCII to dot (graphviz) would be interesting.

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:<p><pre><code> +----+ |test| +----+ +------+ | test +--&gt; +------+</code></pre>

Small challenge: Add overtype for OS X users.<p>Also make the divider draggable.<p>Nice work!

It&#x27;s Foo Bar Baz Qux... not Moo. =)

Shameless plug: If you&#x27;re on a Mac and want an app to create those ASCII diagrams, check out Monodraw [1]. I&#x27;ve just released an update [2, 3] which allows you to define to define snippets &#x2F; templates which you can easily re-use: seems perfect to define snippets for this website.<p>[1] <a href="https:&#x2F;&#x2F;monodraw.helftone.com" rel="nofollow">https:&#x2F;&#x2F;monodraw.helftone.com</a><p>[2] <a href="https:&#x2F;&#x2F;blog.helftone.com&#x2F;monodraw-snippets-update-sneak-peek&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blog.helftone.com&#x2F;monodraw-snippets-update-sneak-pee...</a><p>[3] <a href="https:&#x2F;&#x2F;blog.helftone.com&#x2F;monodraw-snippets-update-released&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blog.helftone.com&#x2F;monodraw-snippets-update-released&#x2F;</a>

This is actually really awesome. Good job!

<p><pre><code> 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 ??</code></pre>