Using pseudographics in blogposts: drawing ASCII diagrams and boxes

What if I told you: you don't have to go to Illustrator or Photoshop to do a diagram for your blog post.

I hate going to Photoshop to doodle around some illustrative diagrams or flowcharts, it takes me a while to get started, there are too many options, and it just kills a good programming vibe :) And what if the diagram needs update? Or there’s a mistake in it? Or it’s color won’t fit new design? By not using bitmap image diagrams, you’ll make the process of blogging more agile. That’s the thinking behind this post.

Sure a nicely drawn diagram, flowchart, or other illustration might look much more stunning than an ASCII piece.

Box drawing characters

Here’s the Unicode box drawing characters.

Box Drawing Official Unicode Consortium code chart (PDF)
  0 1 2 3 4 5 6 7 8 9 A B C D E F


Using the characters

Although, using a mono space font (Monaco in this case), not all the characters are 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) don’t have a the given character, and a character from fallback font will be used, and that fallback font’s character happens to a different width.

For example U+2500, (it’s not hyphen, nor 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

I like the fact 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

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


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

  • U+2500 same width as space
  • U+2509 wider
newbranch ┈┈┈┈┈┈╭●━━●━━●
master    ●━━●━━●╯

Kinda better.

Below are some examples I’ve used in my post here.

Drawing Git trees

Simple graphical presentation of a Git tree:

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

With rounded corners:

newbranch ┈┈┈┈┈┈╭●━━●━━●
master    ●━━●━━●╯

With letters symbolizing the commits:

newbranch ┈┈┈┈┈┈╭D━━E━━F
master    A━━B━━C╯

With an o character:

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

Note that the following character is wider than a space or a normal character (at least in Monaco):

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

But be carefull, some of the wider characters might not work at all in some font’s or systems.

I quite like these 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 box:

|  something  |
|  something  |
|  something  |

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

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

Directory trees

Here’s a simple directory:

├── Dir_A
│   └── File_C
├── File_A
└── File_B

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

$ brew install tree

Then use it:

$ tree some-dorectory
├── 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:

Club-Mate, the beverage →