Treedraw Documentation
Sandiway Fong, University of Arizona

Quick links:
Current version / No-install version / MacOS High Sierra / Linux / Windows 10
Basic usage: Export: Notations supported: Square bracket : Minimalist set/ordered pair: S-EXP (PTB): Term
How it works / Troubleshooting / Comparison: nltk

Current version

(To see installed version, hover over (or touch) TreeDraw.)

No-install version

No installation is necessary to use TreeDraw. Any browser that supports html5/Javascript can be used to access the server at Osaka Kyoiku University in Japan. Just click here.

MacOS: Safari browser

iPhone: Mobile Safari on iOS 10

(See the How It Works section at the bottom of this webpage for more details.)

If you prefer not to use the web version, the program can be installed locally on MacOS, Linux and Windows.
See the relevant section for instructions: MacOS High Sierra (10.13), Linux and Windows 10

Whether locally or via the web, the program is accessed via a (html/Javascript) webpage.
This webpage can be local to your device (download this page to your device), or accessed via a link (here).

Note that Javascript must be enabled in your browser.

MacOS: Safari browser

MacOS: Google Chrome browser

Ubuntu: Firefox browser

Basic Usage

Enter a bracketed expression into the Input box (syntax given below) and hit ⮐ (return) or ⇇Send.

Exporting trees

Rendered trees may be directly dragged to the Desktop (or other apps) or saved directly as files in .png format using gestures, see below:

MacOS: Safari (control-click/two-finger click)

Windows 10: Google Chrome (right-click)

Ubuntu: Firefox (right-click/two-finger click)

iOS 12: Mobile Safari (long press)

The .png extension stands for Portable Network Graphics (Wikipedia page here).

Most imaging processing and word processing programs can edit, convert and crop .png files.
For higher resolution images, the x1-x4 slider on the right side can be used either before or after rendering with different effects on spacing.

Notes:

You may have multiple TreeDraw windows open.
The interface also supports browser rendering of a file containing a list of bracketed expressions (one per line) via the File Chooser or Drag 'n Drop (onto the red circle ◯). Text lines, which may include html code, will be passed onto the browser for display.

Bracketed Expression Syntax

There are four kinds of bracketed expressions currently documented. All are active, but may not be mixed in the same tree.

Below are the help pages for each kind of expression.

Square bracket syntax

Syntax: Examples 1-3: Examples 4 and 5: Example 6:

