Skip to content

Latest commit

 

History

History
184 lines (145 loc) · 7.55 KB

spec.md

File metadata and controls

184 lines (145 loc) · 7.55 KB

Svgbob specification

Rendered

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 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:

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 |

  • 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:

|
|
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 /

  • 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:

 /
/
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 \

  • 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:

 \
  \
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 +

  • 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:

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"/>

Dot and Comma (.,)

  • Primary purpose is to make rounded corners, top_left rounded corner and top_right rounded corner

** Example 1:**

text svg rendered
.-
`|``