MonoSketch - Unleash your ideas with ASCII

6 min read Original article ↗
    
          ╭──────────────╮
          │ Have a good  │
          │    day!!!    │
        ╭─┼──────────────╯
 /\_/\  ╰─╯               
( o.o )                   
 > ^ <

MonoSketch is Open source

I'm passionate about creating ASCII graphs, versatile visual aids for demonstrations and code integration.

After an unsuccessful search for a good solution, I was inspired to embark on this project.

Start simple

with building blocks

    
  Rectangle            Line             Text box   
┌────────────┐                       ┌────────────┐
│            │    ───────────────    │            │
│            │                       │    Text    │
│            │                       │            │
└────────────┘                       └────────────┘

...and apply formats

    
  Rectangle            Line             Text box   
╭────────────╮                       ╔ ═ ═ ═ ═ ═ ═ 
│            │    ■━━━━━━━━━━━━━▶     ████████████║
│            │                       ║Text████████ 
│            │                        ████████████║
╰────────────╯                       ╚ ═ ═ ═ ═ ═ ═ 

the result

    
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 
 Network Interface                             │
│┌───────────────────┐    ┌───────────────────┐ 
 │      Cluster      │    │      Client       ││
││   Communication   │    │   Communication   │ 
 └───────────────────┘    └──────□────────────┘│
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ 
                  ┌──────────────┘              
┌ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 
 Relational Engine│                            │
│┌────────────────▼──┐    ┌───────────────────┐ 
 │  Command Parser   □────▶  Query Optimizer  ││
││                   │    │                   │ 
 └───────────────────┘    └─────────□─────────┘│
│┌───────────────────┐              │           
 │  Query Executor   ◀──────────────┘          │
││                   │                          
 └───────────────────┘                         │
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 

More examples

See examples

Client - Server
communication

    
            Client                             Server                 
               ■                                    ■                 
               │      Establish TCP Connection      │                 
┌ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ 
            SYN├───────────────────────────────────▶░SYN             │
│              │                                    ░ACK              
            ACK│◀───────────────────────────────────░                │
└ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ 
               │                                    │                 
               │                                    │                 
               │         SSL/TLS Handshake          │                 
┌ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ 
    ClientHello░───────────────────────────────────▶░                │
│              ░                                    ░Server Hello     
    Certificate░◀───────────────────────────────────░Certificate     │
│  verification░                                    ░                 
               ░                                    ░                │
│     ClientKey░◀──────────────────────────────────▶░ServerFinished   
       Exchange│                                    │                │
└ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ 
               │                                    │                 
               │     Encrypted Application Data     │                 
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ 
          HTTP │◀──────────────────────────────────▶│HTTP            │
│          GET │                                    │Response         
 ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
               │                                    │                 
               ■                                    ■                 
    
             ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     
              Edge Region 1                                           │    
             │                                                             
                   ┌──────────────┐   send msg to ╭──────────────╮    │    
 /\_/\       │     │┌─────────────┴┐   websocket  │╭─────────────┴╮    
( o.o ) ◀══════════└┤┌─────────────┴┐◀═══════════▶╰┤╭─────────────┴╮  │    
 > ^ <       │      └┤    Envoy     │ sub to this  ╰┤Gateway server│       
                     └──────▲───────┘   channel     ╰───────▲──────╯  │    
             └ ─ ─ ─ ─ ─ ─ ─║─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─     
                            ║                               │              
 /\_/\                      ║                               │       
( o.o ) ◀═══════════════════╝                               │              
 > ^ <                                                      └──────────┐   
   │    ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ┐
   │   │Main region                                            send msg│   
   │                                                             to all│  │
   │   │   ┌──────────────┐               ╭──────────────╮      GS subs│   
   │       │┌─────────────┴┐     send     │╭─────────────┴╮            │  │
   └───┼───┴┤┌─────────────┴┐ channel msg ╰┤╭─────────────┴╮           │   
            └┤    Webapp    ├──────────────┴▶ Admin Server ├─┐         │  │
       │     └───────┬──────┘               ╰──────────────╯ │         │   
                     │ store                        route to │         │  │
       │             ▼ message                       channel │         │   
                 ░░░░░░░░                             server │         │  │
       │         ░Vitess░                           ╭────────▼─────╮   │   
                 ░░░░░░░░                           │╭─────────────┴╮  │  │
       │                                            ╰┤╭─────────────┴╮ │   
                                                     ╰┤Channel Server├─┘  │
       │                                              ╰──────────────╯     
        ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
    

App
System

UI mockup

    
                         /\_/\        
                        ( o.o )                            
                         > ^ <                             
                                                           
┌──────────────────────────────────────────────────┬──────┐
│                                                  │░░░░░░│
│ Type something to search                         │░░GO░░│
│                                                  │░░░░░░│
└──────────────────────────────────────────────────┴──────┘
                                                           
       ┌─────────────────────┐ ┌─────────────────────┐     
       │     Cat search      │ │    I feel lucky     │     
       └─────────────────────┘ └─────────────────────┘     
    
                           app.monosketch.io      
┌────────────────────────────────────────────────────────────────┐
│MonoSketch                   █ ▒ ▒ ▒                         ...│
├───────────────────────────────────────────────────┬────────────┤
│                                                   │            │
│                                                   │            │
│                                                   │            │
│                                                   │            │
│                                                   │Shape format│
│                     Workspace                     │   panel    │
│                                                   │            │
│                                                   │            │
│                                                   │            │
│                                                   │            │
│                                                   │            │
└───────────────────────────────────────────────────┴────────────┘
    
╭────────────────────────────────────────────────────────────────╮
│                      https://example.com                       │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│                             Welcome!                           │
│         ╭──────────────────────────────────────────────╮       │
│         │ username                                     │       │
│         ╰──────────────────────────────────────────────╯       │
│         ╭──────────────────────────────────────────────╮       │
│         │ *******                                      │       │
│         ╰──────────────────────────────────────────────╯       │
│                                       ╭────────────────╮       │
│                                       │    Sign-up     │       │
│                                       ╰────────────────╯       │
╰────────────────────────────────────────────────────────────────╯

Presentations

Thanks to MonoSketch, I no longer rely on Power Point or Google Presentations to craft my presentations.

* ASCII font is not supported yet

Contribution

MonoSketch is an open-source project licensed under the Apache License 2.0.

If you find this project useful, please consider starring the repository on GitHub. Contributions are also welcome through pull requests or by opening issues on GitHub.

Support

If you would like to support the project financially, you can do so by becoming a GitHub Sponsor or contributing via Kofi.

    
                                                    ╭────────────╮
                                                    │ Enjoy mono │
                                                    │ sketching  │
                                                  ╭─┼────────────╯
                      /^--^\     /^--^\     /^--^\╰─╯
                      \____/     \____/     \____/
                     /      \   /      \   /      \
                    |        | |        | |        | 
                     \__  __/   \__  __/   \__  __/
|^|^|^|^|^|^|^|^|^|^|^|^\ \^|^|^|^/ /^|^|^|^|^\ \^|^|^|^|^|^|^|^|^|^|^|^|
| | | | | | | | | | | | |\ \| | |/ /| | | | | |\ \| | | | | | | | | | | |
#########################/ /#####\ \###########/ /#######################
| | | | | | | | | | | | |\/ | | | \/| | | | | |\/ | | | | | | | | | | | |
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|