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 |
<del>
|
delete character under cursor
|
To copy the whole diagram to your editor, simpy select with the mouse,
and press <control-<c> / <control-<v>.
Acknowledgements
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...
|