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 : ! |/ * : ! ' _ __ : ! __ .-. .--. .--.--. .--. .' '. ,' '. : ! (_) (__) ( ) ( ) ( ( ) ) ( ) ( ) ( ) : ! '-' `--' `--'--' `--' `._.' `.__.' : ! ! ! ___ ____ ____ _____ ! ! ,' `. ,' `. .' `. ,' `. ! ! / \ / \ / \ / \ ! ! \ / \ / ( ) ( ) ! ! `.___.' `.____.' \ / \ / ! ! `.____.' `._____.' ! ! ______ ! ! ,' `. ! ! / \ .-----. .----. ".--------------." ! ! | | \ / \ \ "| Don't draw me|" ! ! | | \ / \ \ "| |" ! ! \ / ' '----' "'--------------'" ! ! `.______.' ! ! ! `~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~' 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 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. # 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; }