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.
I'm curious, as the developer of Instaviz, why it didn't do it for you.
ReplyDeleteHey, awesome idea!
ReplyDeleteWhile 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 . . .
Cool!
ReplyDeleteWould 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]
Love it! All I would ask for is a way to have nodes with multiple words, like 'Fred takes off [his pants]' =>
ReplyDelete+-------+
| Fred |
+-------+
| takes off
+--------------+
| his pants |
+--------------+
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).
ReplyDeleteI'd like to see what funny (or serious) diagrams people can make.
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.
ReplyDeleteJordan, 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. :)
This tool is awesome.
ReplyDeleteWatch 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).
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.
ReplyDeleteYou 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.
ReplyDeleteNeeds a bigger display surface with dynamic resizing.
ReplyDeleteI wanted to do a diagrammed Sarah Palin speech and a few pop music songs, but ran out of display surface too quick.
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.
ReplyDeleteWord 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.
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].
ReplyDeleteThis 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.
Other obvious suggestions (fitting common graph-boxing addict formatting).
ReplyDeleteFor 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.
I second the request for grouping words with some sort of brackets. The following diagram is done incorrectly:
ReplyDeleteClient 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]
I like the boxing approach instead of dictionary if easier to implement. That allows for different languages without a dictionary for each.
ReplyDeleteOther obvious suggestions (fitting common graph-boxing addict formatting).
ReplyDeleteFor 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!!
Lovely.
ReplyDeleteI did something similar in web 1.0, which still has some promise.
I still want something like this, but web 2.0, and with nested boxes.
http://radio.weblogs.com/0104369/2004/02/18.html
An updated list of similar tools can be found here: http://modeling-languages.com/content/uml-tools#textual
ReplyDeleteIt is incredible how popular this kind of tools are becoming.
Hey.
ReplyDeleteI've just seen and tested this tool.
Congrats for your job. Now, I want you to check a project of mine, which reminds this of yours. I'm pretty sure we can mix both. The project is at theWebMind.org and supports plugins. I think it could be great for both of us to integrate such tools.
If you've got some interest, please, contact me at felipenmoura at gmail dot com
--
Felipe Nascimento