9 ms·

ASCII art for semantic code commenting

290 points by anonymous_they 5y ago

marcellus23 5y ago
Monodraw is great for this too on Mac: https://monodraw.helftone.com/ https://monodraw.helftone.com/
- IBCNU 5y ago
  Monodraw is awesome, and has a really great desktop interface.
kitd 5y ago
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.
ChrisArchitect 5y ago
Some recent discussion from 8 months ago: https://news.ycombinator.com/item?id=27536253 https://news.ycombinator.com/item?id=27536253
adrianomartins 5y ago
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 ;)
bloak 5y ago
EDIT: Deleted before I get even more downvotes.
- anordal 5y ago
  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.
  - mmcdermott 5y ago
    > Saying “I'm using ASCII” doesn't mean anything anymore, because nobody uses EBCDIC anymore I get what you're saying, but I have seen bugs at work caused by distributed systems sending text in ASCII or UTF8 to an IBM z/OS mainframe with EBCDIC.
- wlkr 5y ago
  It seems to work exporting to both ASCII standard and extended for me.
  - bloak 5y ago
    Ah, yes, I can see it now, but that option is almost invisible for me. I have to operate some scroll buttons at the edge to see the words "ASCII Extended".
andix 5y ago
PlantUML can export to text too. And it aligns all the boxes and arrows for you. Still, great idea and great implementation :)
- samatman 5y ago
  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!
dspillett 5y ago
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!
- anonymous_they 5y ago
  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.
- taterbase 5y ago
  Perhaps I'm misunderstanding you but this tool expressly has a select and move tool.
  - dspillett 5y ago
    It does, but that selects and moves the cells not the objects and then redraws the cells? Actually, going back to have a play I see that it does allow some modification of existing objects but it isn't terribly flexible. I've just done a quick search and found one that I've not spotted before, which is a bit closer to what I want in that one respect, but not nearly complete overall (and not seen a check-in in 8 years): https://textik.com/ https://textik.com/ - that might illustrate the key difference that I see missing in asciiflow.
    - lijogdfljk 5y ago
      If i understand you, the Mac-only Monodraw handles this fine. It lets you draw objects, point to objects (say like a diagram), and then move them around with the pointers auto adjusting to remain correct. It's a shame that it's mac only.
jaster 5y ago
For emacs users, there are some modes with similar functionalities (as expected from emacs!): picture-mode and artist-mode See for example http://xahlee.info/emacs/emacs/emacs_ascii_diagram.html http://xahlee.info/emacs/emacs/emacs_ascii_diagram.html
- jordigh 5y ago
  Came here to say this. If it's text, Emacs can handle it. 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-doc-ditaa.html https://www.orgmode.org/worg/org-contrib/babel/languages/ob-...
  - everybodyknows 5y ago
    Another option for rendering (to SVG) is goat: https://github.com/blampe/goat https://github.com/blampe/goat
roosgit 5y ago
For longer CSS files I use ASCII text to mark and visually separate the breakpoints. An advantage of this is the ability to see the breakpoints in the minimap. Something like this: https://css-tricks.com/wp-content/uploads/2015/09/mini-map.jpg https://css-tricks.com/wp-content/uploads/2015/09/mini-map.j... There's even a Sublime Text plugin to generate this text.
- seumars 5y ago
  At that point it would be better to just split it into several files though.
  - oneeyedpigeon 5y ago
    Maybe it is, maybe this is just an intermediate file in a build process, optimised for readability.
- sprucevoid 5y ago
  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.
  - roosgit 5y ago
    Yeah, a bit like how CSSEdit used `@group` https://live.staticflickr.com/112/291326042_18115aa3c1_b.jpg https://live.staticflickr.com/112/291326042_18115aa3c1_b.jpg
  - KMnO4 5y ago
    This is one of my favourite features of XCode. If you "// MARK:" lines, they'll show up in the minimap. Eg. https://miro.medium.com/max/1400/1*j38oOm3Pt5AMnDI3HQ6TGQ.png https://miro.medium.com/max/1400/1*j38oOm3Pt5AMnDI3HQ6TGQ.pn... Screenshot stolen from this Medium[0]. [0]: https://medium.com/@mumtaz.hussain/xcode-11-now-makes-mark-comments-a-lot-more-useful-with-minimap-feature-f8c658b293f https://medium.com/@mumtaz.hussain/xcode-11-now-makes-mark-c...
