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

Версия 7.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 ==== (% id="cke_bm_1213S" style="display:none" %) (%%)Диаграмма классов ====
107
108 {{example}}
109 {{plantuml}}
110
111 @startuml
112
113 CanTakeDamage <|-- Hero
114 Hero <|-- Mage
115 Hero <|-- Warrior
116
117 enum Spell {
118 FIREBALL
119 THUNDERBOLT
120 }
121
122 enum Weapon {
123 SWORD
124 BOW
125 }
126
127 interface CanTakeDamage {
128 TakeDamage(num int) int
129 }
130
131 class Hero {
132 Name: string
133 HP: int
134 XP: int
135
136 IsDead() bool
137 IsMage() bool
138 IsWarrior() bool
139 Attack(enemy CanTakeDamage)
140 }
141
142 class Warrior {
143 Weapon: Weapon
144 ArrowsNumber: int
145 }
146
147 class Mage {
148 Spellbook: []Spell
149 Mana: int
150 }
151
152 @enduml
153
154 {{/plantuml}}
155 {{/example}}
156
157
158 ==== Диаграммы последовательности ====
159
160 {{example}}
161 {{plantuml}}
162
163 @startuml
164
165 actor User
166 participant Nginx
167 participant Application
168 database PostgreSQL
169
170 autonumber 1
171 User -> Nginx: GET / HTTP/1.0
172 Nginx -> Application: GET / HTTP/1.0
173 Application -> PostgreSQL: SELECT * FROM ...
174 PostgreSQL --> Application: (A LOT OF DATA)
175 Application --> Nginx: HTTP/1.0 200 OK
176 Nginx --> User: HTTP/1.0 200 OK
177
178 @enduml
179
180 {{/plantuml}}
181 {{/example}}
182
183
184 ==== Диаграмма прецедентов ====
185
186 {{example}}
187 {{plantuml}}
188
189 @startuml
190 :Главный админ: as Admin
191 (Работа с приложением) as (Use)
192
193 Пользователь -> (Работа)
194 Пользователь --> (Use)
195
196 Admin ---> (Use)
197
198 note right of Admin : Это пример заметки.
199
200 note right of (Use)
201 Заметки могут занимать
202 несколько строчек
203 end note
204
205 note "Эта заметка будет указывать\nсразу на несколько элементов." as N2
206 (Работа) .. N2
207 N2 .. (Use)
208 @enduml
209
210 {{/plantuml}}
211 {{/example}}
212
213
214 ==== Временная диаграмма ====
215
216 {{example}}
217 {{plantuml}}
218
219 @startuml
220 scale 5 as 150 pixels
221
222 clock clk with period 1
223 binary "enable" as en
224 binary "R/W" as rw
225 binary "data Valid" as dv
226 concise "dataBus" as db
227 concise "address bus" as addr
228
229 @6 as :write_beg
230 @10 as :write_end
231
232 @15 as :read_beg
233 @19 as :read_end
234
235
236 @0
237 en is low
238 db is "0x0"
239 addr is "0x03f"
240 rw is low
241 dv is 0
242
243 @:write_beg-3
244 en is high
245 @:write_beg-2
246 db is "0xDEADBEEF"
247 @:write_beg-1
248 dv is 1
249 @:write_beg
250 rw is high
251
252
253 @:write_end
254 rw is low
255 dv is low
256 @:write_end+1
257 rw is low
258 db is "0x0"
259 addr is "0x23"
260
261 @12
262 dv is high
263 @13
264 db is "0xFFFF"
265
266 @20
267 en is low
268 dv is low
269 @21
270 db is "0x0"
271
272 highlight :write_beg to :write_end #Gold:Write
273 highlight :read_beg to :read_end #lightBlue:Read
274
275 db@:write_beg-1 <-> @:write_end : setup time
276 db@:write_beg-1 -> addr@:write_end+1 : hold
277 @enduml
278
279
280 {{/plantuml}}
281 {{/example}}
282
283
284 ----
285
286 == **Визуализация данных с помощью Chart Extension** ==
287
288