(((meta (@ (content . "The \"draw\" language") (name . "title"))) (meta (@ (content . "manual") (name . "role"))) (meta (@ (content . "#graphic #manual #zettelstore") (name . "tags"))) (meta (@ (content . "zmk") (name . "syntax"))) (meta (@ (content . "00001007031300") (name . "back"))) (meta (@ (content . "00001007031300 00001008000000") (name . "backward"))) (meta (@ (content . "1") (name . "box-number"))) (meta (@ (content . "(c) 2020-present by Detlef Stern <ds@zettelstore.de>") (name . "copyright"))) (meta (@ (content . "20220131142036") (name . "created"))) (meta (@ (content . "00001008000000") (name . "forward"))) (meta (@ (content . "en") (name . "lang"))) (meta (@ (content . "EUPL-1.2-or-later") (name . "license"))) (meta (@ (content . "20230403123738") (name . "modified"))) (meta (@ (content . "20230403123738") (name . "published"))) (meta (@ (content . "public") (name . "visibility")))) (p "Sometimes," " " (@L (@H "&ldquo;") "a" " " "picture" " " "is" " " "worth" " " "a" " " "thousand" " " "words" (@H "&rdquo;")) "." " " "To" " " "create" " " "some" " " "graphical" " " "representations," " " "Zettelmarkup" " " "provides" " " "a" " " "simple" " " "mechanism." " " "Characters" " " "like" " " (@L (@H "&ldquo;") (kbd "|") (@H "&rdquo;")) " " "or" " " (@L (@H "&ldquo;") (kbd "-") (@H "&rdquo;")) " " "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:") (pre (code "~~~draw\n+-------+       .-------.\n| Box 1 | ----> | Box 2 |\n+-------+       '-------'\n~~~")) (p "Zettelstore" " " "translates" " " "this" " " "to:") (p (@H "<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>")) (p "Technically" " " "spoken," " " "the" " " "drawing" " " "is" " " "translated" " " "to" " " "a" " " (a (@ (href . "00001008000000#svg")) "SVG") " " "element.") (p "The" " " "following" " " "characters" " " "are" " " "interpreted" " " "to" " " "create" " " "a" " " "graphical" " " "representation." " " "Some" " " "of" " " "them" " " "will" " " "start" " " "a" " " "path" " " "that" " " "results" " " "in" " " "a" " " "recognized" " " "object.") (table (thead (tr (td (@ (class . "center")) "Character") (td "Meaning") (td (@ (class . "center")) "Path" " " "Start"))) (tbody (tr (td (@ (class . "center")) (kbd "+")) (td "Corner") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd "-")) (td "Horizontal" " " "line") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd "|")) (td "Vertical" " " "line") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd "<")) (td "Left" " " "arrow") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd ">")) (td "Right" " " "arrow") (td (@ (class . "center")) "No")) (tr (td (@ (class . "center")) (kbd "v")) (td "Down" " " "arrow") (td (@ (class . "center")) "No")) (tr (td (@ (class . "center")) (kbd "^")) (td "Up" " " "arrow") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd ":")) (td "Dashed" " " "vertical" " " "line") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd "=")) (td "Dashed" " " "horizontal" " " "line") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd ".")) (td "Rounded" " " "corner") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd "'")) (td "Rounded" " " "corner") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd "/")) (td "North-east" " " "diagonal" " " "line") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd "\\")) (td "South-east" " " "diagonal" " " "line") (td (@ (class . "center")) "Yes")) (tr (td (@ (class . "center")) (kbd "x")) (td "A" " " "tick" " " "on" " " "a" " " "line") (td (@ (class . "center")) "No")) (tr (td (@ (class . "center")) (kbd "*")) (td "A" " " "dot" " " "on" " " "a" " " "line") (td (@ (class . "center")) "No")))) (p "Interpretation" " " "of" " " "these" " " "characters" " " "starts" " " "at" " " "the" " " "top" " " "left" " " "corner" " " "and" " " "continues" " " "depending" " " "on" " " "the" " " "current" " " "character.") (p "All" " " "other" " " "characters" " " "are" " " "treated" " " "as" " " "text."))