Znode Editor

Sometime last year I started writing a minimalistic flowchart editor in flash. I never got around to finishing it, mainly because I had decided to implement a few time consuming features that weren’t really necessary. Last month I decided to revisit this same project in javascript using jQuery. I was able to get a working alpha after a day or two and I’ve slowly been tweaking things with it here and there ever since. Here is a short video explaining how it works:

You can try Znode out here.

You can get the source from the github.

It’s worth noting that along with jQuery I used the very cool Raphael library. Raphael is a drawing library that will draw using SVG. Since SVG doesn’t work in IE, Raphael will draw using VML. I just used it to draw the black connector lines.


I decided to create this when I found myself drawing pseudo-UML diagrams for things I was working on (including things that were non-programming related). I never got into creating actual UML – I always just created simplified charts… like the ones Znode creates. I dug around for some existing web app to use, but didn’t find anything that was simple enough.

I plan on using Znode to create diagrams to illustrate programming concepts for my classes this semester… and I plan on using it to brainstorm about programs. Here is a diagram I’ve been using for another project I’m working on:


One Response to “Znode Editor”

  1. Pascal
    20. June 2012 um 23:11

    your application is exactly what i was looking for !!!
    thanks a lot !
    I’ve got just one question, with my poor english, is there a way to protect the flowchart until it’s done ?

    thanks again

Leave a Reply

Spam protection by WP Captcha-Free