---
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) |  |
| '------' |   |   '---------'   `>  '   '----------'  |
'----------'   '---------------------------------------'
```

<img src="/assets/svgbob/diagram-1.svg" alt="Distributed data-parallel training" class="svgbob-figure" />

## 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 |    |
| '------' |           |   '---------'        '------'    |
|          |           |        ^                 |       |
|          |           |        |                 |       |
|          |           |        '-----------------'       |
'----------'           '----------------------------------'
```

<img src="/assets/svgbob/diagram-2.svg" alt="Data parallelism, alternate layout" class="svgbob-figure" />

## A small cyclic graph

Arcs, arrowheads, and a feedback loop from a handful of characters.

```svgbob
                      .--.
                      |  |
                      v  |
             .-. .-. .-. |
         .-->'-' '-' '-' |
         |     \  |  /   |
         |      v . v    |
         |_______/ \_____|
                 \ /
                  |     ____
                  '--> /___/
```

<img src="/assets/svgbob/diagram-3.svg" alt="A small cyclic graph" class="svgbob-figure" />

## 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                  |
            '---------------------------------------'
```

<img src="/assets/svgbob/diagram-4.svg" alt="An OS architecture sketch" class="svgbob-figure" />

## 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  | |
| '------' |
|          |
'----------'
```

<img src="/assets/svgbob/diagram-5.svg" alt="Single GPU with a skip connection" class="svgbob-figure" />

## 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 |    |
| '------' |           |     '---------'        '------'    |
|          |           |          ^                 |       |
|          |           |          |                 |       |
|          |           |          '-----------------'       |
'----------'           '------------------------------------'
```

<img src="/assets/svgbob/diagram-6.svg" alt="Three GPUs with loss feedback" class="svgbob-figure" />

## 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;
}
```

<img src="/assets/svgbob/diagram-7.svg" alt="Styling of tagged shapes" class="svgbob-figure" />

## 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.
```

<img src="/assets/svgbob/diagram-8.svg" alt="The full svgbob showcase" class="svgbob-figure" />
