Association types

association -
association ->
association <->
dependency -->
dependency <-->
generalization -:>
generalization <:-
implementation --:>
implementation <:--
composition +-
composition +->
aggregation o-
aggregation o->
note --
hidden -/-

Classifier types

[name]
[<abstract> name]
[<instance> name]
[<note> name]
[<reference> name]
[<package> name]
[<frame> name]
[<database> name]
[<start> name]
[<end> name]
[<state> name]
[<choice> name]
[<input> name]
[<sender> name]
[<receiver> name]
[<transceiver> name]
[<actor> name]
[<usecase> name]
[<label> name]
[<hidden> name]
[<table> name| a|5 || b|7]

Directives

#arrowSize: 1
#bendSize: 0.3
#direction: down | right
#gutter: 5
#edgeMargin: 0
#edges: hard | rounded
#background: transparent
#fill: #eee8d5; #fdf6e3
#fillArrows: false
#font: Calibri
#fontSize: 12
#leading: 1.25
#lineWidth: 3
#padding: 8
#spacing: 40
#stroke: #33322E
#title: filename
#zoom: 1
#acyclicer: greedy
#ranker: network-simplex | tight-tree | longest-path

Custom classifier styles

A directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.

#.box: fill=#8f8 dashed
#.blob: visual=ellipse
[<box> GreenBox]
[<blob> HideousBlob]

Available key/value pairs are

fill=(any css color)

stroke=(any css color)

align=center
align=left

direction=right
direction=down

visual=actor
visual=class
visual=database
visual=ellipse
visual=end
visual=frame
visual=hidden
visual=input
visual=none
visual=note
visual=package
visual=receiver
visual=rhomb
visual=roundrect
visual=sender
visual=start
visual=table
visual=transceiver

Available modifiers are

bold
underline
italic
dashed
empty

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, underscore, typicons , codemirror and solarized.

Interaction

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

interaction tutorial

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

Decorator pattern
Strategy pattern
nomnoml architecture

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]

nomnoml