UML Editor DocumentationDokumentasi
Complete guide to using the web-based UML diagram editor
Panduan lengkap menggunakan UML diagram editor berbasis web
Overview
UML Editor is a free, web-based diagram editor with real-time bidirectional sync between code and visual canvas. Write PlantUML-like code on the left, see the diagram update instantly on the right. Or drag and drop elements visually, and the code updates automatically.
Supports 6 diagram types: Class, Activity, Use Case, Sequence, Component, and State diagrams.
UML Editor adalah diagram editor gratis berbasis web dengan sinkronisasi dua arah real-time antara kode dan canvas visual. Tulis kode PlantUML di kiri, diagram langsung update di kanan. Atau drag and drop elemen secara visual, kode otomatis ikut berubah.
Mendukung 6 jenis diagram: Class, Activity, Use Case, Sequence, Component, dan State.
Interface
The editor has three main panels:
- Explorer (left) - File and folder management
- Code (center) - Write diagram code with syntax highlighting
- Diagram (right) - Visual canvas with drag & drop
Each panel can be collapsed/expanded by clicking the hamburger icon (☰) in the panel header. The toolbar at the top provides access to all tools and export options.
Editor memiliki tiga panel utama:
- Explorer (kiri) - Manajemen file dan folder
- Code (tengah) - Tulis kode diagram dengan syntax highlighting
- Diagram (kanan) - Canvas visual dengan drag & drop
Setiap panel bisa di-minimize/maximize dengan klik ikon hamburger (☰) di header panel. Toolbar di atas menyediakan akses ke semua tools dan opsi export.
Quick Start
- Select a diagram type from the dropdown in the toolbar
- Write code in the Code panel, or drag shapes from the toolbar onto the canvas
- The diagram updates automatically as you type
- Drag elements on the canvas to rearrange - the code updates back
- Export your diagram as PNG, SVG, or PDF
- Pilih jenis diagram dari dropdown di toolbar
- Tulis kode di panel Code, atau drag shapes dari toolbar ke canvas
- Diagram otomatis update saat Anda mengetik
- Drag elemen di canvas untuk mengatur posisi - kode ikut berubah
- Export diagram sebagai PNG, SVG, atau PDF
Class Diagram
Define classes with attributes and methods using this syntax:
Definisikan class dengan atribut dan method menggunakan syntax ini:
@startuml
class User {
+id : int
+name : String
+email : String
--
+login() : boolean
+logout() : void
}
class Profile {
+bio : String
+avatar : String
}
User --> Profile : has
User <|-- Admin : extends
@endumlVisibility Markers
| Symbol | Meaning |
|---|---|
+ | Public |
- | Private |
# | Protected |
~ | Package |
Relationship Types
| Syntax | Type |
|---|---|
A --> B | Association |
A <|-- B | Inheritance |
A <|.. B | Implementation |
A *-- B | Composition |
A o-- B | Aggregation |
A ..> B | Dependency |
Activity Diagram / Flowchart
Create flowcharts and activity diagrams:
Buat flowchart dan activity diagram:
Basic Flowchart
@startuml
start
:Input Data;
if (Data valid?) then (yes)
:Save to Database;
:Show Success;
else (no)
:Show Error;
endif
stop
@endumlWith Swimlanes
@startuml
|Customer|
start
:Place Order;
|System|
:Validate Order;
if (Stock available?) then (yes)
:Process Payment;
|Warehouse|
:Ship Order;
|Customer|
:Receive Order;
stop
else (no)
|Customer|
:Out of Stock;
stop
endif
@endumlActivity Syntax Reference
| Syntax | Element |
|---|---|
start | Start node (filled circle) |
stop | End node (bullseye) |
:Action name; | Action/activity box |
if (cond?) then (yes) | Decision diamond |
else (no) | Alternative branch |
endif | End of decision |
|Lane Name| | Swimlane marker |
fork / end fork | Parallel execution |
Use Case Diagram
@startuml
actor User
actor Admin
usecase "Login" as UC1
usecase "View Dashboard" as UC2
usecase "Manage Users" as UC3
User --> UC1
User --> UC2
Admin --> UC3
Admin --|> User
@endumlSequence Diagram
@startuml
participant Client
participant Server
participant Database
Client -> Server : HTTP Request
Server -> Database : Query
Database --> Server : Result
Server --> Client : HTTP Response
@endumlComponent Diagram
@startuml
component "Web App" as WA
component "API Server" as API
component "Database" as DB
WA --> API : REST
API --> DB : SQL
@endumlState Diagram
@startuml
[*] --> Idle
Idle --> Processing : start
Processing --> Completed : success
Processing --> Error : failure
Error --> Idle : retry
Completed --> [*]
@endumlDrag & Drop
- Drag elements on the canvas to reposition them
- Resize elements - select an element, drag the small square handles at the corners/edges
- Double-click an element to edit its name inline
- Alignment guides - blue dashed lines appear when dragging near another element's center or edge
- Grid snapping - elements snap to a 10px grid automatically
- Drag elemen di canvas untuk mengubah posisi
- Resize elemen - pilih elemen, drag handle kotak kecil di pojok/sisi
- Double-click elemen untuk edit nama langsung di canvas
- Garis bantu - garis biru putus-putus muncul saat drag mendekati center/tepi elemen lain
- Grid snap - elemen otomatis snap ke grid 10px
Connections & LinesKoneksi & Garis
Creating ConnectionsMembuat Koneksi
- Hover over an element to see blue connection points (top, bottom, left, right)
- Click and drag from a connection point to another element
- Select the connection type from the dialog
- Hover di atas elemen untuk melihat titik koneksi biru (atas, bawah, kiri, kanan)
- Klik dan drag dari titik koneksi ke elemen lain
- Pilih jenis koneksi dari dialog
Editing LinesMengatur Garis
- Select a line - click on it (turns blue, shows waypoints)
- Add waypoint - click on a selected line to add a new control point
- Move waypoint - drag any blue dot to reshape the line
- Remove waypoint - double-click a blue dot to remove it
- Change endpoint side - drag the pink dots at the start/end to change which side the line connects to
- Waypoint snapping - waypoints automatically snap to horizontal/vertical alignment with neighbors
- Pilih garis - klik garis (berubah biru, muncul titik waypoint)
- Tambah titik - klik pada garis yang sudah dipilih untuk menambah titik kontrol baru
- Geser titik - drag titik biru manapun untuk mengubah bentuk garis
- Hapus titik - double-click titik biru untuk menghapusnya
- Ubah sisi endpoint - drag titik pink di ujung awal/akhir untuk mengubah sisi koneksi
- Snap waypoint - waypoint otomatis snap ke alignment horizontal/vertikal dengan titik tetangga
Lines Behind ElementsGaris di Belakang Elemen
If a line is hidden behind an element:
- Right-click the element → Send to Back (element goes behind lines)
- Edit the line as needed
- Right-click the element → Bring to Front to restore
Jika garis tersembunyi di belakang elemen:
- Klik kanan elemen → Send to Back (elemen pindah ke belakang garis)
- Atur garis sesuka hati
- Klik kanan elemen → Bring to Front untuk mengembalikan
Tidy LinesRapihin Garis
Click Tidy in the toolbar to straighten all lines - snaps waypoints to perfect horizontal/vertical alignment.
Klik Tidy di toolbar untuk meluruskan semua garis - snap waypoint ke alignment horizontal/vertikal sempurna.
Swimlanes
Swimlanes organize activities by actor/department in activity diagrams.
- Define swimlanes with
|Lane Name|syntax in code - Resize lanes - hover on the border between lanes, drag to resize
- Drag between lanes - drag an element from one lane to another, it auto-assigns
Swimlane mengorganisasi aktivitas berdasarkan aktor/departemen di activity diagram.
- Definisikan swimlane dengan syntax
|Nama Lane|di kode - Resize lane - hover di border antar lane, drag untuk resize
- Drag antar lane - drag elemen dari satu lane ke lane lain, otomatis ter-assign
File ManagementManajemen File
The Explorer panel (left sidebar) lets you organize multiple diagrams:
- Create files - click the file icon (+) in the Explorer header
- Create folders - click the folder icon (+)
- Rename - double-click a file/folder name
- Delete - right-click → Delete
- Drag & drop - drag files between folders
- Auto-save - all changes saved to browser localStorage automatically
Panel Explorer (sidebar kiri) untuk mengorganisasi banyak diagram:
- Buat file - klik ikon file (+) di header Explorer
- Buat folder - klik ikon folder (+)
- Rename - double-click nama file/folder
- Hapus - klik kanan → Delete
- Drag & drop - drag file antar folder
- Auto-save - semua perubahan tersimpan otomatis di browser localStorage
Import
- Click the import icon (down arrow) in the Explorer header
- Supports:
.puml,.plantuml,.wsd,.txt,.json - Multiple files can be imported at once
- Diagram type auto-detected from content
- Klik ikon import (panah bawah) di header Explorer
- Support:
.puml,.plantuml,.wsd,.txt,.json - Bisa import banyak file sekaligus
- Jenis diagram otomatis terdeteksi dari konten
Export
- Click the export icon (up arrow) to export the entire project as JSON
- Klik ikon export (panah atas) untuk export seluruh project sebagai JSON
Export DiagramsExport Diagram
| Format | Button | Description |
|---|---|---|
| SVG | Export SVG | Scalable vector graphic - best for web/docs |
| PNG | Export PNG | 2x resolution image - best for presentations |
| Export PDF | Opens print dialog - save as PDF | |
| Clipboard | Copy | Copy diagram as image to clipboard |
| Format | Tombol | Keterangan |
|---|---|---|
| SVG | Export SVG | Grafik vektor - cocok untuk web/dokumen |
| PNG | Export PNG | Gambar resolusi 2x - cocok untuk presentasi |
| Export PDF | Buka dialog print - simpan sebagai PDF | |
| Clipboard | Copy | Copy diagram sebagai gambar ke clipboard |
Tip: UseGunakan Ctrl+Shift+C to quickly copy the diagram to clipboard without clicking the button.untuk copy diagram ke clipboard tanpa klik tombol.
ThemesTema
Toggle between Light and Dark theme by clicking the theme button in the toolbar. Your preference is saved automatically.
Ganti antara tema Light dan Dark dengan klik tombol tema di toolbar. Pilihan Anda tersimpan otomatis.
Keyboard ShortcutsPintasan Keyboard
| Shortcut | Action |
|---|---|
| Ctrl+Z | Undo |
| Ctrl+Y | Redo |
| Ctrl+C | Copy selected element |
| Ctrl+V | Paste element |
| Ctrl+Shift+C | Copy diagram to clipboard as image |
| Delete | Delete selected element/connection |
| Escape | Deselect all |
| Scroll wheel | Zoom in/out |
| Alt+Drag | Pan canvas |
| Middle click+Drag | Pan canvas |
| Pintasan | Aksi |
|---|---|
| Ctrl+Z | Undo (batalkan) |
| Ctrl+Y | Redo (ulangi) |
| Ctrl+C | Copy elemen yang dipilih |
| Ctrl+V | Paste elemen |
| Ctrl+Shift+C | Copy diagram ke clipboard sebagai gambar |
| Delete | Hapus elemen/koneksi yang dipilih |
| Escape | Batalkan pilihan |
| Scroll wheel | Zoom in/out |
| Alt+Drag | Geser canvas |
| Middle click+Drag | Geser canvas |
Mouse ActionsAksi Mouse
| Action | Effect |
|---|---|
| Click element | Select |
| Double-click element | Inline edit name |
| Drag element | Move (with alignment guides) |
| Right-click element | Context menu (Edit, Delete, Duplicate, Send to Back) |
| Click connection | Select (shows waypoints) |
| Click selected connection | Add waypoint at click position |
| Drag waypoint (blue dot) | Move waypoint (auto-snaps to H/V) |
| Double-click waypoint | Remove waypoint |
| Drag endpoint (pink dot) | Change connection side |
| Drag connection point (blue circle on element) | Create new connection |
| Double-click empty canvas | Add new element |
| Click empty canvas | Deselect all |
| Aksi | Efek |
|---|---|
| Klik elemen | Pilih |
| Double-click elemen | Edit nama langsung |
| Drag elemen | Pindahkan (dengan garis bantu) |
| Klik kanan elemen | Menu konteks (Edit, Hapus, Duplikat, Send to Back) |
| Klik koneksi | Pilih (tampilkan waypoint) |
| Klik koneksi yang sudah dipilih | Tambah waypoint di posisi klik |
| Drag waypoint (titik biru) | Geser waypoint (auto-snap H/V) |
| Double-click waypoint | Hapus waypoint |
| Drag endpoint (titik pink) | Ubah sisi koneksi |
| Drag titik koneksi (lingkaran biru di elemen) | Buat koneksi baru |
| Double-click canvas kosong | Tambah elemen baru |
| Klik canvas kosong | Batalkan pilihan |
Tips & Tricks
- Auto Layout - click "Auto Layout" to re-arrange all elements from the code
- Tidy - click "Tidy" to straighten all connection lines without moving elements
- Minimap - click "Map" to toggle a minimap overview in the bottom-right corner
- Format Code - click the format icon in the Code panel header to auto-format the code
- Collapse panels - collapse Explorer and Code panels for a full-screen diagram view
- Swimlane resize - hover on lane borders to resize individual swimlane widths
- Element resize - select an element, then drag the corner/edge handles
- Text wrapping - long action names automatically wrap inside the shape
- Auto Layout - klik "Auto Layout" untuk mengatur ulang semua elemen dari kode
- Tidy - klik "Tidy" untuk meluruskan semua garis koneksi tanpa menggeser elemen
- Minimap - klik "Map" untuk toggle minimap di pojok kanan bawah
- Format Code - klik ikon format di header panel Code untuk auto-format kode
- Minimize panel - minimize panel Explorer dan Code untuk tampilan diagram layar penuh
- Resize swimlane - hover di border antar lane untuk resize lebar swimlane
- Resize elemen - pilih elemen, lalu drag handle di pojok/sisi
- Text wrapping - nama action yang panjang otomatis wrap di dalam shape
Found a bug?Menemukan bug? Please report it! This project is actively being improved. Your feedback helps make it better.Tolong laporkan! Project ini terus dikembangkan. Feedback Anda membantu membuatnya lebih baik.
UML Editor — Open Editor