Hello, this is nomnoml, a tool for drawing UML diagrams based on a simple syntax.

Try and edit the code on the left and watch the diagram change. Any changes are saved to the browser's localStorage, so your diagram should be here the next time, (but no guarantees).

Created by Daniel Kallin and hosted on GitHub for your perusal.

Nomnoml was made possible by the cool projects jison, dagre, typicons , codemirror and solarized.

Interaction

The canvas can be panned and zoomed by dragging and scrolling in the right hand third of the canvas.

Downloaded image files will be given the filename in the #title directive.

Downloaded SVG files will have the source code embedded. Open an exported SVG file to load it's nomnoml source.

The editor supports a subset of Sublime Text's keymappings.

Examples

Usage

Car has an Engine

[Car]->[Engine]

Car owns an arbitrary number of blemished

[Car] +-> 0..* [RustPatches]

Car knows its Manufacturer

[Car]o->[Manufacturer]

Car depends on Fuel

[Car]-->[Fuel]

Pickup inherits from Car

[Pickup]-:>[Car]

Car implements interface IVehicle

[Car]--:>[IVehicle]

Paul and Ron have a named association

[Paul] friend - [Ron]

They both depend on each other

[Chicken]<->[Egg]

Car has some attributes

[Car|maxSpeed: Float;color: Color]

Car has several valves

[Car| valves: Valve\[\] ]

Engine has an operation

[Engine||start()]

Engine has internal parts

[Engine| [Cylinder]->1[Piston] [Cylinder]->2[Valve] ]

Engine is an abstract class

[<abstract>Engine||start()]

Car is in the package 'vehicles'

[<package>vehicles|[Car]]

Car has an attached note

[Car]--[<note>only driven twice a month ]

Set font

#font: Times

Layout the diagram really tight

#fontSize: 8 #spacing: 12 #padding: 3

Tables

[<table>Fruits| Apples | 17 || Oranges | 4711 ]

Create your own styles

#.box: fill=#8f8 dashed [<box> GreenBox]

Divide into mupltiple files

#import: boxy_styles [<box> GreenBox]