¶01 - The Editor
A UML editor that speaks Low-Level Design.
Not a generic diagramming tool with UML bolted on - every node type, arrow style, and design pattern skeleton is built for the specific vocabulary your interviewer expects. Draw the way interviewers think, not the way a project manager thinks.
- levels: List<Level>
- capacity: int
+ getAvailableSpot(): Spot
+ park(vehicle: Vehicle): Ticket
- spots: List<Spot>
+ getFreeSpot(): Spot
5
node types
7
relationship types
23
design patterns
13
class-role stereotypes
§1 - Node types
Five node types. Every UML class diagram need covered.
Each node renders its stereotype in standard UML notation - «interface», «abstract», «enum» - so your diagram communicates the same vocabulary your interviewer uses, without manual formatting.
Standard OOP class with fields and methods
Contract definition with method signatures
Finite set of named constants
Class with unimplemented abstract methods
Annotation or comment anchored to the canvas
§2 - Relationship types
Seven relationship types. Drawn correctly, every time.
The most common mistake in LLD interviews is confusing aggregation and composition, or drawing dependency as a plain arrow. LLDCanvas enforces the correct arrowhead for each relationship - you choose the type, we render the right symbol.
| Relationship | Meaning | Example |
|---|---|---|
Association | A general "uses" link between two classes | Order → Customer |
Aggregation | "Has-a" - the part can outlive the whole | Team ◇→ Player |
Composition | "Owns-a" - the part dies with the whole | House ◆→ Room |
Inheritance | Subclass extends a superclass | Dog ▷ Animal |
Realization | Class implements an interface | List ▷ Collection |
Dependency | Temporary usage between classes | UserService → Email |
Bidirectional | Two-way association | User ↔ Address |
Pro tip:You don't need to memorize the arrowheads. When you draw a connection in LLDCanvas, a tooltip shows the relationship options - select one and the correct symbol renders automatically. This is also how you practice remembering them.
§3 - Design patterns
All 23 Gang-of-Four patterns, pre-wired and interview-ready.
Press Ctrl+K, type the pattern name, and the full class skeleton - with all nodes correctly connected - drops onto your canvas. No more manually drawing the Observer pattern from memory under interview pressure.
Creational
5Structural
7Behavioral
11Looking for a deep-dive on any of these? Browse the revision notes →
§4 - Export formats
Five export formats. Your diagram goes where you go.
Export for a blog post, a PR description, a Notion doc, or a slide deck - whichever format your next audience expects, LLDCanvas has you covered.
PNG
Perfect for slide decks, docs, and Notion pages.
SVG
Scales to any size - ideal for technical blog posts.
PlantUML
Paste into any tool that accepts PlantUML syntax.
Mermaid
Drop straight into GitHub, GitLab, or Notion.
Draft Notation
Round-trip back to plain-English text.
Export is a Pro and Ultimate feature. Free accounts can export as Draft Notation.
§5 - Built for speed
Keyboard-first, drag-to-connect, and blazing fast.
Command palette
Ctrl+K opens pattern search, shape insertion, and quick commands - no menu hunting.
Drag-to-connect
Drag from any port on a node to create a relationship. The correct arrow renders as you drop.
Alignment guides
Smart snapping and alignment guides keep your diagram clean, even on large canvases.
Three canvas themes
Light, dark, and blueprint themes - switch any time without altering your diagram.
Undo / redo
Full history stack. Ctrl+Z / Ctrl+Shift+Z - works the way you expect it to.
Multiple select
Box-select a group of nodes, move them together, or delete them in one action.
Open the editor and draw your first diagram now.
No sign-in required. Saves to your browser. Upgrade later if you want cloud saves, design pattern templates, and export formats.
// Ctrl+K → "Observer"
class EventEmitter {
- listeners: Map
+ subscribe(event, fn)
+ emit(event, data)
}
class EventListener {
+ onEvent(data)
}
Frequently asked questions
Does the editor work offline or without signing in?
Yes - you can open /editor/local and start drawing immediately with no account. Your diagram is saved to localStorage. Sign in if you want cloud saves, sharing, and collaboration.
How are the 23 design patterns inserted?
Through a command palette. Press Ctrl+K (or ⌘K on Mac) inside the editor, search for a pattern by name, and the correct class skeleton drops into your canvas - all nodes pre-connected with the right relationship types.
What does "correct relationship semantics" mean?
A filled diamond (◆) always means composition - the contained object cannot outlive its container. An open diamond (◇) always means aggregation. An open triangle always means inheritance. LLDCanvas never lets you draw an ambiguous arrow that could be misread as any of those - which is the mistake generic diagramming tools all make.
What are class-role stereotypes?
Labels like «entity», «service», «repository», «factory», or «controller» that annotate a class's architectural role. LLDCanvas supports 13 stereotypes rendered in standard UML angle-bracket notation - the same way «interface» is typically shown.
Can I import a diagram from PlantUML or Mermaid?
You can import Draft Notation (our native text format). PlantUML and Mermaid import is on the roadmap.
What happens to my diagram when I export it?
Export renders a pixel-perfect snapshot or the equivalent text syntax - nothing is transmitted to a server. PNG and SVG exports are generated in your browser from the live canvas state.
Related features