Svgbob specification

Svgbob is a diagramming model which uses common typing characters to approximate the shape

characters names description
- dash, hypen, minus for horizontal lines
_ underscore for horizontal lines
\| pipe, or for vertical lines
/ forward slash for lines slanted to the right
\\ backslash for lines slanted to the left
+ plus, add, cross for sharp intersection
. dot, period for rounded corner intersection
, comma for rounded corner intersection
' single quote for rounded corner intersection
` backtick for rounded corner intersection
( open parenthesis rounded side of an arc
) close parenthesis rounded side of an arc
[ open braces rectangular corner
] close braces rectangular corner
* asterisk for emphasized intersection
o lowercase letter o for intersection
O uppercase letter O for intersection
^ caret for arrow up
v lowercase letter v for arrow down
V lowercase letter V for arrow down
< lesser than for arrow left
> greater than for arrow right
= equal sign for double horizontal line
x lowercase letter x for intersection
X uppercase letter X for intersection

Principle

The rendered shape should closely resembles to that of the ascii drawing / formation.

Non-goals

The goal is NOT to be able to make graphs and diagrams with less effort.

Default sizes

Text height is 2 times the text width, both should be a multiple of 4.

Default values: - text width = 8px; - text height = 16px;

## Horizontal line - - if next to an alphanumeric character it will be rendered as text. - if next to another drawing character, it will be rendered as a line. - if alone it will be rendered as a line.
Example 1:
|text | svg |rendered |------|---------------------------------------|-------------- |- |<line x1="0" y1="8" x2="8" y2="8"/> | |-- |<line x1="0" y1="8" x2="16" y2="8"/> | |----|<line x1="0" y1="8" x2="32" y2="8"/> |
Example 3: Next to an alphanumeric character
|text |svg |rendered |------|------------------------------|------- |1- |<text x="2" y="12">1-</text>|1- |-a |<text x="2" y="12">-a</text>|-a
Example 4: Used together with text
|text |svg |rendered |-----------|-------------------------------------|---------- |opt-in |<text x="2" y="12">opt-in</text> |opt-in |chat-room|<text x="2" y="12">chat-room</text>|chat-room

Vertical line |

Example 1:

|
|
text svg rendered
\|
\|
<line x1="4" y1="0" x2="4" y2="32"></line>
use as or expression
Example 2: 
    a||b   <text>a||b</text>

Forward slash /

Example 1:

 /
/
text svg rendered
 /
/
<line x1="0" y1="16" x2="16" y2="32"></line>

Example 2:

text svg rendered
folder/ <text x="2" y="12">folder/</text> folder/
/usr/bin <text x="2" y="12">/usr/bin</text> /usr/bin

Example 3: Aligned next to a drawing element

text svg rendered
folder/
  /usr/bin
<line x1="40" y1="32" x2="56" y2="0"/>
<text x="2" y="12">folder</text>
<text x="10" y="28">/usr</text>
<text x="58" y="28">bin</text>
folder/usrbin

Backward slash \

Example 1:

 \
  \
text svg rendered
\\
 \\
<line x1="0" y1="0" x2="16" y2="32"/>

Example 2:

text svg rendered
C:\\users <text x="2" y="12">C:\\users</text> C:\users

Cross +

Example 1:

text svg rendered
-+ <line x1="0" y1="4" x2="12" y2="4"/>
+- <line x1="4" y1="4" x2="16" y2="4"/>
\|
+
<line x1="4" y1="0" x2="4" y2="24"/>
+
\|
<line x1="4" y1="8" x2="4" y2="32"/>