Creating the ActionScript 3.0 UML Diagrams

Ted Patrick recently announced the new ActionScript 3.0 and Flex 2 class diagram posters on his blog.

I helped put together the posters, or at least the UML content that went into them. Rick Santos was the designer who turned the crazy web of boxes and lines into something cool. Many Adobe folks risked their eyesight to proofread the diagram details, and of course quite a few Adobe folks, including Ted, Ben Watson, Mike Potter, Randy Neilsen, and Shelley Paquette managed the whole process of getting the posters designed, printed, and distributed.

Some people have asked how the diagrams were built. We generated all of the content from the actual ActionScript source code for Flash Player and the Flex 2 Framework. Then I loaded that into a UML diagramming tool, arranged everything, and sent the raw diagrams to the designer.

Here's a quick rundown of how we did it in case you want to create some ActionScript UML diagrams of your own:

First I ran ASDocs on the ActionScript source code and generated XML output. You can get a version of ASDocs on the Adobe Labs site.

Next I wrote some XSL that converted the ASDocs XML into XML Model Interchange (XMI) format. This is a very ugly, but standard, format used to exchange UML diagram information among various diagramming tools.

I tried a few different diagramming tools to create the diagrams themselves, including Poseidon,  ArgoUML, and MagicDraw. I finally settled on Enterprise Architect from Sparx Systems. It read the most information from the XMI files and it provided the most flexible output options.

Since then Enterprise Architect has added ActionScript 3.0 reverse engineering and generation capabilities, which makes it a very handy tool for Flex and Flash developers. Too bad that feature wasn't there when we started!

Each ActionScript package got its own diagram, and then all of the package-level diagrams were consolidated into one larger one. I was lucky to achieve the Holy Grail of UML modeling: no crossed lines. That's probably because we elected to only show inheritance and realization associations, and not to show any associations that crossed packages. :)

Finally I exported the diagrams in Adobe Illustrator format. Rick took those files and worked his design magic upon them.

The diagrams offer a nice overview of everything that ActionScript offers, so I recommend grabbing the PDF's or the posters and checking them out.

You'll still need to refer to the docs for details, but at least you'll get a good idea of where to look.

(And yes, I do hope to avoid a discussion here about whether or not "UML posters want to be free." :)

Comments

[Rostislav Siryk]

You guys made a good work! Your posters are more up-to-date than Rocketboot's Flex 2 API Reference Posters (they were made for Flex 2 Beta 2) and look cute.

BTW, we using Sparx Enterprise Architect in creation of our Flex application too, and the tool is great.

[a]

Any idea how to get an xml class/package structure from asdocs? I mean instead of just html, how can I get an xml hierarchy of things such as what you'd need to create uml. Thanks.

[Rob Dixon]

Hey a,

Your answer is in my other blog post about generating XML from ASDoc: http://rantworld.blogs.com/flashlit/2007/02/use_asdoc_to_dr.html

You came to the right place. :)

[tiger]

Would you please tell me how to convert from xml to Xmi ?? PLEASE

[Samuel Agesilas]

Great post Rob,

I've been working on a cross platform UML editor for a while now and I will be having a private alpha that I would love for you to be a part of. More information can be found here

http://www.levelofindustry.com/journal/2007/4/30/apollo-uml-modeling-tool-saffron.html

Cheers,
Samuel Agesilas

[Justin]

can you explain how you "...exported the diagrams in Adobe Illustrator format." I can't seem to get anything useful with Enterprise Architect except for *.emf which Illustrator pretty much chokes on. Not to mention that if the diagram is fairly complex, breaking it up into workable/usable design layers is PAINFUL to say the least. Maybe Rick could give me some pointers on the Enterprise Architect > Illustrator conversion?

[Gilad]

Hi, this thread is brilliant, thanks, though I am in need for some more info.
I managed to create the XML output of my AS project.
Now you mentioned that you converted it to XMI using XSL. That part I'm a bit baffled. Is there anyway you can explain how exactly it's been done? Could you be able to provide us with the XSL you created?

Many thanks :)
Gilad

[Petit]

Still amazed by the posters, but is there any chance that we are to see the XSLT you used for transformation.
I'm taking part in the development of the open source Sandy 3D Engine, and would like to use the ASDoc output to generate UML.

( http://www.sandy.org )

Cheers!
/Petit

[claudiu]

I installed everything but I need to transform XML into XMI. I undestand that I need an XSL file to do the mapping in xml xmi. Where can I find it? Or can I do differently, how?

Thanks :)
Claudiu

[Rafael]

Can you please tell us how to convert from XML to XMI ??

[Cristian]

Hello Rob,

We will release soon a UML modeling tool with bi-directional ActionScript code synchronization support.

If interested, take a peek at http://www.uml4as.com
Btw, the tool is called UML4AS - UML for ActionScript and Flex.

Cheers,
Cristian.

[John]

+1 please provide the xslt used for transformation.

[Filip]

Have you tried Crocus Modeller (http://crocusmodeller.com) to create sweet UML posters?

I'd recommend that.

[Account Deleted]

Excellent post. I will try all those links. Which are displayed at your post. Thanks a lot for this category.
http://webdel-2011.blogspot.com