How To Create ASCII Drawings in Vim Editor (Draw Boxes, Lines, Ellipses, Arrows Inside Text File)

You can create line drawings in Vim editor using the Vim DrawIt! plugin. You can draw flow charts, ER diagrams, or any other diagrams that can be created as line drawing inside a text editor using this plugin.

2 Steps to install drawit.vim

Step 1: Download latest version of the plugin from vim.org

Download the plugin from vim.org

$ cd ~
$ wget -O DrawIt.vba.gz http://www.vim.org/scripts/download_script.php?src_id=8798

Step 2: Install the DrawIt! Vim plugin

$ cd ~
$ vim DrawIt.vba.gz

:so %
:q

5 Powerful Features of Vim Editor DrawIt! Plugin

• \di will turn on the Drawit! plugin
• \ds will turn off the Drawit! plugin

Feature 1: Draw as you Navigate inside Vim Editor

From the Vim editor, when you navigate using arrow keys (left, right, up and down) it will draw boxes or lines appropriately as per your navigation.

Following is an example of a simple CPU-Input-Output diagram that was drawn inside Vim editor in just few seconds using only navigation keys to draw the boxes and lines.

Fig: Text diagram created inside Vim editor in few seconds

Feature 2: Drawing a Box inside Vim Editor (in Visual Mode)

Step 1: Select a region using visual selection.

Fig: Visual selection of area to draw a box inside Vim editor

Step 2: Draw box by pressing \b

Fig: Box diagram created automatically based on selected area inside text file

Feature 3: Drawing Ellipse inside Vim Editor (in Visual Mode)

Step 1: Select a region using visual selection.

Step 2: Draw ellipse by pressing \e

Fig: Ellipse diagram created automatically based on selected area inside text file

Feature 4: Draw Arrows inside Vim Editor

Use the following key strokes to draw the corresponding arrows mentioned below.

• > left arrow
• \> fat left arrow
• < right arrow
• \< fat arrow
• ^ up arrow
• \^ fat up arrow
• V down arrow
• \V fat down arrow

Feature 5: Draw Slanting Lines inside Vim Editor

Slanting lines is — front slash and back slash. Use the following key strokes to draw the corresponding slanting lines

• PageDown – Draw \ move down and right
• End – Draw / move down and left
• PageUP – Draw / move up and right
• Home – Draw \ move up and left

Recommended Reading

Vim 101 Hacks, by Ramesh Natarajan. I’m a command-line junkie. So, naturally I’m a huge fan of Vi and Vim editors. Several years back, when I wrote lot of C code on Linux, I used to read all available Vim editor tips and tricks. Based on my Vim editor experience, I’ve written Vim 101 Hacks eBook that contains 101 practical examples on various advanced Vim features that will make you fast and productive in the Vim editor. Even if you’ve been using Vi and Vim Editors for several years and have not read this book, please do yourself a favor and read this book. You’ll be amazed with the capabilities of Vim editor.

If you enjoyed this article, you might also like..