title: The "draw" language
role: manual
tags: #graphic #manual #zettelstore
syntax: zmk
back: 00001007031300
backward: 00001007031300 00001008000000
box-number: 1
copyright: (c) 2020-present by Detlef Stern <ds@zettelstore.de>
created: 20220131142036
forward: 00001008000000
lang: en
license: EUPL-1.2-or-later
modified: 20230403123738
published: 20230403123738
visibility: public

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:
@@@svg
<svg class="zs-draw" width="260" height="80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><marker id="Pointer" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="5" markerHeight="10" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" /></marker><g id="closed" stroke="#000" stroke-width="2" fill="none"><path id="closed0" d="M 5 10 L 15 10 L 25 10 L 35 10 L 45 10 L 55 10 L 65 10 L 75 10 L 85 10 L 85 30 L 85 50 L 75 50 L 65 50 L 55 50 L 45 50 L 35 50 L 25 50 L 15 50 L 5 50 L 5 30 Z" /><path id="closed1" d="M 165 20 Q 165 10 175 10 L 175 10 L 185 10 L 195 10 L 205 10 L 215 10 L 225 10 L 235 10 L 235 10 Q 245 10 245 20 L 245 30 L 245 40 Q 245 50 235 50 L 235 50 L 225 50 L 215 50 L 205 50 L 195 50 L 185 50 L 175 50 L 175 50 Q 165 50 165 40 L 165 30 Z" /></g><g id="lines" stroke="#000" stroke-width="2" fill="none"><path id="open2" marker-end="url(#Pointer)" d="M 105 30 L 115 30 L 125 30 L 135 30 L 145 30 " /></g><g id="text" stroke="none" style="font-family:monospace;font-size:15px"><text id="obj3" x="22.5" y="35">Box 1</text><text id="obj4" x="182.5" y="35">Box 2</text></g></svg>
@@@

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.