Svgbob is a diagramming model
which uses a set of typing characters
to approximate the intended shape.
.---.
/-o-/--
.-/ / /->
( * \/
'-. \
\ /
'
It uses a combination of characters
which are readily available on your keyboards.
What can it do?
o-> Basic shapes
.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -.
! . :
! +------+ .------. .------. /\ .' `. :
! | | | | ( ) / \ .' `. ^ :
! +------+ '------' '------' '----' `. .' / # :
! _______ ________ # `.' / ^ / :
! / \ /\ \ \ o----> | ^ # / / :
! / \ / \ ) ) <----# | | ^ : / v :
! \ / \ / /_______/ v | ! : :
! \_______/ \/ o. o ! V :
! `.~~~~. :
! '. O :
! .-----------. . <. .> . '. ^ \ :
! ( ) ( ) ( ) : \ \ :
! '-----+ ,---' `> ' ` <' '.~~~~> \ v :
! |/ * :
! ' _ __ :
! __ .-. .--. .--.--. .--. .' '. ,' '. :
! (_) (__) ( ) ( ) ( ( ) ) ( ) ( ) ( ) :
! '-' `--' `--'--' `--' `._.' `.__.' :
! !
! ___ ____ ____ _____ !
! ,' `. ,' `. .' `. ,' `. !
! / \ / \ / \ / \ !
! \ / \ / ( ) ( ) !
! `.___.' `.____.' \ / \ / !
! `.____.' `._____.' !
! ______ !
! ,' `. !
! / \ .-----. .----. !
! | | \ / \ \ !
! | | \ / \ \ !
! \ / ' '----' !
! `.______.' !
! !
`~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~'
o-> Quick logo scribbles
.---. _
/-o-/-- .--. |-| .--.
.-/ / /-> /--. \ .--)-| .--.-. //.-.\
( * \/ / O )| | |-| |->| | (+(-*-))
'-. \ /\ |-// . * | '--'-' \\'-'/
\ / \ '+'/ \__/ '--'
' '--'
.----. _
| | ,--(_)
__|____|__ _/ .-. \
| ______--| (_)( ) )
`-/.::::.\-' \ `-'_/
'--------' `--(_)
o-> Even unicode box drawing characters are supported
┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕
├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡
└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛
╭─┬╮
├─┼┤
╰─┴╯
o-> Grids
.----. .----.
/ \ / \ .-----+-----+-----.
+----+ +----+ + +-----+-----+-----+ +-----+-----+-----+-----+
/ \ / \ / | | | | / / / / /
'----+ +----+ + | | | | +-----+-----+-----+-----+
\ / \ / | | | | / / / / /
'----' '----' '-----+-----+-----' '-----+-----+-----+-----+
___ ___ .---+---+---+---+---. .---+---+---+---. .---. .---.
___/ \___/ \ | | | | | | / \ / \ / \ / \ / | +---+ |
/ \___/ \___/ +---+---+---+---+---+ +---+---+---+---+ +---+ +---+
\___/ \___/ \ | | | | | | \ / \ / \ / \ / \ | +---+ |
/ \___/ \___/ +---+---+---+---+---+ +---+---+---+---+ +---+ +---+
\___/ \___/ \ | | | | | | / \ / \ / \ / \ / | +---+ |
\___/ \___/ '---+---+---+---+---' '---+---+---+---' '---' '---'
o-> Graphics Diagram
.
0 3 P * Eye / ^ /
*-------* +y \ +) \ / Reflection
| |4 | |7 | ◄╮ *----\-----*
| *-----|-* ⤹ +-----> +x / v X \ .-.<-------- o
|/ |/ / ⤴ / o \ ( / ) Refraction / \
*-------* v / \ '-' / \
5 6 +z v1 *------------------* v2 | o-----o
v
o-> CJK characters
.------------. | .-----------. | .-----.
| 文件系统 | | | 调度器 | | | MMU |
'------------' | '-----------' | '-----'
o-> Sequence Diagrams
.---> F
A B C D /
*-------*-----*---*----*-----> E
\ ^ \
v / '---> G
B --> C -'
,-.
`-'
/|\
,---. |
|Bob| / \
`-+-' Alice
| hello |
|-------------->|
| |
| Is it ok? |
|<- - - - - - - |
,-+-. Alice
|Bob| ,-.
`---' `-'
/|\
|
/ \
.─.
( 0 )
`-'
/ \
/ \
V V
.─. .─.
( 1 ) ( 4 )
`-' `-' .
/ \ | \ `.
/ \ | \ `.
V V | \ `.
.─. .─. V V V
( 2 ) ( 3 ) .─. .─. .─.
`─' `─' ( 5 ) ( 6 ) ( 7 )
`─' `─' `─'
o-> Plot diagrams
▲
Uin ┊ .------------------------
┊ |
┊ |
*---'┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄▶
Udc▲
"Udc_OK"┊ .---------------------
┊ / :
┊ / :
*---'┄┄┄┄:┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄▶
:<----->:
▲ 500ms :
┊ :
Cpu.Qon ┊┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄.-----------
┊ | Inactive
┊ Active |
*----------------'┄┄┄┄┄┄┄┄┄┄┄▶
o-> Railroad diagrams
┌------┐ .-. ┌---┐
o--╮---| elem |--( ; )-| n |--╭--o
| └------┘ `-' └---┘ |
| ╭------>------╮ |
| | ┌---┐ | |
╰-╯-╭--| x |--╮-╰----------╯
| | └---┘ | |
| | .-. | |
| `--( , )--' ^
| `-' |
| ╭-------->---------╮ |
| | ┌---┐ .-. | |
╰--╰-╭-| x |--( , )-╮-╯----╯
| └---┘ `-' |
`-------<------'
.------------>---------------.
┌-------------┐ .-. .-. | ┌------┐ .-. ┌-----┐ | .-. ┌------┐
O____| struct_name |_( : )_( | )_◞__| name |_( : )__| tpe |___◟___( | )__| body |______O
◝ └-------------┘ `-' `-' ◜ └------┘ `-' └-----┘ ◝ `-' └------┘ ◜
| | .-. | |
| `------------<------( , )--' |
| `-' |
`--------------------------------------------------------------------------------'
o-> Statistical charts
E +-------------------------*--+ E | o
D |-------------------*--*--|--* D | o o | o
C |-------------*--* | | | | C | o o | | | |
B |-------*--* | | | | | | B | o o | | | | | |
A +-*--*--+--+--+--+--+--+--+--+ A +-o--o--|--|--|--|--|--|--|--|
5 10 15 20 25 30 35 40 45 50 5 10 15 20 25 30 35 40 45 50
85.67 ┤ ╭╮
78.20 ┤ ││ ╭╮
70.73 ┤ ││ ╭╮ ╭╮ ╭╮ ╭╮ ╭╯╰─╮
63.27 ┤ ╭╮ ╭─╮ ││ ╭╯╰╮│╰─╯╰╮╭╮│╰──╯ │╭
55.80 ┤ ╭╮ ╭╮││╭╮ ╭╮╭╮ │ ╰─╯╰─╯ ││ ││││ ╰╯
48.33 ┤ │╰╮ ╭──╮ │││││╰╮│╰╯│ │ ╰╯ ╰╯╰╯
40.87 ┤╭╮ │ ╰╮╭╮ ╭╯ ╰─╮╭╮╭─╯╰╯╰╯ ╰╯ ╰──╯
33.40 ┤││ │ ╰╯╰╮╭╯ ││╰╯
25.93 ┤││╭╯ ╰╯ ╰╯
18.47 ┼╯││
11.00 ┤ ╰╯
└───────────┴───────────┴───────────┴───────────┴───────────┴────
2011 2012 2013 2014 2015 2016
o-> Flow charts
.--. .---. .---. .---. .---. .---. .---.
| | OS API '---' '---' '---' '---' '---' '---'
v | | | | | | |
.-. .-. .-. | v v | v | v
.-->'-' '-' '-' | .------------. | .-----------. | .-----.
| \ | / | | Filesystem | | | Scheduler | | | MMU |
| v . v | '------------' | '-----------' | '-----'
|_______/ \_____| | | | |
\ / v | | v
| ____ .----. | | .---------.
'--> /___/ | IO |<----' | | Network |
'----' | '---------'
| | |
v v v
.---------------------------------------.
| HAL |
'---------------------------------------'
o-> Block diagrams
vncviewer .-,( ),-.
__ _ .-( )-. gateway vncserver
[__]|=| ---->( internet )-------> __________ ------> ____ __
/⠶⠶ /|_| '-( ).-' [_...__...°] | | |==|
'-.( ).-' |____| | |
/⠶⠶⠶ / |__|
Valveless --------.
Pulsejet engine /
V
_________.------------------+
.---------' / -------->
/ .-------._________ \ thrust-->
( ( _________ `-----------o------+ -------->
\ `----' '----' |
`------._ __^___.----. |
|| | |
fuel __^ || | ^__spark |GND
intake || | plug |
|| | |
|| | |
____|| `------------. |
/ .---' | |
| | | | +-+-+-+-+-+
.---| |---. __ | | |-+-+-+-+-|
___| +-+-+--|--o `---------*-----|--------------O-+-+-+-+-|
.-------> ___ ||||||| | power | *--------------O-+-+-+-+-|
\ | ||||||| | switch | | |-+-+-+-+-|
Water `-+-+-+-+-' +--o-----o--+ +-+-+-+-+-+
intake HHO | |
Generator | + - | Solar panel
+-----------+
Battery
=======
===== symbolic antenna
===
=
|
| micro henry
| coil w/tuning lug
| .----.
| (.-') |
| (.-') |
| (.-') | pico farad cap
| (.-' | ___ (trimmable)
| | | |___|
PC -> .----'-----'---'---'
Board `-------------------
ground plane (foil)
o-> Mindmaps
.--> Alpha
/
.----> Initial Release
Planning *-------. / \
\ / '---> Patch 1
Initial research \ / \
* \ / '--> Patch 2
\ \ /---------> Beta
\ \ /
\ o o _______
\ .---. *--.___ / \
'------> ( ) '------O-> . Release .
`---' o \_______/
o o o \
/ \ \ \
.--' \ \ \
/ \ \ '----+-> Push backs
/ \ \ \
/| \ \ '----> Setbacks
/ | \ \
V /| \ '-----> Reception
Team / | \
v /| \
Worklaod / . '-->> Career change
V /
PTO /
V
Bug
o-> It can do complex stuff such as circuit diagrams
+10-15V ___0,047R
*---------o-----o-|___|-o--o---------o----o-------.
+ | | | | | | | |
-===- _|_ | | .+. | | |
-===- .-. | | | | 2k2 | | |
-===- 470| + | | | | | | _|_
- | uF| '--. | '+' .+. | \ / LED
+---------o |6 |7 |8 1k | | | -+-
___|___ .-+----+--+--. | | | |
-═══- | | '+' | |
- | |1 | |/ BC |
GND | +------o--+ 547 |
| | | |`> |
| | ,+. | |
.-------+ | 220R| | o----||-+ IRF9Z34
| | | | | | |+->
| | MC34063 | `+' | ||-+
| | | | | | BYV29 -12V6
| | | '----' o--|<-o----o--X OUT
Capacitor ~ ~ ~ ~ ~ | | GND 30uH C| | --- 470
| | |3 1nF C| | ### uF
| | |-------||--. | | | +
| '-----+----+-' | GND | GND
| 5| 4| | |
| | '-------------o-------------o
| | ___ |
`-------------*------/\/\/------------o--|___|-'
2k | 1k0
.+.
| | 5k6 + 3k3
| | in Serie
'+'
|
GND
o-> Latest addition: Styling of tagged shapes
.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
! :
! +------+ .------. .------. .--------------------------. :
! | {r1} | | {r2} | ( ) | | :
! +------+ '------' '------' | | :
! _______ ________ | | :
! / \ /\ \ \ | | :
! / \ / \ ) ) | | :
! \ / \ / /_______/ | | :
! \_______/ \/ | | :
! | {bigrect} | :
! | | :
! `--------------------------' :
! :
! ___ ____ ____ ____ !
! ,' `. ,' `. .' `. .' `. !
! / 8 \ / 9 \ / \ / \ !
! \ {a} / \ {b} / ( 10 ) ( 11 ) !
! `.___.' `.____.' \ {red} / \ {a,b} / !
! `.____.' `.____.' !
! ______ !
! ,' `. !
! / \ .-----. .----. !
! | 12 | \ / \ \ {container} !
! | {c} | \ / \ \ !
! \ / ' '----' !
! `.______.' !
! !
`~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~'
.-------------.
/ Advantages: /
'-------------'
-* Plain text format
Ultimately portable, backward compatible and future proof.
-* Degrades gracefully
Even when not using a graphical renderer, it would still looks good
as text based diagrams. Paste the text in your source code.
-* Easiest to use. Anyone knows how to edit text.
# Legend:
r1 = {
fill: papayawhip;
}
r2 = {
fill: crimson;
}
a = {
stroke-dasharray: 8;
fill: lightblue;
}
b = {
stroke: blue;
}
bigrect = {
fill: yellow;
stroke: red;
}
red = {
fill:red;
stroke:blue;
}