¶01 · Draft Notation

Sketch it in plain English. Watch the UML draw itself.

No angle brackets, no drag-and-drop. Describe classes, fields, methods and relationships the way you'd say them out loud - Draft Notation parses every keystroke and draws the diagram itself.

< 1ms

render latency

6+

UML constructs

5

relationship types

0

sign-in required

¶02 · How it works

Four instruments, one straight line from prose to diagram.

01

Write in plain English

Describe classes, fields, methods and relationships exactly how you think - no angle brackets, no drag-and-drop.

02

Parser runs instantly

Draft parses your text with a 400 ms debounce, resolves types and relationships, and builds an AST.

03

Canvas renders

The AST is fed to the same rendering engine as the full editor - proper UML 2.x boxes, arrows, and cardinality labels.

04

Sync back to code

Rearrange nodes visually, then hit "Sync to code" to regenerate the Draft source from your updated layout.

¶03Syntax at a glance

Every pattern, one click away.

Click a tab to see how each Draft Notation construct is written. Then try it yourself in the live playground below.

Instant - no build step
Infers arrow types automatically
Bi-directional canvas sync
Full syntax reference
draft-notation.draft
User
User knows id: String
User knows name: String
User knows email: String
User can login()
User can getProfile(): Profile
Class name on its own line. Fields with "knows", methods with "can".

¶04 - Try it live

Edit Draft code on the left - your UML diagram updates in real time. No account needed.

{}
Draft Notation
1

Diagram updates as you type · 400ms debounce

Live UML DiagramClick to view →