Skip to main content Svelte Highlight v7.21.1

PlantUML language preview

1. A basic sequence diagram

actors, participants, and message arrows
horizon-dark
@startuml
' a simple sequence diagram
actor User
participant "Web Server" as Web
database DB

User -> Web : request page
Web --> DB : query
DB --> Web : rows
Web --> User : 200 OK

note right of Web #lightblue
  cache miss
end note
@enduml
atom-one-dark
@startuml
' a simple sequence diagram
actor User
participant "Web Server" as Web
database DB

User -> Web : request page
Web --> DB : query
DB --> Web : rows
Web --> User : 200 OK

note right of Web #lightblue
  cache miss
end note
@enduml
github-dark
@startuml
' a simple sequence diagram
actor User
participant "Web Server" as Web
database DB

User -> Web : request page
Web --> DB : query
DB --> Web : rows
Web --> User : 200 OK

note right of Web #lightblue
  cache miss
end note
@enduml
dracula
@startuml
' a simple sequence diagram
actor User
participant "Web Server" as Web
database DB

User -> Web : request page
Web --> DB : query
DB --> Web : rows
Web --> User : 200 OK

note right of Web #lightblue
  cache miss
end note
@enduml
nord
@startuml
' a simple sequence diagram
actor User
participant "Web Server" as Web
database DB

User -> Web : request page
Web --> DB : query
DB --> Web : rows
Web --> User : 200 OK

note right of Web #lightblue
  cache miss
end note
@enduml
github
@startuml
' a simple sequence diagram
actor User
participant "Web Server" as Web
database DB

User -> Web : request page
Web --> DB : query
DB --> Web : rows
Web --> User : 200 OK

note right of Web #lightblue
  cache miss
end note
@enduml

2. A class diagram

classes, interfaces, and relationship arrows
horizon-dark
@startuml
interface Shape {
  +area(): double
}

class Circle <<final>> {
  -radius: double
  +area(): double
}

class Square {
  -side: double
  +area(): double
}

Shape <|.. Circle
Shape <|.. Square
@enduml
atom-one-dark
@startuml
interface Shape {
  +area(): double
}

class Circle <<final>> {
  -radius: double
  +area(): double
}

class Square {
  -side: double
  +area(): double
}

Shape <|.. Circle
Shape <|.. Square
@enduml
github-dark
@startuml
interface Shape {
  +area(): double
}

class Circle <<final>> {
  -radius: double
  +area(): double
}

class Square {
  -side: double
  +area(): double
}

Shape <|.. Circle
Shape <|.. Square
@enduml
dracula
@startuml
interface Shape {
  +area(): double
}

class Circle <<final>> {
  -radius: double
  +area(): double
}

class Square {
  -side: double
  +area(): double
}

Shape <|.. Circle
Shape <|.. Square
@enduml
nord
@startuml
interface Shape {
  +area(): double
}

class Circle <<final>> {
  -radius: double
  +area(): double
}

class Square {
  -side: double
  +area(): double
}

Shape <|.. Circle
Shape <|.. Square
@enduml
github
@startuml
interface Shape {
  +area(): double
}

class Circle <<final>> {
  -radius: double
  +area(): double
}

class Square {
  -side: double
  +area(): double
}

Shape <|.. Circle
Shape <|.. Square
@enduml

3. A state diagram

state markers and transitions
horizon-dark
@startuml
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> [*] : stop
@enduml
atom-one-dark
@startuml
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> [*] : stop
@enduml
github-dark
@startuml
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> [*] : stop
@enduml
dracula
@startuml
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> [*] : stop
@enduml
nord
@startuml
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> [*] : stop
@enduml
github
@startuml
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> [*] : stop
@enduml