UML Diagram Widget


Activate a GitPitch Paid Plan to unlock UML Diagram Widget support.

This guide describes the @uml widget. This widget is a simple markdown syntax that can be used to render PlantUML diagrams on any slide.

PLANTUML

Click here to experience UML Diagrams live in a sample GitPitch slide deck.

UML Widget Usage Conventions

Each diagram is defined using a simple text-based syntax within a dedicated description file. The exact syntax is defined by the PlantUML Project .

The following conventions for GitPitch UML diagrams are in use:

  1. PlantUML diagram descriptions must be defined in a file within your local repository.
  2. These PlantUML diagram description files must have a .puml extension.
  3. Diagram descriptions must adhere to valid PlantUML syntax.

If you follow these conventions you can then use the following @uml syntax to render a UML diagram on any slide:


@uml[props, style...](path/to/diagram.puml)

The props value accepts a comma-separated list of valid image manipulation properties . The CSS style… list can be used to activate custom styles or build-in styles on the rendered image.

UML Diagrams Image Manipulations

The full set of GitPitch supported inline image manipulation properties can be activated on your PlantUML diagrams. For example, the following markdown snippet:

@uml[width=750, rotate=-25](src/plant/demo.puml)

Results in the rendering of the following slide:

PLANTUML DIAGRAM IMAGE MANIPULATIONS

These manipulations include image sizing, opacity controls, filters, transformations, behaviors, and more. For details see the Inline Image Manipulations Guide .

UML Diagrams Layout Orientation

By default, PlantUML diagram entities are rendered in a top-to-bottom layout. For any diagram with more than a couple of entities this typically results in tall-and-thin UML diagrams. For example:

UML TOP BOTTOM LAYOUT

Given the aspect ratio of GitPitch slides is 16:9 there are times when activating an left-to-right layout for your diagrams makes sense. Doing so lets you to take advantage of the full width of your slides. You can activate a left-to-right layout for any UML diagram by adding a direction instruction directly following the opening @startuml tag, as follows:


@startuml
left to right direction
.
.
.
@enduml

When activated, this same sample UML diagram is rendered as follows:

UML LEFT RIGHT LAYOUT

Learn By Example - Sequence Diagrams

This PlantUML sequence diagram syntax:

@startuml
actor Alice #yellow
participant Bob
Alice->Bob: Auth Request
Bob->Alice: Auth Response
@enduml

Used by the following PITCHME.md markdown snippet:

---?color=#E58537;

@snap[west span-60]
@code[uml rawcode zoom-15](src/uml/sequence.puml)
@snapend

@snap[east span-40]
@uml[span-100 bg-white](src/uml/sequence.puml)
@snapend

@snap[south-west span-100]
@[1,6](Start with opening and closing PlantUML delimiters.)
@[2,3](Declare participants, actors, boundaries, etc.)
@[4,5](Then define the messages between participants.).
@snapend

Results in the rendering of the following slide:

PUML

Click here to view this slide with a live GitPitch presentation.

For further details about Sequence Diagrams syntax see the following PlantUML Guide .

Learn By Example - Activity Diagrams

This PlantUML activity diagram syntax:

@startuml
start
if (Graphviz installed?) then (yes)
  :Process all\ndiagrams;
else (no)
  :Process only
  __sequence__ and __activity__ diagrams;
endif
stop
@enduml

Used by the following PITCHME.md markdown snippet:

---?color=#E58537;

@snap[west span-50]
@code[uml rawcode zoom-09](src/uml/activity.puml)
@snapend

@snap[east span-50]
@uml[span-100 bg-white](src/uml/activity.puml)
@snapend

@snap[south-west span-100]
@[1,14](Start with opening and closing PlantUML delimiters.)
@[3,12](Declare activity diagram start and stop states.)
@[5,7,10](Use *if*, *then*, and *else* keywords to define logical branches.)
@[6,8-9](Then define a process for each branch path in the activity diagram.)
@snapend

Results in the rendering of the following slide:

PUML

Click here to view this slide within a live GitPitch presentation.

For further details about Activity Diagrams syntax see the following PlantUML Guide .

Learn By Example - State Diagrams

This PlantUML state diagram syntax:

@startuml
hide empty description
[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string
State1 -> State2
State2 --> [*]
@enduml

Used by the following PITCHME.md markdown snippet:

---?color=#E58537;

@uml[span-45 bg-white](src/uml/state.puml)

Results in the rendering of the following slide:

PUML

Click here to view this slide within a live GitPitch presentation.

For further details about State Diagrams syntax see the following PlantUML Guide .

Learn By Example - Timing Diagrams

This PlantUML timing diagram syntax:

@startuml
robust "Web Browser" as WB
concise "Web User" as WU
@0
WU is Idle
WB is Idle
@100
WU is Waiting
WB is Processing
@300
WB is Waiting
@enduml

Used by the following PITCHME.md markdown snippet:

---?color=#E58537;

@snap[west span-45]
@code[uml rawcode zoom-11](src/uml/timing.puml)
@snapend

@snap[east span-55]
@uml[span-100 bg-white](src/uml/timing.puml)
@snapend

Results in the rendering of the following slide:

PUML

Click here to view this slide within a live GitPitch presentation.

For further details about Timing Diagrams syntax see the following PlantUML Guide .

Learn By Example - Use Case Diagrams

This PlantUML use-case diagram syntax:

@startuml
:Main Admin: as Admin
(Use the application) as (Use)

User -> (Start)
User --> (Use)

Admin ---> (Use)

note right of Admin : This is an example.

note right of (Use)
  A note can also
  be on several lines
end note

note "Note connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)
@enduml

Used by the following PITCHME.md markdown snippet:

---?color=#E58537;

@uml[span-75 bg-white](src/uml/usecase.puml)

Results in the rendering of the following slide:

PUML

Click here to view this slide within a live GitPitch presentation.

For further details about Use Case Diagrams syntax see the following PlantUML Guide .

Learn By Example - Object Diagrams

This PlantUML object diagram syntax:

@startuml
object Object01
object Object02
object Object03
object Object04
object Object05
object Object06
object Object07
object Object08

Object01 <|-- Object02
Object03 *-- Object04
Object05 o-- "4" Object06
Object07 .. Object08 : some labels
@enduml

Used by the following PITCHME.md markdown snippet:

---?color=#E58537;

@uml[span-90 bg-white](src/uml/object.puml)

Results in the rendering of the following slide:

PUML

Click here to view this slide within a live GitPitch presentation.

For further details about Object Diagrams syntax see the following PlantUML Guide .

More Examples in the PlantUML Docs

PlantUML supports a wide range of diagram types. You can learn further details and see numerous examples of each diagram type in the official PlantUML guides: