Guest post by Daniel Kallin talking about nomnoml (not only what it does but how is implemented and why he did it), our latest addition to the textual UML tools list). Enter Daniel.

Hi. I am Daniel Kallin, the author of nomnoml. An UML tool that takes text and turns it into diagrams. I am invited to this blog to talk about the conception of nomnoml.

As I got more and more into UML I was constantly looking for better tools. After trying one after the other it became clear that more time was spent tweaking the layout and aesthetics of the diagram than was spent, actually designing the model. Being a coder at heart also made it cumbersome to work with the very mouse-centric user interfaces of pretty much all drawing tools.

As soon as I discovered text-based UML tools I was hooked. Less positioning of boxes and more expressing relationships declaratively. Almost like sketching the diagrams on paper – but with the possibility of manipulating the model back and forth to test different solutions. Because structure diagrams are often exploration tools. They are drawn, shared and quickly discarded.

In my head I now had a list of requirements:

• Text based input, with a syntax that mimics the diagrams themselves

• Online, no installation required

• No login required

• Instant rendering

• Support as much of the UML standard as feasible

• Shareable

• Persistent diagrams

• No direct control over positioning

• and finally: Beautiful diagrams!

Luckily there are several graph layout libraries for JS, (crazy stuff like cross-compiling the Graphviz source to javascript for example). I settled for Dagre (https://github.com/cpettitt/dagre) since it did what I wanted and not much more.

From the start I knew I wanted to use the gorgeous color scheme Solarized by Ethan Schoonover (http://ethanschoonover.com/solarized) accompanied by thicker curved strokes than what most UML tools offer.

A very simplistic parser was thrown together and diagrams actually started to come out of the machine. Now started a long project of turning Dagre’s crude relation vertices into smooth relation arrows. After some experiments with Bezier curves and (a lot) of heuristics for control point placement, I was almost satisfied. But evaluating the flowing splines of many graph layout tools and the Manhattan-style “90 degree turns” common in UML I threw the Bezier curves away and opted for a style of straight lines with circular elbows. In my opinion these lines are easier to follow and convey the meaning better than organic splines.

After some experiments with RegExp parsers I discovered http://jison.org and with the power that came from a real parser advanced features such as nested diagrams was possible.

This is nice

[Car] -> [Driver]
[Car] -> [Engine]
[Engine] -> [Piston]


This is nicer

[Car|
[Engine] -> 4 [Piston]
]
[Car] * - 1 [Driver]


With Jison one specifies a language in Backus-Naur Form, feed it to Jison which produces a javascript library that can parse the language described. Pretty rad.

Parts of the syntax is still parsed with RegExp, with the Jison parser mostly dealing with the overall structure. This turned out to be pretty sweet since nomnoml should support free text at as many places as possible and the regular expressions let unmatched stuff pass right through undigested.

During the development, all tweaking back and forth resulted in a vocabulary of directives that controlled most aspects of the rendering and layout. Even if you are content with the default style one directive to learn is #zoom, which I always use to get those juicy in-your-face sized diagrams.

Thanks to the HTML5 stuff like <canvas>, localStorage and URL hashes nomnoml can offer downloadable images, persistent diagrams and shareable links. All without any server code. Hosting a webapp can be a bit of a hassle, but thanks to nomnoml doing everything on the client it is now hosted on the dirt cheap Amazon S3.

Thanks for reading, and please take www.nomnoml.com for a spin!