# 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: Box Drawing [Official Unicode Consortium code chart (PDF)](http://www.unicode.org/charts/PDF/U2500.pdf)   0 1 2 3 4 5 6 7 8 9 A B C D E F U+250x ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏ U+251x ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟ U+252x ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯ U+253x ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿ U+254x ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏ U+255x ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟ U+256x ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯ U+257x ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿ [Source](http://en.wikipedia.org/wiki/Box-drawing_character) ## 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](/symbolic-links-and-hard-links-creating-updating-deleting-and-all-that) ``` ┌──────────┐ ┌──────────┐ │ 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: ```shell $ 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](/symbolic-links-and-hard-links-creating-updating-deleting-and-all-that): ``` ┌── 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](http://unicode-table.com/en/) is an exhaustively comprehensive site about Unicode characters. Here's the [box section](http://unicode-table.com/en/#box-drawing). - This [ASCII art generator](http://www.network-science.de/ascii/) is pretty cool also. - [Wikipedia Box Drawing article](http://en.wikipedia.org/wiki/Box-drawing_character). - [Very handy Unicode character converter tool](http://rishida.net/tools/conversion/), converts anything to anything!