PlantUML diagrams

In order to render diagrams in the TYPO3 documentation, PlantUML is integrated into the rendering process.

Activity diagram

(*) --> "ClickServlet.handleRequest()" --> "new Page" if "Page.onSecurityCheck" then ->[true] "Page.onInit()" if "isForward?" then ->[no] "Process controls" if "continue processing?" then -->[yes] ===RENDERING=== else -->[no] ===REDIRECT_CHECK=== endif else -->[yes] ===RENDERING=== endif if "is Post?" then -->[yes] "Page.onPost()" --> "Page.onRender()" as render --> ===REDIRECT_CHECK=== else -->[no] "Page.onGet()" --> render endif else -->[false] ===REDIRECT_CHECK=== endif if "Do redirect?" then ->[yes] "redirect request" --> ==BEFORE_DESTROY=== else if "Do Forward?" then -left->[yes] "Forward request" --> ==BEFORE_DESTROY=== else -right->[no] "Render page template" --> ==BEFORE_DESTROY=== endif endif --> "Page.onDestroy()" -->(*) 

..  uml::

    (*) --> "ClickServlet.handleRequest()"
    --> "new Page"

    if "Page.onSecurityCheck" then
        ->[true] "Page.onInit()"

        if "isForward?" then
            ->[no] "Process controls"

            if "continue processing?" then
                -->[yes] ===RENDERING===
            else
                -->[no] ===REDIRECT_CHECK===
            endif
        else
            -->[yes] ===RENDERING===
        endif

        if "is Post?" then
            -->[yes] "Page.onPost()"
            --> "Page.onRender()" as render
            --> ===REDIRECT_CHECK===
        else
            -->[no] "Page.onGet()"
            --> render
        endif
    else
        -->[false] ===REDIRECT_CHECK===
    endif

    if "Do redirect?" then
        ->[yes] "redirect request"
        --> ==BEFORE_DESTROY===
    else
        if "Do Forward?" then
            -left->[yes] "Forward request"
            --> ==BEFORE_DESTROY===
        else
            -right->[no] "Render page template"
            --> ==BEFORE_DESTROY===
        endif
    endif

    --> "Page.onDestroy()"
    -->(*)

Docs: https://plantuml.com/activity-diagram-legacy

Class diagram

class Foo1 { You can use several lines .. as you want and group == things together. __ You can have as many groups as you want -- End of class } class User { .. Simple Getter .. + getName() + getAddress() .. Some setter .. + setName() __ private data __ int age -- encrypted -- String password } 

..  uml::

    class Foo1 {
        You can use
        several lines
        ..
        as you want
        and group
        ==
        things together.
        __
        You can have as many groups
        as you want
        --
        End of class
    }

    class User {
        ..  Simple Getter ..
        + getName()
        + getAddress()
        ..  Some setter ..
        + setName()
        __ private data __
        int age
        -- encrypted --
        String password
    }

Docs: https://plantuml.com/class-diagram

Component diagram

package "Some Group" { HTTP - [First Component] [Another Component] } node "Other Groups" { FTP - [Second Component] [First Component] --> FTP } cloud { [Example 1] } database "MySql" { folder "This is my folder" { [Folder 3] } frame "Foo" { [Frame 4] } } [Another Component] --> [Example 1] [Example 1] --> [Folder 3] [Folder 3] --> [Frame 4] 

..  uml::

    package "Some Group" {
        HTTP - [First Component]
        [Another Component]
    }

    node "Other Groups" {
        FTP - [Second Component]
        [First Component] --> FTP
    }

    cloud {
        [Example 1]
    }

    database "MySql" {
        folder "This is my folder" {
            [Folder 3]
        }
        frame "Foo" {
            [Frame 4]
        }
    }

    [Another Component] --> [Example 1]
    [Example 1] --> [Folder 3]
    [Folder 3] --> [Frame 4]

Docs: https://plantuml.com/component-diagram

Deployment diagram

artifact Foo1 { folder Foo2 } folder Foo3 { artifact Foo4 } frame Foo5 { database Foo6 } cloud vpc { node ec2 { stack stack } } 

