|
0
|
1 <div class="panel panel-default">
|
|
|
2 <div class="panel-body">
|
|
|
3
|
|
|
4 # 目次
|
|
|
5
|
|
|
6 ```
|
|
|
7 @[toc]
|
|
|
8 ```
|
|
|
9
|
|
|
10 @[toc]
|
|
|
11
|
|
|
12 </div>
|
|
|
13 </div>
|
|
|
14
|
|
|
15 # :pencil: Block Elements
|
|
|
16
|
|
|
17 ## Headers 見出し
|
|
|
18
|
|
|
19 先頭に`#`をレベルの数だけ記述します。
|
|
|
20
|
|
|
21 ```
|
|
|
22 # 見出し1
|
|
|
23 ## 見出し2
|
|
|
24 ### 見出し3
|
|
|
25 #### 見出し4
|
|
|
26 ##### 見出し5
|
|
|
27 ###### 見出し6
|
|
|
28 ```
|
|
|
29
|
|
|
30 ### 見出し3
|
|
|
31 #### 見出し4
|
|
|
32 ##### 見出し5
|
|
|
33 ###### 見出し6
|
|
|
34
|
|
|
35 ## Block 段落
|
|
|
36
|
|
|
37 空白行を挟むことで段落となります。aaaa
|
|
|
38
|
|
|
39 ```
|
|
|
40 段落1
|
|
|
41 (空行)
|
|
|
42 段落2
|
|
|
43 ```
|
|
|
44
|
|
|
45 段落1
|
|
|
46
|
|
|
47 段落2
|
|
|
48
|
|
|
49 ## Br 改行
|
|
|
50
|
|
|
51 改行の前に半角スペース` `を2つ記述します。
|
|
|
52 ***この挙動は、オプションで変更可能です***
|
|
|
53
|
|
|
54 ```
|
|
|
55 hoge
|
|
|
56 fuga(スペース2つ)
|
|
|
57 piyo
|
|
|
58 ```
|
|
|
59
|
|
|
60 hoge
|
|
|
61 fuga
|
|
|
62 piyo
|
|
|
63
|
|
|
64 ## Blockquotes 引用
|
|
|
65
|
|
|
66 先頭に`>`を記述します。ネストは`>`を多重に記述します。
|
|
|
67
|
|
|
68 ```
|
|
|
69 > 引用
|
|
|
70 > 引用
|
|
|
71 >> 多重引用
|
|
|
72 ```
|
|
|
73
|
|
|
74 > 引用
|
|
|
75 > 引用
|
|
|
76 >> 多重引用
|
|
|
77
|
|
|
78 ## Code コード
|
|
|
79
|
|
|
80 `` `バッククオート` `` 3つ、あるいはチルダ`~`３つで囲みます。
|
|
|
81
|
|
|
82 ```
|
|
|
83 print 'hoge'
|
|
|
84 ```
|
|
|
85
|
|
|
86 ### シンタックスハイライトとファイル名
|
|
|
87
|
|
|
88 - [highlight.js Demo](https://highlightjs.org/static/demo/) の common カテゴリ内の言語に対応しています
|
|
|
89
|
|
|
90
|
|
|
91 ~~~
|
|
|
92 ```javascript:mersenne-twister.js
|
|
|
93 function MersenneTwister(seed) {
|
|
|
94 if (arguments.length == 0) {
|
|
|
95 seed = new Date().getTime();
|
|
|
96 }
|
|
|
97
|
|
|
98 this._mt = new Array(624);
|
|
|
99 this.setSeed(seed);
|
|
|
100 }
|
|
|
101 ```
|
|
|
102 ~~~
|
|
|
103
|
|
|
104 ```javascript:mersenne-twister.js
|
|
|
105 function MersenneTwister(seed) {
|
|
|
106 if (arguments.length == 0) {
|
|
|
107 seed = new Date().getTime();
|
|
|
108 }
|
|
|
109
|
|
|
110 this._mt = new Array(624);
|
|
|
111 this.setSeed(seed);
|
|
|
112 }
|
|
|
113 ```
|
|
|
114
|
|
|
115 ### インラインコード
|
|
|
116
|
|
|
117 `` `バッククオート` `` で単語を囲むとインラインコードになります。
|
|
|
118
|
|
|
119 ```
|
|
|
120 これは `インラインコード`です。
|
|
|
121 ```
|
|
|
122
|
|
|
123 これは `インラインコード`です。
|
|
|
124
|
|
|
125 ## pre 整形済みテキスト
|
|
|
126
|
|
|
127 半角スペース4個もしくはタブで、コードブロックをpre表示できます
|
|
|
128
|
|
|
129 ```
|
|
|
130 class Hoge
|
|
|
131 def hoge
|
|
|
132 print 'hoge'
|
|
|
133 end
|
|
|
134 end
|
|
|
135 ```
|
|
|
136
|
|
|
137 class Hoge
|
|
|
138 def hoge
|
|
|
139 print 'hoge'
|
|
|
140 end
|
|
|
141 end
|
|
|
142
|
|
|
143 ## Hr 水平線
|
|
|
144
|
|
|
145 アンダースコア`_` 、アスタリスク`*`を3つ以上連続して記述します。
|
|
|
146
|
|
|
147 ```
|
|
|
148 ***
|
|
|
149 ___
|
|
|
150 ---
|
|
|
151 ```
|
|
|
152
|
|
|
153 ***
|
|
|
154 ___
|
|
|
155 ---
|
|
|
156
|
|
|
157
|
|
|
158
|
|
|
159 # :pencil: Typography
|
|
|
160
|
|
|
161 ## 強調
|
|
|
162 ### em
|
|
|
163
|
|
|
164 アスタリスク`*`もしくはアンダースコア`_`1個で文字列を囲みます。
|
|
|
165
|
|
|
166 ```
|
|
|
167 これは *イタリック* です
|
|
|
168 これは _イタリック_ です
|
|
|
169 ```
|
|
|
170
|
|
|
171 これは *イタリック* です
|
|
|
172 これは _イタリック_ です
|
|
|
173
|
|
|
174 ### strong
|
|
|
175
|
|
|
176 アスタリスク`*`もしくはアンダースコア`_`2個で文字列を囲みます。
|
|
|
177
|
|
|
178 ```
|
|
|
179 これは **ボールド** です
|
|
|
180 これは __ボールド__ です
|
|
|
181 ```
|
|
|
182
|
|
|
183 これは **ボールド** です
|
|
|
184 これは __ボールド__ です
|
|
|
185
|
|
|
186 ### em + strong
|
|
|
187
|
|
|
188 アスタリスク`*`もしくはアンダースコア`_`3個で文字列を囲みます。
|
|
|
189
|
|
|
190 ```
|
|
|
191 これは ***イタリック＆ボールド*** です
|
|
|
192 これは ___イタリック＆ボールド___ です
|
|
|
193 ```
|
|
|
194
|
|
|
195 これは ***イタリック＆ボールド*** です
|
|
|
196 これは ___イタリック＆ボールド___ です
|
|
|
197
|
|
|
198 # :pencil: Images
|
|
|
199
|
|
|
200 `` で`<img>`タグを挿入できます。
|
|
|
201
|
|
|
202 ```markdown
|
|
|
203 
|
|
|
204 
|
|
|
205 ```
|
|
|
206
|
|
|
207 
|
|
|
208 
|
|
|
209
|
|
|
210 画像の大きさなどの指定をする場合はimgタグを使用します。
|
|
|
211
|
|
|
212 ```html
|
|
|
213 <img src="https://octodex.github.com/images/dojocat.jpg" width="200px">
|
|
|
214 ```
|
|
|
215
|
|
|
216 <img src="https://octodex.github.com/images/dojocat.jpg" width="200px">
|
|
|
217
|
|
|
218
|
|
|
219 # :pencil: Link
|
|
|
220
|
|
|
221 ## Markdown 標準
|
|
|
222
|
|
|
223 `[表示テキスト](URL)`でリンクに変換されます。
|
|
|
224
|
|
|
225 ```
|
|
|
226 [Google](https://www.google.co.jp/)
|
|
|
227 ```
|
|
|
228
|
|
|
229 [Google](https://www.google.co.jp/)
|
|
|
230
|
|
|
231 ## Crowi 互換
|
|
|
232
|
|
|
233 ```
|
|
|
234 [/Sandbox]
|
|
|
235 </user/admin1>
|
|
|
236 ```
|
|
|
237
|
|
|
238 [/Sandbox]
|
|
|
239 </user/admin1>
|
|
|
240
|
|
|
241 ## Pukiwiki like linker
|
|
|
242
|
|
|
243 (available by [weseek/growi-plugin-pukiwiki-like-linker
|
|
|
244 ](https://github.com/weseek/growi-plugin-pukiwiki-like-linker) )
|
|
|
245
|
|
|
246 最も柔軟な Linker です。
|
|
|
247 記述中のページを基点とした相対リンクと、表示テキストに対するリンクを同時に実現できます。
|
|
|
248
|
|
|
249 ```
|
|
|
250 [[./Bootstrap3]]
|
|
|
251 Bootstrap3のExampleは[[こちら>./Bootstrap3]]
|
|
|
252 ```
|
|
|
253
|
|
|
254 [[../user]]
|
|
|
255 Bootstrap3のExampleは[[こちら>./Bootstrap3]]
|
|
|
256
|
|
|
257 # :pencil: Lists
|
|
|
258
|
|
|
259 ## Ul 箇条書きリスト
|
|
|
260
|
|
|
261 ハイフン`-`、プラス`+`、アスタリスク`*`のいずれかを先頭に記述します。
|
|
|
262 ネストはタブで表現します。
|
|
|
263
|
|
|
264 ```
|
|
|
265 - リスト1
|
|
|
266 - リスト1_1
|
|
|
267 - リスト1_1_1
|
|
|
268 - リスト1_1_2
|
|
|
269 - リスト1_2
|
|
|
270 - リスト2
|
|
|
271 - リスト3
|
|
|
272 ```
|
|
|
273
|
|
|
274 - リスト1
|
|
|
275 - リスト1_1
|
|
|
276 - リスト1_1_1
|
|
|
277 - リスト1_1_2
|
|
|
278 - リスト1_2
|
|
|
279 - リスト2
|
|
|
280 - リスト3
|
|
|
281
|
|
|
282 ## Ol 番号付きリスト
|
|
|
283
|
|
|
284 `番号.`を先頭に記述します。ネストはタブで表現します。
|
|
|
285 番号は自動的に採番されるため、すべての行を1.と記述するのがお勧めです。
|
|
|
286
|
|
|
287 ```
|
|
|
288 1. 番号付きリスト1
|
|
|
289 1. 番号付きリスト1-1
|
|
|
290 1. 番号付きリスト1-2
|
|
|
291 1. 番号付きリスト2
|
|
|
292 1. 番号付きリスト3
|
|
|
293 ```
|
|
|
294
|
|
|
295 1. 番号付きリスト1
|
|
|
296 1. 番号付きリスト1-1
|
|
|
297 1. 番号付きリスト1-2
|
|
|
298 1. 番号付きリスト2
|
|
|
299 1. 番号付きリスト3
|
|
|
300
|
|
|
301
|
|
|
302 ## タスクリスト
|
|
|
303
|
|
|
304 ```
|
|
|
305 - [ ] タスク 1
|
|
|
306 - [x] タスク 1.1
|
|
|
307 - [ ] タスク 1.2
|
|
|
308 - [x] タスク2
|
|
|
309 ```
|
|
|
310
|
|
|
311 - [ ] タスク 1
|
|
|
312 - [x] タスク 1.1
|
|
|
313 - [ ] タスク 1.2
|
|
|
314 - [x] タスク2
|
|
|
315
|
|
|
316
|
|
|
317 # :pencil: Table
|
|
|
318
|
|
|
319 ## Markdown 標準
|
|
|
320
|
|
|
321 ```markdown
|
|
|
322 | Left align | Right align | Center align |
|
|
|
323 |:-----------|------------:|:------------:|
|
|
|
324 | This | This | This |
|
|
|
325 | column | column | column |
|
|
|
326 | will | will | will |
|
|
|
327 | be | be | be |
|
|
|
328 | left | right | center |
|
|
|
329 | aligned | aligned | aligned |
|
|
|
330
|
|
|
331 OR
|
|
|
332
|
|
|
333 Left align | Right align | Center align
|
|
|
334 :--|--:|:-:
|
|
|
335 This | This | This
|
|
|
336 column | column | column
|
|
|
337 will | will | will
|
|
|
338 be | be | be
|
|
|
339 left | right | center
|
|
|
340 aligned | aligned | aligned
|
|
|
341 ```
|
|
|
342
|
|
|
343 | Left align | Right align | Center align |
|
|
|
344 |:-----------|------------:|:------------:|
|
|
|
345 | This | This | This |
|
|
|
346 | column | column | column |
|
|
|
347 | will | will | will |
|
|
|
348 | be | be | be |
|
|
|
349 | left | right | center |
|
|
|
350 | aligned | aligned | aligned |
|
|
|
351
|
|
|
352 ## TSV (crowi-plus 独自記法)
|
|
|
353
|
|
|
354 ```
|
|
|
355 ::: tsv
|
|
|
356 Content Cell Content Cell
|
|
|
357 Content Cell Content Cell
|
|
|
358 :::
|
|
|
359 ```
|
|
|
360
|
|
|
361 ::: tsv
|
|
|
362 Content Cell Content Cell
|
|
|
363 Content Cell Content Cell
|
|
|
364 :::
|
|
|
365
|
|
|
366 ## TSV ヘッダ付き (crowi-plus 独自記法)
|
|
|
367
|
|
|
368 ```
|
|
|
369 ::: tsv-h
|
|
|
370 First Header Second Header
|
|
|
371 Content Cell Content Cell
|
|
|
372 Content Cell Content Cell
|
|
|
373 :::
|
|
|
374 ```
|
|
|
375
|
|
|
376 ::: tsv-h
|
|
|
377 First Header Second Header
|
|
|
378 Content Cell Content Cell
|
|
|
379 Content Cell Content Cell
|
|
|
380 :::
|
|
|
381
|
|
|
382 ## CSV (crowi-plus 独自記法)
|
|
|
383
|
|
|
384 ```
|
|
|
385 ::: csv
|
|
|
386 Content Cell,Content Cell
|
|
|
387 Content Cell,Content Cell
|
|
|
388 :::
|
|
|
389 ```
|
|
|
390
|
|
|
391 ::: csv
|
|
|
392 Content Cell,Content Cell
|
|
|
393 Content Cell,Content Cell
|
|
|
394 :::
|
|
|
395
|
|
|
396 ## CSV ヘッダ付き (crowi-plus 独自記法)
|
|
|
397
|
|
|
398 ```
|
|
|
399 ::: csv-h
|
|
|
400 First Header,Second Header
|
|
|
401 Content Cell,Content Cell
|
|
|
402 Content Cell,Content Cell
|
|
|
403 :::
|
|
|
404 ```
|
|
|
405
|
|
|
406 ::: csv-h
|
|
|
407 First Header,Second Header
|
|
|
408 Content Cell,Content Cell
|
|
|
409 Content Cell,Content Cell
|
|
|
410 :::
|
|
|
411
|
|
|
412
|
|
|
413 # :pencil: Footnote
|
|
|
414
|
|
|
415 脚注への参照[^1]を書くことができます。また、インラインの脚注^[インラインで記述できる脚注です]を入れる事も出来ます。
|
|
|
416
|
|
|
417 長い脚注は[^longnote]のように書くことができます。
|
|
|
418
|
|
|
419 [^1]: 1つめの脚注への参照です。
|
|
|
420
|
|
|
421 [^longnote]: 脚注を複数ブロックで書く例です。
|
|
|
422
|
|
|
423 後続の段落はインデントされて、前の脚注に属します。
|
|
|
424
|
|
|
425
|
|
|
426 # :pencil: Emoji
|
|
|
427
|
|
|
428 See [emojione](https://www.emojione.com/)
|
|
|
429
|
|
|
430 :smiley: :smile: :laughing: :innocent: :drooling_face:
|
|
|
431
|
|
|
432 :family: :family_man_boy: :family_man_girl: :family_man_girl_girl: :family_woman_girl_girl:
|
|
|
433
|
|
|
434 :thumbsup: :thumbsdown: :open_hands: :raised_hands: :point_right:
|
|
|
435
|
|
|
436 :apple: :green_apple: :strawberry: :cake: :hamburger:
|
|
|
437
|
|
|
438 :basketball: :football: :baseball: :volleyball: :8ball:
|
|
|
439
|
|
|
440 :hearts: :broken_heart: :heartbeat: :heartpulse: :heart_decoration:
|
|
|
441
|
|
|
442 :watch: :gear: :gem: :wrench: :envelope:
|
|
|
443
|
|
|
444
|
|
|
445 # :pencil: Math
|
|
|
446
|
|
|
447 See [MathJax](https://www.mathjax.org/).
|
|
|
448
|
|
|
449 ## Inline Formula
|
|
|
450
|
|
|
451 When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
|
|
|
452 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
|
|
|
453
|
|
|
454 ## The Lorenz Equations
|
|
|
455
|
|
|
456 $$
|
|
|
457 \begin{align}
|
|
|
458 \dot{x} & = \sigma(y-x) \\
|
|
|
459 \dot{y} & = \rho x - y - xz \\
|
|
|
460 \dot{z} & = -\beta z + xy
|
|
|
461 \end{align}
|
|
|
462 $$
|
|
|
463
|
|
|
464
|
|
|
465 ## The Cauchy-Schwarz Inequality
|
|
|
466
|
|
|
467 $$
|
|
|
468 \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
|
|
|
469 \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
|
|
|
470 $$
|
|
|
471
|
|
|
472 ## A Cross Product Formula
|
|
|
473
|
|
|
474 $$
|
|
|
475 \mathbf{V}_1 \times \mathbf{V}_2 =
|
|
|
476 \begin{vmatrix}
|
|
|
477 \mathbf{i} & \mathbf{j} & \mathbf{k} \\
|
|
|
478 \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
|
|
|
479 \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
|
|
|
480 \end{vmatrix}
|
|
|
481 $$
|
|
|
482
|
|
|
483
|
|
|
484 ## The probability of getting $\left(k\right)$ heads when flipping $\left(n\right)$ coins is:
|
|
|
485
|
|
|
486 $$
|
|
|
487 P(E) = {n \choose k} p^k (1-p)^{ n-k}
|
|
|
488 $$
|
|
|
489
|
|
|
490 ## An Identity of Ramanujan
|
|
|
491
|
|
|
492 $$
|
|
|
493 \frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
|
|
|
494 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
|
|
|
495 {1+\frac{e^{-8\pi}} {1+\ldots} } } }
|
|
|
496 $$
|
|
|
497
|
|
|
498 ## A Rogers-Ramanujan Identity
|
|
|
499
|
|
|
500 $$
|
|
|
501 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
|
|
|
502 \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
|
|
|
503 \quad\quad \text{for $|q|<1$}.
|
|
|
504 $$
|
|
|
505
|
|
|
506 ## Maxwell's Equations
|
|
|
507
|
|
|
508 $$
|
|
|
509 \begin{align}
|
|
|
510 \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
|
|
|
511 \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
|
|
|
512 \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
|
|
|
513 \nabla \cdot \vec{\mathbf{B}} & = 0
|
|
|
514 \end{align}
|
|
|
515 $$
|
|
|
516
|
|
|
517 <!-- Reset MathJax -->
|
|
|
518 <div class="clearfix"></div>
|
|
|
519
|
|
|
520
|
|
|
521 # :pencil: UML Diagrams
|
|
|
522
|
|
|
523 See [PlantUML](http://plantuml.com/).
|
|
|
524
|
|
|
525 ## シーケンス図
|
|
|
526
|
|
|
527 @startuml
|
|
|
528 skinparam sequenceArrowThickness 2
|
|
|
529 skinparam roundcorner 20
|
|
|
530 skinparam maxmessagesize 60
|
|
|
531 skinparam sequenceParticipant underline
|
|
|
532
|
|
|
533 actor User
|
|
|
534 participant "First Class" as A
|
|
|
535 participant "Second Class" as B
|
|
|
536 participant "Last Class" as C
|
|
|
537
|
|
|
538 User -> A: DoWork
|
|
|
539 activate A
|
|
|
540
|
|
|
541 A -> B: Create Request
|
|
|
542 activate B
|
|
|
543
|
|
|
544 B -> C: DoWork
|
|
|
545 activate C
|
|
|
546 C --> B: WorkDone
|
|
|
547 destroy C
|
|
|
548
|
|
|
549 B --> A: Request Created
|
|
|
550 deactivate B
|
|
|
551
|
|
|
552 A --> User: Done
|
|
|
553 deactivate A
|
|
|
554
|
|
|
555 @enduml
|
|
|
556
|
|
|
557 <!-- Reset PlantUML -->
|
|
|
558 <div class="clearfix"></div>
|
|
|
559
|
|
|
560
|
|
|
561 ## クラス図
|
|
|
562
|
|
|
563 @startuml
|
|
|
564
|
|
|
565 class BaseClass
|
|
|
566
|
|
|
567 namespace net.dummy #DDDDDD {
|
|
|
568 .BaseClass <|-- Person
|
|
|
569 Meeting o-- Person
|
|
|
570
|
|
|
571 .BaseClass <|- Meeting
|
|
|
572 }
|
|
|
573
|
|
|
574 namespace net.foo {
|
|
|
575 net.dummy.Person <|- Person
|
|
|
576 .BaseClass <|-- Person
|
|
|
577
|
|
|
578 net.dummy.Meeting o-- Person
|
|
|
579 }
|
|
|
580
|
|
|
581 BaseClass <|-- net.unused.Person
|
|
|
582
|
|
|
583 @enduml
|
|
|
584
|
|
|
585 <!-- Reset PlantUML -->
|
|
|
586 <div class="clearfix"></div>
|
|
|
587
|
|
|
588
|
|
|
589 ## コンポーネント図
|
|
|
590
|
|
|
591 @startuml
|
|
|
592
|
|
|
593 package "Some Group" {
|
|
|
594 HTTP - [First Component]
|
|
|
595 [Another Component]
|
|
|
596 }
|
|
|
597
|
|
|
598 node "Other Groups" {
|
|
|
599 FTP - [Second Component]
|
|
|
600 [First Component] --> FTP
|
|
|
601 }
|
|
|
602
|
|
|
603 cloud {
|
|
|
604 [Example 1]
|
|
|
605 }
|
|
|
606
|
|
|
607
|
|
|
608 database "MySql" {
|
|
|
609 folder "This is my folder" {
|
|
|
610 [Folder 3]
|
|
|
611 }
|
|
|
612 frame "Foo" {
|
|
|
613 [Frame 4]
|
|
|
614 }
|
|
|
615 }
|
|
|
616
|
|
|
617
|
|
|
618 [Another Component] --> [Example 1]
|
|
|
619 [Example 1] --> [Folder 3]
|
|
|
620 [Folder 3] --> [Frame 4]
|
|
|
621
|
|
|
622 @enduml
|
|
|
623
|
|
|
624 <!-- Reset PlantUML -->
|
|
|
625 <div class="clearfix"></div>
|
|
|
626
|
|
|
627
|
|
|
628 ## ステート図
|
|
|
629
|
|
|
630
|
|
|
631 @startuml
|
|
|
632 scale 600 width
|
|
|
633
|
|
|
634 [*] -> State1
|
|
|
635 State1 --> State2 : Succeeded
|
|
|
636 State1 --> [*] : Aborted
|
|
|
637 State2 --> State3 : Succeeded
|
|
|
638 State2 --> [*] : Aborted
|
|
|
639 state State3 {
|
|
|
640 state "Accumulate Enough Data\nLong State Name" as long1
|
|
|
641 long1 : Just a test
|
|
|
642 [*] --> long1
|
|
|
643 long1 --> long1 : New Data
|
|
|
644 long1 --> ProcessData : Enough Data
|
|
|
645 }
|
|
|
646 State3 --> State3 : Failed
|
|
|
647 State3 --> [*] : Succeeded / Save Result
|
|
|
648 State3 --> [*] : Aborted
|
|
|
649
|
|
|
650 @enduml
|
|
|
651
|
|
|
652 <!-- Reset PlantUML -->
|
|
|
653 <div class="clearfix"></div>
|
|
|
654
|
|
|
655 # :pencil: blockdiag
|
|
|
656
|
|
|
657 See [blockdiag](http://blockdiag.com/).
|
|
|
658
|
|
|
659 ## blockdiag
|
|
|
660
|
|
|
661 <!-- Resize blockdiag -->
|
|
|
662 <div style="max-width: 600px">
|
|
|
663
|
|
|
664 ::: blockdiag
|
|
|
665 blockdiag {
|
|
|
666 A -> B -> C -> D;
|
|
|
667 A -> E -> F -> G;
|
|
|
668 }
|
|
|
669 :::
|
|
|
670
|
|
|
671 </div>
|
|
|
672
|
|
|
673 ## seqdiag
|
|
|
674
|
|
|
675 <!-- Resize blockdiag -->
|
|
|
676 <div style="max-width: 600px">
|
|
|
677
|
|
|
678 ::: seqdiag
|
|
|
679 seqdiag {
|
|
|
680 browser -> webserver [label = "GET /index.html"];
|
|
|
681 browser <-- webserver;
|
|
|
682 browser -> webserver [label = "POST /blog/comment"];
|
|
|
683 webserver -> database [label = "INSERT comment"];
|
|
|
684 webserver <-- database;
|
|
|
685 browser <-- webserver;
|
|
|
686 }
|
|
|
687 :::
|
|
|
688
|
|
|
689 </div>
|
|
|
690
|
|
|
691 ## actdiag
|
|
|
692
|
|
|
693 <!-- Resize blockdiag -->
|
|
|
694 <div style="max-width: 600px">
|
|
|
695
|
|
|
696 ::: actdiag
|
|
|
697 actdiag {
|
|
|
698 write -> convert -> image
|
|
|
699
|
|
|
700 lane user {
|
|
|
701 label = "User"
|
|
|
702 write [label = "Writing reST"];
|
|
|
703 image [label = "Get diagram IMAGE"];
|
|
|
704 }
|
|
|
705 lane actdiag {
|
|
|
706 convert [label = "Convert reST to Image"];
|
|
|
707 }
|
|
|
708 }
|
|
|
709 :::
|
|
|
710
|
|
|
711 </div>
|
|
|
712
|
|
|
713 ## nwdiag
|
|
|
714
|
|
|
715 <!-- Resize blockdiag -->
|
|
|
716 <div style="max-width: 600px">
|
|
|
717
|
|
|
718 ::: nwdiag
|
|
|
719 nwdiag {
|
|
|
720 network dmz {
|
|
|
721 address = "210.x.x.x/24"
|
|
|
722
|
|
|
723 web01 [address = "210.x.x.1"];
|
|
|
724 web02 [address = "210.x.x.2"];
|
|
|
725 }
|
|
|
726 network internal {
|
|
|
727 address = "172.x.x.x/24";
|
|
|
728
|
|
|
729 web01 [address = "172.x.x.1"];
|
|
|
730 web02 [address = "172.x.x.2"];
|
|
|
731 db01;
|
|
|
732 db02;
|
|
|
733 }
|
|
|
734 }
|
|
|
735 :::
|
|
|
736
|
|
|
737 </div>
|
|
|
738
|
|
|
739 ## rackdiag
|
|
|
740
|
|
|
741 <!-- Resize blockdiag -->
|
|
|
742 <div style="max-width: 600px">
|
|
|
743
|
|
|
744 ::: rackdiag
|
|
|
745 rackdiag {
|
|
|
746 // define height of rack
|
|
|
747 8U;
|
|
|
748
|
|
|
749 // define rack items
|
|
|
750 1: UPS [2U];
|
|
|
751 3: DB Server
|
|
|
752 4: Web Server
|
|
|
753 5: Web Server
|
|
|
754 6: Web Server
|
|
|
755 7: Load Balancer
|
|
|
756 8: L3 Switch
|
|
|
757 }
|
|
|
758 :::
|
|
|
759
|
|
|
760 </div>
|
|
|
761
|
|
|
762 ## packetdiag
|
|
|
763
|
|
|
764 <!-- Resize blockdiag -->
|
|
|
765 <div style="max-width: 600px">
|
|
|
766
|
|
|
767 ::: packetdiag
|
|
|
768 packetdiag {
|
|
|
769 colwidth = 32
|
|
|
770 node_height = 72
|
|
|
771
|
|
|
772 0-15: Source Port
|
|
|
773 16-31: Destination Port
|
|
|
774 32-63: Sequence Number
|
|
|
775 64-95: Acknowledgment Number
|
|
|
776 96-99: Data Offset
|
|
|
777 100-105: Reserved
|
|
|
778 106: URG [rotate = 270]
|
|
|
779 107: ACK [rotate = 270]
|
|
|
780 108: PSH [rotate = 270]
|
|
|
781 109: RST [rotate = 270]
|
|
|
782 110: SYN [rotate = 270]
|
|
|
783 111: FIN [rotate = 270]
|
|
|
784 112-127: Window
|
|
|
785 128-143: Checksum
|
|
|
786 144-159: Urgent Pointer
|
|
|
787 160-191: (Options and Padding)
|
|
|
788 192-223: data [colheight = 3]
|
|
|
789 }
|
|
|
790 :::
|
|
|
791
|
|
|
792 </div>
|
