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

Версия 8.1 от hrapitan на 11.03.2023
Скрыть последних авторов
hrapitan 1.2 1 {{box cssClass="floatinginfobox" title="**Содержание:**"}}
2 {{toc start="2"/}}
3 {{/box}}
4
hrapitan 7.1 5 == **Возможности платформы** ==
hrapitan 1.2 6
7 Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.
8
9 На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:
10
11 * **Diagram (draw.io)** — приложение, позволяющее рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный графический редактор;
12 * **PlantUML** — макрос, позволяющий отображать диаграммы и схемы, описанные языком UML;
13 * **График (Chart) **— расширение, позволяющее строить всевозможные графики и диаграммы на основе табличных данных.
14
15 Рассмотрим все эти инструменты по порядку.
16
hrapitan 7.1 17 ----
hrapitan 1.2 18
hrapitan 7.1 19 == **Отрисовка диаграмм в визуальном редакторе draw.io** ==
hrapitan 1.2 20
21 Расширение "**Diagram**"  позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в [[статье "В XWiki можно легко создавать диаграммы">>doc:Stati.Metodiki-primeneniia-XWiki.V-XWiki-mozhno-legko-sozdavat-diagrammy.WebHome]], рассмотрим его здесь немного подробнее.
22
23 Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "**Diagram**", используя окно выбора макросов, как показано на рисунке:
hrapitan 3.1 24
25
hrapitan 5.1 26 [[image:2023-02-18_11-16-47.png]]
hrapitan 3.1 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//**(%%)").
hrapitan 5.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
hrapitan 7.1 56 ----
hrapitan 5.1 57
hrapitan 7.1 58 == **Работа с диаграммами на языке UML** ==
hrapitan 5.1 59
hrapitan 6.1 60 Кроме рисования в визуальном редакторе draw.io, платформа XWiki позволяет создавать диаграммы, используя [[язык UML>>url:https://ru.wikipedia.org/wiki/UML]].
hrapitan 5.1 61
62 Для этого предназначен специальный макрос "**PlantUML**", позволяющий отображать диаграммы и схемы, описанные языком UML. Работа с ним чрезвычайно проста: вы помещаете этот макрос в нужную позицию статьи и вносите в него описание диаграммы на языке UML.
63
64
hrapitan 6.1 65 [[image:2023-02-18_17-41-18.png]]
66
67
hrapitan 7.1 68 То же самое можно сделать, перейдя с помощью кнопки  [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса:
hrapitan 6.1 69
hrapitan 7.1 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}}
hrapitan 8.1 109 {{plantuml server="http://www.plantuml.com/plantuml"}}
hrapitan 7.1 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}}
hrapitan 8.1 187 {{plantuml server="http://www.plantuml.com/plantuml"}}
hrapitan 7.1 188 {{plantuml}}
189
190 @startuml
191 :Главный админ: as Admin
192 (Работа с приложением) as (Use)
193
194 Пользователь -> (Работа)
195 Пользователь --> (Use)
196
197 Admin ---> (Use)
198
199 note right of Admin : Это пример заметки.
200
201 note right of (Use)
202 Заметки могут занимать
203 несколько строчек
204 end note
205
206 note "Эта заметка будет указывать\nсразу на несколько элементов." as N2
207 (Работа) .. N2
208 N2 .. (Use)
209 @enduml
210
211 {{/plantuml}}
hrapitan 8.1 212 {{/plantuml}}
hrapitan 7.1 213 {{/example}}
214
215
216 ==== Временная диаграмма ====
217
218 {{example}}
219 {{plantuml}}
220
221 @startuml
222 scale 5 as 150 pixels
223
224 clock clk with period 1
225 binary "enable" as en
226 binary "R/W" as rw
227 binary "data Valid" as dv
228 concise "dataBus" as db
229 concise "address bus" as addr
230
231 @6 as :write_beg
232 @10 as :write_end
233
234 @15 as :read_beg
235 @19 as :read_end
236
237
238 @0
239 en is low
240 db is "0x0"
241 addr is "0x03f"
242 rw is low
243 dv is 0
244
245 @:write_beg-3
246 en is high
247 @:write_beg-2
248 db is "0xDEADBEEF"
249 @:write_beg-1
250 dv is 1
251 @:write_beg
252 rw is high
253
254
255 @:write_end
256 rw is low
257 dv is low
258 @:write_end+1
259 rw is low
260 db is "0x0"
261 addr is "0x23"
262
263 @12
264 dv is high
265 @13
266 db is "0xFFFF"
267
268 @20
269 en is low
270 dv is low
271 @21
272 db is "0x0"
273
274 highlight :write_beg to :write_end #Gold:Write
275 highlight :read_beg to :read_end #lightBlue:Read
276
277 db@:write_beg-1 <-> @:write_end : setup time
278 db@:write_beg-1 -> addr@:write_end+1 : hold
279 @enduml
280
281
282 {{/plantuml}}
283 {{/example}}
284
285
286 ----
287
288 == **Визуализация данных с помощью Chart Extension** ==
289
hrapitan 5.1 290