🫥 svgbob
Experimenting with svgbob as an ASCII-art-to-SVG alternative to Mermaid diagrams.
Playing with ivanceras/svgbob as an
alternative to Mermaid: you write a diagram as plain
ASCII art in a fenced ```svgbob block, and it renders to a clean SVG. Each
diagram below shows the ASCII source followed by the rendered result.
Distributed data-parallel training
Each GPU gets a shard of the data, runs the network forward, and computes its own loss.
.----------. .---------------------------------------.
| Data | | GPU0 |
| .------. | | .---------. <------o .----------. |
| | x0 |-------> | Network | o-------> | Loss(x0) | |
| '------' | | '---------' '----------' |
| | '---------------------------------------'
| | .---------------------------------------.
| | | GPU1 |
| .------. | | .---------. . <. .----------. |
| | x1 |-------> | Network | ( ) | Loss(x1) | |
| '------' | | '---------' `> ' '----------' |
| | '---------------------------------------'
| | .---------------------------------------.
| | | GPU2 |
| .------. | | .---------. . <. .----------. |
| | x2 |-------> | Network | ( ) | Loss(x2) | |
| '------' | | '---------' `> ' '----------' |
'----------' '---------------------------------------'
Data parallelism, alternate layout
The same idea drawn with explicit forward arrows from data to each GPU.
.----------. .----------------------------------.
| Data | | GPU0 |
| | | |
| .------. | | .---------. .------. |
| | x0 |---------------> | Network | o----> | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
| | '----------------------------------'
| |
| | .----------------------------------.
| | | GPU1 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x1 |---------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
| | '----------------------------------'
| |
| | .----------------------------------.
| | | GPU2 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x2 |---------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
'----------' '----------------------------------'
A small cyclic graph
Arcs, arrowheads, and a feedback loop from a handful of characters.
.--.
| |
v |
.-. .-. .-. |
.-->'-' '-' '-' |
| \ | / |
| v . v |
|_______/ \_____|
\ /
| ____
'--> /___/
An OS architecture sketch
Boxes and routing lines: OS API down through the filesystem, scheduler, IO, network, MMU, and HAL.
.---. .---. .---. .---. .---. .---.
OS API '---' '---' '---' '---' '---' '---'
| | | | | |
v v | v | v
.------------. | .-----------. | .-----.
| Filesystem | | | Scheduler | | | MMU |
'------------' | '-----------' | '-----'
| | | |
v | | v
.----. | | .---------.
| IO |<----' | | Network |
'----' | '---------'
| | |
v v v
.---------------------------------------.
| HAL |
'---------------------------------------'
Single GPU with a skip connection
One device, with the network output looping back around to the loss.
.----------. .-------------------------------------------.
| Data | | GPU0 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x0 |-----------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| .------. | | | | |
| | x1 | | | '-----------------' |
| '------' | '-------------------------------------------'
| |
| .------. |
| | x2 | |
| '------' |
| |
'----------'
Three GPUs with loss feedback
Data fanned out to three devices, each with its own network and loss.
.----------. .------------------------------------.
| Data | | GPU0 |
| | | |
| | | |
| .------. | | .---------. .------. |
| | x0 |-----------------> | Network |------->| Loss | |
| '------' | | '---------' '------' |
| | | ^ ^ / | |
| | | | \_____/ | |
| | | '-----------------' |
| | '------------------------------------'
| |
| | .------------------------------------.
| | | GPU1 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x1 |-----------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
| | '------------------------------------'
| |
| | .------------------------------------.
| | | GPU2 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x2 |-----------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
'----------' '------------------------------------'
Styling of tagged shapes
svgbob can style individual shapes by tagging them (the {r1}, {r2}, … markers) and defining colors in a legend.
o-> Latest addition: Styling of tagged shapes
.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
: :
: +------+ .------. .------. .--------------------------. :
: | {r1} | | {r2} | ( ) | | :
: +------+ '------' '------' | | :
: _______ ________ | | :
: / \ /\ \ \ | | :
: / {g} \ / \ ) ) | | :
: \ / \ / /_______/ | | :
: \_______/ \/ | | :
: | {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:
r = {
fill: #FF8180;
}
g = {
fill: #97E6A5;
}
b = {
fill: #7DCAFF;
}
t = {
fill: none;
stroke: #838383;
color: #838383;
}
r1 = {
fill: papayawhip;
}
r2 = {
fill: crimson;
}
a = {
stroke-dasharray: 8;
fill: lightblue;
}
bigrect = {
fill: yellow;
stroke: red;
}
red = {
fill:red;
stroke:blue;
}
container = {
fill: rgba(100,100,100, 0.1);
stroke: #000;
}
The full svgbob showcase
svgbob’s own kitchen-sink demo: basic shapes, arcs, grids, unicode box-drawing, sequence/railroad/flow charts, CJK, plots, and more — all from ASCII.
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 ! V :
! :
! O :
! .-----------. . <. .> . ^ \ :
! ( ) ( ) ( ) \ \ :
! `-----+ ,---' `> ' ` <' \ v :
! |/ * :
! () ' _ __ :
! __ ,-. .--. .--.--. .--. .' '. ,' '. :
! (_) (__) ( ) ( ) ( ( ) ) ( ) ( ) ( ) :
! `-' `--' `--'--' `--' `._.' `.__.' :
! !
! ___ ____ ____ _____ !
! ,' `. ,' `. .' `. ,' `. !
! / \ / \ / \ / \ !
! \ / \ / ( ) ( ) !
! `.___.' `.____.' \ / \ / !
! `.____.' `._____.' !
! ______ !
! ,' `. !
! / \ .-----. .----. ".--------------." !
! | | \ / \ \ "| Don't draw me|" !
! | | \ / \ \ "| |" !
! \ / ' '----' "'--------------'" !
! `.______.' !
! !
`~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~'
o-> Quick logo scribbles
.---. _
/-o-/-- .--. |-| .--.
.-/ / /-> /--. \ .--)-| .--.-. //.-.\
( * \/ / O )| | |-| |->| | (+(-*-))
'-. \ /\ |-// . * | '--'-' \\'-'/
\ / \ '+'/ \__/ '--'
' '--'
_____
.----. _ / __)\
| | ,--(_) | / \ \
__|____|__ _/ .-. \ ___| |__/ /
| ______--| (_)( ) ) / (_ _)_/
`-/.::::.\-' \ `-'_/ / / | |
'--------' `--(_) \ \__/ |
\(_____/
o-> Even unicode box drawing characters are supported
┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕
├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡
└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛
╭─┬╮
├─┼┤
╰─┴╯
o-> Circle, quarter arcs, half circles, 3/4 quarter arcs
____ __ __ ____
,' `. ,' `. ,' `. __ __
/ \ / \ / \ ,' `.
\ / / \
`.____.' \ / \ / \ /
`.__ __.' `.____.' `.__ __.'
____ __ __ ____
,' `. ,' `. ,' `.
/ \ / \ / \
\ \ / \ / /
`.__ `.____.' `.____.' __.'
o-> Grids
.----. .----.
/ \ / \ .-----+-----+-----.
+ {r} +----+ +----. | | | | .-----+-----+-----+-----+
\ / \ / \ | | | | / / / / /
+----+ +----+ + +-----+-----+-----+ +-----+-----+-----+-----+
/ \ / \ / | | | | / / / / /
+ {g} +----+ +----+ | | | | +-----+-----+-----+-----+
\ / \ / \ +-----+-----+-----+ / / / / /
'----+ +----+ + | | | | +-----+-----+-----+-----+
\ / \ / | | | | / / / / /
'----' '----' '-----+-----+-----' '-----+-----+-----+-----+
___ ___ .---+---+---+---+---. .---+---+---+---. .---. .---.
___/ \___/ \ | | | | | | / \ / \ / \ / \ / | +---+ |
/ \___/ \___/ +---+---+---+---+---+ +---+---+---+---+ +---+ +---+
\___/ \___/ \ | | | | | | \ / \ / \ / \ / \ | +---+ |
/ \___/ \___/ +---+---+---+---+---+ +---+---+---+---+ +---+ +---+
\___/ \___/ \ | | | | | | / \ / \ / \ / \ / | +---+ |
\___/ \___/ '---+---+---+---+---' '---+---+---+---' '---' '---'
o-> Graphics Diagram
*
0 3 P * Eye / ^ /
*-------* +y \ +) \ / Reflection
1 /| 2 /| ^ \ \ \ v
*-+-----* | | v0 \ v3 --------*--------
| |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
6000 micro - | + | |2 | | |
Farad, 40V ___|_____ | |--o C| | |
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.