Markdown nomnoml editor

Write a UML class or box diagram in nomnoml's short text syntax and see it drawn as you type. Nomnoml places every box and line itself, so you describe what is connected and it works out the layout. The text sits in your Markdown as a ```nomnoml block. Free in your browser, no sign-up.

Nomnoml syntax

A diagram is a list of boxes in square brackets and the links between them, one statement per line. A box can be split into compartments with |, and its type goes in angle brackets at the start. Lines that start with # set the style, and // starts a comment.

A class

Write the name, then the fields and the methods, each compartment separated by |. Separate the lines inside a compartment with ;.

You write

[Customer|name: string;email: string|placeOrder();cancel()]

You get

Links

Put a link between two boxes. The marks at each end set the kind of relationship, and boxes are created the first time they are named.

You write

[Shop] -> [Order]
[Order] --> [Logger]
[Card] -:> [Payment]
[Order] +- [Line item]
[Shop] o- [Staff]

You get

Labels and multiplicity

Text between a box and the link is written at that end of the line, which is how you show counts and roles.

You write

[Customer] 1 - 0..* [Order]
[Order] contains -> 1..* [Product]

You get

Other shapes

A type in angle brackets changes the shape: notes, packages that hold other boxes, databases, actors and more.

You write

[<actor> User] -> [<package> Web app|
  [Pages] -> [API]
]
[Web app] -> [<database> Orders]
[<note> Hosted in one region]

You get

Direction and style

Directives start with #. Turn the layout sideways, change the colours or make the whole diagram larger.

You write

#direction: right
#fill: #eef4ff
#stroke: #3b6ef6
[Draft] -> [Review] -> [Published]

You get

Cheat sheet

Write this	You get
`[A]`	A box
`[A\|x;y\|run()]`	A box with compartments
`[A] - [B]`	Association
`[A] -> [B]`	Directed association
`[A] --> [B]`	Dependency (dashed)
`[A] -:> [B]`	Generalisation (inheritance)
`[A] --:> [B]`	Implementation
`[A] +- [B]`	Composition
`[A] o- [B]`	Aggregation
`[<abstract> A]`	An abstract class (italic name)
`[<note> text]`	A note
`[<package> P\|[A] -> [B]]`	A package holding other boxes
`[<database> D]`, `[<actor> U]`	A database or an actor
`#direction: right`	Lay the diagram out left to right
`#fill: #eef4ff`	Box colour
`#zoom: 1.5`	Draw everything larger
`// note`	A comment, not drawn

Something not working? Let us know.