November 15, 2024
November 19, 2024
Playing with ivanceras/svgbob as an alternative to Mermaid
@online{foreman2024,
author = {Foreman, Sam},
title = {Svgbob},
date = {2024-11-15},
url = {https://samforeman.me/posts/svgbob},
langid = {en}
}
---
title: "๐ซฅ svgbob"
categories:
- diagrams
- style
toc: true
date: 2024-11-15
date-modified: last-modified
lightbox: auto
tbl-cap-location: bottom
citation:
author: Sam Foreman
type: webpage
title: "svgbob"
url: https://samforeman.me/posts/svgbob
open-graph:
title: "svgbob"
image: "./assets/thumbnail.png"
twitter-card:
site: "saforem2"
creator: "saforem2"
title: "svgbob"
image: "./assets/thumbnail.png"
# code-tools: true
# filters:
# - collapse-social-embeds
filters:
- quarto-svgbob
format:
html: default
gfm:
output_file: "svgbob.md"
# twitter-card:
# image: "./assets/thumbnail.png"
# creator: "@saforem2"
# site: "@saforem2"
# open-graph:
# image: "./assets/thumbnail.png"
---
Playing with {{< fa brands github >}}
[ivanceras/`svgbob`](https://github.com/ivanceras/svgbob) as an alternative to
Mermaid
```svgbob
.----------. .---------------------------------------.
| Data | | GPU0 |
| .------. | | .---------. . <. .----------. |
| | x0 |-------> | Network | ( ) | Loss(x0) | |
| '------' | | '---------' `> ' '----------' |
| | '---------------------------------------'
| | .---------------------------------------.
| | | GPU1 |
| .------. | | .---------. . <. .----------. |
| | x1 |-------> | Network | ( ) | Loss(x1) | |
| '------' | | '---------' `> ' '----------' |
| | '---------------------------------------'
| | .---------------------------------------.
| | | GPU2 |
| .------. | | .---------. . <. .----------. |
| | x2 |-------> | Network | ( ) | Loss(x2) | |
| '------' | | '---------' `> ' '----------' |
'----------' '---------------------------------------'
```
```svgbob
.----------. .----------------------------------.
| Data | | GPU0 |
| | | |
| .------. | | .---------. .------. |
| | x0 |---------------> | Network | o----> | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
| | '----------------------------------'
| |
| | .----------------------------------.
| | | GPU1 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x1 |---------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
| | '----------------------------------'
| |
| | .----------------------------------.
| | | GPU2 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x2 |---------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
'----------' '----------------------------------'
```
```svgbob
.--.
| |
v |
.-. .-. .-. |
.-->'-' '-' '-' |
| \ | / |
| v . v |
|_______/ \_____|
\ /
| ____
'--> /___/
```
```svgbob
.---. .---. .---. .---. .---. .---.
OS API '---' '---' '---' '---' '---' '---'
| | | | | |
v v | v | v
.------------. | .-----------. | .-----.
| Filesystem | | | Scheduler | | | MMU |
'------------' | '-----------' | '-----'
| | | |
v | | v
.----. | | .---------.
| IO |<----' | | Network |
'----' | '---------'
| | |
v v v
.---------------------------------------.
| HAL |
'---------------------------------------'
```
```svgbob
.----------. .-------------------------------------------.
| Data | | GPU0 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x0 |-----------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| .------. | | | | |
| | x1 | | | '-----------------' |
| '------' | '-------------------------------------------'
| |
| .------. |
| | x2 | |
| '------' |
| |
'----------'
```
```svgbob
.----------. .------------------------------------.
| Data | | GPU0 |
| | | |
| | | |
| .------. | | .---------. .------. |
| | x0 |-----------------> | Network |------->| Loss | |
| '------' | | '---------' '------' |
| | | ^ ^ / | |
| | | | \_____/ | |
| | | '-----------------' |
| | '------------------------------------'
| |
| | .------------------------------------.
| | | GPU1 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x1 |-----------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
| | '------------------------------------'
| |
| | .------------------------------------.
| | | GPU2 .-----------------. |
| | | | | |
| | | | v |
| .------. | | .---------. .------. |
| | x2 |-----------------> | Network | | Loss | |
| '------' | | '---------' '------' |
| | | ^ | |
| | | | | |
| | | '-----------------' |
'----------' '------------------------------------'
```
```svgbob
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;
}
```
```svgbob
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.
```