title: The "draw" language
role: manual
tags: #graphic #manual #zettelstore
syntax: zmk

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.