UML Diagram Creator

A free, text-based UML diagram creator with export functionality. Create sequence and class diagrams using simple syntax.

Features

Core Features

• Text-based editing - Write diagrams using simple, intuitive syntax with syntax highlighting
• Real-time preview - See your diagram update as you type
• Multiple diagram types - Support for sequence and class diagrams
• Control structures - Loops, conditionals (if/else), optional flows, and parallel execution in sequence diagrams
• Line numbers - Professional code editor with line numbers and dark theme

Export & Sharing

• Multiple export formats - Download as SVG, PNG, PDF, or .uml files
• Import/Export - Save and load your diagrams as .uml files
• Copy as Markdown - Embed diagrams in documentation with one click
• Shareable links - Generate URLs to share diagrams with others
• Local storage - Save diagrams in your browser (no account needed)

Advanced Features

• Undo/Redo - Full history support (Ctrl+Z/Ctrl+Y)
• Color themes - 6 beautiful color schemes (Default Blue, Purple Dream, Fresh Green, Warm Orange, Dark Mode, Soft Pastel)
• Zoom controls - Scale diagrams from 50% to 200%
• Template library - 9 example templates to get started quickly
• Keyboard shortcuts - Efficient workflow with hotkeys
• No account required - Everything runs in your browser, completely private

Getting Started

Installation

npm install

Development

npm run dev

Build

npm run build

Preview Production Build

npm run preview

Syntax Examples

Sequence Diagram

sequence:
  User -> Server: Login Request
  Server -> Database: Validate Credentials
  Database --> Server: User Data
  Server --> User: Login Success

Sequence Diagram with Conditionals

sequence:
  User -> Server: Login
  alt [valid credentials]
    Server -> Database: Get User
    Database --> Server: User Data
    Server --> User: Success
  else [invalid]
    Server --> User: Failed
  end

Sequence Diagram with Loops

sequence:
  User -> Server: Get Items
  loop [for each item]
    Server -> Database: Query Item
    Database --> Server: Item Data
  end
  Server --> User: All Items

Class Diagram

class:
  Shape {
    #color: string
    #x: int
    #y: int
    +draw()
    +getArea()
  }
  Circle extends Shape {
    -radius: double
    +draw()
    +getArea()
  }
  Rectangle extends Shape {
    -width: double
    -height: double
    +draw()
    +getArea()
  }
  Canvas has Shape {
    +shapes: List
    +addShape()
  }
  Window owns Canvas {
    +title: string
    +show()
  }

Shows: inheritance (extends), aggregation (has), composition (owns), and all visibility modifiers (+, -, #).

Syntax Guide

Sequence Diagrams

Basic Messages (UML 2.5 Standard)

• Start with sequence:
• Solid arrow -> = Synchronous call/request (one object calling another)
• Dotted arrow --> = Return/response message (returning data or acknowledgment)
• Format: From -> To: Message

Example:

Client -> Server: Login Request (solid = call)
Server --> Client: Success Response (dotted = return)

Control Structures

• Loop: loop [condition] ... end - Iteration
• If/Else: alt [condition] ... else [condition] ... end - Conditionals
• Optional: opt [condition] ... end - Optional flow
• Parallel: par ... end - Concurrent execution

Class Diagrams

Members

• Start with class:
• Use + for public members
• Use - for private members
• Use # for protected members
• Format fields as: +fieldName: type
• Format methods as: +methodName()

Relationships (UML 2.5 Standard)

Solid Lines:

• Inheritance: ChildClass extends ParentClass → Solid line with hollow triangle
• Aggregation: Container has Item → Solid line with hollow diamond (weak "has-a")
• Composition: Owner owns Part → Solid line with filled diamond (strong "owns-a")

Dashed Lines:

• Implementation: MyClass implements IInterface → Dashed line with hollow triangle
• Dependency: ClassA uses ClassB → Dashed arrow (temporary usage)

Deployment

This app is ready to deploy to Vercel, Netlify, GitHub Pages, Cloudflare Pages, or any static hosting service.

📖 See DEPLOYMENT.md for complete deployment instructions.

Quick Deploy to Vercel

npx vercel

The app includes a vercel.json configuration file for optimal deployment with proper SPA routing support.

Tech Stack

• Svelte 5
• Vite
• Vanilla JavaScript
• SVG rendering

License

MIT