from Hacker News

Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript

by ftr1200 on 3/16/25, 10:02 AM with 53 comments

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.

  • by dimenoz on 3/17/25, 11:16 PM

    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.

  • by ccakes on 3/18/25, 2:44 AM

    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/

  • by kentbrew on 3/18/25, 6:42 AM

    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.

  • by macintux on 3/17/25, 10:43 PM

    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.

  • by two_handfuls on 3/18/25, 3:43 PM

    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.

  • by bambax on 3/18/25, 9:54 AM

    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.

  • by smusamashah on 3/18/25, 6:02 AM

    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.

  • by dspillett on 3/17/25, 10:36 PM

    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!

  • by wiseowise on 3/18/25, 9:11 AM

    Any chance you can write a blogpost about development of cascii? It looks impressive and it would be nice to take a sneak peek behind your thought process.

  • by Rucadi on 3/18/25, 8:58 AM

    Best tool I've seen for diagrams in a long time, Congratulations! I'll use this anywhere.

  • by theanonymousone on 3/18/25, 5:39 AM

    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?

  • by primitivesuave on 3/18/25, 5:12 AM

    This is amazing, thank you for sharing it. Aside from being a very useful documentation tool, I hope it inspires more people to distribute simple standalone software utilities in this way.

  • by dangoodmanUT on 3/18/25, 4:20 AM

    it's literally just a single html file

    legend

  • by ftr1200 on 3/18/25, 6:19 PM

    Version 1.0.1 now has offline base64 import / export so you can permanently save drawings offline.

  • by nwroot on 3/18/25, 2:34 AM

    This is amazing thank you. Have been using asciimap or whatever, but this works so much better. Thank you.

  • by jaredwiener on 3/17/25, 10:54 PM

    Really cool -- and congrats!

    FYI there's a typo in the link in the README -- points to casci.app instead of cascii.app.

  • by sdotdev on 3/19/25, 6:07 PM

    Nice job, its really easy to use

  • by nextts on 3/19/25, 11:02 AM

    See myself using this for sure!

  • by 0xcb0 on 3/18/25, 9:49 AM

    Wow! Great tool, looks so nice and useful. Thanks for building it!

  • by breadchris on 3/17/25, 11:37 PM

    omg this is beautiful, great job!

  • by newusertoday on 3/18/25, 5:26 AM

    interesting, i generally use artist mode in emacs but this seems to have more options.

  • by shanselman on 3/17/25, 11:37 PM

    genius. I love it. I'll take 14 of these immediately!

  • by LarsenCC on 3/19/25, 4:50 AM

    Omg, crazy haha.

  • by Cypher on 3/18/25, 10:55 AM

    obsidian plugin please