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:



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.



Interpretation of these characters starts at the top left corner and continues depending on the current character.

All other characters are treated as text.