GitPitch Pro + Lite subscriptions activate UML Diagrams.
GitPitch UML diagram support is powered by PlantUML. PlantUML is a wonderful library that let’s you create UML Diagrams from simple text-based descriptions. From these simple text-based descriptions, GitPitch generates and renders pixel-perfect UML diagrams as SVG images on your slides.
The following conventions for GitPitch UML diagrams are in use:
If you follow these conventions you can then use the following markdown shortcut 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.
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.
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:
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.
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:
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.
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:
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.
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:
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.
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:
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.
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:
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.
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:
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.
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.