Add this tool to! Digg this Article furl this Article Add this tool to Reddit Add this tool to Technorati Add this Article to Newsvine Add this Article to Yahoo Add this Article to StumbleUpon Add this Article to BlinkLists Add this Article to Google Add this Article to Ask Add this tool to Netscape

Draw online diagrams in ASCII

This application is meant to draw simple diagrams to use in code/documentation. Ever so often, when developing PHP code myself, I found myself wanting to insert into comments in the code a small diagram, depicting a part of a workflow, or a database-relationship scheme. To do this by hand, using 'ASCII-art', is a tedious and decidedly non-fun process. Then I remembered that Wordperfect 5.1 used to have a very useful feature that drew lines directly in your text, using ASCII-characters only. I thought: surely, something like this must exist online, to enable me to draw simple diagrams etc for code, or, for instance, Google Docs. But it seemed that no such program exists... That was the itch that drove me to program this myself.
So, this program does not let you draw beautifull drawings, but it will let you copy your diagrams directly into any PHP, ASP, whatever editor or in any online texteditor.

Saving the diagrams

This system does not have a special login-database-solution to save the diagrams.
It is however possible to copy the drawing to your clipboard using the past-icon. And, more importantly, you can past drawings back there! If you press the clipboard-icon at the bottom, the program will read that drawing back in the edit-area.
This way you can take an older drawing that you allready used (and saved!) in your code and re-edit it.

General help

The system works with as many keyboard shortcuts as possible, so you can concentrate on what you are doing, instead of taking your hand of the keyboard and going to the mouse and back again. Sadly, allmost none work in IE, because I'm still working on the code that will allow me to cancel the normal action tied to those keys... Use Firefox instead, please!
<alt>-<d> toggle drawing. Move the cursor with the cursorkeys around to leave a trail of ASCII-characters, press again to move around without drawing.
<alt>-<e> toggle erasing: Move the cursor around erasing everything you pass over. Press again to switch to move-mode.
<control>-<+> Insert a row. This will insert a row, while maintaining lines you might have drawn.
<control-<-> Delete a row.
<shift>-<+> Insert a column. This will insert a column, while maintaining lines you might have drawn.
<shift>-<-> Delete a column.
<control-<z> Undo last action. (One level only, and only row- or column-actions can be undone.)
<backspace> delete character left of the cursor
delete character under cursor

To copy the whole diagram to your editor, simpy select with the mouse, and press <control-<c> / <control-<v>.


This tool is written using a variety of OSS:
  • Firefox: the browser
  • Firebug: the perfect debugger for all webapps!
  • Inkscape: let your vectorgraphics get a taste of freedom
  • GIMP: no, it's not Photoshop...
  • Kubutu: one OS to rule them all...
  • the fade-effect that shows you this page
If you wish to contact me: pwiegers[AT]wms[DOT]to. You know the drill...