clubmate.fi

Using pseudographics in blog posts: drawing ASCII diagrams and boxes

You don’t always have to go for the Illustrator or Photoshop to draw a diagram for a blog post.

Unicode provides some box drawing characters, that are more-or-less meant for drawing shapes in the terminal output. But they can also be used in the web.

Box drawing characters

Here’s a table of Unicode box drawing characters:

Source

Figuring out the character widths

👉 Note: originally when I wrote this, I had a lot of trouble getting the characters to be the same width, but now, years later, they seems to be working much better and this section feels obsolete.

I found the character widths of the box drawing glyphs to be a bit fidgety. Although, using a mono space font (Monaco in this case), not all the characters might be the same width. I’m not sure why this is, possible reasons might be:

1. They’re just not same with.
2. The font (Monaco in this case) doesn’t have a the given character, and a character from a fallback font will be used, and that fallback font’s character width happens to be different.

For example, in some systems, the ─ U+2500, (not a hyphen, endash, nor emdash), looks at first the same length as ┉ U+2509 (dotted line), but it’s shorter. See below:

─ U+2500 is same width as a space or any letter
┉ U+2509 is wider than any letter or a space, troublesome
━ U+2501 is also wider than a space

If you see those the same width, then good.

I like that U+2500 is the same width as any letter or a space, characters will align if they’re on the same line and mixed. But, I can’t find a dotted line from the given selection that is the same width and has the same horizontal alignment.

The widths are troublesome, take the below example.

We’re using the following two line characters here.

• ─ U+2500 same width as space
• ┉ U+2509 wider

feature-branch ┈┈┈┈┈┈╭●───●───●
                     │
master ─────●───●───●╯

The new branch is not aligning, if I add one ┉ U+2509 character there, it's too long:

feature-branch ┈┈┈┈┈┈╭●───●───●
                     │
master ─────●───●───●╯

Let's use the characters that all have the same width:

• ━ U+2500 same width as space
• ┉ U+2509 wider

feature-branch ┈┈┈┈┏●━━●━━●
                   ┃
master      ●━━●━━●┛

Kinda better.

Below are some examples.

Drawing Git trees

Simple graphical presentation of a Git tree:

newbranch   ┈┈┈┈┈●───●───●
                /
master ●───●───●

With rounded corners:

feature-branch ┈┈┈╭●───●───●
                  │
main ────●───●───●╯

With letters symbolizing the commits:

newbranch ┈┈┈┈┈┈┈┏D━━E━━F
                 ┃
master ━━━A━━B━━C┛

Marking commits with an o character:

newbranch     ╭o───o───o
              │
master o──o──o╯────o───o

Note that the following character ◉ might be wider in some systems than a space or a normal character (at least in Monaco):

newbranch     ╭◉──◉───◉
              │
master ◉──◉──◉╯───◉───◉

With diamond shapes:

newbranch     ╭◆───◆───◆
              │
master ◆──◆──◆╯

Drawing boxes

Here’s an illustration of a hard link from my link article

  ┌──────────┐     ┌──────────┐
  │  File_A  |     |  File_B  |
  └─────┬────┘     └─────┬────┘
        |                |
        └─────┐  ┌─link──┘
              |  |
        ┌─────┴──┴─────┐
        |    inode     |
        | representing |
        |    File_A    |
        └──────────────┘

Rounded corner box:

╭─────────────╮
|    lorem    |
|    ipsum    |
|    dolor    |
╰─────────────╯

Here’s an example lifted from Wikipedia box drawing page:

┌─┬┐  ╔═╦╗  ╓─╥╖  ╒═╤╕
│ ││  ║ ║║  ║ ║║  │ ││
├─┼┤  ╠═╬╣  ╟─╫╢  ╞═╪╡
└─┴┘  ╚═╩╝  ╙─╨╜  ╘═╧╛
┌───────────────────┐
│  ╔═══╗ Some Text  │▒
│  ╚═╦═╝ in the box │▒
╞═╤══╩══╤═══════════╡▒
│ ├──┬──┤           │▒
│ └──┴──┘           │▒
└───────────────────┘▒
 ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

Directory trees

Here’s a simple directory:

some-dorectory/
├── Dir_A
│   └── File_C
├── File_A
└── File_B

In fact, it’s printed out using a program called tree. In OS X, install it via Homebrew:

$ brew install tree

Then use it:

$ tree some-directory
some-directory/
├── Dir_A
│   └── File_C
├── File_A
└── File_B

See the man page for more options $ man tree.

Explaining code visually

I like the visual way of explaining code, it can't get any clearer than this really. Here's symbolic link explained, taken from my link article:

┌── link, ln - makes links
│   ┌── Create a symbolic link
│   │                         ┌── the path to the intended symlink
│   │                         │   can use . or ~ or other relative paths
│   │                   ┌─────┴────────┐
ln -s /path/to/original /path/to/symlink
        └───────┬───────┘
                └── the path to the original file/folder
                    can use . or ~ or other relative paths

External links

Here’s some helpful links on the topic:

• unicode-table.com is an exhaustively comprehensive site about Unicode characters. Here's the box section.
• This ASCII art generator is pretty cool also.
• Wikipedia Box Drawing article.
• Very handy Unicode character converter tool, converts anything to anything!