Différences

Ci-dessous, les différences entre deux révisions de la page.

--- wiki:diagram-syntax [05 Aug 2021 :: 08:52] – CgX
+++ wiki:syntaxe:diagram [05 Aug 2021 :: 09:09] (Version actuelle) – ↷ Page déplacée et renommée de wiki:diagram-syntax à wiki:syntaxe:diagram CgX
@@ Ligne 1: / Ligne 1: @@
 ====== Diagram syntax ======
+Page référence : [[http://nikita.melnichenko.name/projects/dokuwiki-diagram/index.php?lang=en]]
 ===== Tiles =====
@@ Ligne 5: / Ligne 7: @@
 {{ :wiki:screenshot_2021-08-05_at_08-51-43_dokuwiki_plugin_diagram_-_nikita_melnichenko_s_website.png?nolink |}}
+  * Diagram specification is a multiline expression.
+  * Each line consists of control characters, that define links between blocks, and letter sequences, that define blocks.
+  * These entities are separated by the special character `|'.
 ===== Quelques exemples =====
+==== Simple ====
+<code>
+| AAA |-| BBB |
+| |:| | | | | |
+| |L|~|~| CCC |
+</code>
 <diagram>
@@ Ligne 13: / Ligne 28: @@
 </diagram>
-----
+==== Avec textes plus longs ====
+<code>
+| root |-| 1-st branch |
+| |:| | | | | |
+| |L|~|~| 2-nd branch |
+</code>
 <diagram>
@@ Ligne 21: / Ligne 43: @@
 </diagram>
-----
+==== Avec liens & Syntaxe Wiki ====
+On peut représenter les cases par des variables qu'on peut nommer en fin de ligne avec | et = :
+<code>
+| AAA |-| BBB |AAA=root|BBB=1<sup>st</sup> branch (see [[wp>Branch]])
+| |:| | | | | |
+| |L|~|~| CCC |CCC=2<sup>nd</sup> branch\\ **(very important branch)**
+</code>
 <diagram>
@@ Ligne 29: / Ligne 61: @@
 </diagram>
-----
+==== Tous les types de connecteurs ====
+<code>
+| | |v| | | | |V| | |
+| |,|!|.| | |F|:|7| | | |y| | |p| |
+|)|-|+|-|(|D|~|%|~|C| |}| |{|]| |[| |*| |#|
+| |`|!|'| | |L|:|J| | | |h| | |b| |
+| | |^| | | | |A| | |
+</code>
+<diagram>
+| | |v| | | | |V| | |
+| |,|!|.| | |F|:|7| | | |y| | |p| |
+|)|-|+|-|(|D|~|%|~|C| |}| |{|]| |[| |*| |#|
+| |`|!|'| | |L|:|J| | | |h| | |b| |
+| | |^| | | | |A| | |
+</diagram>
+==== Généalogique ====
+<code>
+| | | Dad |y| Mom | | |Dad=Daddy|Mom=Mommy
+| |,|-|-|-|+|-|-|-|.| |
+| Sys | |  Me | | Bro |Sys=Syster|Bro=Brother
+</code>
 <diagram>
@@ Ligne 38: / Ligne 97: @@
+==== Coloré ====
+On peut représenter du code CSS pour les cases, avec {} en fin de ligne :
+<code>
+| AAA | | | | |F|~|~|~|7| |AAA{border-color:blue;background-color:lightgreen}=Border is blue,\\ background is lightgreen
+| |!| | | | | CCC | | DDD |CCC{border-color:#a9c}=Border is #a9c,\\ background is transparent|DDD{border-color:silver;background-color:silver;}=Border is silver,\\ background is silver
+| BBB | | | | | | | | | | |BBB{border-color:rgb(0%,50%,0%);background-color:#abcdef}=Border is green,\\ background is #abcdef
+</code>
+<diagram>
+| AAA | | | | |F|~|~|~|7| |AAA{border-color:blue;background-color:lightgreen}=Border is blue,\\ background is lightgreen
+| |!| | | | | CCC | | DDD |CCC{border-color:#a9c}=Border is #a9c,\\ background is transparent|DDD{border-color:silver;background-color:silver;}=Border is silver,\\ background is silver
+| BBB | | | | | | | | | | |BBB{border-color:rgb(0%,50%,0%);background-color:#abcdef}=Border is green,\\ background is #abcdef
+</diagram>
+==== Identations & Alignements ====
+<code>
+|Left|                 |Left{text-align:left;}=Text is\\ aligned to the left
+| |!|
+| |`|-|-|Center|       |Center=By default text is aligned\\ to the center
+| | | | |  |!|
+| | | | |  |`|-|-|Right|Right{text-align:right;padding:1em}=Align text\\ to the right\\ and setup indents
+</code>
+<diagram>
+|Left|                 |Left{text-align:left;}=Text is\\ aligned to the left
+| |!|
+| |`|-|-|Center|       |Center=By default text is aligned\\ to the center
+| | | | |  |!|
+| | | | |  |`|-|-|Right|Right{text-align:right;padding:1em}=Align text\\ to the right\\ and setup indents
+</diagram>
+==== Etendus (branches plus longues) ====
+<code>
+| AAA |-|-|-| BBB | | | | | | |
+| |:|
+| |:| | | | | | | | | | | DDD |
+| |:|
+| |L|~|~|~|~| CCC |
+</code>
+<diagram>
+| AAA |-|-|-| BBB | | | | | | |
+| |:|
+| |:| | | | | | | | | | | DDD |
+| |:|
+| |L|~|~|~|~| CCC |
+</diagram>
+==== Avec flèches ====
+<code>
+|  AAA  |-@2|  BBB  |-@a|  EEE   |
+| |:@1| |   | |!@4| |   | |}@72|-|-| GGG |
+|  DDD  |~@8|  CCC  |   |  FFF   |
+</code>
+<diagram>
+|  AAA  |-@2|  BBB  |-@a|  EEE   |
+| |:@1| |   | |!@4| |   | |}@72|-|-| GGG |
+|  DDD  |~@8|  CCC  |   |  FFF   |
+</diagram>
+To insert an arrow you should put '@' and one or two symbols as direction settings after а control character. The first symbol sets arrows that are pointed out of the center of connection tile. It's a hexadecimal number that has 4 bits for each of 4 directions: Up, Right, Down, Left. Each bit sets the presence of an arrow in the corresponding direction. If you're not familiar with hexadecimal representation then use the following algorithm. Calculate a sum of direction numbers using this table:
+<code>
+Up 	Right 	Down 	Left
+	2 	4 	8
+</code>
+If you got a number that is greater than nine, then replace it by a letter according to the table:
+<code>
+	11 	12 	13 	14 	15
+a 	b 	c 	d 	e 	f
+</code>
+The second symbol is not necessary if you need all arrows to look outside. Otherwise, specify the ones that should look inside using the same direction scheme for the second symbol.

Wiki CgX

Outils pour utilisateurs

Outils du site

Différences

Outils de la page