Wiki CgX

Parce que j'ai un cerveau, mais pas trop.

Outils pour utilisateurs

Outils du site


wiki:syntaxe:diagram

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
wiki:diagram-syntax [05 Aug 2021 :: 08:53] CgXwiki: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 7: Ligne 7:
 {{ :wiki:screenshot_2021-08-05_at_08-51-43_dokuwiki_plugin_diagram_-_nikita_melnichenko_s_website.png?nolink |}} {{ :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 ===== ===== Quelques exemples =====
 +
 +==== Simple ====
 +
 +<code>
 +| AAA |-| BBB |
 +| |:| | | | | |
 +| |L|~|~| CCC |
 +</code>
 +
  
 <diagram> <diagram>
Ligne 15: Ligne 28:
 </diagram> </diagram>
  
-----+ 
 +==== Avec textes plus longs ==== 
 + 
 +<code> 
 +| root |-| 1-st branch | 
 +| |:| | | | | | 
 +| |L|~|~| 2-nd branch | 
 +</code>
  
 <diagram> <diagram>
Ligne 23: Ligne 43:
 </diagram> </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> <diagram>
Ligne 31: Ligne 61:
 </diagram> </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> <diagram>
Ligne 40: 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
 +1 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>
 +10 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/syntaxe/diagram.1628146404.txt.gz · Dernière modification : 05 Aug 2021 :: 08:53 de CgX