til
box drawing characters
While working on adding a console reporter to rian, I wanted to create box-like
structures around the traces.
Here’s an example of what I was trying to achieve:
╭─ basic
│ ╭────────────────────────────────────────╮
│ 95 ms │ ┣━━━━━━┫ │◗ setup
│ 43 ms │ ┣━━━┫ │◗ bootstrap
│ 33 ms │ ┣━━┫ │◗ building
│ 61 ms │ ┣━━━┫ │◗ precompile
│ 82 ms │ ┣━━━━━┫ │◗ verify
│ 68 ms │ ┣━━━━┫ │◗ spawn thread
│ 370 ms │ ┣╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┫ │◗ doesn't finish
│ 344 ms │ ┣━━━━━━━━━━━━━━━━━━━┫ │◗ running
│ 344 ms │ ┣━━━━━━━━━━━━━━━━━━━┫ │◗ e2e
│ 38 ms │ ┣━━┫ │◗ snapshot
│ 14 ms │ ┣┫ │◗ url for page /my…
│ ╰┼┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┼┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┼╯
│ 0 ms 320 ms 640 ms
╰─
╭─ basic
│ ╭────────────────────────────────────────╮
│ 95 ms │ ┣━━━━━━┫ │◗ setup
│ 43 ms │ ┣━━━┫ │◗ bootstrap
│ 33 ms │ ┣━━┫ │◗ building
│ 61 ms │ ┣━━━┫ │◗ precompile
│ 82 ms │ ┣━━━━━┫ │◗ verify
│ 68 ms │ ┣━━━━┫ │◗ spawn thread
│ 370 ms │ ┣╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┫ │◗ doesn't finish
│ 344 ms │ ┣━━━━━━━━━━━━━━━━━━━┫ │◗ running
│ 344 ms │ ┣━━━━━━━━━━━━━━━━━━━┫ │◗ e2e
│ 38 ms │ ┣━━┫ │◗ snapshot
│ 14 ms │ ┣┫ │◗ url for page /my…
│ ╰┼┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┼┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┼╯
│ 0 ms 320 ms 640 ms
╰─
To create these boxes, I needed to use specific ASCII codes. After some research, I found a useful resource:
👉 this website
It provides a comprehensive list of the necessary codes for box drawing, as well as other potentially useful characters
like arrows.
Here’s a simple template to get started:
╭───────╮
│ BOX │
╰───────╯
╭───────╮
│ BOX │
╰───────╯