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. |
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.
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.
Having an Import from clipboard would truly make this a remarkable app.
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!
Please consider changing the link colors in the scrolling intro to yellow when in dark mode. They were really hard to make out.
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.
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.
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.
Is is possible to import and edit diagrams after they have been created?
legend
I have taken care to break things up, comment, etc - if you start at main(), you may find it's not any more difficult to follow than if i'd broken it up. Just because it's one file doesn't mean it doesn't separate concerns.
It is.
FYI there's a typo in the link in the README -- points to casci.app instead of cascii.app.
Good luck getting contributions. I don't have the time to read and understand all 4000+ lines of this very long file. I have ideas, but I'm not even interested in participating because of the format.
I tried generating the json from the ascii exported to the clipboard but see why this could get very tricky. So, I added an Export (JSON) to file and Import (JSON) from file and placed them in a More Popup component in which I put the existing export button, so the menu bar does not get too crowded. (for code see (1)) -
This now allows me to save the json and import/edit it at a later time - no short url needed and the data stays private.
Your code was well laid out and deepseek was able to make all the changes error-free.
(1) https://github.com/ssr1ram/cascii-core/tree/more-export-impo...
This might break state for the online version, but I can do some tweaks and get it merged if you open the PR.
to be clear, the short url feature is useful in that other people can easily edit / update diagrams they see referenced in code comments. If privacy is a concern and you're not distributing the diagram, then indeed exporting JSON is a good way to go.
Maybe base64 encoded metadata under the diagram? Maybe encode in non-printable characters?
Maybe just use non-printable characters to hint where the corners of objects are?
Perhaps a good middle ground would just be offering the gzip dump.