Изменения документа Диаграммы Схемы Графики
Редактировал(а) Coluns 31.03.2023
Сводка
-
Свойства страницы (1 изменено, 0 добавлено, 0 удалено)
-
Вложения (0 изменено, 0 добавлено, 3 удалено)
Подробности
- Свойства страницы
-
- Содержимое
-
... ... @@ -2,7 +2,7 @@ 2 2 {{toc start="2"/}} 3 3 {{/box}} 4 4 5 -== **Возможности платформы**==5 +== Возможности платформы == 6 6 7 7 Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов. 8 8 ... ... @@ -14,9 +14,8 @@ 14 14 15 15 Рассмотрим все эти инструменты по порядку. 16 16 17 ----- 18 18 19 -== **Отрисовка диаграмм в визуальном редакторе draw.io**==18 +== Отрисовка диаграмм в визуальном редакторе 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]] 25 +[[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,255 +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 -==== (% 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 -
- 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 - Содержимое