Confluence (корпоративная вики-система) и GitLab поддерживают PlantUML-диаграммы: можно описать схему простым текстом, а специальные плагины её отрисуют. Это очень удобно и быстро — можно создавать картинку со схемой, не используя сторонние графические редакторы, только текст. Выглядит это примерно так:
Как и где используется PlantUML
Немного информации с официального сайта. PlantUML — это проект с открытым исходным кодом, позволяющий создавать диаграммы:
Также поддерживаются следующие не UML-диаграммы:
Для создания диаграмм применяется простой и интуитивно понятный язык (смотрите справочное руководство по языку PlantUML). Для примера, на главной страничке сайта PlantUML в нижнем левом поле вы можете отредактировать текст диаграммы и она будет автоматически обновлена в правом нижнем поле.
Отличным решением будет развернуть PlantUML-сервис в собственной сети. Для установки сервера используйте эту инструкцию. После запуска сервера на главной страничке сервиса вы сможете ввести в поле описания диаграммы свой код, например:
@startumlactor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
collections Foo6
Foo1 -> Foo2 : To boundary
Foo1 -> Foo3 : To control
Foo1 -> Foo4 : To entity
Foo1 -> Foo5 : To database
Foo1 -> Foo6 : To collections
@enduml
Затем нажмите кнопку "Отправить" и сервис сгенерирует вам картинку и ссылку, по которой можно увидеть получившуюся схему и добавлять её на любые другие странички. Ссылка будет выглядеть, примерно так:
http://localhost:8080/plantuml/png/JSuz3e0W30NWlQVe1HpyOt1mz0HUe2A32Q49rC7RQqKCu-DhteEiSCI5kOMDpx1Jl3HrO3b8PA-X1nVaa1S6s4bee-GqZS-PzyxAmI7fWm6jmcP-It32bR7qrjHd-aPg6RBanHh636M-9bFQ_hy0tW00x
А сгенерированная картинка выглядит так:
На вики всё ещё проще: достаточно в режиме редактирования вставить плагин "PlantUML Render Macro" и добавить в него код нужной диаграммы.
Допустим, вы уже развернули внутри своей сети сервисы PlantUML и GitLab. Тогда в гитлабе вы сможете использовать диаграммы во внутренней вики, сниппетах и коде. Настроить интеграцию PlantUML и GitLab можно по инструкции.
Для вставки диаграмм используется язык разметки markdown. Сама диаграмма описывается на стандартном языке PlantUML, меняются лишь стартовый и конечный теги: вместо @startuml надо писать ```plantuml, а вместо @enduml надо писать ```. Вставьте код диаграммы в markdown прямо в текст на вики-странице гитлаба и ваш внутренний сервис PlantUML отрисует картинки и схемы при открытии странички. Для сниппетов всё аналогично.
Для вставки диаграмм используется язык разметки markdown. Сама диаграмма описывается на стандартном языке PlantUML, меняются лишь стартовый и конечный теги: вместо @startuml надо писать ```plantuml, а вместо @enduml надо писать ```. Вставьте код диаграммы в markdown прямо в текст на вики-странице гитлаба и ваш внутренний сервис PlantUML отрисует картинки и схемы при открытии странички. Для сниппетов всё аналогично.
На вики гитлаба получится как-то так:
Примеры диаграмм PlantUML
Максимально подробные примеры использования PlantUML вы можете найти на страничках родной документации, которая очень качественно составлена. Давайте посмотрим, как выглядят лишь некоторые диаграммы.
Диаграмма последовательностей используется, чтобы отобразить взаимодействие участников процесса.
Диаграмма последовательностей используется, чтобы отобразить взаимодействие участников процесса.
Пример кода:
@startuml participant User User -> A: DoWork activate A A -> B: << createRequest >> activate B B -> C: DoWork activate C C --> B: WorkDone destroy C B --> A: RequestCreated deactivate B A -> User: Done deactivate A @endumlПример схемы:
Диаграмма прецедентов используется для описания связей между событиями и действующими участниками.
Пример кода:
@startuml
User << Human >>
:Main Database: as MySql << Application >>
(Start) << One Shot >>
(Use the application) as (Use) << Main >>
User -> (Start)
User --> (Use)
MySql --> (Use)
@enduml
Пример схемы:
Диаграмма активностей может использоваться для рисования блок-схем.
Пример кода:
@startuml
:foo1;
-> You can put text on arrows;
if (test) then
-[#blue]->
:foo2;
-[#green,dashed]-> The text can
also be on several lines
and **very** long...;
:foo3;
else
-[#black,dotted]->
:foo4;
endif
-[#gray,bold]->
:foo5;
@enduml
Пример схемы:
Диаграмма компонентов поможет вам изобразить программные компоненты, сервисы и связи между ними. Такие диаграммы могут быть очень полезны для архитекторов ПО.
Пример кода:
@startuml
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]
@enduml
Пример схемы:
Диаграмма состояний отражает последовательность действий и условий переходов между ними. Её очень удобно использовать, например, для описания работы команды специалистов (рабочее workflow).
Пример кода:
@startuml
[*] -up-> First
First -right-> Second
Second --> Third
Third -left-> Last
@enduml
Пример схемы:
Интеллект-карты или mind map — это один из способов представления знаний или результатов обсуждения предметной области в виде связанного графа. Диаграмма связей изображается при этом как древовидная схема с идеями, задачами и понятиями, связанных ветвями с центральным обсуждаемым понятием или проблемой. Такой способ записи позволяет визуализировать ассоциативное мышление мозга и развивать обсуждение центральной проблемы.
Интеллект-карты используются для описания широкого круга задач. Для примера вы можете почитать статью "Mind-map: использование интеллект-карт при составлении тест-планов".
Пример кода:
@startmindmap
* Debian
** Ubuntu
*** Linux Mint
*** Kubuntu
*** Lubuntu
*** KDE Neon
** LMDE
** SolydXK
** SteamOS
** Raspbian with a very long name
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
@endmindmap
Пример схемы:
Диаграммы Ганта позволяют изобразить последовательность выполнения работ по задачам. В том числе, если одна задача зависит от результатов решения другой задачи.
Пример кода:
@startgantt
[Prototype design] lasts 10 days
[Code prototype] lasts 10 days
[Write tests] lasts 5 days
[Code prototype] starts at [Prototype design]'s end
[Write tests] starts at [Code prototype]'s start
@endgantt
Пример схемы:
И, наконец, одна из замечательных возможностей PlantUML — это встроенный подпроект Salt, который позволяет проектировать графические интерфейсы. Возможности прототипирования макетов пользовательского GUI смогут оценить дизайнеры: тут можно создавать схемы диалоговых окон, есть табличная группировка элементов, разделители и дерево элементов, зависимые элементы и вкладки, можно нарисовать меню и таблицы, а также доступны графические иконки для выделения элементов.
Пример кода:
@startuml
salt
{
Just plain text
[This is my button]
() Unchecked radio
(X) Checked radio
[] Unchecked box
[X] Checked box
"Enter text here "
^This is a droplist^
}
@enduml
Пример схемы:
На этом всё, надеюсь, что вы по достоинству оценили огромные возможности PlantUML по созданию качественных схем, диаграмм и макетов из простого текста, а также способы интеграции с вашими сервисами разработки.
