27

More often than not I need to elaborate my question put up on Stack Overflow with a custom sketch, UML class diagram, flow chart.

It is in these times I have to open up a custom paint software, factor out some diagrams, export it as an image, attach it to Stack Overflow. I wouldn't know how complicated it is to invest in having such a sketching or drawing tool integrated,
It could even be a basic pen stripped off all the advanced features leaving it a bare minimum.

Such a tool if incorporated into the Stack Overflow "ask question" UI would be certainly helpful.

As of Today this Question has been visited around 170 times and 7 answers,
This was meant to be the voice of Stack Overflow users.
Would you need a Drawing Tool for you on the Stack Overflow site, would it help you to express you questions and answers better?
Sadly, only 2, or 3 answers are in the context of the question.
The bounty was meant to be a bait and even that ends tomorrow. Hope you'll get the will and the zest to comment on this question today and in the future .

Improve this question
8

11 Answers 11

Reset to default
17
+100

I agree that such a tool would be useful, especially for tablet PC users who might be able to directly draw on their computer screens.

However, I don't think that Stack Overflow should spend the time and effort of building their own, because it's too far from what the site really is about. Instead, they should work with one or more of the web sites that already provide drawing tools like e.g. http://canvaspaint.org/ or http://yuml.me/

It would be cool to have a button on the edit toolbar to insert graphics. And it'd be doubly cool if that functionality comes through something "mashup"-like, so that as (say) canvaspaint.org improves their drawing program, Stack Overflow et al. automatically get a better "draw" feature.

Improve this answer
6
  • There is already a button on the toolbar to insert graphics...
    – Eric
    Sep 7, 2009 at 16:13
  • 1
    Good Point you make of the third party sites and the tablet! I don't how much time these things take to integrate, building it from scratch is probably out of question. I too don't own a tablet, a large percentage still use the ubiquitous mouse. The gist of the matter is more of communication and convenience!
    – Kevin Boyd
    Sep 7, 2009 at 16:16
  • 2
    Eric, there's a button to add an image link. What we're talking about here is a button to insert a drawing area, so that one can directly sketch inside the answer form (using either the mouse or a pen). The point here would be to reduce the number of steps, to make it easier for people to write good answers.
    – user133653
    Sep 7, 2009 at 16:32
  • 1
    The main advantage of a sketch over a graphic is it's editability. Not only does the original author have the ability to modify the sketch, but anyone with enough rep can. This, to me fits the spirit of SE more than static (essentially closed source) imgur files. Imagine if SO set up their code-blocks so that could not be easily edited!
    – Paul
    May 2, 2014 at 17:19
  • It appears as though canvaspaint.org is now offline.
    – Sampson
    Jun 22, 2015 at 3:10
  • @JonathanSampson You may be interested in my answer.
    – ᔕᖺᘎᕊ
    Jun 24, 2015 at 19:02
18

You may find yUML useful for class diagrams and flow-charts. It's a syntax-based image-source, allowing ad-hoc on-the-fly illustrations:

[Customer]+1->*[Order]
[Order]++1-items >*[LineItem]
[Order]-0..1>[PaymentMethod]

becomes...

alt text

Improve this answer
6

I'm going to vote no. Exhibit A:

A common diagram (for me), drawn on my whiteboard:

All your data warehouse...

And in Paint, using just the brush tool:

I suck at Paint, apparently.

I rest my case.

Improve this answer
8
  • 5
    the 2nd pic is better than, typing 20 lines explaining the architechture of your program.
    – Kevin Boyd
    Sep 7, 2009 at 16:00
  • 2
    It took me maybe thirty seconds more to snap the pic of my whiteboard and upload it to imgur. I didn't even write anything on there (as is usually the case). Include diagrams, by all means, but use the right tool for the job.
    – Eric
    Sep 7, 2009 at 16:03
  • 2
    I should also note that the lighting is poor because I'm at home today (Labor Day in the USofA), so my whiteboard doesn't have prominent fluorescent lighting just above it.
    – Eric
    Sep 7, 2009 at 16:04
  • 1
    +1 for masochistic handrwing in paint
    – perbert
    Sep 7, 2009 at 17:26
  • @Eric: you have the greatest white board ever in front of you...why not utilize it?...
    – Kevin Boyd
    Sep 8, 2009 at 0:42
  • @voyager - Yep, that "handrwing" is a bitch.
    – Super Long Names are Hilarious
    Sep 10, 2009 at 1:42
  • Sad day. Highest voted answer and I won't get the bounty.
    – Eric
    Sep 10, 2009 at 2:54
  • @Eric: 6 more days to go!
    – Kevin Boyd
    Sep 10, 2009 at 5:19
5

I don't know about UML but one potential tool is Balsamiq Mockups. I love this tool for making quick diagrams in our wiki for my development stories. It has a fixed palette of configurable drawing items that are more than enough for just about any diagram (except, maybe UML, but I only use that on a whiteboard) you'd want to draw. I don't know they'd be interested in working with SO to develop a plugin, though.

