Home > Extensible Programming > Pictures in Pages

Pictures in Pages

October 23rd, 2009

It’s still a lot harder than it should be to add pictures to web pages. I know, you think it’s easy, but let’s do a comparison:

Modern desktop WYSIWYG editor WordPress (and most other tools)
  1. click on the drawing palette
  2. draw
  1. fire up a separate drawing application
  2. create the image
  3. upload it
  4. add an <img> tag to link to it

Not too bad so far, but what happens when someone wants to update the image?

Modern desktop WYSIWYG editor WordPress (and most other tools)
  1. click on the picture
  2. draw
  1. download the image
  2. fire up a separate drawing application
  3. update the image
  4. upload it again

The former feels more wiki-like, and I suspect that if sketching in web pages was as easy as sketching in Word or OpenOffice, a lot more developers would draw pictures of what’s going on in their applications.

I can see two ways forward: create drawing tools that rely on the <canvas> element that are as easy to incorporate into web pages as the Javascript WYSIWYG HTML editor I’m using right now in WordPress, or hack around the problem. Right now, it looks like the latter is winning.  For example, check out Jordi Cabot’s list of text-based UML tools: all of the entries translate text like

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
@enduml

into a picture like:

diagram

just as a wiki engine takes //ohmigod!// and turns it into ohmigod!. (Example taken from PlantUML.)

Now, part of me wants to weep at the prospect of ASCII art’s continued survival. On the other hand, it’s a pretty creative way to work around the continuing backwardness of web interfaces, and if people actually start using it to explain what their code is doing and how it works, we’ll all be better off.

Extensible Programming

  1. James
    October 23rd, 2009 at 13:44 | #1
    Reply | Quote

    Why on earth weep at ASCII art’s continued survival? You can produce it (albeit with a certain amount of complexity) and see it in any text editor you chose. Even better, you can version control it straightforwardly, diff it, grep it, sed it; whatever you can do with ordinary text. These are *huge* in my book, so I’m sincerely surprised to see someone actively want to loose such things. SVG isn’t a bad contender, but it does tend to obsure meaning when looking at the text representation, whereas your @startuml example is splendidly concise. Could you elaborate why you dislike ASCII art so? I’m guessing it’s due to difficulties in producing it?

  2. Harald
    October 23rd, 2009 at 17:22 | #2
    Reply | Quote

    How about http://ditaa.sourceforge.net/ , which takes ASCII-art diagrams and turns them into actual graphics?

  3. Brent
    October 23rd, 2009 at 23:36 | #3
    Reply | Quote

    There is another website to check out; websequencediagrams.com allows you to directly link to the image file generated.

    I have coded up a Sequence diagramming tool in python with outputs of svg and png files. It uses similar etxt constructs for the diagram. It’s working code, but needs a little cleanup if interested. I got sidetracked on generating the flowcharts with the similar text-based inputs.

    If I get a chance to get back to it, I was planning to have a extension in Sphinx to allow for Sequence Diagrams to be easily included.

  4. AL
    October 25th, 2009 at 21:51 | #4
    Reply | Quote

    Have you looked at “Gliffy”. As a plug-in for the wiki Confluence, it works great for adding simple daigrams.

Comments are closed.