sgo.to

Zdog

I really like Zdog: it is beautiful, simple and powerful. I'm exploring using it for some diagrams.

Since there is a chance I'll be building many diagrams, I was looking for something more declarative to make it easier to maintain. Something along the lines of the following:

<script type="text/z-dog" is="z-script">
<illustration color="#FDB" dragRotate="true" width="240" height="240">
<polygon
stroke="20"
color="#E62"
sides="5"
radius="50"
>
</polygon>
</illustration>
</script>

To lead to something like the following:

So, I created a custom element that reads an XML input and maps that to the elements of Zdog one by one:

If you put these together, you can build the diagrams declaratively. For example:

<script type="text/z-dog" is="z-script">
<illustration dragRotate="true" width="240" height="240" color="#FDB">
<group translate="0 0 20">
<ellipse
stroke="8" width="160" height="80" fill="true" color="white">
</ellipse>
<ellipse
stroke="8" diameter="70" fill="true" color="#EA0">
</ellipse>
<ellipse
stroke="8" diameter="40" fill="true" color="#636">
</ellipse>
<ellipse
stroke="8" diameter="30" fill="true" color="white" translate="15 -15">
</ellipse>
</group>
</illustration>
</script>

Results in:

Here is another example:

Lets see how far this will take me!

WDYT?