GitLab 之 PlantUML 的配置及使用

本文轉載自查看原文 2020-09-24 16:28 902 GitLab

轉載自：https://cloud.tencent.com/developer/article/1010617

1、PlantUML介紹

UML 統一建模語言是一個通用的可視化建模語言，用於對軟件進行描述、可視化處理、構造和建立軟件系統制品的文檔。PlantUML 是一個開源項目，支持快速繪制時序圖、流程圖、活動圖、狀態圖、用例圖、類圖等等，開發人員通過簡單直觀的語言來定義這些示意圖。以前我們要繪制以上各圖時，一般我們使用可視化工具 visio , rose 等工具，會經常為了布局文字排版，搞的焦頭爛額，有了 PlantUML 一切問題都迎刃而解，我們只需要用文字表達出要繪制的圖的內容，然后直接生成圖片。

2、環境、軟件准備

本次演示環境，我是在虛擬機Linux Centos7上操作，以下是安裝的軟件及版本：

Docker：version 1.12.6
Git：version 2.10.1
GitLab： GitLab Community Edition 9.1.4
PlantUML Server：v2017.11

注意：GitLab 對 PlantUML 的支持版本必須 >= 8.16，PlantUML Server 安裝這里我們選擇 Docker 安裝，這里 GitLab、Git、Docker 的安裝忽略，着重講一下如何在 GitLab 上使用 PlantUML 繪制各種圖。

3、PlantUML Server 安裝及 GitLab 配置

安裝要求：

jre / jdk 版本 >= 1.6
maven 版本 >= 3.0.2

啟動 PlantUML Server 服務，這里有三種方式啟動服務：

1、使用 mvn jetty 啟動服務

$ sudo yum install graphviz openjdk-7-jdk git-core maven
$ git clone https://github.com/plantuml/plantuml-server.git
$ cd plantuml-server
$ mvn package
$ mvn jetty:run #默認是8080，如果端口已占用，使用 mvn jetty:run -Djetty.port=9999 修改端口

2、使用 docker 啟動服務

2.1 使用官方 plantuml/plantuml-server 鏡像啟動

我們可以選擇 jetty 或者 tomcat 容器來啟動服務
$ docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
$ docker run -d -p 8080:8080 plantuml/plantuml-server:tomcat

2.2 自己構建 plantuml-server 鏡像啟動

$ git clone https://github.com/plantuml/plantuml-server.git
$ cd plantuml-server
$ docker image build -t plantuml-server . 
$ docker run -d -p 8080:8080 plantuml-server

3、使用 maven + tomcat 手動配置

$ sudo apt-get install graphviz openjdk-7-jdk git-core maven tomcat7
$ git clone https://github.com/plantuml/plantuml-server.git
$ cd plantuml-server
$ mvn package
$ sudo cp target/plantuml.war /var/lib/tomcat7/webapps/plantuml.war
$ sudo chown tomcat7:tomcat7 /var/lib/tomcat7/webapps/plantuml.war
$ sudo service tomcat7 restart

服務啟動之后，PlantUML Server 監聽http://localhost:8080/plantuml，注意：上邊2.1服務啟動完成后，監聽http://localhost:8080。

啟動完成后，需要在 GitLab 上配置開啟 PlantUML，管理員登錄 -> Admin Area -> Settings，復選框選中 Enable PlantUML，輸入 PlantUML URL（就是剛剛啟動的 PlantUML Server 服務監聽地址）。好了現在可以開始 PlantUML 之旅了。

4、實例 Demo

這里我們使用 Markdown 代碼塊的方式展示，只需要在 .md 文件中，按照 PlantUML 語法格式輸入，在 GitLab上點擊 Preview 即可查看效果，它是以直接生成圖片的方式，通過上邊 PlantUML Server 服務生成圖片，並提供圖片訪問，非常方便直觀。

```plantuml
@startuml
Tomcat -> GitLab: Hello, my name is Tomcat
GitLab -> Tomcat: Hello, my name is GitLab
@enduml
 ```

