Nice job. Thanks! Also very interesting to have it "distributed" in one html file. Sometimes people forget simple ways to do stuff :)
Is is possible to import and edit diagrams after they have been created?
Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
21–30 of 54 posts
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#22it's literally just a single html file legend
It's a single 4992 line HTML file, which is the source code, making a lot harder to contribute to or maintain. I'd like it a bit more (and I might even contribute) if it had at least some separation of concerns, and a simple build system even if the build system is just a bash command to concatenate source files into one HTML file (if having 1 HTML file is somehow very important, but it's not).
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#23This 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.
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#24Earlier quoted context omitted.
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 exa…
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.
After uploading cascii.html to deepseek.com and promptCoding with it, I saw that you had the json representaion in localStorage.
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...
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#25I 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.
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#26it's literally just a single html file legend
It's a single 4992 line HTML file, which is the source code, making a lot harder to contribute to or maintain. I'd like it a bit more (and I might even contribute) if it had at least some separation of concerns, and a simple build system even if the build system is just a bash command to concatenate source files into one HTML file (if having 1 HTML file is somehow very important, but it's not).
I know it's controversial to do things this way, but given it's a personal project and focuses on portability, I think the benefits are worth while.
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.
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#27it's literally just a single html file legend
It's a single 4992 line HTML file, which is the source code, making a lot harder to contribute to or maintain. I'd like it a bit more (and I might even contribute) if it had at least some separation of concerns, and a simple build system even if the build system is just a bash command to concatenate source files into one HTML file (if having 1 HTML file is somehow very important, but it's not).
> if having 1 HTML file is somehow very important, but it's not
It is.
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#28Earlier quoted context omitted.
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.
After uploading cascii.html to deepseek.com and promptCoding with it, I saw that you had the json representaion in localStorage. 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…
Nice! Yea it should be easy to use the internal layerManager.import and .encodeAll
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.
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#29Nice job. Thanks! Also very interesting to have it "distributed" in one html file. Sometimes people forget simple ways to do stuff :) Is is possible to import and edit diagrams after they have been created?
Please see https://cascii.app where short links are coupled with your exports
Re: Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
#30Best tool I've seen for diagrams in a long time, Congratulations! I'll use this anywhere.