Изменения документа Диаграммы Схемы Графики

Редактировал(а) Coluns 31.03.2023
От версии 8.1
отредактировано hrapitan
на 11.03.2023
Изменить комментарий: К данной версии нет комментариев
К версии 1.2
отредактировано hrapitan
на 11.03.2023
Изменить комментарий: К данной версии нет комментариев

Сводка

Подробности

Свойства страницы
Содержимое
... ... @@ -2,8 +2,9 @@
2 2  {{toc start="2"/}}
3 3  {{/box}}
4 4  
5 -== **Возможности платформы** ==
6 6  
6 +== Возможности платформы ==
7 +
7 7  Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.
8 8  
9 9  На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:
... ... @@ -14,277 +14,9 @@
14 14  
15 15  Рассмотрим все эти инструменты по порядку.
16 16  
17 -----
18 18  
19 -== **Отрисовка диаграмм в визуальном редакторе draw.io** ==
19 +== Отрисовка диаграмм в визуальном редакторе draw.io ==
20 20  
21 21  Расширение "**Diagram**"  позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в [[статье "В XWiki можно легко создавать диаграммы">>doc:Stati.Metodiki-primeneniia-XWiki.V-XWiki-mozhno-legko-sozdavat-diagrammy.WebHome]], рассмотрим его здесь немного подробнее.
22 22  
23 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 server="http://www.plantuml.com/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 server="http://www.plantuml.com/plantuml"}}
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}}
212 -{{/plantuml}}
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 -
290 -
2021-09-24_100802.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -235 bytes
Содержимое
2023-02-18_11-16-47.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -108.8 KB
Содержимое
2023-02-18_11-33-52_cr.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -114.3 KB
Содержимое
2023-02-18_11-48-22-2.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -207.3 KB
Содержимое
2023-02-18_17-41-18.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -208.9 KB
Содержимое