Dia.js

Past entries

For the past few months I've been pretty busy with work, and I haven't really been able to build any new games for my portfolio. WarSim took a lot of time and energy to finish, and is probably the game I'm the most proud of so far. I was planning on writing a series of articles on its development, but I was so busy I only wrote the one about optimization.

Though I've been super busy, I have decided to put some time in a non game-related project I've been thinking about for some time now.

Indeed, as a computer engineer, sometimes I like to create or read UML diagrams to understand the architecture of an application. So far, I haven't been able to find a free, perfect tool for that. I've tried a few in the past, never exactly what I expected.

As a consequence, I decided to create my own. So far the project is called Dia.js, but it will probably change if it grows bigger.

The project is a web app in which you can add elements of different types, and save/load sheets.

UML diagram example

Though my initial goal was to have a UI to create UML diagrams, I decided to make the project as flexible as possible, so it would be easy (or at least doable) to create new element types to add to a sheet.

For instance, I added a few element types to build UI wireframes. I'm also thinking about game storyboards, flow diagrams, and more in the future.

UI wireframe example

I've also uploaded the app so you can try it and judge by yourself. I'm always open to feedback :)

My goal for now is to add all the features that I feel are necessary: guides, copy/paste, resizing, parent/child relations... so any element type could be easily built. Then, once I have a solid code base, I will work on a better UI, and on more element types.

The code is available on Github, so feel free to participate in the project. I'm hoping to have a fully usable and flexible app in the end.

< Why HTML5 developers should be excited about bots on Kik
Optimizing WarSim >