¶00 - documentation
A plain-English way to write class diagrams. No angle brackets, no drag-and-drop - you describe classes and how they relate, in sentences a teammate could read out loud, and the canvas builds itself.
¶01 - quick start
That's genuinely the whole language. There's no schema to memorize - if you can describe your system out loud, you can already write Draft Notation.
01
Nothing to configure
Any word on its own line becomes a class. No keyword, no boilerplate.
02
knows / can
Write "ClassName knows ..." for fields and "ClassName can ..." for methods.
03
Plain-English verbs
Write a sentence like "User has many Post" - the verb decides the arrow.
04
Instant
Paste it into the Playground and the canvas builds itself.
# Start with your first classUser# Give it fieldsUser knows id, name: String, email: String# Give it behavioursUser can login(), getProfile(): Profile# Describe a relationship - this line alone creates the Post class tooUser has many Post
¶02 - playground
Edit the code on the left - the parsed structure updates on the right in real time. Nothing here is sent anywhere; it's the same parser the editor uses.
¶03 - the details
Any capitalised word on its own line becomes a class - that's the default, so you rarely type class at all. Reach for one of these keywords only when you need something more specific:
Keyword | What it means |
|---|---|
| class | Declare a class - the default, rarely written explicitly |
| interface | Declare an interface (renders with the «interface» stereotype) |
| abstract | Declare an abstract class |
| enum | Declare an enum type |
| note | Add a free-text sticky note to the canvas |
Once a class exists, give it fields with knows, and behaviour with can. Add a type after a colon, and comma-separate as many as you like on one line.
Account knows accountNumber: String, balance: numberAccount can deposit(amount: number), withdraw(amount: number)
Prefix any field or method with a symbol to set its visibility - the same private/protected/public concept from any OOP language:
Public
Anyone can see or call it - the default.
Private
Only this class can see it.
Protected
This class and anything that extends it.
Package
Only classes in the same module/area.
¶04 - the important part
This is the one place UML jargon actually matters, so here's each verb translated into plain English - what it means, not just what it's called.
A stronger, more specific version of the parent. A Dog is a kind of Animal - it gets everything Animal has, plus its own stuff.
Dog is a AnimalPromises to follow a contract. A Dog acts as Trainable - it must implement whatever Trainable requires, without inheriting behaviour from it.
Dog acts as Pet, TrainableStrong, exclusive ownership - the part can't exist without the whole. Delete the Order and its OrderItems go with it.
Order owns OrderItemA loose "contains" relationship - the parts can outlive the whole. A User has many Post, but deleting the user needn't delete the posts.
User has many PostSame idea as "has many", just capped at one - a single optional attachment.
User has one ProfileA generic "contains" relationship when you don't need to specify the count.
Company has EmployeeA light, temporary reliance - one class calls another but doesn't hold a lasting reference to it.
Service uses LoggerTwo classes both know about and call each other.
Client talks to ServerA one-way reference - A knows about B, but B has no idea A exists.
Teacher knows about Student¶05 - see it in context
Three complete systems, written start to finish - a good way to see how the pieces combine once there's more than one relationship on the page.
UserUser knows id, name: String, email: StringUser can login(), getOrders(): Order[]OrderOrder knows id, total: number, status: OrderStatusOrder can place(), cancel()OrderItemOrderItem knows productId, quantity: int, price: numberProductProduct knows id, name: String, price: numberProduct can isAvailable(): booleanenum OrderStatusPENDING, CONFIRMED, SHIPPED, DELIVEREDUser has many OrderOrder owns OrderItemOrder has many Product
¶06 - good to know
Start a line with # to write a comment. Great for sections or notes.
# Payment domainPaymentGateway
Comma-separate targets after any verb - applies to all of them.
Service uses Logger, Database, Cache
List enum values after the name, or on the next line.
enum Color RED, GREEN, BLUE
Prefix with $ for static, or write abstract inside can …
Account can $ getInstance(): Account, abstract withdraw()
Open the Playground and start writing - the diagram builds itself as you type.
Open Playground