You can design the GUI this as you seem fit but in my opinion there may be 2 sections (div):
1. Contains the tool bar with some shapes (square, oval, text box and any other images that I want to use) and basic commands like save, open etc.
2. Contains a drawing canvas where I can drag and drop the shapes and connect them with lines and arrows.
I should be able to use the shapes and arrows and create an online drawing. I should be able to add labels to the shapes and arrows by using a text label. It is awesome if text label for a shape moves when I move the shape but it is NOT required at this stage.
The arrows should be of both types - one ended and 2 ended - as well as a straight arrow plus a connector arrow. Connector arrow is NOT a show stopper at this stage since we can work around it using many straight line arrows.
I should be able to post the drawing to the server as a string (innerHTML?) in human readable text form. The code should be able to use the same string to recreate the drawing. No server side processing is needed at this stage.
The size of the shapes can be fixed. Ofcourse arrows will need to be extendable as appropriate to join the shapes. Ability to resize the the shapes and set color and font will be awesome but is NOT required at this stage so long as shapes are of reasonable size.
No database or server side code is needed except for you to validate the functionality to certify completion.
Prettiness is NOT a major factor. Working code to create and modify online drawings is essential. Bells and whistles like XML etc are also not required.