PlantUML Live Editor
Templates...
Sequence Diagram
Use Case
Class Diagram
Activity Diagram
State Diagram
Component Diagram
ER Diagram
Mind Map
Gantt Chart
SVG
PNG
Share
Download
Editor
Render
1
@startuml skinparam backgroundColor #0d1117 skinparam defaultFontColor #e6edf3 skinparam arrowColor #58a6ff skinparam actorBorderColor #58a6ff skinparam participantBorderColor #58a6ff skinparam participantBackgroundColor #161b22 actor User participant "Frontend" as FE participant "Backend" as BE database "Database" as DB User -> FE: Request page activate FE FE -> BE: API call activate BE BE -> DB: Query data activate DB DB --> BE: Return results deactivate DB BE --> FE: JSON response deactivate BE FE --> User: Render page deactivate FE @enduml
Preview
100%
Your diagram will appear here
Auto-renders as you type
Ready
No diagram loaded
0 saved diagrams
Ctrl
+
Enter
Render
Ctrl
+
S
Download