Syntax:	Examples 1-3:	Examples 4 and 5:	Example 6:
node = [label ␣terminal⁺ \| node^] Notes: ■ no space permitted between [ and label ■ ^ = zero or more occurrences ■ ⁺ = one or more occurrences ■\| = or ■ ␣ = space(s) ■ label and terminal should not contain spaces, square brackets, or double quotes (single quotes and round brackets are ok) Underscore (_), see examples 2, 4 and 6: ■ _word = ~~word~~ ■ word1_word2 = word1_word2 ■ _ = ␣ (blank) ■ _N_ = ␣ (blank N characters long)	`[a[b][c d]]` `[a [b][_]]` label `_` is a zero-length blank. `[a [b]]`	`[Adv by and large]` by and large is a multi-word terminal. when k>1 in terminal^k, a triangle is drawn. cf. `[Adv [by][and][large]]`	`[<ɸ,ɸ>[DP_i 香港][T[T][v[_DP_i _香港][v[v*][β _10_ _]]]]]` 香港 is a single word. `β` dominates an empty multi-word consisting of `_10_` (= a 10 character blank) plus `_` (= a zero-length blank).

node = [label ␣terminal⁺ | node^*]

Notes:
■ no space permitted between [ and label
■ ^* = zero or more occurrences
■ ⁺ = one or more occurrences
■| = or
■ ␣ = space(s)
■ label and terminal should not contain spaces, square brackets, or double quotes (single quotes and round brackets are ok)

Underscore (_), see examples 2, 4 and 6:
■ _word = ~~word~~
■ word1_word2 = word1_word2
■ _ = ␣ (blank)
■ _N_ = ␣ (blank N characters long)

[a[b][c d]]

[a [b][_]]

label _ is a zero-length blank.

[a [b]]

[Adv by and large]

by and large is a multi-word terminal.
when k>1 in terminal^k, a triangle is drawn.

cf. [Adv [by][and][large]]

[<ɸ,ɸ>[DP_i 香港][T[T][v*[_DP_i _香港][v*[v*][β _10_ _]]]]]

香港 is a single word.
β dominates an empty multi-word consisting of _10_ (= a 10 character blank) plus _ (= a zero-length blank).

(If the websocket interface is operating, pid⮐ displays the process ID.)

Minimalist set/ordered pair notation

(Note that syntax of ordered pairs <α,β> is currently defined with α as adjunct and β as main. This convention should be reversed at a future date to be more compatible with Minimalist Syntax.)

Syntax:	Examples 1-3:	Examples 4:
node = {(label ␣) node node} \| <node node> \| terminal Notes: ■{α,β} for set Merge, see example 1 ■ <α,β> for pair Merge, α adjunct; connection always made to non-adjunct β, see examples 2 and 3 ■ set Merge label is optional ■ if present, see example 4, no space permitted between { and label, and ■ there must be at least one space (␣) following label ■\| = or ■ ␣ = space(s) ■ label and terminal should not contain spaces, angle or curly braces, or single double quotes (paired double quotes, "..." (see example 3), single quotes, round and square brackets are ok) Underscore (_), see example 3 (and help section 1 above): ■ _word = ~~word~~ ■ word1_word2 = word1_word2 ■ _ = ␣ (blank) ■ _N_ = ␣ (blank N characters long)	`{x,{y,z}}` `{<y,zp>,x}` `{x,<y,zp>}`	`{(<ɸ,ɸ>) XP,{T,{v* _XP,{v* v*,β}}}}`

S-EXP representation

Penn Treebank-style Lisp S-EXPs, with similar options to the square bracket format above.

Note: does not permit unlabeled nodes, e.g. ((S)), cf. (S).

(a b)

(a (b)) (a one _two three) (S (NP-SBJ (NP (NNP Pierre) (NNP Vinken)) (, ,) (ADJP (NP (CD 61) (NNS years)) (JJ old)) (, ,) ) (VP (MD will) (VP (VB join) (NP (DT the) (NN board)) (PP-CLR (IN as) (NP (DT a) (JJ nonexecutive) (NN director))) (NP-TMP (NNP Nov.) (CD 29)))) (. .))

Term representation

Prolog term format.
node = label(node,.., node | terminal | terminals)
terminals = [terminal,.., terminal]
Examples:

a(b) a([b]) np([a,good,thought]) s(np(prp(he)), vp(vbd(yawned), np(dt(a), jj(good), nn(yawn))))

MacOS High Sierra (10.13) software

Download the app here (8.6MB). Double-click it. You should see the same webpage appear.

Debugging

There is no dock icon. The back-end process named treedrawpl runs as a daemon. Enter pid to see the treedrawpl process number. If nothing is displayed, the back-end may not be running.¹

¹To check whether treedrawpl is running, use Activity Monitor or Terminal with ps -e | grep treedrawpl.

Linux software

On Linux, TreeDraw was built on Ubuntu 18.04 LTS.

(Warning: do not use the version containing detach. Latest version uses dtach instead. If in doubt, re-install.)

Steps:

Download treedraw-linux.tar.gz.
Use the Archive Manager from the browser (see picture above), or save the file and do tar -zxvf treedraw-linux.tar.gz to extract the files. A sub-directory treedraw will be created.
cd treedraw
./treedraw.sh and index.html should appear in the default browser.

Windows 10 software

Download the app here (7.3MB).

For Windows 10-specifc installation and usage go to the separate webpage here.

How it works

The program consists of a front-end and a back-end.
The back-end program communicates via a Websocket interface to your browser. You will see ws://host:8019/ shown at the top-left corner of the browser page. Here, ws stands for the Websocket protocol. host is the name of the back-end server or localhost (if you have the program locallly installed). 8019 is the port number I selected to host the socket. Your firewall must permit access to port 8019 if you're not running locally.
The program receives bracketed expressions from the browser; the browser communicates the sizes of the labels back to the program; and the program then computes the layout of the trees, and informs the browser where to place the labels and connecting lines and curves.
The front-end is written in Javascript (must be enabled in your browser) and displays trees using the built-in html5 graphics, i.e. the browser functions as the GUI for the program.
According to Wikipedia (here), Safari 5/6, Firefox 6,IE 10, Chrome 14, Opera 12.10 and onwards fully support websockets. As long as your browser support websockets, and that should be the case from about 2011 on, the program should work using your browser as the front-end.
The no-install version uses a back-end hosted at Osaka Kyoiku University (host=language.cc.osaka-kyoiku.ac.jp).² Advantage: no installation is required and any modern computer/phone/tablet with a html5-compliant browser should work. Disadvantages: your device must be able to access the internet and port 8019 for the Websocket must not be blocked. Unfortunately, if blocked, you will have to possibly petition the gatekeepers at an overzealously security-conscious institution or internet service provider to enable traffic on port 8019. Hence, I also offer MacOS and Windows 10 versions of the software.
The MacOS version runs the back-end locally on your Mac (host=localhost). Advantages: no internet access required and runs much faster. Disadvantage: the current version of program is hosted on MacOS High Sierra (MacOS 10.13). Therefore, only MacOS High Sierra has been officially tested by me, and earlier versions of MacOS/OS X may not work at all due to library incompatibilities.
The Windows 10 version also runs the back-end locally on your Windows PC (host=localhost). Same advantages as the Mac version; diadvantage is that usage currently involves one more (clunky) step.

²Thanks to Jason Ginsburg for hosting the back-end at Osaka Kyoiku University.

Troubleshooting

If you are installing a newer version of TreeDraw, make sure you kill the running process of the old one first, otherwise the old one will block the new one from starting. If in doubt, reboot your machine.

MacOS

Check to see if the back-end is running. In Activity Monitor, type tree into the top-right search box.

You should see a process named treedrawpl present.
The PID can be checked against the browser page by typing in pid into the bracketed expression input box.

If treedrawpl is not running, either it was killed or failed to start. If treedrawpl is consuming a lot of % CPU, kill it.

(You may kill it from the Activity Monitor by selecting the process and clicking on ⓧ or by typing kill -9 PID. Or simply reboot your machine.

Linux

In Ubuntu, pgrep treedrawpl in the terminal will return the process id of TreeDraw if it is running. Can also use top instead:

If treedrawpl is consuming a lot of %CPU, kill it.

Appendix

A comparison with NLTK (Natural Language Toolkit)

TreeDraw is designed to render compact trees. Of course, there are many programs for drawing syntax trees that are freely available out there. I encourage people to try them out and see which style one prefers.

Here is a brief comparison with the Tree object in nltk:

NLTK code:

Academica Sinica example tree from NLTK book chapter 8:

(VP (Ndabe 同時) (Dd 就) (VC32 帶) (Di 了) (NP (NP (DM 四張) (VH11 熟) (Nab 牛皮)) (Caa 和) (NP (DM 十二頭) (VH16 肥) (Nab 牛))))	(VP (Ndabe (同時)) (Dd (就)) (VC32 (帶)) (Di (了)) (NP (NP (DM (四張)) (VH11 (熟)) (Nab (牛皮))) (Caa (和)) (NP (DM (十二頭)) (VH16 (肥)) (Nab (牛)))))

compared with:

Treedraw Documentation Sandiway Fong, University of Arizona