wb5/posts/boxdraw.md
2024-02-03 16:15:27 -05:00

112 lines
4.0 KiB
Markdown

# box-drawing test
2024-02-03
In my [last blog post](/lc3) about the LC-3 virtual machine, I made a few diagrams with ASCII art.
I found out recently that I didn't have to use `+` and `-` and `|` symbols to make boxes; Unicode has symbols specifically for that.
So I'm going to use this blog post as a playground for box-drawing.
The symbols used here are all copied directly from [this Wikipedia article](https://en.m.wikipedia.org/wiki/Box-drawing_character).
```
boxdraw kit
smooth box
╭─╮││╰─╯
jagged box
┌─┐││└─┘
heavy box
┏━┓┃┃┗━┛
wires
┌─┐│└┘┬┴┤├┼
arrows
←→↓↑↔↕
dotted
⋯⋮┄┈┊
```
To make boxes using the kit, copy-paste one of the "box" symbol sets,
put newlines, and then expand the box to fit the text:
```
╭─╮││╰─╯
╭─╮
││
╰─╯
╭────────────╮
│ hello guys │
╰────────────╯
```
Put spacing around the text, too.
```
the diagram from last time but smoother ooOOOooo
registers
┌─┐┌─┐┌─┐┌─┐┌─┐
└─┘└─┘└─┘└─┘└─┘
┌─┐┌─┐┌─┐┌─┐┌─┐
└─┘└─┘└─┘└─┘└─┘
╭─────────────╮ ╭────────────────────────╮
│ │ │ │
│ processor ├─────┤ memory │
│ │ │ │
╰─────────────╯ │ │
╰────────────────────────╯
```
Note how the place the wire connects to each box is a different character (`┤`) that makes it attached.
```
╭───────────────────────────────────────────────────╮
│ │
│ │
│ │
│ a big funny box (smooth) │
│ │
│ │
│ │
╰───────────────────────┬───────────────────────────╯
╭─────────┴─────────╮
│ boxes interlinked │
╰───────────────────╯
┌────────────┐
│ not smooth │
└────────────┘
┏━━━━━━━━━━━━━━━┓
┃ a weighty box ┃
┗━━━━━━━━━━━━━━━┛
```
```
╭─────────────────────╮
│ wires (plus arrows) │
╰──┬──────────────────╯
├────────┬────┐
←─┼──────┐ │ └─→
│ │ │
└──────┴─┤
│ ↑
│ │
├─┘
```
(The vertical arrows are slightly janky.)
```
╭────────────────────────────╮
⋯ ┄┄┄┄┄┄┄┄│ this goes off somewhere... │
╰────────────────────────────╯
```