rep_movsd 5y ago
You should add double line drawing characters and shadows (remember the DOS version of Norton Utilities?) Maybe make a theme set - Turbopascal style, QBasic style etc
stabbles 5y ago
I recently discovered https://excalidraw.com/ https://excalidraw.com/ for informal diagrams that work well in presentations
- samwillis 5y ago
  Another good one is https://www.tldraw.com https://www.tldraw.com Being built by @steveruizok very much worth a follow on Twitter: https://mobile.twitter.com/steveruizok https://mobile.twitter.com/steveruizok
dbjorge 5y ago
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.
- notRobot 5y ago
  This is a very good point that I hadn't considered for some reason. Thanks!
celie56 5y ago
If you use nvim, there is a similar tool called venn.nvim: https://github.com/jbyuki/venn.nvim https://github.com/jbyuki/venn.nvim
- jeppesen-io 5y ago
  Ohhh! Lovely. I was hoping someone might post a nice nvim plugin! Think I'll open a PR to add this to Nix[OS] this weekend
- verdverm 5y ago
  I love this plugin, came here hoping to see it so I wouldn't have to go lookup the link.
moonchild 5y ago
See also: rexpaint - https://www.gridsagegames.com/rexpaint/ https://www.gridsagegames.com/rexpaint/
w4rh4wk5 5y ago
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. ─ │ ┌ ┬ ┐ ┄ ┆ ├ ┼ ┤ ╲ ╱ ┈ ┊ └ ┴ ┘ ━ ┃ ┏ ┳ ┓ ┏ ┯ ┓ ┏ ┳ ┓ ┏ ┯ ┓ ┅ ┇ ┣ ╋ ┫ ┣ ┿ ┫ ┠ ╂ ┨ ┠ ┼ ┨ ┉ ┋ ┗ ┻ ┛ ┗ ┷ ┛ ┗ ┻ ┛ ┗ ┷ ┛
- wycy 5y ago
  Do you have an example context in which you'd use these? I've never thought to do this and am curious about the possibilities and use cases.
  - w4rh4wk5 5y ago
    Sure, last time I used them I documented some file format I needed to reverse engineer. Here an excerpt. Of course, it's not _necessary_ to do it like that. It's just flavor. ┏━━━━━━━━━━━━━━━━┯━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━┯━━━━━━━━━━━━━━┳┅┅ ┃ Chunk 1 Header │ Chunk 1 Body ┃ Chunk 2 Header │ Chunk 2 Body ┃ ┗━━━━━━━━━━━━━━━━┷━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━┷━━━━━━━━━━━━━━┻┅┅ Chunk Header: ┌───────────┬─────────────────┐ │ Magic Nr. │ Chunk Body Size │ │ 4 Byte │ 4 Byte │ └───────────┴─────────────────┘
    - jimmygrapes 5y ago
      Biggest problem is with mobile / low horizontal resolution displays. I don't mind scrolling left and right, but in some cases the wrapping is forced (as on the HN phone app I'm using, Materialistic) and it becomes a mess. I've longed for some kind of markup system that allows for textual data to be formatted in tabular fashion irrespective of the character size of the contents, like ummmmmm HTML
  - lelandbatey 5y ago
    It's fabulous in cases where there's a "big important business logic" or a "big important test" with tough to eliminate complexity, where you feel a diagram is so important that it's worth putting in comments beside said code. I do recommend that you be careful with this though; in places where it's not common to put ASCII art diagrams in code you'll probably receive pushback (it is afterall very large and distracting compared to said code). Be ready to save an in-code diagram for the 1-to-3 places in the business where they'll be a godsend.