說明：這是一個最簡單的示例，PlantUML 代碼段使用 “`plantuml 作為閉合表示為 PlantUML 代碼段，@startuml 和 @enduml 為標准的 PlantUML 語法開始、結束標記，但是在 GiltLab 中該標記可以不寫，也是可以識別的，在其他工具里面寫最好帶上吧。

4.1 時序圖

4.1.1 時序圖-基本-1

```plantuml
@startuml
title 時序圖-基本-1

Tomcat -> GitLab: Hello, my name is Tomcat
GitLab -> Tomcat: Hello, my name is GitLab

Tomcat -> GitLab: Nice to meet you.
Tomcat <-- GitLab: Nice to meet you too.
@enduml
 ```

4.1.2 時序圖-擴展-2

```plantuml
@startuml
title 時序圖-擴展-2

actor 用戶
participant 參與者1 #yellow
participant "我的名字有點長\n參與者2" as p2

用戶 -> 參與者1: http request
參與者1 -> 用戶: http response
用戶 -> p2: authentication request
用戶 <-- p2: authentication response
用戶 -> 用戶: send message to myself.
@enduml
 ```

4.1.3 時序圖-擴展-3

```plantuml
@startuml
title 時序圖-擴展-3

actor 用戶 #red
participant 參與者1 #yellow
participant 參與者2 #yellow
participant "我的名字有點長\n參與者3" as p3 #99FF99

autonumber
用戶 -> 參與者1: This is message1
note left: This is left node message 
參與者1 --> 參與者2: This is message2

... Please wait 5s ...
參與者2 --> 參與者1: This is message3
note right: This is right node message
參與者1 -> 用戶: This is message4

用戶 -[#0000FF]> 參與者2: This is message5
用戶 <-[#0000FF]- 參與者2: This is message6

== This is  stage 1 ==
autonumber 10
用戶 ->> p3: This is message10
note left of 用戶
This is <color #118888>HTML</color> note
This is **bold**
This is //italics//
This is ""monospaced""
This is --stroked --
This is __underlined__
This is ~~waved~~
endnote

用戶 <<-- p3: This is message11
note right of p3 #aqua
this is right note of p3
endnote
note over p3: This is note over p3

用戶 -> 用戶: This is message 12 to myself\n but it is too long.

== This is stage 2 ==
autonumber 20 10
用戶 -> 參與者1: This is message20
hnote over 用戶: This is hnote message
參與者1 -> 用戶: This is message30
rnote over 參與者1
This is rnote message_1
This is rnote message_2
endrnote

== This is stage 3 ==
autonumber
participant "參與者4" as p4
ref over 用戶: This is ref message
用戶 -> p3: This is message1
activate p3
p3 -> p4: This is activate message
activate p4
||50||
ref over p4: This is ref message p4
p4 --> p3: This is deactivate message
deactivate p4
p3 --> 用戶: This is message4
deactivate p3
@enduml
 ```

4.2 流程圖

4.2.1 流程圖-基本-1

```plantuml
@startuml
title 流程圖-基本-1

start
:Hello world;
:This is GitLab **PlantUML Activity** Demo;
end
@enduml
 ```

4.2.2 流程圖-擴展-2

```plantuml
@startuml
title 流程圖-擴展-2

start
:Param;
-> This is arrows message;
floating note left: This is floating note left
if (condition A) then (yes)
    :Do something for yes A|
    if (condition B) then (yes)
        :Do something for yes B>
    elseif (condition C) then (yes)
        :Do something for yes C<
        stop
    else (nothing)
        :Do something for nothing/
    endif
else (no)
    :Do something for no A;
    floating note right: This is floating note right
endif

while (condition D?)
:Do something E}
:Do something F]
endwhile
end
@enduml
 ```

4.2.3 流程圖-擴展-3

```plantuml
@startuml
title 流程圖-擴展-3

