For what it's worth, I keep a file in my home folder containing some box drawing characters. It's not super fast to draw by copy-paste but the result usually looks quite nice.
Vim has digraphs for all of these characters, which I like to use. e.g. you can get ┌ with <C-K>dr (d = down, r = right), and ┨ with <C-K>Vl (V = heavy vertical, l = left). To find the mappings, :digraphs shows the whole list, or copy this block of text and put the cursor over any of the characters in normal mode and type ga and it’ll echo things like “<┠> 9504, Hex 2520, Oct 22440, Digr Vr”.
(I use a Compose key for almost all character composition, with plenty of custom mappings in my ~/.XCompose, but box drawing specifically I have skipped and use Vim digraphs, and so drop into Vim any time I want to write any.)
For those on macOS/iOS, using custom text expansions [0] also helps to do this without having to leave the doc you’re editing. I’ve built up tons of these over the years for things like ⌘ (“commandkey”) → (“rightarrow”) (╯°□°)╯︵ ┻━┻ (“tableflip”) and of course, a party parrot wave for Slack (“parrotwave” → :parrotwave1::parrotwave2::parrotwave3::parrotwave4::parrotwave5::parrotwave6::parrotwave7:). They can sync over iCloud and you can export/import them with plists.
I now want to add table characters like these, just need to come up with a good naming convention…
Similar here, I use snippets for some of these things as well. As long as you're using a monospace font, I find it nice to take advantage of things like grid layouts in the extra column space for splitting up concepts into groups for example.
I usually copy from wikipedia but that's that's a good idea. In fact, since I have a "cols" command that just prints an ansi-colour table, I've just added "box" to do this.
Nice. Though it makes me think it would be nice to have this as a built in code editor minimap feature without the multi line ASCII code. The editor would parse special tags in comments and overlay the minimap with the tag text in big letters.
This is a neat tool, but unfortunately, text art like this generates is extremely unfriendly to folks that use screen readers. If you do use this for comment documentation, consider making sure that there is also a written description above/below it with equivalent descriptive content.
While being an almost daily user of MonoDraw, I utilize Valery Kocubinsky's Table Editor package for Sublime at least a dozen or more times every day. All my daily habit, scheduling, trackers, and labor is in some sort of table. Thank you, Valery!
It isn't maintained but 90% of the features work fine. The project was picked up and is current on Atom.
Grabbing boxes for commenting is within scope of Table Editor but again, Monodraw offers some great flexibility. If you're working with code that's getting printed in a newsletter, drop it in a Monodraw box (remove border) and you can add call-outs on either or both sides of the code and paste it all in the newsletter. Looks nifty, and keeps the aesthetic consistent.
Sublime Table Editor ... https://packagecontrol.io/packages/Table%20Editor
Atom Table Editor ...... https://atom.io/packages/table-editor
Vim .................... https://github.com/dhruvasagar/vim-table-mode
I'm going to second this one, and add that diagrams are a real weak point for accessibility in general, one which using textual drawings exacerbates.
PlantUML is readable by screen readers and contains the same information as the diagram it generates, which is the optimal balance between using visual diagrams as part of software development while not excluding the vision-impaired completely in so doing.
To be clear, I'm not scolding anyone for using ASCII diagrams, especially given that code remains stubbornly text-only. Just boosting awareness of PlantUML in terms of its accessibility advantages. I can mention meaningful diffs in version control as another advantage!
I've seen this a few times. The key limit is that once drawn the characters are set, you can't move the drawn objects around.
What I'd like is something like drawio for ASCII/Unicode. I've been thinking of writing my own for years, but that'll probably never happen so I'll just keep mentioning the idea when similar apps come up in the hope I inspire someone else!
It's a little tedius, but you can highlight sections and then drag the highlighted section around.
Also it would be nice to have some way of snapping boxes to a grid. Similar to creating new elements in figma. It was hard to tell when if all the boxes I made were aligned / same size.
A few years back I wrote a tool that would convert Ascii flow diagrams in source code comments to equivalent source code declarations that implemented the flow. The idea being that the comments didn't just describe the flow visually, but actually defined it.
Tools like this helped greatly with that. Plain old text files don't lend themselves well to such 2D visual descriptions.
It's so nice to see all this interest in ASCII art.
\o/ -huzzah
I still use Jave (http://www.jave.de/#description) occasionally, but it's beginning to show its age. It does have some nice features, though that asciiflow is missing: figlet font support and (gasp) circles!
Wow. This is one of those "I bet someone has already done that" tools that developers wish they had but not as much to go and search for it. Bookmarked and shared. Thanks ;)
In general I feel like formats like ascii and even markdown are not great for editing. Most useful data has some sort of structure that is mostly lost when using plaintext or even MD.
A simple example is markdown tables... sorting, inserting and removing columns, etc. is incredibly tedious and probably requires tools to draw, anyway.
In this line of thought, a tool like Graph::Easy sounds like a better way to come up with ascii boxes and arrows [1] (this particular tool can output other formats too).
As a plus, the underlying data can be reused for something other than docs (generating code, scaffolding directories and files, etc).
I love this and I'm going to use it for fancy comments in code and in the browser console. It'd be really cool if you could integrate something like http://www.figlet.org/ for inserting ASCII text art.
I wish I had known about this tool when I was building this little browser game https://replit.com/@aMoniker/Gush because all the levels & game objects are generated from multiline strings of ascii symbols, and it just took too long to do manually.
I was daydreaming about something like this the other night. This is even cooler than what I was picturing! My only complaint is the download arrow threw me off for a bit, I wanted to copy to clipboard but did not realize that was hidden behind the arrow. Switching that icon to a clipboard that pops the modal might add some clarity.
It's amazing that it is 2022, and not only can we not put any kind of media in source code comments, nobody even entertains the idea that it could be possible.
Programming tooling really is living in the dark ages sometimes.
IMO text still provides the best combination of flexibility, power, simplicity and accessibility.
A screen reader can’t describe a JPEG or animated GIF. You can’t diff images/animations as easily as text. You can’t automatically translate text in images. Images and their toolchains like imagemagick introduce attack vectors. They take up more disk space. You can’t change the font of text in images. Text in images is not greppable.
Do you need to change some text in that documentation image? Hope you have the vector-based original!
And FWIW, Xcode’s rendering of markdown files and markdown doc comments with media assets in playgrounds isn’t the best experience, IMO.
Cool idea. I recently wanted to draw a diagram of triangles in a code comment, but unfortunately this tool doesn't seem to let you draw lines which aren't axis-aligned, so it doesn't help for that.
Why don't we all use code editors that know how to render things like Graphviz and Markdown with lists, tables? Maybe in a side window rather than in the main display, but like, come-on...
Like, Visual Studio Code supports something like this:
In the save dialog,"Extended Ascii" should probably be called "Unicode" or "Utf-8" or something. Obviously, no standard named "ASCII" provides box drawing characters and arrows.
The Freeform tool is missing support for the brush consisting of spaces, which would make it useful as an eraser.
On a general note, I think it's time to call things "text" instead of "ascii".
Every time someone utters the word "ascii", they just mean text. Saying “I'm using ASCII” doesn't mean anything anymore, because nobody uses EBCDIC anymore – you are, no matter what, effectively using a superset of ASCII, by default UTF-8. The real question is which one.
w4rh4wk5|4 years ago
chrismorgan|4 years ago
(I use a Compose key for almost all character composition, with plenty of custom mappings in my ~/.XCompose, but box drawing specifically I have skipped and use Vim digraphs, and so drop into Vim any time I want to write any.)
stevewillows|4 years ago
[1] https://en.wikipedia.org/wiki/Box-drawing_character
sixstringtheory|4 years ago
I now want to add table characters like these, just need to come up with a good naming convention…
[0]: https://support.apple.com/en-gb/guide/mac-help/mh35735/12.0/...
wycy|4 years ago
themodelplumber|4 years ago
misnome|4 years ago
roosgit|4 years ago
There's even a Sublime Text plugin to generate this text.
seumars|4 years ago
sprucevoid|4 years ago
dbjorge|4 years ago
notRobot|4 years ago
jaster|4 years ago
See for example http://xahlee.info/emacs/emacs/emacs_ascii_diagram.html
jordigh|4 years ago
Oh, also, if you want your ASCII diagrams to render into pretty pictures, I found org-mode + ditaa to work quite nicely:
https://www.orgmode.org/worg/org-contrib/babel/languages/ob-...
ynac|4 years ago
It isn't maintained but 90% of the features work fine. The project was picked up and is current on Atom.
Grabbing boxes for commenting is within scope of Table Editor but again, Monodraw offers some great flexibility. If you're working with code that's getting printed in a newsletter, drop it in a Monodraw box (remove border) and you can add call-outs on either or both sides of the code and paste it all in the newsletter. Looks nifty, and keeps the aesthetic consistent.
marcellus23|4 years ago
IBCNU|4 years ago
stabbles|4 years ago
samwillis|4 years ago
Being built by @steveruizok very much worth a follow on Twitter:
https://mobile.twitter.com/steveruizok
andix|4 years ago
Still, great idea and great implementation :)
samatman|4 years ago
PlantUML is readable by screen readers and contains the same information as the diagram it generates, which is the optimal balance between using visual diagrams as part of software development while not excluding the vision-impaired completely in so doing.
To be clear, I'm not scolding anyone for using ASCII diagrams, especially given that code remains stubbornly text-only. Just boosting awareness of PlantUML in terms of its accessibility advantages. I can mention meaningful diffs in version control as another advantage!
dspillett|4 years ago
What I'd like is something like drawio for ASCII/Unicode. I've been thinking of writing my own for years, but that'll probably never happen so I'll just keep mentioning the idea when similar apps come up in the hope I inspire someone else!
junon|4 years ago
Now I just need to find some spare time...
taterbase|4 years ago
anonymous_they|4 years ago
Also it would be nice to have some way of snapping boxes to a grid. Similar to creating new elements in figma. It was hard to tell when if all the boxes I made were aligned / same size.
kitd|4 years ago
Tools like this helped greatly with that. Plain old text files don't lend themselves well to such 2D visual descriptions.
a2800276|4 years ago
\o/ -huzzah
I still use Jave (http://www.jave.de/#description) occasionally, but it's beginning to show its age. It does have some nice features, though that asciiflow is missing: figlet font support and (gasp) circles!
Some other tools worth mentioning here among aficionados are PIC ( https://en.wikipedia.org/wiki/PIC_(markup_language) ) and of course cowsay. Someone already mentioned plantuml.
celie56|4 years ago
jeppesen-io|4 years ago
verdverm|4 years ago
adrianomartins|4 years ago
kdmoyers|4 years ago
[1] https://github.com/lewish/asciiflow/issues/185
emmanueloga_|4 years ago
A simple example is markdown tables... sorting, inserting and removing columns, etc. is incredibly tedious and probably requires tools to draw, anyway.
In this line of thought, a tool like Graph::Easy sounds like a better way to come up with ascii boxes and arrows [1] (this particular tool can output other formats too).
As a plus, the underlying data can be reused for something other than docs (generating code, scaffolding directories and files, etc).
1: http://bloodgate.com/perl/graph/manual/overview.html
jamesgreenleaf|4 years ago
I wish I had known about this tool when I was building this little browser game https://replit.com/@aMoniker/Gush because all the levels & game objects are generated from multiline strings of ascii symbols, and it just took too long to do manually.
ChrisArchitect|4 years ago
https://news.ycombinator.com/item?id=27536253
moonchild|4 years ago
rep_movsd|4 years ago
Maybe make a theme set - Turbopascal style, QBasic style etc
zokier|4 years ago
ericmcer|4 years ago
kazinator|4 years ago
https://controlc.com/69f12f5a/fullscreen.php?hash=60268775f1...
ivanceras|4 years ago
user-the-name|4 years ago
Programming tooling really is living in the dark ages sometimes.
sixstringtheory|4 years ago
A screen reader can’t describe a JPEG or animated GIF. You can’t diff images/animations as easily as text. You can’t automatically translate text in images. Images and their toolchains like imagemagick introduce attack vectors. They take up more disk space. You can’t change the font of text in images. Text in images is not greppable.
Do you need to change some text in that documentation image? Hope you have the vector-based original!
And FWIW, Xcode’s rendering of markdown files and markdown doc comments with media assets in playgrounds isn’t the best experience, IMO.
rightbyte|4 years ago
jstanley|4 years ago
VikingCoder|4 years ago
Like, Visual Studio Code supports something like this:
https://marketplace.visualstudio.com/items?itemName=joaompin...
tdy_err|4 years ago
kazinator|4 years ago
The Freeform tool is missing support for the brush consisting of spaces, which would make it useful as an eraser.
SSLy|4 years ago
bloak|4 years ago
anordal|4 years ago
Every time someone utters the word "ascii", they just mean text. Saying “I'm using ASCII” doesn't mean anything anymore, because nobody uses EBCDIC anymore – you are, no matter what, effectively using a superset of ASCII, by default UTF-8. The real question is which one.
wlkr|4 years ago
thanatos519|4 years ago