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 |
The rendered shape should closely resembles to that of the ascii drawing / formation.
The goal is NOT to be able to make graphs and diagrams with less effort.
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> | |-a |<text x="2" y="12">-a</text> | |
Example 4: Used together with text |
|text |svg |rendered |-----------|-------------------------------------|---------- |opt-in |<text x="2" y="12">opt-in</text> | |chat-room |<text x="2" y="12">chat-room</text> | |
|
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>
/
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> |
|
/usr/bin |
<text x="2" y="12">/usr/bin</text> |
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> |
\
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> |
+
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"/> |