Draw a Class Diagram

Type your diagram shorthand (see samples or instructions below):

Use NEW Features on the BETA draw page


Publish Online

Paste this link in a blog, wiki, issue tracker or forum:

<img src="http://yuml.me/diagram/scruffy/class/<b>[Customer]+1-&gt;*[Order], [Order]++1-items &gt;*[LineItem], [Order]-0..1&gt;[PaymentMethod]</b>" />.

You don't really need to use this page to draw, you can create links directly within your blog posts and wiki pages.

Edit Your Diagram Later

Come back and edit your diagram later, just add /edit/ into your URL:



Share in your emails or documents. Simply drag the diagram above into your Google Mail or Outlook messages, or a Word, Excel, Pages or Powerpoint document.


Grab yourself a PDF version of the diagram, neat huh.

Syntax Overview

Class [Customer]
Directional [Customer]->[Order]
Bidirectional [Customer]<->[Order]
Aggregation [Customer]+-[Order] or [Customer]<>-[Order]
Composition [Customer]++-[Order]
Inheritance [Customer]^[Cool Customer], [Customer]^[Uncool Customer]
Dependencies [Customer]uses-.->[PaymentStrategy]
Cardinality [Customer]<1-1..2>[Address]
Labels [Person]customer-billingAddress[Address]
Notes [Person]-[Address],[Address]-[note: Value Object]
Full Class [Customer|Forename;Surname;Email|Save()]
Splash of Colour[Customer{bg:orange}]<>1->*[Order{bg:green}]

Diagram Control

Scaling to 75% size https://yuml.me/diagram/scale:75/class/[Customer]+->[Order]
Scruffy with scaling to 125% size https://yuml.me/diagram/scruffy;scale:125/class/[Customer]+->[Order]
Direction: Force Left-Right https://yuml.me/diagram/dir:lr/class/[Customer]+->[Order]
Direction: Force Top-Down https://yuml.me/diagram/dir:td/class/[Customer]+->[Order]
Jpeg Images: Get Jpeg images rather than PNG https://yuml.me/diagram/class/[Customer]+->[Order].jpg
PDF: Get PDF files rather than PNG images https://yuml.me/diagram/class/[Customer]+->[Order].pdf