..  uml::

    artifact Foo1 {
        folder Foo2
    }

    folder Foo3 {
        artifact Foo4
    }

    frame Foo5 {
        database Foo6
    }

    cloud vpc {
        node ec2 {
            stack stack
        }
    }

Docs: https://plantuml.com/deployment-diagram

Icons

There are two ways to integrate icons into your diagrams: Either by using the supplied PlantUML Standard Library, which comes with a suitable set of symbols, or by using remote font sets. The standard library can be used for offline rendering, while the remote font sets always contain the latest symbols.

Standard Library

The PlantUML Standard Library contains dumps of various well-known third-party font sets such as Font Awesome (v4 and v5), Devicon, etc. The available icons can best be searched by checking out the project repository with the release date of PlantUML v2018.13, which is used in the current rendering process of the TYPO3 documentation.

!include <tupadr3/common> !include <tupadr3/devicons/mysql> !include <tupadr3/devicons/nginx> !include <tupadr3/devicons/php> !include <tupadr3/devicons/redis> !include <tupadr3/font-awesome-5/typo3> !include <cloudinsight/elasticsearch> !include <cloudinsight/haproxy> skinparam defaultTextAlignment center rectangle "<$elasticsearch>\nElastic\nSearch" as elastic rectangle "<$haproxy>\nHAProxy" as haproxy DEV_MYSQL(mysql,Mysql,database) DEV_NGINX(nginx,Nginx,rectangle) DEV_NGINX(nginx2,Nginx,rectangle) DEV_PHP(php,PHP + TYPO3,rectangle) DEV_PHP(php2,PHP + TYPO3,rectangle) DEV_REDIS(redis,Redis,database) FA5_TYPO3(typo3,TYPO3\nShared,rectangle,#f49700) haproxy <--> nginx haproxy <--> nginx2 nginx <--> php nginx2 <--> php2 php <--> typo3 php <--> redis php <--> mysql php <--> elastic php2 <--> typo3 php2 <--> redis php2 <--> mysql php2 <--> elastic 

..  uml::

    !include <tupadr3/common>
    !include <tupadr3/devicons/mysql>
    !include <tupadr3/devicons/nginx>
    !include <tupadr3/devicons/php>
    !include <tupadr3/devicons/redis>
    !include <tupadr3/font-awesome-5/typo3>
    !include <cloudinsight/elasticsearch>
    !include <cloudinsight/haproxy>

    skinparam defaultTextAlignment center

    rectangle "<$elasticsearch>\nElastic\nSearch" as elastic
    rectangle "<$haproxy>\nHAProxy" as haproxy

    DEV_MYSQL(mysql,Mysql,database)
    DEV_NGINX(nginx,Nginx,rectangle)
    DEV_NGINX(nginx2,Nginx,rectangle)
    DEV_PHP(php,PHP + TYPO3,rectangle)
    DEV_PHP(php2,PHP + TYPO3,rectangle)
    DEV_REDIS(redis,Redis,database)

    FA5_TYPO3(typo3,TYPO3\nShared,rectangle,#f49700)

    haproxy <--> nginx
    haproxy <--> nginx2
    nginx <--> php
    nginx2 <--> php2
    php <--> typo3
    php <--> redis
    php <--> mysql
    php <--> elastic
    php2 <--> typo3
    php2 <--> redis
    php2 <--> mysql
    php2 <--> elastic

Remote font sets

Note

Including icons this way requires an online connection during the rendering process.

The latest icons can be integrated directly via remote url.

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.1.0 !includeurl ICONURL/common.puml !includeurl ICONURL/devicons/typo3.puml DEV_TYPO3(typo3,"TYPO3",participant,orange) 

..  uml::

    !define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.1.0
    !includeurl ICONURL/common.puml
    !includeurl ICONURL/devicons/typo3.puml

    DEV_TYPO3(typo3,"TYPO3",participant,orange)

Docs: https://plantuml.com/stdlib

Maths

:<math>int_0^1f(x)dx</math>; :<math>x^2+y_1+z_12^34</math>; note right Try also <math>d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h</math> <latex>P(y|\mathbf{x}) \mbox{ or } f(\mathbf{x})+\epsilon</latex> end note 

..  uml::

    :<math>int_0^1f(x)dx</math>;
    :<math>x^2+y_1+z_12^34</math>;
    note right
    Try also
    <math>d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h</math>
    <latex>P(y|\mathbf{x}) \mbox{ or } f(\mathbf{x})+\epsilon</latex>
    end note

Docs: https://plantuml.com/ascii-math

Misc

title My title header My header footer My footer actor Bob [[http://plantuml.com/sequence]] actor "This is [[http://plantuml.com/sequence Alice]] actor" as Alice Bob -> Alice [[http://plantuml.com/start]] : hello Alice -> Bob : hello with [[http://plantuml.com/start{Tooltip for message} some link]] note left of Bob You can use [[http://plantuml.com/start links in notes]] also. end note 

..  uml::

    title My title
    header My header
    footer My footer

    actor Bob [[http://plantuml.com/sequence]]
    actor "This is [[http://plantuml.com/sequence Alice]] actor" as Alice
    Bob -> Alice [[http://plantuml.com/start]] : hello
    Alice -> Bob : hello with [[http://plantuml.com/start{Tooltip for message} some link]]
    note left of Bob
    You can use [[http://plantuml.com/start links in notes]] also.
    end note

Docs: https://plantuml.com/link | https://plantuml.com/sequence-diagram

Object diagram

object Object01 { name = "Dummy" id = 123 } 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 

..  uml::

    object Object01 {
        name = "Dummy"
        id = 123
    }
    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

Docs: https://plantuml.com/object-diagram

Sequence diagram

== Initialization == Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response == Repetition == Alice -> Bob: Another authentication Request Alice <-- Bob: another authentication Response 

..  uml::

    == Initialization ==

    Alice -> Bob: Authentication Request
    Bob --> Alice: Authentication Response

    == Repetition ==

    Alice -> Bob: Another authentication Request
    Alice <-- Bob: another authentication Response

Docs: https://plantuml.com/sequence-diagram

State diagram

[*] --> NotShooting state NotShooting { [*] --> Idle Idle --> Configuring : EvConfig Configuring --> Idle : EvConfig } state Configuring { [*] --> NewValueSelection NewValueSelection --> NewValuePreview : EvNewValue NewValuePreview --> NewValueSelection : EvNewValueRejected NewValuePreview --> NewValueSelection : EvNewValueSaved state NewValuePreview { State1 -> State2 } } 

..  uml::

    [*] --> NotShooting

    state NotShooting {
        [*] --> Idle
        Idle --> Configuring : EvConfig
        Configuring --> Idle : EvConfig
    }

    state Configuring {
        [*] --> NewValueSelection
        NewValueSelection --> NewValuePreview : EvNewValue
        NewValuePreview --> NewValueSelection : EvNewValueRejected
        NewValuePreview --> NewValueSelection : EvNewValueSaved

        state NewValuePreview {
            State1 -> State2
        }
    }

Docs: https://plantuml.com/state-diagram

Timing diagram

robust "Web Browser" as WB concise "Web User" as WU WB is Initializing WU is Absent @WB 0 is idle +200 is Processing +100 is Waiting WB@0 <-> @50 : {50 ms lag} @WU 0 is Waiting +500 is ok @200 <-> @+150 : {150 ms} 

..  uml::

    robust "Web Browser" as WB
    concise "Web User" as WU

    WB is Initializing
    WU is Absent

    @WB
    0 is idle
    +200 is Processing
    +100 is Waiting
    WB@0 <-> @50 : {50 ms lag}

    @WU
    0 is Waiting
    +500 is ok
    @200 <-> @+150 : {150 ms}

Docs: https://plantuml.com/timing-diagram

Use Case diagram

left to right direction skinparam packageStyle rectangle actor customer actor clerk rectangle checkout { customer -- (checkout) (checkout) .> (payment) : include (help) .> (checkout) : extends (checkout) -- clerk } 

..  uml::

    left to right direction
    skinparam packageStyle rectangle

    actor customer
    actor clerk
    rectangle checkout {
        customer -- (checkout)
        (checkout) .> (payment) : include
        (help) .> (checkout) : extends
        (checkout) -- clerk
    }

Docs: https://plantuml.com/use-case-diagram