start
:Param;
-> This is arrows message;
note left
This is note left with <color #FF0000>HTML</color>
This is Param note
end note
if (condition A) then (true)
    -[#black,dashed]->
    :Do something for yes A;
    if (condition B) then (yes)
        -[#000000]->
        :Do something for yes B;
    else
        -[#green,bold]->
        if (condition C) then (yes)
            :Do something for yes C;
        else (no)
            :Do something for no C;
        endif
    endif
else (false)
    -[#blue,dotted]->
    :Do something for no A;
    note right
        This is note right with <color #118888>HTML</color>
        ====
        * This is **bold**
        * This is //italics//
        * This is ""monospaced""
        * This is --stroked --
        * This is __underlined__
        * This is ~~waved~~
    end note
endif

#AAAAAA:Do something D;
repeat
#Green:Do something E;
repeat while (condition F?)
stop
@enduml
 ```

4.3 活動圖

4.3.1 活動圖-基本-1

```plantuml
@startuml
title 活動圖-基本-1

interface "Interface one" as i1
() "interface two" as i2
interface "Interface three" as i3
i1 - [Component]
[Component] ..> i2
[Component] -> i3
@enduml
 ```

4.3.2 活動圖-擴展-2

```plantuml
@startuml
title 活動圖-擴展-2

skinparam componentStyle uml2
[Component one] as c1
component [Component two] as c2
component "This name is too lang\nComponent three" as c3 #green
interface "Interface one" as i1 
() "interface two" as i2 #AAAAAA
i1 - c1
c1 -> c2
c2 -right-> c3
c2 ..> i2: Component to Interface
c3 -up-> up: This is up
c3 -right-> right

note top of c2: This is note top message
note bottom of c1: This is note bottom message
note left of i1
This is note left message with <color #FF0000>HTML</color>
This is **bold**
This is //italics//
This is ""monospaced""
This is --stroked --
This is __underlined__
This is ~~waved~~
endnote
note right of i2
This is note right message
But it is too lang
endnote
@enduml
 ```

4.3.3 活動圖-擴展-3

```plantuml
@startuml
title 活動圖-擴展-3

package "This is package" {
    interface - [package 2]
    [package 2] -> [package 3]
}

node "This is node" {
    [package 3] -- [node 1]
    [node 1] --> [node 2]
}

cloud {
    [node 2] --> [cloud 1]
    [node 2] --> [cloud 2]
    [node 2] --> [cloud 3]
}

database "This is Mysql" {
    folder "This is folder" {
        [folder 1]
        [folder 2]
    }

    frame "This is frame" {
        [frame 1]
    }
}

[cloud 1] --> [folder 1]
[cloud 1] --> [folder 2]
[cloud 2] --> [folder 1]
[cloud 2] --> [folder 2]
[cloud 3] --> [frame 1]
@enduml
 ```

4.4 狀態圖

4.4.1 狀態圖-基本-1

```plantuml
@startuml
title 狀態圖-基本-1

[*] --> State1
State1: This is state message
State1: But it is too lang
State1 -> State2
State2 --> [*]
@enduml
 ```

4.4.2 狀態圖-擴展-2

```plantuml
@startuml
title 狀態圖-擴展-2

scale 350 width
[*] --> State1

state State1 {
    [*] -> State1.1
    State1.1 --> State2: State 1.1 to 2
    State2 --> State1.1: State 2 to 1.1
}

state State2 {
    [*] --> State2.1
    State2.1 --> State2.1.1: State 2.1 to 2.1.1
    State2.1.1 --> State2.1: State 2.1.1 to 2.1

    state State2.1.1 {
        State2.1.1.1 -> State2.1.1.2
    }
    --
    [*] -> State2.2
    State2.2 --> State2.2.1: State 2.2 to 2.2.1
    State2.2.1 --> State2.2: State 2.2.1 to 2.2
}
@enduml
 ```

4.4.3 狀態圖-擴展-3

```plantuml
@startuml
title 狀態圖-擴展-3

state "This is State2 name\nBut it is too lang" as State2
State2: This is State2 message
[*] --> State1
State1 --> State2: Successed
State1 --> [*]: Failed
State2 --> State3: Successed
State2 --> [*]: Failed

state State3 {
    state "This is State3.1 name\nBut it is too lang" as State3.1
    State3.1: This is State3.1 message
    [*] --> State3.1
    State3.1 --> State3.2: State 3.1 to 3.2
    State3.2 --> State3.1: State 3.2 to 3.1
    State3.1 --> State3.1: Failed
}

State3 --> State3: Failed
State3 --> [*]: Successed
State3 --> [*]: Failed

note right of State1: This is note right
note left of State3
This is note right with <color #FF0000>HTML</color>
This is **bold**
This is //italics//
This is ""monospaced""
This is --stroked --
This is __underlined__
This is ~~waved~~
endnote
@enduml
 ```

4.5 用例圖

4.5.1 用例圖-基本-1

```plantuml
@startuml
title 用例圖-基本-1

actor User
actor :I am administrator: as Admin
usecase Case

User --> Case
Admin --> Case
@enduml
 ```

4.5.2 用例圖-擴展-2

```plantuml
@startuml
title 用例圖-擴展-2

actor User
actor :I am administrator: as Admin
usecase Case1 as "This is usecase message
But it is too lang
--
This is -- message
==
This is == message
..introduction..
This is .. message"

User -> (Start)
User --> Case1 : I am User
Admin ---> Case1 : I am administrator
note right of Admin
This is note right with <color #FF0000>HTML</color>
This is **bold**
This is //italics//
This is ""monospaced""
This is --stroked --
This is __underlined__
This is ~~waved~~
endnote
note bottom of Case1: This is note bottom
note "This is note message" as n
(Start) .. n
n .. Case1
@enduml 
 ```

4.5.3 用例圖-擴展-3

```plantuml
@startuml
title 用例圖-擴展-3

left to right direction
skinparam packageStyle rectangle
actor User1 <<用戶>>
actor User2 <<用戶>>
actor :I am administrator: as Admin <<管理員>>

rectangle actions {
    User1 -- (Start)
    User2 -- (Start)
    (Start) --> (action): Begin
    (action) .> (action1): Use
    (action2) .> (action): Extends
    (action) --> (End): End
    (End) -- Admin 
}
@enduml
 ```

4.6 類圖

4.6.1 類圖-基本-1

```plantuml
@startuml
title 類圖-基本-1

Class1 --|> Class2
Class1 -- Class3
Class3 *-- Class4
Class3 -o Class5
Class5 ..|> Class6
Class5 -> Class7
Class7 <.. Class8
Class7 -x Class9
Class9 --+ Class10
Class9 -# Class11
Class11 <--* Class10
@enduml
 ```

4.6.2 類圖-擴展-2

```plantuml
@startuml
title 類圖-擴展-2

Class1 "extends" <|-- Class2: Class2 to Class1
Class1 *-- "Composie" Class3
Class3 <|-- Class4: extends
User -o Class2: User to Class2
Class1 : -Field1
Class1 : #Field2
Class1 : ~Method1()
Class1 : +Method2()

class Class2 {
    int id
    String data
    int getSize()
    void save()
    void update()
    void delete()
    List<String> getList()
}

class Class3 {
    This is Class3 message
    But it is too lang
    ..
    This Class3 .. message
    ==
    This is Class == message
    __
    This is Class __ message
    --
    This is Class -- message
    But it it too lang
}

class User {
    This is class User
    ..get method..
    +getName()
    +getAddress()
    ..set method..
    +setName()
    +setAddress()
    __private field__
    -int age
    -String sex
    --protect field--
    #String phone
    --static field--
    {static} String id
    --abstract method--
    {abstract} void methods()
}

note left of Class1: This is note left
note top of User #red
This is note top of User
But it is too lang
endnote
note right of Class3
This is note with <color #118888>HTML</color>
This is **bold**
This is //italics//
This is ""monospaced""
This is --stroked --
This is __underlined__
This is ~~waved~~
endnote
note "This is note message" as n
Class3 .. n
n ..Class4
@enduml
 ```

4.6.3 類圖-擴展-3

```plantuml
@startuml
title 類圖-擴展-3

abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection

List <|-- AbstractList 
Collection <|-- AbstractCollection
Collection <|- List
AbstractCollection <|-- AbstractList

package java.util {
    AbstractList <|--  ArrayList 
    class ArrayList {
        This is package java.util
    }
}

namespace net.test {
   com.test.ArrayList <|- ArrayList
   class ArrayList {
        This is namespace net.test
    }
}

ArrayList <|-- net.test.ArrayList

namespace com.test {
    AbstractList <|--  ArrayList 
    class ArrayList {
        This is namespace com.test
    }
}

class ArrayList <? extends Element> {
    Object[] elementData
    int size()
}

package "enum and annotation" #DDDDDD {
    enum HttpMethod {
        POST
        GET
        PUT
        DELETE
        PATCH
    }

    annotation Annotation
}
@enduml
 ```

4.7 其他圖

4.7.1 其他圖-基本組件-1

```plantuml
title 其他圖-基本組件-1
@startsalt
{
    [確認按鈕]
    () 單選按鈕(未選中)
    (X) 單選按鈕(選中)
    [] 復選框(未選中)
    [X] 復選框(選中)
    "請輸入電子郵件"
    ^請選擇下拉列表^
}
@endsalt
 ```

4.7.2 其他圖-表格-2

```plantuml
title 其他圖-表格-2
@startsalt
{+
    用戶名: | "請輸入用戶名/郵箱"
    密  碼: | "請輸入密碼"
    [  確認  ] | [  取消  ]
}
@endsalt
 ```

4.7.3 其他圖-表格-3

```plantuml
title 其他圖-表格-3
@startsalt
{#
    column1 | column2 | column3 | column4
    row1 | value1_2 | value1_3 | value1_4
    row2 | value2_2 | value2_3 | value2_4
}
@endsalt
 ```

4.7.4 其他圖-選項卡-4

```plantuml
title 其他圖-選項卡-4
@startsalt
{+
    {/ <b>Tab1  |  Tab2  |  Tab3  |  Tab4 }
    {
        用戶名: | "請輸入用戶名"
        性  別: | { (X) 男 | () 女 }
        愛  好: | { [X]唱歌 | []游泳 | [X]籃球 | []自行車 | []其他 }
        圖  像: | { "            " | [ 上傳 ] }
        地  址: | "            "
        [  確認  ] | [  取消  ]
    }
}
@endsalt
 ```

4.7.5 其他圖-菜單-5

```plantuml
title 其他圖-菜單-5
@startsalt
{+
    {* 文件 | 查找 | 視圖 | 窗口 | 工具 | 幫助
    文件 | 新建 | 打開文件 | 打開文件夾 | - | 保存 | 打印 | 退出}
    {/ <b>Tab1  |  Tab2  |  Tab3  |  Tab4 }
    {
        用戶名: | "請輸入用戶名"
        性  別: | { (X) 男 | () 女 }
        愛  好: | { [X]唱歌 | []游泳 | [X]籃球 | []自行車 | []其他 }
        圖  像: | { "            " | [ 上傳 ] }
        地  址: | "            "
        [  確認  ] | [  取消  ]
    }
}
@endsalt
 ```

4.7.6 其他圖-折疊樹-6

```plantuml
title 其他圖-折疊樹-6
@startsalt
{
    {T
     + Folder
     ++ Folder1
     +++ Folder1.1
     ++++ File1.1.1
     ++ Folder1.2
     +++ File1.2.1
     +++ File1.2.2
     +++ File1.2.3
     ++ Folder2
     +++ File2.1
     +++ Folder2.2
     ++++ File2.2.1
     ++ Folder3
    }
}
@endsalt
 ```

好了，PlantUML 還有其他類型的圖，這里就不一一舉例子了。如果想嘗試的話，除了在 GitLab 上，還可以在 Sublime 安裝插件，或者是在 Eclipse 上安裝插件，再或者是在 IntelliJ IDEA 上安裝插件體驗嘗試吧。

參考資料

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 gitlab之一: gitlab安裝配置使用 PlantUml 使用代碼畫各種圖使用PlantUML畫類圖 GitLab的基礎使用-漢化配置 idea使用PlantUML畫類圖教程 gitlab(六)：gitlab的郵件配置 Eclipse中GitLab的配置和使用入門【git】 git配置多個github(gitlab)同時使用 gitlab的安裝配置與簡單使用 docker下gitlab安裝配置使用