(zettel (meta (back "00001007031300") (backward "00001007031300 00001008000000") (box-number "1") (created "20220131142036") (forward "00001008000000") (modified "20230403123738") (published "20230403123738") (role "manual") (syntax "zmk") (tags "#graphic #manual #zettelstore") (title "The \"draw\" language")) (rights 4) (encoding "") (content "Sometimes, \"\"a picture is worth a thousand words\"\".\nTo create some graphical representations, Zettelmarkup provides a simple mechanism.\nCharacters like \"\"''|''\"\" or \"\"''-''\"\" already provide some visual feedback.\nFor example, to create a picture containing two boxes that are connected via an arrow, the following representation is possible:\n```\n~~~draw\n+-------+       .-------.\n| Box 1 | ----> | Box 2 |\n+-------+       '-------'\n~~~\n```\nZettelstore translates this to:\n~~~draw\n+-------+       .-------.\n| Box 1 | ----> | Box 2 |\n+-------+       '-------'\n~~~\n\nTechnically spoken, the drawing is translated to a [[SVG|00001008000000#svg]] element.\n\nThe following characters are interpreted to create a graphical representation.\nSome of them will start a path that results in a recognized object.\n\n|=Character:|Meaning|Path Start:\n| ''+'' | Corner|Yes\n| ''-'' | Horizontal line|Yes\n| ''|'' | Vertical line|Yes\n| ''<'' | Left arrow|Yes\n| ''>'' | Right arrow|No\n| ''v'' | Down arrow|No\n| ''^'' | Up arrow|Yes\n| '':'' | Dashed vertical line|Yes\n| ''='' | Dashed horizontal line|Yes\n| ''.'' | Rounded corner|Yes\n| ''\\''' | Rounded corner|Yes\n| ''/''  | North-east diagonal line|Yes\n| ''\\\\'' | South-east diagonal line|Yes\n| ''x'' | A tick on a line|No\n| ''*'' | A dot on a line|No\n\nInterpretation of these characters starts at the top left corner and continues depending on the current character.\n\nAll other characters are treated as text."))