Readit News logoReadit News
Posted by u/ftr1200 9 months ago
Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScriptgithub.com/casparwylie/ca...
3 months ago I wanted to draw an ASCII diagram to include in some documentation at work. I found the few tools online to be insufficient, and was suprised there wasn't a more complete tool to get the job done.

Since, I've built Cascii from scratch in vanilla Javascript (I'm not an FE dev, it might be obvious...).

I hope it works alright. Please check out the live version at https://cascii.app, report problems, make diagrams to improve your code's documentation. Hope you enjoy using it.

dimenoz · 9 months ago
This is fantastic. I've always used JavE before but this being a single HTML file is a big+ and packs quite a punch. Kudos to the author!

One question though, how do edit the content later? For example I generated a few diagrams one at a time and pasted those in a local plain text file. Later when I want to edit a particular diagram/part, I tried copy pasted it in, but always got "cannot paste, content leaves canvas" error. If I tried copy-pasting a really small section (e.g. 3x3 table), it pasted it right in the center. Anyway, not sure if that's an intended work flow or not. Great job regardless.

ftr1200 · 9 months ago
Glad you asked. Have you checked the online version https://cascii.app

There, all exported drawings come with a short link. This is so that months later anyone reading / seeing can edit their own copy online / keep it up to date.

You can also create an account to manage your own drawings.

Side note - when you use real pasting, it will not remember meaningful information (that's very hard to do elegantly). In your example, I'm guessing that 3x3 table you pasted in could not be properly edited like a table again. Hence, use short links so that Cascii remembers state.

ssriram · 9 months ago
Hi, great app. I'd love to understand how you are maintaining state behind that short url and see if there are ways (sans server) to at least partially recreate state from the exported ascii.

Having an Import from clipboard would truly make this a remarkable app.

dimenoz · 9 months ago
Makes sense. Thank you for making and sharing this.
ccakes · 9 months ago
Looks super cool, congrats!

Monodraw[1] is a similar product delivered as a standalone macOS app. It’s a classic pay once-type license and very polished software. Cannot recommend enough! I’ve always wanted something as good on Linux though, will definitely give this a go!

[1] https://monodraw.helftone.com/

Brajeshwar · 9 months ago
Happy user of Monodraw. I paid for it once a long long time ago and I use it once or twice a year.
kentbrew · 9 months ago
I love this so much. Thanks for using vanilla JS!

Please consider changing the link colors in the scrolling intro to yellow when in dark mode. They were really hard to make out.

macintux · 9 months ago
Very cool, thanks.

One of the saddest days at my current job: when the company I’m contracted to stopped offering Excalidraw in favor of Lucid. I mostly understand the rationale, but the dramatic difference in friction basically shut down all interest I had in using diagrams to help communicate with my team members.

ftr1200 · 9 months ago
A co-worker recently showed me this. It seems really good. If they did ASCII diagrams I'd probably have never made this project!
two_handfuls · 9 months ago
This looks amazing! Thank you for making and sharing it. Being able to run it locally is fantastic for work, where one may not be allowed to share "internal details" with unvetted 3rd party companies.
bambax · 9 months ago
Wow. This is absolutely fantastic! Great work! Congrats!

Do you know if there would be a way (in the future) to export existing image diagrams to this format / will there be an API. It would be very cool for archival purposes.

ftr1200 · 9 months ago
It really depends how much demand there is. It's a great next step but a lot of work - I was thinking about training a neural net to parse images / 3rd party diagrams into Cascii, but right now I need a break from my screen for a few weeks :)
ftr1200 · 9 months ago
v1.0.1 now has offline import/export

https://github.com/casparwylie/cascii-core

smusamashah · 9 months ago
This looks awesome. The way you are dragging things around and the diagonal lines is amazing. Don't think asciiflow or the other one or two tools do this.

Since you are providing a single portable html file (which almost no one does that these days sadly) you may be interested in how sequencediagrams.org handles this. They don't offer sign up, instead have localStorage, Google drive, file export and few other ways.

Also, can you let me open it on the phone with a warning/recommendation to look at github instead of redirecting to it.

ftr1200 · 9 months ago
Bit of a nightmare getting this elegant enough on a phone, and doubt anyone wants to draw ASCII digrams on their phone anyway, so not really a priority!
dspillett · 9 months ago
That looks almost exactly like something I've wanted, thought numerous times about making, but never getting around to. Thanks for scratching your itch and mine!
ftr1200 · 9 months ago
Really glad to hear it. Enjoy!