9 ms·
Show HN: Ascii to SVG
- mungoman2 10y agoLooks good. I hope it's compatible with the emacs Artist package. https://www.emacswiki.org/emacs/ArtistMode https://www.emacswiki.org/emacs/ArtistMode
- ivanceras 10y agoHaven'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.
- dangom 10y agoThis 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-ditaa.html http://orgmode.org/worg/org-contrib/babel/languages/ob-doc-d...
- JumboCopter 10y agoOr asciidiagram ( https://github.com/Twinside/asciidiagram https://github.com/Twinside/asciidiagram ), clearly inspired by ditaa
- milen 10y agoShameless 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-peek/ https://blog.helftone.com/monodraw-snippets-update-sneak-pee... [3] https://blog.helftone.com/monodraw-snippets-update-released/ https://blog.helftone.com/monodraw-snippets-update-released/
- omegote 10y agoWow, 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/
- omegote 10y agoWow, 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/
- zokier 10y agoIn the "Safety-Control" chart, C++ is turned into C. That seems like fairly major problem
- killercup 10y agoCool! 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.
- amelius 10y agoWill something like this become part of Markdown?
- ivanceras 10y agoIt would be nice. Someday, it will come.
- nerdponx 10y agoPlease, 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.
- dahart 10y agoHow about markdeep? https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/
- Rexxar 10y agoIt 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
- ivanceras 10y agobecause 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.
- Rexxar 10y agoHow 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.
- artursapek 10y agoI noticed this too. I guess not everyone sees this kind of stuff? http://i.imgur.com/wfY6e5Z.png http://i.imgur.com/wfY6e5Z.png
- mintplant 10y agoI definitely don't see that one: imgur says "Page not found".
- transfire 10y agoShame those old-school graphics characters aren't easily typed (the ones DOS used or even older the ones Commodores supported).
- jasonm23 10y agoI built a thing in Emacs to do that https://github.com/ocodo/.emacs.d/blob/master/plugins/ibm-box-drawing-hydra.el https://github.com/ocodo/.emacs.d/blob/master/plugins/ibm-bo...
- deleted 10y ago[deleted]
- partycoder 10y agoASCII to dot (graphviz) would be interesting.
- pacomerh 10y agoYes, 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
- zimbatm 10y ago1. Use http://asciiflow.com/ http://asciiflow.com/ to generate diagram 2. Use Ascii to SVG
- xixixao 10y agoSmall challenge: Add overtype for OS X users. Also make the divider draggable. Nice work!
- userbinator 10y agoWhat environment cannot render ASCII text but can render SVG? I think converting in the other direction could be a lot more useful.
- wlievens 10y agoActually 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.
- kazinator 10y agoThis 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 10y agoFor 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 10y agoYikes, 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 10y agoReminds me of ditaa which is also pretty awesome. I even use it in an (internal) production tooo to generate a manual.
- sigvef 10y agoIn a perfect world, everything is generated from ASCII diagram sources: https://github.com/sigvef/sigvehtml https://github.com/sigvef/sigvehtml .
- iverjo 10y agoWow man, sigvehtml is actually used in production! Source: https://github.com/sigvef/arktis/blob/master/index.sigvehtml https://github.com/sigvef/arktis/blob/master/index.sigvehtml Rendered website: http://arkt.is/ http://arkt.is/
- baldfat 10y agoWould make scraping so much easier!
- TazeTSchnitzel 10y agoOh, 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/e2cfa586f43aacbb374b700cacf788471299dd2c/sigvehtml.py#L112-L113 https://github.com/sigvef/sigvehtml/blob/e2cfa586f43aacbb374...) Very xkcd 221.
- iverjo 10y agoI 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 10y agoWow, that works surprisingly well. I drew a terrible cat face, and it managed to get it dead on.
- joss82 10y agoSource: http://xkcd.com/221/ http://xkcd.com/221/
- edw519 10y agoWW 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 10y agoWhy not?
- bholdr 10y agoGreat! Perfect complement for http://asciiflow.com http://asciiflow.com
- foxhop 10y agoI 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.
- captn3m0 10y agoI 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.
- j_m_b 10y agoIt's Foo Bar Baz Qux... not Moo. =)
- EJTH 10y agoThis is actually really awesome. Good job!
- Animats 10y agoYears 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.
- black_knight 10y agoI 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.
- l_zzie 10y agoEmacs has this: org mode and Dita.
- sprobertson 10y agoIsn't SVG already ASCII to SVG?
- jasonm23 10y agorim-shot
- deleted 10y ago[deleted]
- nickodell 10y agoTwo corner cases: +----+ |test| +----+ +------+ | test +--> +------+
- sehugg 10y agoFunny, I just started using this: https://github.com/dhobsd/asciitosvg https://github.com/dhobsd/asciitosvg
- hayd 10y agoThis would be great as a latex macro (or however it might work), having diagrams inline in the source would be amazing.
- acz 10y agoReminds me Markdeep https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/
- thomasweiser 10y agoIt's built with Elm (http://elm-lang.org/ http://elm-lang.org/) Source code: https://github.com/ivanceras/elm-examples/tree/master/elm-bot-lines https://github.com/ivanceras/elm-examples/tree/master/elm-bo...