Исходный код вики Диаграммы Схемы Графики

Версия 11.1 от hrapitan на 11.03.2023
Последние авторы
1 {{box cssClass="floatinginfobox" title="**Содержание:**"}}
2 {{toc start="2"/}}
3 {{/box}}
4
5 == **Возможности платформы** ==
6
7 Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.
8
9 На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:
10
11 * **Diagram (draw.io)** — приложение, позволяющее рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный графический редактор;
12 * **PlantUML** — макрос, позволяющий отображать диаграммы и схемы, описанные языком UML;
13 * **График (Chart) **— расширение, позволяющее строить всевозможные графики и диаграммы на основе табличных данных.
14
15 Рассмотрим все эти инструменты по порядку.
16
17 ----
18
19 == **Отрисовка диаграмм в визуальном редакторе draw.io** ==
20
21 Расширение "**Diagram**"  позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в [[статье "В XWiki можно легко создавать диаграммы">>doc:Stati.Metodiki-primeneniia-XWiki.V-XWiki-mozhno-legko-sozdavat-diagrammy.WebHome]], рассмотрим его здесь немного подробнее.
22
23 Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "**Diagram**", используя окно выбора макросов, как показано на рисунке:
24
25
26 [[image:2023-02-18_11-16-47.png]]
27
28
29 В поле "**Reference**" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "(% style="color:#16a085" %)**//Diagram 1//**(%%)".
30
31 То же самое можно сделать, перейдя с помощью кнопки [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса:
32
33 (% bis_skin_checked="1" class="box" %)
34 (((
35 ~{~{diagram reference="Diagram 1"/}}
36 )))
37
38 В обоих случаях после сохранения страницы в выбранном нами месте статьи появляется кнопка "**Create diagram**", при нажатии которой автоматически создается дочерняя вики-страница с обозначением, заданным для ссылки в макросе (в нашем примере "(% style="color:#16a085" %)**//Diagram 1//**(%%)").
39
40
41 [[image:2023-02-18_11-33-52_cr.png]]
42
43
44 Эта страница содержит интерфейс редактора draw.io и позволяет создавать диаграммы и схемы с помощью визуальных инструментов.
45
46 После создания и сохранения диаграммы она будет отображена на этой странице, а также на родительской странице со статьей, в которую мы вставили макрос.
47
48
49 [[image:2023-02-18_11-48-22-2.png]]
50
51
52 В дальнейшем при необходимости редактирования диаграммы это можно осуществить на дочерней странице, изменения будут автоматически отражены и в родительской статье.
53
54 Вот таким образом мы можем использовать встроенный визуальный редактор диаграмм draw.io.
55
56 ----
57
58 == **Работа с диаграммами на языке UML** ==
59
60 Кроме рисования в визуальном редакторе draw.io, платформа XWiki позволяет создавать диаграммы, используя [[язык UML>>url:https://ru.wikipedia.org/wiki/UML]].
61
62 Для этого предназначен специальный макрос "**PlantUML**", позволяющий отображать диаграммы и схемы, описанные языком UML. Работа с ним чрезвычайно проста: вы помещаете этот макрос в нужную позицию статьи и вносите в него описание диаграммы на языке UML.
63
64
65 [[image:2023-02-18_17-41-18.png]]
66
67
68 То же самое можно сделать, перейдя с помощью кнопки  [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса:
69
70 (% bis_skin_checked="1" class="box" %)
71 (((
72 ~{~{plantuml}}
73 //описание диаграммы на языке UML//
74 ~{~{/plantuml}}
75 )))
76
77 Адрес сервера обработки указывать не нужно, он задан в админке XWIKI. Но если вдруг после сохранения статьи визуализация не происходит — проверьте код UML и, если он в порядке, попробуйте указать адрес сервера обработки UML вручную.
78
79 === Примеры использования PlantUML ===
80
81 ==== Блок-схема ====
82
83 {{example}}
84 {{plantuml}}
85
86 @startuml
87
88 start
89
90 :Check eax.me for new posts;
91
92 while (There are new posts?) is (Yes);
93 :Read one post;
94 :Share;
95 :Leave comments;
96 endwhile (No);
97
98 stop
99
100 @enduml
101
102 {{/plantuml}}
103 {{/example}}
104
105
106 ==== Диаграмма состояний ====
107
108 {{example}}
109 {{plantuml}}
110
111 @startuml
112 [*] -> State1
113 State1 --> State2 : Succeeded
114 State1 --> [*] : Aborted
115 State2 --> State3 : Succeeded
116 State2 --> [*] : Aborted
117 state State3 {
118 state "Accumulate Enough Data" as long1
119 long1 : Just a test
120 [*] --> long1
121 long1 --> long1 : New Data
122 long1 --> ProcessData : Enough Data
123 State2 --> [H]: Resume
124 }
125 State3 --> State2 : Pause
126 State2 --> State3[H*]: DeepResume
127 State3 --> State3 : Failed
128 State3 --> [*] : Succeeded / Save Result
129 State3 --> [*] : Aborted
130 @enduml
131
132 {{/plantuml}}
133 {{/example}}
134
135
136 ==== Диаграмма последовательности ====
137
138 {{example}}
139 {{plantuml}}
140
141 @startuml
142
143 actor User
144 participant Nginx
145 participant Application
146 database PostgreSQL
147
148 autonumber 1
149 User -> Nginx: GET / HTTP/1.0
150 Nginx -> Application: GET / HTTP/1.0
151 Application -> PostgreSQL: SELECT * FROM ...
152 PostgreSQL --> Application: (A LOT OF DATA)
153 Application --> Nginx: HTTP/1.0 200 OK
154 Nginx --> User: HTTP/1.0 200 OK
155
156 @enduml
157
158 {{/plantuml}}
159 {{/example}}
160
161
162 ==== Временная диаграмма ====
163
164 {{example}}
165 {{plantuml}}
166
167 @startuml
168 scale 5 as 150 pixels
169
170 clock clk with period 1
171 binary "enable" as en
172 binary "R/W" as rw
173 binary "data Valid" as dv
174 concise "dataBus" as db
175 concise "address bus" as addr
176
177 @6 as :write_beg
178 @10 as :write_end
179
180 @15 as :read_beg
181 @19 as :read_end
182
183
184 @0
185 en is low
186 db is "0x0"
187 addr is "0x03f"
188 rw is low
189 dv is 0
190
191 @:write_beg-3
192 en is high
193 @:write_beg-2
194 db is "0xDEADBEEF"
195 @:write_beg-1
196 dv is 1
197 @:write_beg
198 rw is high
199
200
201 @:write_end
202 rw is low
203 dv is low
204 @:write_end+1
205 rw is low
206 db is "0x0"
207 addr is "0x23"
208
209 @12
210 dv is high
211 @13
212 db is "0xFFFF"
213
214 @20
215 en is low
216 dv is low
217 @21
218 db is "0x0"
219
220 highlight :write_beg to :write_end #Gold:Write
221 highlight :read_beg to :read_end #lightBlue:Read
222
223 db@:write_beg-1 <-> @:write_end : setup time
224 db@:write_beg-1 -> addr@:write_end+1 : hold
225 @enduml
226
227
228 {{/plantuml}}
229 {{/example}}
230
231
232 ----
233
234 == **Визуализация данных с помощью Chart Extension** ==