Изменения документа Диаграммы Схемы Графики
Редактировал(а) Coluns 31.03.2023
Сводка
-
Свойства страницы (1 изменено, 0 добавлено, 0 удалено)
-
Вложения (0 изменено, 0 добавлено, 3 удалено)
Подробности
- Свойства страницы
-
- Содержимое
-
... ... @@ -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,9 +14,8 @@ 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,7 +23,7 @@ 23 23 Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "**Diagram**", используя окно выбора макросов, как показано на рисунке: 24 24 25 25 26 -[[image:2023-02-18_11-16-47.png]] 26 +[[image:2023-02-18_11-16-47.png||height="423" width="900"]] 27 27 28 28 29 29 В поле "**Reference**" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "(% style="color:#16a085" %)**//Diagram 1//**(%%)". ... ... @@ -36,199 +36,3 @@ 36 36 ))) 37 37 38 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** ==
- 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 - Содержимое