====== Bac à sable ======
le BBcode marche aussi
[b]test  de gras en bbcode[/b]
[color=red]couleur rouge en bbcode[/color]

test
test
<note>
Voici un exemple de note
</note>
test
<note importante>
un exemple de note importante
</note>
test
<note tuyau>
un exemple de note tuyau
</note>
test
<note bloquante>
et un exemple de note bloquante
</note>

un exemple de code php
<code php>
<?
if($caca=="good")
  echo "ca pue!";
// de fab: t'avais oublié le "$" nom de dieu !  
elseif($caca=="caca")
  echo "on est vraiment dedans...";
else
  tirerlachasse($PQ,$odeur,$coupdebrosse);
?>
</code>
{{playground:coucher_de_soleil.jpg|}}


===== Syntax =====

The syntax wraps any [[http://ditaa.sourceforge.net/|ditaa formatted]] ASCII flowchart into %%<ditaa></ditaa>%% tags. The opening tag can have several additional optional parameters (see below).

<code html>
<ditaa [optional parameters]>

... (some ditaa-code) ...

</ditaa>
</code>

==== Parameters ====

^ Parameter           ^ Default       ^ Description ^
| width=//<num>//     | width=0       | Rescale the final image to this width. When set to 0, diita will choose the needed width and no rescaling is done. |
| height=//<num>//    | height=0      | Same as above but for height. Only works when a width is given as well |
| //<num>//x//<num>// | 0x0           | Combines the above parameters into one. That's a lowercase x! |
| <float>X            | 1.0X          | Tells ditaa to scale the image. Eg. 2.0X makes the final image twice as big. That's an uppercase X |
| (no)round           | noround       | Enable or disable round corners for all boxes |
| (no)shadow          | shadow        | Enable or disable box shadows |
| (no)antialias       | antialias     | Enable or disable antialiasing |
| (no)edgesep         | edgesep       | Enable or disabling the separation of box edges where boxes directly touch |
| left center right   |               | Align the image to the left, center or right. Default does no alignment (inline)|

===== Possible tags =====

Not all shape selector tags are documented on the ditaa site. A quick source scan revealed:

^ tag  ^ Description   ^
| {c}  | decision(Choice)  |
| {d}  | document  |
| {io} | input/output, parallelogram  |
| {mo} | manual operation  |
| {o}  | ellipse, circle  |
| {s}  | storage  |
| {tr} | trapezoid (looks like an inverted {mo} )  |


===== Example =====


<code>
<ditaa round noedgesep>
    +--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+
</ditaa>
</code>

<ditaa round noedgesep>
    +--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+
</ditaa>


<ditaa round noedgesep>
/----\ /----\
|c33F| |cC02|
|    | |    |
\----/ \----/

/----\ /----\
|c1FF| |c1AB|
|    | |    |
\----/ \----/
</ditaa>

<ditaa round noedgesep>
/-----------------\
| Things to do    |
| cGRE            |
| o Cut the grass |
| o Buy jam       |
| o Fix car       |
| o Make website  |
\-----------------/
</ditaa>


<ditaa round>
/--\/--\/--\          v
|  ||  ||  |
|  ++  ++  | +----+---+----+----+---+---+---+
\\  cDB6  // |    |{o}|    |    |{c}|{s}|   |
 | /----\ |  |{tr}|   |{mo}|{io}|   |   |{d}|
 | |c733| |  +----+---+----+----+---+---+---+
 +-+----+-+
            +-------+
+-------+   |       |    +---------+
|cFDA   |   |{c}    |    |eat cFF8 +
|wake up+-->+hungry?+--->|breakfast|
| {o}   |   | cDBF  |Y   +----+----+
+-------+   |       |         |
            +---+---+         v
                |N       +-----------+
                +------->| save c9FB |
                         | planet{mo}|
                         +-----------+

      /-----------------------\
      |         ditaa         |
      |  /- /\ +\/+ +\ |  +-  |
      |  \\ ++ |\/| +/ |  +-  |
      |  -/ || |  | |  +- +-  |
      |     cDEF {o}          |
      \-----------------------/
</ditaa>

==== Test ====
<ditaa round>
+--------+
| Aroun Thasief |
|            |
|            |
+-------+
</ditaa>