Diagrammr

Mihai let the cat out of the bag recently about my little side project to let you create, embed, and collaborate on diagrams that are generated from simple sentences, and, he being the celebrity he is, it’s gotten a lot of buzz (including Kent Beck(!), even if he doesn’t know what it’s for).
It’s not as polished as I’d like (anybody know a pretty Java Linux font?), but that’s launching early and often for you. It seems to be already useful, I’ve used it for a few things at work and found it way faster than wrestling with Visio or something.
The actual design is a little convoluted so that I could get a reliable data storage system with minimal changes from my current hosting environment. Ideally, the whole app would be on App Engine, but Java2D isn’t available in the sandbox yet. You can see how it works here. I really, really wanted to avoid calling out to Dot, but after some time spent reading the paper, I realized how hopeless that was.
A shout out to some similar tools that just didn’t quite do it for me:
Also a shout out to Alan Donovan, who built something similar inside of Google that I <3ed.
August 27th, 2009 at 9:56 pm
I’m curious, as the developer of Instaviz, why it didn’t do it for you.
August 27th, 2009 at 10:31 pm
Hey, awesome idea!
While I don’t know a huge amount about web development, one principle of all programming seems to be- never trust user input.
So the fact that whatever you put into that text box gets directly inserted into the HTML unescaped, and you can link to the saved page . . . (E.g. http://diagrammr.com/edit?key=dhCgmJ9oSsE ) worries me a little!
Although my javascript, alert(’Boo!’), doesn’t seem to be executed for some reason . . .
August 27th, 2009 at 10:58 pm
Cool!
Would be even cooler if there were a way to choose how the words are grouped, so that I could say any of …
[Joe Smith] hates [potbelly pigs]
[Joe] Smith hates potbelly [pigs] <- this seems to be the only option
[Joe Smith hates] potbelly [pigs]
August 27th, 2009 at 11:26 pm
Love it! All I would ask for is a way to have nodes with multiple words, like ‘Fred takes off [his pants]‘ =>
+——-+
| Fred |
+——-+
| takes off
+————–+
| his pants |
+————–+
August 28th, 2009 at 5:54 am
It would be immensely cool to see “recent diagrams” made by people on the front page. (With of course a way to opt-out when you create a diagram for people who want to keep them private).
I’d like to see what funny (or serious) diagrams people can make.
August 28th, 2009 at 7:43 am
Glen, instaviz is totally awesome. I just have a belief that lots of technical documentation omits diagrams because starting a program and/or using the mouse is just too much. I wanted to see if I’d create more diagrams if I lowered the bar.
Jordan, good point! There’s not much damage that could be done at the moment, but I’ll fix that up.
Ryan & Chaos, that keeps coming up, as you can see right here. Still trying to decide the best way to support it.
BoD, that would be fun to add at some point. I’ve seen a few funny ones on Twitter.
August 28th, 2009 at 4:17 pm
This tool is awesome.
Watch out. I’ve been accused of being able to speak only in post-its. You may be accused of being able to speak only in diagrams (and puns).
August 29th, 2009 at 6:38 am
Wonderful tool. Suggestions: Have option that filters by nouns vs verbs etc. That way the most important words are in the boxes. Also allow dragging to rearrange position and allow stretching to make certain boxes bigger for emphasis.
August 29th, 2009 at 6:44 am
You also need dictionary so that you don’t just take the last word, but use the phrase; mark likes ice cream should create Mark ->likes->ice cream.
August 30th, 2009 at 12:08 am
Needs a bigger display surface with dynamic resizing.
I wanted to do a diagrammed Sarah Palin speech and a few pop music songs, but ran out of display surface too quick.
August 30th, 2009 at 12:13 am
It also would help to have a “Basic Instructions” list of how to use the tool. I didn’t figure out how to parse it until one FARK member clued me in through an indirect manner.
Word phrases cannot be grouped unless you put an underscore or a symbol in place of a divider space.
Basic Instructions as I see them.
[FIRST WORD] (space = arrow) –> [phrase labeling arrow] (last space = arrow) [LAST WORD]
Further sentences link to identical [FIRST WORD] or [LAST WORD] box objects.
August 30th, 2009 at 12:25 am
For MARK KOLB’s suggestion of a dictionary, I suggest instead with listed instructions a quoted, “word phrase” = that phrase in the box or the usage of [brackets] to indicated [words in box].
This would have to be stated in the INSTRUCTIONS on how to do this stuff.
Other suggestions that pop off my noggin. Auto word wrap line-feed grouping as a toggle. If the arrow goes down enough to split a line at the (space), split the line, center the words, and make a double or multiple lines as needed to prevent overly wide phrase lengths.
The auto arrow reshaping is a clever 2D topological unwrapping trick, but ultimately there is a wall of space limitations it will hit without auto-wrapping overly long lines.
August 30th, 2009 at 12:57 am
Other obvious suggestions (fitting common graph-boxing addict formatting).
For easier entry. Have 3 boxes to enter text in at a time.
[source container box] –> [arrow labeling] –> [target container box]
On the tops of these boxes have a clickable symbol list to indicate type of container box or type of arrow.
Container box choices =
[ ] = square box (default)
( ) = oval box
{ } = rounded corner box
= diamond box
Arrow choices =
-> = Default arrow
<- = Reverse arrow
= One arrow pointing to target box, one arrow pointing to source box
You can add more or less as it pleases you.
Text in container boxes will be sanitized for HTML + CSS exploits.
August 30th, 2009 at 8:07 pm
I second the request for grouping words with some sort of brackets. The following diagram is done incorrectly:
Client sends A to server. [delete] [move up] [move down]
Server sends B to client. [delete] [move up] [move down]
Client computes K=B**a mod p. [delete] [move up] [move down]
Server computes K=A**b mod p [delete] [move up] [move down]
August 31st, 2009 at 2:18 pm
I like the boxing approach instead of dictionary if easier to implement. That allows for different languages without a dictionary for each.
August 31st, 2009 at 9:55 pm
Other obvious suggestions (fitting common graph-boxing addict formatting).
For easier entry. Have 3 boxes to enter text in at a time.
[source container box] –> [arrow labeling] –> [target container box]
On the tops of these boxes have a clickable symbol list to indicate type of container box or type of arrow.
Container box choices =
[ ] = square box (default)
( ) = oval box
{ } = rounded corner box
= diamond box
Arrow choices =
-> = Default arrow
<- = Reverse arrow
= One arrow pointing to target box, one arrow pointing to source box
You can add more or less as it pleases you.
Text in container boxes will be sanitized for HTML + CSS exploits.;. All the best!!