Improve this answer
1
  • I just tried out their webapp and it's pretty nifty! Could work nicely with SO.
    – Barry Brown
    Oct 19, 2009 at 6:52
4

To add to @redtuna's answer, perhaps iScribble?

Improve this answer
3

What about partnership with Balsamiq mockup?

I am sure the Balsamiq people will welcome it..

Improve this answer
2
  • Is more like will the SO people welcome it?
    – Kevin Boyd
    Oct 20, 2009 at 4:06
  • Not sure, but I think they will welcome anything as long as it's on the web
    – Graviton
    Oct 20, 2009 at 7:26
2

I would find such a tool useful. Just tonight I was answering some questions on SO and wished I had a drawing tool.

Could the functionality of Groff's pic program be integrated into the editor? The program already exists and can quickly generate images, so it might just be a matter of doing some AJAXy stuff to render the images in real time.

If you haven't seen pic code before, it's very simple but can create complex diagrams. Here's one that creates a simple state machine:

circle "x"
circle "y" at 1st circle - (0.4, 0.6)
circle "z" at 1st circle + (0.4, -0.6)
arrow from 1st circle to 2nd circle chop
arrow from 2nd circle to 3rd circle chop
arrow from 3rd circle to 1st circle chop

This is what it looks like:

state machine http://floppsie.comp.glam.ac.uk/Glamorgan/gaius/web/grohtml-3218937.png

Improve this answer
2
  • Looks good but a bit structured, wouldn't an unstructured program give more freedom to assert yourself?
    – Kevin Boyd
    Oct 20, 2009 at 4:14
  • I took a look at Balsamiq Mockups and think something like that is the way to go. Whatever tool we choose, it needs to be easy to draw the kinds of things that we like to draw: state tables, network diagrams, trees, flow diagrams, etc. I don't see much of a need to draw GUI mockups on SO, SU, or SF.
    – Barry Brown
    Oct 21, 2009 at 5:01
1

Everyone here is right. Probably the best compromise would be if someone could point out a third-party site that allows the user to quickly sketch something, then provide a URL to that image, so it could be pasted in to a comment. Then, all StackOverflow would have to do is provide a button or something to that site. The workflow then becomes:

1) Click button to external site 2) Draw stuff 3) Save it 4) Copy the URL 5) Back in SO, click the image button 6) Enter the URL

That's really not too bad.

http://www.flex888.com/925/online-diagram-tools-using-flash.html might be a start.

Alternatively, there are probably freeware diagramming tools to integrate, but it would still be complicated I suspect. Coding one up from scratch and getting it to a reasonable level of usability and functionality...good luck with that.

Improve this answer
0

I think this is a bad idea - there's very little reason to have a drawing tool integrated into the Stackoverflow site. The sites are mainly based around text (programming, server administration, misc' computer stuff).. I'd much rather we had, say, better syntax highlighting, or better moderation tools, or many others things before drawing tools.

I don't think there is enough need to have an integrated drawing tool in the answers.. For the few questions that would benefit from diagrams, it's not that difficult to draw it in Paint.exe, and shove it on imageshack.us or similar...

There are plenty of good sketching and image hosting sites around.. On OS X, Skitch is perfect for this - you open the application, sketch something (or take a screenshot and annotate it), click a button and it uploads the image and makes it trivial to copy the URL into your answer. There's undoubtedly similar applications on other platforms (there's no Windows Skitch port, yet)

There are technical issues too, for example, an integrated sketching tool would require integrated image hosting, my answer here hopefully explains why I think this is a bad idea - basically the site is almost entirely gzip'd text, hosting images would greatly increase the bandwidth usage, which would slow things down and increase running costs.

Improve this answer
1
  • @dbr: the technical issues you have bought up are valid however as "unknown" and "redtuna" have suggested there are third party options. 'A picture speaks a thousand words" so no matter how many words we type we could say it better with a drawing tool .
    – Kevin Boyd
    Sep 10, 2009 at 5:13
0

http://drnicwilliams.com/2007/06/02/ze-frank-at-railsconf-like-ted/

The bit with the drawing program was much better at RailsConf when he showed how people kept sending him variations on a penis so he decided to shortcut the process by adding functionality to morph any drawn image into something phallic =)

Improve this answer
1
  • 2
    Sounds like you're asking for a bit of paint to illustrate the point here...
    – random
    Sep 15, 2009 at 2:14
0

I've made a userscript to add a 'freehand drawing' to any image in any post in any site.

Freehand Circles Drawing Tool @ StackApps

It adds a button 'edit' next to every image. Clicking it converts the image to a canvas where you can draw onto the image directly from the website. At toolbar is added where you can change the brush colour or the brush thickness. Clicking 'save' then uses the API to edit the post with the newly created image.

enter image description here

You'll need an access token and Greasemonkey/Tampermonkey for which further information can be found at StackApps.

Logo Have fun :)

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .