In a perfect world, everything is generated from ASCII diagram sources: <a href="https://github.com/sigvef/sigvehtml" rel="nofollow">https://github.com/sigvef/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 "more black" 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://news.ycombinator.com/item?id=12621863" rel="nofollow">https://news.ycombinator.com/item?id=12621863</a>
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'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'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'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's compatible with the emacs Artist package. <a href="https://www.emacswiki.org/emacs/ArtistMode" rel="nofollow">https://www.emacswiki.org/emacs/ArtistMode</a>
I was currently using <a href="http://shaky.github.bushong.net/" rel="nofollow">http://shaky.github.bushong.net/</a> 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.<p>BTW, a related project of mine to create mind maps in the browser: <a href="https://josetomastocino.github.io/mindmapit/" rel="nofollow">https://josetomastocino.github.io/mindmapit/</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.
1. Use <a href="http://asciiflow.com/" rel="nofollow">http://asciiflow.com/</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://bitbucket.org/russellballestrini/miniuri/src" rel="nofollow">https://bitbucket.org/russellballestrini/miniuri/src</a>)<p>The SVG version looks amazing! Great work!<p>Is there any way to easily "download" the result or do I just copy paste the code into a file?<p>I was able to use chrome "developer mode" 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 "download" button would be useful though.
It's built with Elm (<a href="http://elm-lang.org/" rel="nofollow">http://elm-lang.org/</a>)<p>Source code: <a href="https://github.com/ivanceras/elm-examples/tree/master/elm-bot-lines" rel="nofollow">https://github.com/ivanceras/elm-examples/tree/master/elm-bo...</a>
Funny, I just started using this: <a href="https://github.com/dhobsd/asciitosvg" rel="nofollow">https://github.com/dhobsd/asciitosvg</a>
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.<p>[1] <a href="https://monodraw.helftone.com" rel="nofollow">https://monodraw.helftone.com</a><p>[2] <a href="https://blog.helftone.com/monodraw-snippets-update-sneak-peek/" rel="nofollow">https://blog.helftone.com/monodraw-snippets-update-sneak-pee...</a><p>[3] <a href="https://blog.helftone.com/monodraw-snippets-update-released/" rel="nofollow">https://blog.helftone.com/monodraw-snippets-update-released/</a>