--- layout: '@/layouts/Doc.astro' title: '๐Ÿซฅ svgbob' date: 2024-11-15 description: 'Experimenting with svgbob as an ASCII-art-to-SVG alternative to Mermaid diagrams.' --- Playing with [ivanceras/`svgbob`](https://github.com/ivanceras/svgbob) as an alternative to [Mermaid](https://mermaid.js.org/): 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. ```svgbob .----------. .---------------------------------------. | Data | | GPU0 | | .------. | | .---------. <------o .----------. | | | x0 |-------> | Network | o-------> | Loss(x0) | | | '------' | | '---------' '----------' | | | '---------------------------------------' | | .---------------------------------------. | | | GPU1 | | .------. | | .---------. . <. .----------. | | | x1 |-------> | Network | ( ) | Loss(x1) | | | '------' | | '---------' `> ' '----------' | | | '---------------------------------------' | | .---------------------------------------. | | | GPU2 | | .------. | | .---------. . <. .----------. | | | x2 |-------> | Network | ( ) | Loss(x2) | | | '------' | | '---------' `> ' '----------' | '----------' '---------------------------------------' ``` Distributed data-parallel training ## Data parallelism, alternate layout The same idea drawn with explicit forward arrows from data to each GPU. ```svgbob .----------. .----------------------------------. | Data | | GPU0 | | | | | | .------. | | .---------. .------. | | | x0 |---------------> | Network | o----> | Loss | | | '------' | | '---------' '------' | | | | ^ | | | | | | | | | | | '-----------------' | | | '----------------------------------' | | | | .----------------------------------. | | | GPU1 .-----------------. | | | | | | | | | | | v | | .------. | | .---------. .------. | | | x1 |---------------> | Network | | Loss | | | '------' | | '---------' '------' | | | | ^ | | | | | | | | | | | '-----------------' | | | '----------------------------------' | | | | .----------------------------------. | | | GPU2 .-----------------. | | | | | | | | | | | v | | .------. | | .---------. .------. | | | x2 |---------------> | Network | | Loss | | | '------' | | '---------' '------' | | | | ^ | | | | | | | | | | | '-----------------' | '----------' '----------------------------------' ``` Data parallelism, alternate layout ## A small cyclic graph Arcs, arrowheads, and a feedback loop from a handful of characters. ```svgbob .--. | | v | .-. .-. .-. | .-->'-' '-' '-' | | \ | / | | v . v | |_______/ \_____| \ / | ____ '--> /___/ ``` A small cyclic graph ## An OS architecture sketch Boxes and routing lines: OS API down through the filesystem, scheduler, IO, network, MMU, and HAL. ```svgbob .---. .---. .---. .---. .---. .---. OS API '---' '---' '---' '---' '---' '---' | | | | | | v v | v | v .------------. | .-----------. | .-----. | Filesystem | | | Scheduler | | | MMU | '------------' | '-----------' | '-----' | | | | v | | v .----. | | .---------. | IO |<----' | | Network | '----' | '---------' | | | v v v .---------------------------------------. | HAL | '---------------------------------------' ``` An OS architecture sketch ## Single GPU with a skip connection One device, with the network output looping back around to the loss. ```svgbob .----------. .-------------------------------------------. | Data | | GPU0 .-----------------. | | | | | | | | | | | v | | .------. | | .---------. .------. | | | x0 |-----------------> | Network | | Loss | | | '------' | | '---------' '------' | | | | ^ | | | .------. | | | | | | | x1 | | | '-----------------' | | '------' | '-------------------------------------------' | | | .------. | | | x2 | | | '------' | | | '----------' ``` Single GPU with a skip connection ## Three GPUs with loss feedback Data fanned out to three devices, each with its own network and loss. ```svgbob .----------. .------------------------------------. | Data | | GPU0 | | | | | | | | | | .------. | | .---------. .------. | | | x0 |-----------------> | Network |------->| Loss | | | '------' | | '---------' '------' | | | | ^ ^ / | | | | | | \_____/ | | | | | '-----------------' | | | '------------------------------------' | | | | .------------------------------------. | | | GPU1 .-----------------. | | | | | | | | | | | v | | .------. | | .---------. .------. | | | x1 |-----------------> | Network | | Loss | | | '------' | | '---------' '------' | | | | ^ | | | | | | | | | | | '-----------------' | | | '------------------------------------' | | | | .------------------------------------. | | | GPU2 .-----------------. | | | | | | | | | | | v | | .------. | | .---------. .------. | | | x2 |-----------------> | Network | | Loss | | | '------' | | '---------' '------' | | | | ^ | | | | | | | | | | | '-----------------' | '----------' '------------------------------------' ``` Three GPUs with loss feedback ## Styling of tagged shapes svgbob can style individual shapes by tagging them (the `{r1}`, `{r2}`, โ€ฆ markers) and defining colors in a legend. ```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; } ``` Styling of tagged shapes ## 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 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. ``` The full svgbob showcase