¶02 Draft Notation

Write a sentence.
User has many OrderOne-to-many arrow draws itself.

LLDCanvas's own plain-English diagramming language. No angle brackets, no pipe characters, no boilerplate - just natural words that parse into a live UML class diagram in under a millisecond.

design.draft
Live

Draft Notation

01

Live Diagram

diagram will appear here…

write draft notation on the left  ·  diagram assembles live on the right  ·  loops automatically

8

plain-English keywords

<1ms

parse time

5

UML node types

free to use in Playground

§1 - Vocabulary

Eight keywords. Every UML relationship covered.

Once you know these eight words you can describe any class diagram from memory. Each word maps to a precise UML relationship type - the arrow, arrowhead, and line style are determined by the word you choose.

knows

Field declaration

User knows id, name: String

Adds typed fields to the class box

can

Method declaration

User can login(): bool

Adds methods with optional return types

has many

Association 1..*

User has many Order

One-to-many arrow with multiplicity label

owns

Composition ◆

Order owns OrderItem

Filled diamond - part dies with whole

implements

Realization ▷

List implements Collection

Dashed arrow to the interface

extends

Inheritance ▷

Dog extends Animal

Open triangle - subclass arrow

includes

Aggregation ◇

Team includes Player

Open diamond - part can outlive the whole

uses

Dependency

Controller uses Service

Dashed arrow for temporary usage

§2 - Round-trip

Text - diagram - text. No lock-in.

Draft Notation is not write-only. Any diagram you have built visually - or rearranged on the canvas - can be exported back to its plain-English source at any time.

Draft Notation source

User knows id, name
User has many Order
Order owns OrderItem
export / import

Visual diagram

User
id, name
1..*
Order
OrderItem

Version-control friendly

Plain text diffs cleanly. Paste a Draft Notation diagram into a git commit, Notion, or Slack - readable anywhere without special tools.

Sync with the visual editor

Start in text, switch to drag-and-drop to rearrange nodes, export back to text. No information loss, no lock-in between the two modes.

Speed of thought

Typing "User has many Order" takes two seconds. Dragging a one-to-many association takes ten. Every second matters under interview pressure.

§3 - vs the alternatives

How Draft Notation compares.

Draft Notation

✓ Natural
User has many Order

Natural English - say it exactly how you'd describe it in an interview.

PlantUML

✗ Cryptic
User "1" -- "*" Order

Cryptic syntax requiring special chars, quotes, and multiplicity notation.

Mermaid

✗ Cryptic
User ||--o{ Order : has

Hard-to-read pipe characters. Requires learning a specific symbol vocabulary.

Frequently asked questions

Is Draft Notation the same as PlantUML or Mermaid?

No - and that's the point. PlantUML and Mermaid require you to learn their specific syntax with colons, arrows, and pipe characters. Draft Notation uses natural English: "User has many Order" is the entire line. No brackets, no symbols, no boilerplate.

Does Draft Notation replace the drag-and-drop editor?

No - it's a second entry point. Use Draft Notation when typing is faster than clicking (common during interviews or while explaining a design verbally). Use the visual editor when you want fine-grained layout control. Both stay in sync.

Can I convert a visual diagram back to Draft Notation text?

Yes - Draft Notation round-trips both ways. Any diagram you've built or rearranged visually can be exported back to its plain-English source at any time via Export - Draft Notation.

Do I need to sign in to try Draft Notation?

No - the Playground runs the exact same parser with zero sign-in required. Try the full syntax before deciding whether to create an account.

How fast does it render?

Under a millisecond for parsing, with a 400ms debounce so it does not re-render on every keystroke mid-sentence. In practice it feels instant - not like a build step.