ericmcer 5y ago
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.
thanatos519 5y ago
I use TheDraw in DOSBox. Still the best!
zokier 5y ago
What makes this "semantic code commenting"
a2800276 5y ago
It's so nice to see all this interest in ASCII art. \o/ -huzzah I still use Jave (http://www.jave.de/#description 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) https://en.wikipedia.org/wiki/PIC_(markup_language) ) and of course cowsay. Someone already mentioned plantuml.
ynac 5y ago
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
ivanceras 5y ago
I made something[0] similar, with a few more bugs that are yet to be solved [0]: https://ivanceras.github.io/svgbob-webview/ https://ivanceras.github.io/svgbob-webview/
jstanley 5y ago
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.
VikingCoder 5y ago
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: https://marketplace.visualstudio.com/items?itemName=joaompinto.vscode-graphviz https://marketplace.visualstudio.com/items?itemName=joaompin...
user-the-name 5y ago
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.
- sixstringtheory 5y ago
  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.
  - user-the-name 5y ago
    Now do a list of all the things you can't do with text.
  - charcircuit 5y ago
    >A screen reader can’t describe a JPEG or animated GIF. Sure it can. There's a whole field of computer science for doing just that, computer vision. >You can’t automatically translate text in images You can use OCR to read text from images. >Images and their toolchains like imagemagick introduce attack vectors. This isn't fair. Text based toolchains can be vulnerable too. There have been millions of vulnerabilities with string handling >They take up more disk space. Buy a bigger hard drive / cloud storage. >You can’t change the font of text in images. Pick a readable font in the first place. >Text in images is not greppable. Again your could use OCR to make thi spossible. >Do you need to change some text in that documentation image? Hope you have the vector-based original! Check in the project file to source control or just draw over the current one.
- rightbyte 5y ago
kdmoyers 5y ago
I've discovered that the crippling bug in asciiflow [1] is not present when running it in FireFox, to my great relief. [1] https://github.com/lewish/asciiflow/issues/185 https://github.com/lewish/asciiflow/issues/185
SSLy 5y ago
It doesn't eat up keyboard evens, my accessibility addon freaks out.
kazinator 5y ago
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.
emmanueloga_ 5y ago
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). 1: http://bloodgate.com/perl/graph/manual/overview.html http://bloodgate.com/perl/graph/manual/overview.html
jamesgreenleaf 5y ago
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/ 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 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.
kazinator 5y ago
Made something with this: https://controlc.com/69f12f5a/fullscreen.php?hash=60268775f117c8b569e0380369c35758&toolbar=true&linenum=false https://controlc.com/69f12f5a/fullscreen.php?hash=60268775f1...
tdy_err 5y ago
https://textpaint.net https://textpaint.net

Monodraw is great for this too on Mac: https://monodraw.helftone.com/ https://monodraw.helftone.com/

IBCNU 5y ago
Monodraw is awesome, and has a really great desktop interface.

kitd 5y ago

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.

ChrisArchitect 5y ago

Some recent discussion from 8 months ago: https://news.ycombinator.com/item?id=27536253 https://news.ycombinator.com/item?id=27536253

adrianomartins 5y ago

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

bloak 5y ago

EDIT: Deleted before I get even more downvotes.

anordal 5y ago
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.
- mmcdermott 5y ago
  > Saying “I'm using ASCII” doesn't mean anything anymore, because nobody uses EBCDIC anymore I get what you're saying, but I have seen bugs at work caused by distributed systems sending text in ASCII or UTF8 to an IBM z/OS mainframe with EBCDIC.
wlkr 5y ago
It seems to work exporting to both ASCII standard and extended for me.
- bloak 5y ago
  Ah, yes, I can see it now, but that option is almost invisible for me. I have to operate some scroll buttons at the edge to see the words "ASCII Extended".

andix 5y ago

PlantUML can export to text too. And it aligns all the boxes and arrows for you. Still, great idea and great implementation :)

samatman 5y ago
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!

dspillett 5y ago

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!

anonymous_they 5y ago
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.
taterbase 5y ago
Perhaps I'm misunderstanding you but this tool expressly has a select and move tool.
- dspillett 5y ago
  It does, but that selects and moves the cells not the objects and then redraws the cells? Actually, going back to have a play I see that it does allow some modification of existing objects but it isn't terribly flexible. I've just done a quick search and found one that I've not spotted before, which is a bit closer to what I want in that one respect, but not nearly complete overall (and not seen a check-in in 8 years): https://textik.com/ https://textik.com/ - that might illustrate the key difference that I see missing in asciiflow.
  - lijogdfljk 5y ago
    If i understand you, the Mac-only Monodraw handles this fine. It lets you draw objects, point to objects (say like a diagram), and then move them around with the pointers auto adjusting to remain correct. It's a shame that it's mac only.

