Association types

association -
association ->
association <->
dependency -->
dependency <-->
generalization -:>
implementation --:>
composition +-
composition +->
aggregation o-
aggregation o->
ball and socket -o)
ball and socket o<-)
ball and socket ->o
note --
hidden -/-
weightless edge _>
weightless dashed __

Class diagram types

[class]
[<abstract> abstract]
[<instance> instance]
[<reference> reference]
[<package> package|components]
[<frame> frame|]

Component diagram types

[Component] - [<socket> socket]
[<lollipop> lollipop] - [Component]

Flow chart types

[<start> start]
[<end> end]
[<state> state]
[<choice> choice]
[<sync> sync]
[<input> input]
[<sender> sender]
[<receiver> receiver]
[<transceiver> transceiver]

Use case types

[<actor> actor]
[<usecase> usecase]

Miscalleneous types

[<note> note]
[<label> label]
[<hidden> hidden]
[<database> database]
[<table> table| a | 5 || b | 7]

Directives

#import: filename
#arrowSize: 1
#bendSize: 0.3
#direction: down | right
#gutter: 5
#edgeMargin: 0
#gravity: 1
#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 title=bold
[<box> GreenBox]
[<blob> Blobby]

Modifiers

dashed

Key/value pairs

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=sync
visual=table
visual=transceiver

Style title and text body

title=left,italic,bold
body=center,italic,bold

Text modifiers

bold
center
italic
left
underline

Welcome to 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.

Interaction

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

interaction tutorial

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

Usage

Car has an Engine

[Car]->[Engine]

Car owns an arbitrary number of blemished

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

Car knows its Manufacturer and is the parent of Pickup

[Car]o->[Manufacturer]
[Car]<:-[Pickup]

Car has some attributes

[Car|speed: Number;valves: Valve\[\] ]

Engine has an operation

[Engine||start()]

Engine has internal parts

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

Engine depends on components

[Engine] - [<socket>Tank]
[Tank] -->o [Big Fuel Tank]

Set font

#font: Times
Text with serifs

Layout the diagram really tight

#fontSize: 8
#spacing: 12
#padding: 3
[Lorem ipsum]-[dolor sit amet]

Tables

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

Create your own styles

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

Divide into multiple files

#.blob: fill=pink
#import: blobby_styles
[<blob> Blobby]

nomnoml