Pro UML Diagram Widget


GitPitch Pro + Lite subscriptions activate powerful Pro syntax shortcuts supported by PITCHME.md markdown that can be used to generate rich visual components - aka. widgets - on any slide. This guide introduces the @uml widget.


UML Widget for DiagramsPolicy

The @uml widget supports the creation of pixel-perfect UML diagrams generated as SVG images from simple text-based descriptions. GitPitch UML diagram support is powered by PlantUML.

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.

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


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

The CSS style… list can make use of the built-in span styles giving you control over the rendering width and height of your UML diagrams.

PLANTUML

Click on the above screenshot to experience UML Disgrams live in a sample GitPitch slide deck.

If you are developing your slide decks using GitPitch Desktop then you should take note of the current caching policy for your UML diagrams.


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 within 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 on the above image to view this slide within 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 within 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 on the above image 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 within 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 on the above image 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 within 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 on the above image 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 within 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 on the above image 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 - Deployment Diagrams

This PlantUML deployment diagram syntax:

@startuml
actor actor
agent agent
artifact artifact
boundary boundary
card card
cloud cloud
component component
control control
database database
entity entity
file file
folder folder
frame frame
interface  interface
node node
package package
queue queue
stack stack
rectangle rectangle
storage storage
@enduml

Used within the following PITCHME.md markdown snippet:

---?color=#E58537;

@uml[span-55 bg-white](src/uml/deployment.puml)

Results in the rendering of the following slide:

PUML

Click on the above image to view this slide within a live GitPitch presentation.

For further details about Deployment 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 within 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 on the above image to view this slide within a live GitPitch presentation.

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


UML Diagrams Layout Controls

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 are wide-and-short there may be times when you need to activate a left-to-right layout for your UML diagrams. Doing so will let you to take better 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


UML Diagrams Caching Policy

Test-based UML diagram descriptions maintained within local repository files are converted to SVG images at runtime. This means whether you are developing or sharing a slide deck there can be a small rendering overhead due to the time taken to convert the text-based description to an image.

To ensure this processing overhead does not unduly interfere with smooth development workflows, in particular within GitPitch Desktop, each generated SVG image is cached for up to 60 seconds.

This means if you make changes to any UML description file you may not see those changes reflected on your slides for up to 60 seconds.