jaster 5y ago

For emacs users, there are some modes with similar functionalities (as expected from emacs!): picture-mode and artist-mode See for example http://xahlee.info/emacs/emacs/emacs_ascii_diagram.html http://xahlee.info/emacs/emacs/emacs_ascii_diagram.html

jordigh 5y ago
Came here to say this. If it's text, Emacs can handle it. 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-doc-ditaa.html https://www.orgmode.org/worg/org-contrib/babel/languages/ob-...
- everybodyknows 5y ago
  Another option for rendering (to SVG) is goat: https://github.com/blampe/goat https://github.com/blampe/goat

roosgit 5y ago

For longer CSS files I use ASCII text to mark and visually separate the breakpoints. An advantage of this is the ability to see the breakpoints in the minimap. Something like this: https://css-tricks.com/wp-content/uploads/2015/09/mini-map.jpg https://css-tricks.com/wp-content/uploads/2015/09/mini-map.j... There's even a Sublime Text plugin to generate this text.

seumars 5y ago
At that point it would be better to just split it into several files though.
- oneeyedpigeon 5y ago
  Maybe it is, maybe this is just an intermediate file in a build process, optimised for readability.
sprucevoid 5y ago
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.
- roosgit 5y ago
  Yeah, a bit like how CSSEdit used `@group` https://live.staticflickr.com/112/291326042_18115aa3c1_b.jpg https://live.staticflickr.com/112/291326042_18115aa3c1_b.jpg
- KMnO4 5y ago
  This is one of my favourite features of XCode. If you "// MARK:" lines, they'll show up in the minimap. Eg. https://miro.medium.com/max/1400/1*j38oOm3Pt5AMnDI3HQ6TGQ.png https://miro.medium.com/max/1400/1*j38oOm3Pt5AMnDI3HQ6TGQ.pn... Screenshot stolen from this Medium[0]. [0]: https://medium.com/@mumtaz.hussain/xcode-11-now-makes-mark-comments-a-lot-more-useful-with-minimap-feature-f8c658b293f https://medium.com/@mumtaz.hussain/xcode-11-now-makes-mark-c...

rep_movsd 5y ago

You should add double line drawing characters and shadows (remember the DOS version of Norton Utilities?) Maybe make a theme set - Turbopascal style, QBasic style etc

stabbles 5y ago

I recently discovered https://excalidraw.com/ https://excalidraw.com/ for informal diagrams that work well in presentations

samwillis 5y ago
Another good one is https://www.tldraw.com https://www.tldraw.com Being built by @steveruizok very much worth a follow on Twitter: https://mobile.twitter.com/steveruizok https://mobile.twitter.com/steveruizok

dbjorge 5y ago

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.

notRobot 5y ago
This is a very good point that I hadn't considered for some reason. Thanks!

celie56 5y ago

If you use nvim, there is a similar tool called venn.nvim: https://github.com/jbyuki/venn.nvim https://github.com/jbyuki/venn.nvim

jeppesen-io 5y ago
Ohhh! Lovely. I was hoping someone might post a nice nvim plugin! Think I'll open a PR to add this to Nix[OS] this weekend
verdverm 5y ago
I love this plugin, came here hoping to see it so I wouldn't have to go lookup the link.

moonchild 5y ago

See also: rexpaint - https://www.gridsagegames.com/rexpaint/ https://www.gridsagegames.com/rexpaint/

w4rh4wk5 5y ago

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. ─ │ ┌ ┬ ┐ ┄ ┆ ├ ┼ ┤ ╲ ╱ ┈ ┊ └ ┴ ┘ ━ ┃ ┏ ┳ ┓ ┏ ┯ ┓ ┏ ┳ ┓ ┏ ┯ ┓ ┅ ┇ ┣ ╋ ┫ ┣ ┿ ┫ ┠ ╂ ┨ ┠ ┼ ┨ ┉ ┋ ┗ ┻ ┛ ┗ ┷ ┛ ┗ ┻ ┛ ┗ ┷ ┛

wycy 5y ago
Do you have an example context in which you'd use these? I've never thought to do this and am curious about the possibilities and use cases.
- w4rh4wk5 5y ago
  Sure, last time I used them I documented some file format I needed to reverse engineer. Here an excerpt. Of course, it's not _necessary_ to do it like that. It's just flavor. ┏━━━━━━━━━━━━━━━━┯━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━┯━━━━━━━━━━━━━━┳┅┅ ┃ Chunk 1 Header │ Chunk 1 Body ┃ Chunk 2 Header │ Chunk 2 Body ┃ ┗━━━━━━━━━━━━━━━━┷━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━┷━━━━━━━━━━━━━━┻┅┅ Chunk Header: ┌───────────┬─────────────────┐ │ Magic Nr. │ Chunk Body Size │ │ 4 Byte │ 4 Byte │ └───────────┴─────────────────┘
  - jimmygrapes 5y ago
    Biggest problem is with mobile / low horizontal resolution displays. I don't mind scrolling left and right, but in some cases the wrapping is forced (as on the HN phone app I'm using, Materialistic) and it becomes a mess. I've longed for some kind of markup system that allows for textual data to be formatted in tabular fashion irrespective of the character size of the contents, like ummmmmm HTML
- lelandbatey 5y ago
  It's fabulous in cases where there's a "big important business logic" or a "big important test" with tough to eliminate complexity, where you feel a diagram is so important that it's worth putting in comments beside said code. I do recommend that you be careful with this though; in places where it's not common to put ASCII art diagrams in code you'll probably receive pushback (it is afterall very large and distracting compared to said code). Be ready to save an in-code diagram for the 1-to-3 places in the business where they'll be a godsend.

ericmcer 5y ago

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.

thanatos519 5y ago

I use TheDraw in DOSBox. Still the best!

zokier 5y ago

What makes this "semantic code commenting"

a2800276 5y ago

It's so nice to see all this interest in ASCII art. \o/ -huzzah I still use Jave (http://www.jave.de/#description 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) https://en.wikipedia.org/wiki/PIC_(markup_language) ) and of course cowsay. Someone already mentioned plantuml.

ynac 5y ago

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

ivanceras 5y ago

I made something[0] similar, with a few more bugs that are yet to be solved [0]: https://ivanceras.github.io/svgbob-webview/ https://ivanceras.github.io/svgbob-webview/

jstanley 5y ago

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.

VikingCoder 5y ago

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: https://marketplace.visualstudio.com/items?itemName=joaompinto.vscode-graphviz https://marketplace.visualstudio.com/items?itemName=joaompin...

user-the-name 5y ago

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.

sixstringtheory 5y ago
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.
- user-the-name 5y ago
  Now do a list of all the things you can't do with text.
- charcircuit 5y ago
  >A screen reader can’t describe a JPEG or animated GIF. Sure it can. There's a whole field of computer science for doing just that, computer vision. >You can’t automatically translate text in images You can use OCR to read text from images. >Images and their toolchains like imagemagick introduce attack vectors. This isn't fair. Text based toolchains can be vulnerable too. There have been millions of vulnerabilities with string handling >They take up more disk space. Buy a bigger hard drive / cloud storage. >You can’t change the font of text in images. Pick a readable font in the first place. >Text in images is not greppable. Again your could use OCR to make thi spossible. >Do you need to change some text in that documentation image? Hope you have the vector-based original! Check in the project file to source control or just draw over the current one.
rightbyte 5y ago

kdmoyers 5y ago

I've discovered that the crippling bug in asciiflow [1] is not present when running it in FireFox, to my great relief. [1] https://github.com/lewish/asciiflow/issues/185 https://github.com/lewish/asciiflow/issues/185

SSLy 5y ago

It doesn't eat up keyboard evens, my accessibility addon freaks out.

kazinator 5y ago

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.

emmanueloga_ 5y ago

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). 1: http://bloodgate.com/perl/graph/manual/overview.html http://bloodgate.com/perl/graph/manual/overview.html

jamesgreenleaf 5y ago

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

kazinator 5y ago

Made something with this: https://controlc.com/69f12f5a/fullscreen.php?hash=60268775f117c8b569e0380369c35758&toolbar=true&linenum=false https://controlc.com/69f12f5a/fullscreen.php?hash=60268775f1...

tdy_err 5y ago

https://textpaint.net https://textpaint.net