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 -/-
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]
[<pipe> pipe]
[<table> table| a | 5 || b | 7]
Comments
Comments are supported at the start of a line
//[commented] [not //commented]
Id attribute
Two distinct nodes can have the same display name with the id attribute.
[<actor id=a>User] [<actor id=b>User] [a] -- [b]
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.35
#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=pipe
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.
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]