Возможности платформы
Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.
На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:
- Diagram (draw.io) — приложение, позволяющее рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный графический редактор;
- PlantUML — макрос, позволяющий отображать диаграммы и схемы, описанные языком UML;
- График (Chart) — расширение, позволяющее строить всевозможные графики и диаграммы на основе табличных данных.
Рассмотрим все эти инструменты по порядку.
Отрисовка диаграмм в визуальном редакторе draw.io
Расширение "Diagram" позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в статье "В XWiki можно легко создавать диаграммы", рассмотрим его здесь немного подробнее.
Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "Diagram", используя окно выбора макросов, как показано на рисунке:
В поле "Reference" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "Diagram 1".
То же самое можно сделать, перейдя с помощью кнопки 
"Источник" в режим разметки и вставив код макроса:
{{diagram reference="Diagram 1"/}}
В обоих случаях после сохранения страницы в выбранном нами месте статьи появляется кнопка "Create diagram", при нажатии которой автоматически создается дочерняя вики-страница с обозначением, заданным для ссылки в макросе (в нашем примере "Diagram 1").
Эта страница содержит интерфейс редактора draw.io и позволяет создавать диаграммы и схемы с помощью визуальных инструментов.
После создания и сохранения диаграммы она будет отображена на этой странице, а также на родительской странице со статьей, в которую мы вставили макрос.
В дальнейшем при необходимости редактирования диаграммы это можно осуществить на дочерней странице, изменения будут автоматически отражены и в родительской статье.
Вот таким образом мы можем использовать встроенный визуальный редактор диаграмм draw.io.
Работа с диаграммами на языке UML
Кроме рисования в визуальном редакторе draw.io, платформа XWiki позволяет создавать диаграммы, используя язык UML.
Для этого предназначен специальный макрос "PlantUML", позволяющий отображать диаграммы и схемы, описанные языком UML. Работа с ним чрезвычайно проста: вы помещаете этот макрос в нужную позицию статьи и вносите в него описание диаграммы на языке UML.
То же самое можно сделать, перейдя с помощью кнопки "Источник" в режим разметки и вставив код макроса:
{{plantuml}}
описание диаграммы на языке UML
{{/plantuml}}
Адрес сервера обработки указывать не нужно, он задан в админке XWIKI. Но если вдруг после сохранения статьи визуализация не происходит — проверьте код UML и, если он в порядке, попробуйте указать адрес сервера обработки UML вручную.
Примеры использования PlantUML
Блок-схема
@startuml
start
:Check eax.me for new posts;
while (There are new posts?) is (Yes);
:Read one post;
:Share;
:Leave comments;
endwhile (No);
stop
@enduml
{{/plantuml}}
Диаграмма состояний
@startuml
[*] -> State1
State1 --> State2 : Succeeded
State1 --> [*] : Aborted
State2 --> State3 : Succeeded
State2 --> [*] : Aborted
state State3 {
state "Accumulate Enough Data" as long1
long1 : Just a test
[*] --> long1
long1 --> long1 : New Data
long1 --> ProcessData : Enough Data
State2 --> [H]: Resume
}
State3 --> State2 : Pause
State2 --> State3[H*]: DeepResume
State3 --> State3 : Failed
State3 --> [*] : Succeeded / Save Result
State3 --> [*] : Aborted
@enduml
{{/plantuml}}
Диаграмма последовательности
@startuml
actor User
participant Nginx
participant Application
database PostgreSQL
autonumber 1
User -> Nginx: GET / HTTP/1.0
Nginx -> Application: GET / HTTP/1.0
Application -> PostgreSQL: SELECT * FROM ...
PostgreSQL --> Application: (A LOT OF DATA)
Application --> Nginx: HTTP/1.0 200 OK
Nginx --> User: HTTP/1.0 200 OK
@enduml
{{/plantuml}}
Временная диаграмма
@startuml
scale 5 as 150 pixels
clock clk with period 1
binary "enable" as en
binary "R/W" as rw
binary "data Valid" as dv
concise "dataBus" as db
concise "address bus" as addr
@6 as :write_beg
@10 as :write_end
@15 as :read_beg
@19 as :read_end
@0
en is low
db is "0x0"
addr is "0x03f"
rw is low
dv is 0
@:write_beg-3
en is high
@:write_beg-2
db is "0xDEADBEEF"
@:write_beg-1
dv is 1
@:write_beg
rw is high
@:write_end
rw is low
dv is low
@:write_end+1
rw is low
db is "0x0"
addr is "0x23"
@12
dv is high
@13
db is "0xFFFF"
@20
en is low
dv is low
@21
db is "0x0"
highlight :write_beg to :write_end #Gold:Write
highlight :read_beg to :read_end #lightBlue:Read
db@:write_beg-1 <-> @:write_end : setup time
db@:write_beg-1 -> addr@:write_end+1 : hold
@enduml
{{/plantuml}}