## Svgbob specification
[Rendered](https://ivanceras.github.io/spongedown-editor/?file=https://raw.githubusercontent.com/ivanceras/svgbobrus/master/spec.md)
Svgbob is a diagramming model which uses common typing characters to approximate the shape
| `-` | 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` | uppercase 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:**
|`-` |`<line x1="0" y1="8" x2="8" y2="8"/>` |<svg width="16" height="16"><line x1="0" y1="8" x2="8" y2="8"/></svg>
|`--` |`<line x1="0" y1="8" x2="16" y2="8"/>` |<svg width="16" height="16"><line x1="0" y1="8" x2="16" y2="8"/></svg>
|`----`|`<line x1="0" y1="8" x2="32" y2="8"/>` |<svg width="32" height="16"><line x1="0" y1="8" x2="32" y2="8"/></svg>
```bob
+---------------+--------
|"--" | -- |
+-------+-------+--------
|"----" | ---- |
+-------+-------+---------
```
**Example 3:** Next to an alphanumeric character
|`1-` |`<text x="2" y="12">1-</text>`|<svg width="32" height="16"><text x="2" y="12">1-</text></svg>
|`-a` |`<text x="2" y="12">-a</text>`|<svg width="32" height="16"><text x="2" y="12">-a</text></svg>
**Example 4:** Used together with text
|`opt-in` |`<text x="2" y="12">opt-in</text>` |<svg width="48" height="16"><text x="2" y="12">opt-in</text></svg>
|`chat-room`|`<text x="2" y="12">chat-room</text>`|<svg width="144" height="16"><text x="2" y="12">chat-room</text></svg>
---------------------
## Vertical line `|`
- if next to an alphanumeric character it will be rendered as text.
- if next to another drawing character it will be rendered as vertical line.
- if alone it will be rendered as vertical line
**Example 1:**
```
|
|
```
|`\|`<br>`\|` |`<line x1="4" y1="0" x2="4" y2="32"></line>` |<svg width="8" height="32"><line x1="4" y1="0" x2="4" y2="32"></line></svg> |
use as or expression
Example 2:
a||b <text>a||b</text>
------------------
## Forward slash `/`
- if next to an alphanumeric character it will be rendered as text.
- if at least one if its 8 neighbors: (top,bottom,left,right, topleft, topright, bottomleft, bottomright)
is a drawing character then it will be rendered as a slanted line to the right
- if used as text but next to a drawing element at the same time, rendering to drawing
element takes precedence.
**Example 1:**
```
/
/
```
| `/`<br>`/`|`<line x1="0" y1="16" x2="16" y2="32"></line>`|<svg width="16" height="32"><line x1="0" y1="32" x2="16" y2="0"></line></svg>
**Example 2:**
|`folder/` |`<text x="2" y="12">folder/</text>`|<svg width="56" height="16"><text x="2" y="12">folder/</text></svg>
|`/usr/bin` |`<text x="2" y="12">/usr/bin</text>`|<svg width="72" height="16"><text x="2" y="12">/usr/bin</text></svg>
**Example 3:** Aligned next to a drawing element
|`folder/`<br> `/usr/bin`|`<line x1="40" y1="32" x2="56" y2="0"/>`<br>`<text x="2" y="12">folder</text>`<br>`<text x="10" y="28">/usr</text>`<br>`<text x="58" y="28">bin</text>`|<svg width="100" height="32"><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></svg>
--------------------
## Backward slash `\`
- if next to an alphanumeric character, then it will be rendered as text
- if connects to a drawing element, then it will be rendered as a slanted line to the left
- if alone then it will be rendered as slanted line to the left
**Example 1:**
```
\
\
```
|`\\`<br> `\\`|`<line x1="0" y1="0" x2="16" y2="32"/>`|<svg width="16" height="32"><line x1="0" y1="0" x2="16" y2="32"/></svg>
**Example 2:**
|`C:\\users`|`<text x="2" y="12">C:\\users</text>`|<svg width="72" height="16"><text x="2" y="12">C:\\users</text></svg>
## Cross `+`
- If the left side is horizontal, then this will become a horizontal line connecting midway to the left
- If the right side is horizontal, then this will come a horizontal line connecting midway to the right
- If top of this character is a vertical line, then this will become a vertical line connecting midway to the the top
- If bottom of this is a vertical line, then this will become a vertical line connecting miday to bottom
**Example 1:**
|`-+` |`<line x1="0" y1="4" x2="12" y2="4"/>`|<svg width="32" height="8"><line x1="0" y1="4" x2="12" y2="4"/></svg>
|`+-` |`<line x1="4" y1="4" x2="16" y2="4"/>`|<svg width="32" height="8"><line x1="4" y1="4" x2="16" y2="4"/></svg>
|`\|`<br>`+` |`<line x1="4" y1="0" x2="4" y2="24"/>`|<svg width="8" height="32"><line x1="4" y1="0" x2="4" y2="24"/></svg>
|`+`<br>`\|` |`<line x1="4" y1="8" x2="4" y2="32"/>`|<svg width="8" height="32"><line x1="4" y1="8" x2="4" y2="32"/></svg>
## Dot and Comma (.,)
- Primary purpose is to make rounded corners, top_left rounded corner and top_right rounded corner
** Example 1:**
|`.-`<br>`\|``|