UML for javascript?

Question

I'm looking for a way of graphically representing javascript objects...

I know there is UML, but for example, how to represent the chain between 2 objects, eg:

var a, b;

a = {};
b = Object.create(a);

Intuitively, I'd draw something like this:

+-----+
|b    |
|-----|
|     |
+--+--+
   |     +-----+
   +---->|a    |
         |-----|
         |     |
         +-----+

but is there a decent representation in UML?

And what about mixins?

c = $.extend({}, a, b)

+-----+           +-----+
|a    |           |b    |
|-----|           |-----|
|     |<----------|     |
+-----+           +-----+
   +     +-----+
   |     |c    |
   |     |-----|
   +---->|     |
         +-----+

Answer 1

First thing you need to know is that JavaScript uses prototype-based inheritance. This means there is no distinction between classes and instances as in other OO languages (like Java). There are just objects. One implication of that is that differentiating between class and object diagrams does not make sense.

To your first example:

var a, b;

a = {};
b = Object.create(a);

This is inheritance - object b inherits properties of object a.

Correct way to model this in UML is this class/object diagram:

Mixins can be viewed as a form of multiple inheritance, object c is inheriting properties from object a and b, diagram for that might look like this:

Answer 2

It looks like you are trying to show the relationship between object instances in a class diagram. This will not really work; you probably want to try using a UML instance diagram (may also be called an object diagram). A class diagram is meant to capture system concepts, their structure and their relationships in a static way. It may help to start with a class diagram and then move to an instance diagram where you can plug some values in the "slots" or properties of you object instances to see if the model in your class diagram works.