Sometimes, ""a picture is worth a thousand words"".
To create some graphical representations, Zettelmarkup provides a simple mechanism.
Characters like ""''|''"" or ""''-''"" already provide some visual feedback.
For example, to create a picture containing two boxes that are connected via an arrow, the following representation is possible:
```
~~~draw
+-------+       .-------.
| Box 1 | ----> | Box 2 |
+-------+       '-------'
~~~
```
Zettelstore translates this to:
~~~{="draw"}
+-------+       .-------.
| Box 1 | ----> | Box 2 |
+-------+       '-------'
~~~
Technically spoken, the drawing is translated to a [[SVG|00001008000000#svg]] element.

The following characters are interpreted to create a graphical representation.
Some of them will start a path that results in a recognized object.
|=Character:|=Meaning|=Path Start:
|''+''|Corner|Yes
|''-''|Horizontal line|Yes
|''|''|Vertical line|Yes
|''<''|Left arrow|Yes
|''>''|Right arrow|No
|''v''|Down arrow|No
|''^''|Up arrow|Yes
|'':''|Dashed vertical line|Yes
|''=''|Dashed horizontal line|Yes
|''.''|Rounded corner|Yes
|''\'''|Rounded corner|Yes
|''/''|North-east diagonal line|Yes
|''\\''|South-east diagonal line|Yes
|''x''|A tick on a line|No
|''*''|A dot on a line|No
Interpretation of these characters starts at the top left corner and continues depending on the current character.

All other characters are treated as text.