← Back to Guides
DiagramsNomnoml Diagrams in Markdown

Try this in the editor

Paste the examples from this guide into the live editor and export them to a styled PDF or HTML file — diagrams, math and syntax highlighting included. Free, no signup.

Open the editorMarkdown to PDF converter
Published on 2026-02-22

Nomnoml Diagrams in Markdown

A fast, highly customizable UML diagram generator driven entirely from text in Markdown, with styling directives for colors, shapes, and layout.

Nomnoml is an incredibly fast, lightweight text-to-UML tool. While PlantUML is massive and feature-rich, Nomnoml aims for simplicity and a distinctive, hand-drawn aesthetic (though it can be styled strictly).

It is particularly beloved for quickly sketching class diagrams, state machines, and simple architectures without the verbose syntax of other languages.

Wrap your code in a nomnoml block to render it.

Basic Syntax

The most basic element is a box, denoted by square brackets [Box]. You connect them with directed arrows ->.

syntax
[Pirate] -> [Plunder]
[Pirate] -> [Rum]
[Plunder] -> [Bounty]
[Rum] -> [Drunk]
NomnomlNomnoml diagram

UML Classes

Nomnoml was born to write UML classes. You divide sections of a class (Name, Attributes, Methods) using the pipe character |.

syntax
[<abstract>Vehicle|
  + weight: float
  - fuel: float
|
  + start()
  # drive()
]

[Car] -:> [Vehicle]
[Bike] -:> [Vehicle]
NomnomlNomnoml diagram

Notice the -:> arrow—it visually represents the hollow-triangle arrow used in UML for inheritance (a Car is a Vehicle).

Grouping and Nesting

A unique strength of Nomnoml is that it supports deeply nested boxes. If you want to put a box inside a box, literally wrap it in square brackets.

syntax
[Database |
  [Customers |
    [ID] -> [Name]
  ]
  [Orders |
    [OrderID] -> [CustomerID]
  ]
]

[Server] -> [Database]
NomnomlNomnoml diagram

Directives and Styling

You can style the diagram using “directives” starting with #. This allows you to set the background gradient, the stroke color, the stroke width, and the font.

syntax
#bg: #eeeef0
#stroke: #bf0603
#font: monospace
#lineWidth: 2

[<start>st] -> [State 1]
[State 1] -> [State 2]
[State 2] -> [<end>e]
NomnomlNomnoml diagram

Supported Arrow Types

Nomnoml supports numerous relationship indicators:

  • -> directed arrow
  • --> dashed arrow
  • -:> inheritance (hollow triangle)
  • --:> implements (dashed inheritance)
  • -+ composition (diamond)
  • o- aggregation (hollow diamond)

Nomnoml is perfect when you need a UML diagram fast, without having to consult documentation for complex syntax rules.

Related guides