Диаграммы Схемы Графики

Версия 24.1 от hrapitan на 11.03.2023
Содержание:

Возможности платформы

Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.

На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:

  • Diagram (draw.io) — приложение, позволяющее рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный графический редактор;
  • PlantUML — макрос, позволяющий отображать диаграммы и схемы, описанные языком UML;
  • График (Chart) — расширение, позволяющее строить всевозможные графики и диаграммы на основе табличных данных.

Рассмотрим все эти инструменты по порядку.

Отрисовка диаграмм в визуальном редакторе draw.io

Расширение "Diagram"  позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в статье "В XWiki можно легко создавать диаграммы", рассмотрим его здесь немного подробнее.

Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "Diagram", используя окно выбора макросов, как показано на рисунке:

2023-02-18_11-16-47.png

В поле "Reference" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "Diagram 1".

То же самое можно сделать, перейдя с помощью кнопки 2021-09-24_100802.png "Источник" в режим разметки и вставив код макроса:

{{diagram reference="Diagram 1"/}}

В обоих случаях после сохранения страницы в выбранном нами месте статьи появляется кнопка "Create diagram", при нажатии которой автоматически создается дочерняя вики-страница с обозначением, заданным для ссылки в макросе (в нашем примере "Diagram 1").

2023-02-18_11-33-52_cr.png

Эта страница содержит интерфейс редактора draw.io и позволяет создавать диаграммы и схемы с помощью визуальных инструментов.

После создания и сохранения диаграммы она будет отображена на этой странице, а также на родительской странице со статьей, в которую мы вставили макрос.

2023-02-18_11-48-22-2.png

В дальнейшем при необходимости редактирования диаграммы это можно осуществить на дочерней странице, изменения будут автоматически отражены и в родительской статье.

Вот таким образом мы можем использовать встроенный визуальный редактор диаграмм draw.io.

Работа с диаграммами на языке UML

Кроме рисования в визуальном редакторе draw.io, платформа XWiki позволяет создавать диаграммы, используя язык UML. 

Для этого предназначен специальный макрос "PlantUML", позволяющий отображать диаграммы и схемы, описанные языком UML. Работа с ним чрезвычайно проста: вы помещаете этот макрос в нужную позицию статьи и вносите в него описание диаграммы на языке UML.

2023-02-18_17-41-18.png

То же самое можно сделать, перейдя с помощью кнопки  2021-09-24_100802.png "Источник" в режим разметки и вставив код макроса:

{{plantuml}}
описание диаграммы на языке UML
{{/plantuml}}

Адрес сервера обработки указывать не нужно, он задан в админке XWIKI. Но если вдруг после сохранения статьи визуализация не происходит — проверьте код UML и, если он в порядке, попробуйте указать адрес сервера обработки UML вручную.

Примеры использования PlantUML

Блок-схема

/tmp/plantuml/document%3Axwiki%3AStati.Funktsii-XWiki.Diagrammy-Skhemy-Grafiki.WebHome/-131751917.png
{{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}}

Диаграммы последовательности

{{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}}

Временная диаграмма

{{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}}

Визуализация данных с помощью Chart Extension

Расширение "Chart" позволяет строить всевозможные графики и диаграммы на основе табличных данных. Его компонент, с которым непосредственно работает пользователь — это макрос "График", доступный в меню выбора макросов.

2023-02-19_15-58-06.png

Тоже самое можно сделать, перейдя с помощью кнопки 2021-09-24_100802.png "Источник" в режим разметки и вставив код макроса:

{{chart}} Настройки макроса и параметры графиков {{/chart}}

По умолчанию окно макроса имеет сокращенный набор полей, но с помощью кнопки "Еще" можно раскрыть полный набор настроек.

2023-02-19_16-50-57.png

Перечислим поля макроса.

  1. В поле "Тип" задается тип фигуры, которую требуется построить. Допустимые значения: 
    • line (линии);
    • area (области);
    • bar (столбчатая диаграмма);
    • stackedbar (стековая диаграмма);
    • bar3D (столбчатая 3D-диаграмма);
    • stackedbar3D (стековая 3D-диаграмма);
    • pie (круговая диаграмма);
    • line3D (линии с эффектом 3D);
    • xy_area (область в координатах);
    • xy_line_and_shape (линии в координатах и с точками в узлах);
    • xy_line3D (линии в координатах и с эффектом 3D);
    • xy_step (состояния).
  2. В поле "Содержимое" вносятся данные для визуализации в режиме "inline" (подробности ниже).
  3. В поле "Высота" при желании можно задать высоту графика в пикселях. По умолчанию график будет отрисован в размере 300x400 pix.
  4. В поле "Параметры" вносятся дополнительные настройки для построения графиков. Эта строка содержит список сопоставлений имени параметра со значением. Доступные имена и значения параметров зависят от используемого источника данных (подробности ниже).
  5. В поле "Источник" указывается один из двух типов источника данных  — "inline" и "xdom" (подробности ниже).
  6. В поле "Название" можно задать заголовок для графика/диаграммы.
  7. В поле "Ширина" при желании можно задать ширину графика в пикселях. По умолчанию график будет отрисован в размере 300x400 pix.

Параметры графиков/диаграмм