Drawing tree structures with SVG and JavaScript
JavaScript XSLT HTML PHP Other
Switch branches/tags
Nothing to show
Clone or download
westonruter Merge pull request #1 from Grahack/patch-1
Suppress jQuery link in example.html
Latest commit 74aed44 Aug 2, 2015


SVG Tree Drawer

This project provides a JavaScript library for constructing interactive SVG images of tree structures. This is useful in depicting parse trees as are common in linguistics and computer science. The library provides hooks for toggling the collapsing or extending branches in the tree.


The first iteration of this project I developed back in 2004, and the old project page with original demos is still available. In Autumn 2009 I took an online syntax course through the University of Washington's CLMA program, and this course required a lot of tree drawing. Having previously created an SVG tree drawer, I wanted to do my course work using a browser-based technology instead of using LaTeX. However, since the course was about HPSG, each node in the tree was not a simple label as I had been used to, but rather a complex attribute-value matrix (AVM). So I set out to rewrite my SVG tree drawer to bring it up to date and to allow arbitrary content in each of the nodes so that I could use MathML to render the AVMs.


The following screenshots link to interactive SVG images of the examples:

Simple tree: “The boy plays with the ball.”

Tree of “The boy plays with the ball.”

Tree with AVMs: “They seemed close to me.”

Note: This example uses XHTML (application/xhtml+xml), XSLT, XML, MathML, and SVG together; your browser may not support all of the necessary technologies.

Parse tree with AVMs for “They seemed close to me.”


Developed by Weston Ruter (@westonruter). Code licensed GPL