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

Сводка

• Свойства страницы (1 изменено, 0 добавлено, 0 удалено)
• Вложения (0 изменено, 0 добавлено, 5 удалено)
  • 2021-09-24_100802.png
  • 2023-02-18_11-16-47.png
  • 2023-02-18_11-33-52_cr.png
  • 2023-02-18_11-48-22-2.png
  • 2023-02-18_17-41-18.png

Подробности

Свойства страницы

Содержимое

...	...	@@ -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,221 +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		-==== Диаграмма состояний ====
107		-
108		-{{example}}
109		-{{plantuml}}
110		-@startuml
111		-[*] -> State1
112		-State1 --> State2 : Succeeded
113		-State1 --> [*] : Aborted
114		-State2 --> State3 : Succeeded
115		-State2 --> [*] : Aborted
116		-state State3 {
117		- state "Accumulate Enough Data" as long1
118		- long1 : Just a test
119		- [*] --> long1
120		- long1 --> long1 : New Data
121		- long1 --> ProcessData : Enough Data
122		- State2 --> [H]: Resume
123		-}
124		-State3 --> State2 : Pause
125		-State2 --> State3[H*]: DeepResume
126		-State3 --> State3 : Failed
127		-State3 --> [*] : Succeeded / Save Result
128		-State3 --> [*] : Aborted
129		-@enduml
130		-
131		-{{/plantuml}}
132		-{{/example}}
133		-
134		-
135		-==== Диаграмма последовательности ====
136		-
137		-{{example}}
138		-{{plantuml}}
139		-
140		-@startuml
141		-
142		-actor User
143		-participant Nginx
144		-participant Application
145		-database PostgreSQL
146		-
147		-autonumber 1
148		-User -> Nginx: GET / HTTP/1.0
149		-Nginx -> Application: GET / HTTP/1.0
150		-Application -> PostgreSQL: SELECT * FROM ...
151		-PostgreSQL --> Application: (A LOT OF DATA)
152		-Application --> Nginx: HTTP/1.0 200 OK
153		-Nginx --> User: HTTP/1.0 200 OK
154		-
155		-@enduml
156		-
157		-{{/plantuml}}
158		-{{/example}}
159		-
160		-
161		-==== Временная диаграмма ====
162		-
163		-{{example}}
164		-{{plantuml}}
165		-
166		-@startuml
167		-scale 5 as 150 pixels
168		-
169		-clock clk with period 1
170		-binary "enable" as en
171		-binary "R/W" as rw
172		-binary "data Valid" as dv
173		-concise "dataBus" as db
174		-concise "address bus" as addr
175		-
176		-@6 as :write_beg
177		-@10 as :write_end
178		-
179		-@15 as :read_beg
180		-@19 as :read_end
181		-
182		-
183		-@0
184		-en is low
185		-db is "0x0"
186		-addr is "0x03f"
187		-rw is low
188		-dv is 0
189		-
190		-@:write_beg-3
191		- en is high
192		-@:write_beg-2
193		- db is "0xDEADBEEF"
194		-@:write_beg-1
195		-dv is 1
196		-@:write_beg
197		-rw is high
198		-
199		-
200		-@:write_end
201		-rw is low
202		-dv is low
203		-@:write_end+1
204		-rw is low
205		-db is "0x0"
206		-addr is "0x23"
207		-
208		-@12
209		-dv is high
210		-@13
211		-db is "0xFFFF"
212		-
213		-@20
214		-en is low
215		-dv is low
216		-@21
217		-db is "0x0"
218		-
219		-highlight :write_beg to :write_end #Gold:Write
220		-highlight :read_beg to :read_end #lightBlue:Read
221		-
222		-db@:write_beg-1 <-> @:write_end : setup time
223		-db@:write_beg-1 -> addr@:write_end+1 : hold
224		-@enduml
225		-
226		-
227		-{{/plantuml}}
228		-{{/example}}
229		-
230		-
231		-----
232		-
233		-== **Визуализация данных с помощью Chart Extension** ==
234		-

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

Содержимое