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

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

Сводка

Подробности

Свойства страницы
Содержимое
... ... @@ -2,9 +2,8 @@
2 2  {{toc start="2"/}}
3 3  {{/box}}
4 4  
5 +== **Возможности платформы** ==
5 5  
6 -== Возможности платформы ==
7 -
8 8  Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.
9 9  
10 10  На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:
... ... @@ -15,9 +15,221 @@
15 15  
16 16  Рассмотрим все эти инструменты по порядку.
17 17  
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 +==== Диаграмма состояний ====
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** ==
2021-09-24_100802.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +235 bytes
Содержимое
2023-02-18_11-16-47.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +108.8 KB
Содержимое
2023-02-18_11-33-52_cr.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +114.3 KB
Содержимое
2023-02-18_11-48-22-2.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +207.3 KB
Содержимое
2023-02-18_17-41-18.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +208.9 KB
Содержимое