Tuesday, July 10, 2012

Drawing diagrams quickly

I have always wanted to make a note-taking program myself, but don’t have the time. Unfortunately no one appears to have the same UI idea as me, so let me share it with you.

What I really, really want to have is a "all common tasks" tool, something that can draw the four most common shapes + text + common editing tasks in a single tool. This tool would be sticky (you have to switch out of it manually)
  1. Draw a box with optional text: click and drag a box. Then if you want text inside, simply start typing and it will appear centered in the box with word-wrapping.
  2. Draw an ellipse with optional text: click and drag an oval. If you want text inside, start typing.
  3. Draw a line with optional text: click and drag something line-shaped. Then if you want text along the line, simply start typing an it will appear above or below the line (I don’t care which), centered. If the line starts at the edge of another line or box, it is snapped to it.
  4. Draw a curved line: click and drag any other shape. Ideally the shape will be straightened out slightly so it doesn’t look like it was drawn by a mouse or a toddler.
  5. Draw a dot: click anywhere on the canvas.
  6. Draw free-floating text: click anywhere on the canvas and start typing. The dot is replaced by text, unless the user begins with * and then the dot begins a bulleted list. (Bonus points if, somehow, the user can easily select a point at which to word-wrap.)
  7. Hold Alt to pass mouse input to the "arrow" tool (select, move, resize existing shapes)
  8. Hold Ctrl to restrict input to straight lines at 0°/30°/45°/90°. Instead of drawing curved lines, straight lines with corners come out. Instead of ellipses, rectangles with rounded corners come out.
This tool becomes even more useful if there are some keyboard shortcuts to:
  1. Toggle arrows (===, ==> or <==>) on the shape that was just drawn (or a shape that is selected).
  2. Jump to user-defined visual styles (that group together text size, line thickness, dotted/dashed/solid, background colors, maybe even the type of shape), e.g. by Ctrl+1, Ctrl+2, etc.
  3. Edit the text some time after it was written. Actually, this really needs some kind of mouse interface.

0 Comments:

Post a Comment

<< Home