Skip to the content.


English | 日本語

Table of Contents

  1. Basic Usage
  2. Fonts Used to Generate PNG
  3. Install Fonts for SVG
  4. Font Styles, Text Decoration, and Sub/Superscripts
    1. Font Styles
    2. Text Decoration
    3. Subscript and Superscript
    4. Box and Circle
    5. Whitespace inside Label
    6. Newline
    7. Horizontal Line
  5. Triangle, Square Brackets, Rectangle
  6. Escape Special Characters
  7. Draw Paths between Nodes (experimental)

Basic Usage

Type your text in the editor area using labeled bracket notation and click the Draw PNG or Draw SVG button.

Every branch or leaf of the syntax tree must belong to a node. To create a node, place the label text right next to the start bracket. Any number of branches may follow, separated by a whitespace. (Node labels containing whitespaces can be created using the <> symbol. For example, Modal<>Aux will be rendered as Modal Aux).

There are three different types of connector drawn between a terminal node and its leaves (auto, bar and none). auto draws a triangle for leaves containing one or more whitespaces (= phrases). If the leaf does not contain any spaces (= single word), a straight bar is drawn instead (unless the leaf contains a ^ symbol at the beginning, which specifies the leaf to be a phrase).

The newline character \n can be used within the text of both node lables and leaves.

RSyntaxTree can generate PNG and SVG, SVG can be used with third party vector graphics software such as Adobe Illustrator, Microsoft Visio, BOXY SVG, etc. It is very useful if you want to modify the output image.

The Radical symmetrization option affects the way branch nodes are drawn. The options Font style, Font size, Connector height, and Color need no explanation. By changing the values of these options, you can change the appearance of the resulting image.

Fonts Used to Generate PNG

Currently, you can choose between the font styles Noto Sans, Noto Serif, and WQY Zen Hei.

Install Fonts for SVG

SVG images are dependent on the fonts installed locally on your computer. In order for the images to display as intended, the following fonts should be installed beforehand (click on the links). If these fonts are not installed, other available fonts will be used, resulting in a somewhat unbalanced display of the text.

Font Styles, Text Decoration, and Sub/Superscripts

You can apply font styles (italic/bold/bold-italic), text decoration (overline/underline/line-through), subscript/superscript font rendering, and more. These markups can be nested within each other.

Font Styles

Style Symbol Sample Input Output
Italic *TEXT* *italic* italic
Bold **TEXT** **bold** bold
Italic+bold ***TEXT*** ***italic bold*** italic bold

Text Decoration

Decoration Symbol Sample Input Output
Overline =TEXT= =overline= overline
Underline -TEXT- -underline- underline
Line-through ~TEXT~ ~linethrough~ linethrough

Note: Currently, overline is displayed in SVG, but not in PNG.

Subscript and Superscript

Sample Input Output
normal_subscript_ normalsubscript
normal__superscript__ normalsuperscript

Box and Circle

Sample Input Output

Whitespace inside Label

Sample Input Output
X<>Y X Y


Sample Input Output

str1\ str2 str1
str1\ \ str2 str1

str1\nstr2 str1
str1\n\nstr2 str1


Horizontal Line

Sample Input Output
str1\ ---\ str2 str1
str1\n---\nstr2 str1

Here, --- represents - repeated three times or more consecutively.

Triangle, Square Brackets, Rectangle

In auto mode, the triangle connector shape is applied when the terminal node contains words separated by whitespace. In bar and none modes, triangles are drawn for the nodes with ^ at the beginning of the leaf text, lie [NP ^syntax-trees].

If a # character is placed at the beginning of the leaf text (right after ^ if there is one), the leaf text is enclosed in a paire of square brackets (e.g. [NP #text] or [NP ^#text]). If ## is placed at the beginning of the leaf text, a rectangle is drawn instead of brackets.

Escape Special Characters

The backslash character \ must be used to print certain characters used in the markup. If you do not have the \ key on your keyboard, you can also use the yen/yuan character ¥ to escape.

Input Apearance
\ + whitespace↩️

Note: A newline character ↩️ is treated just as a whitespace. Thus 1) \n, 2) \↩️, and 3) \ followed by a whitespace character are all rendered as a newline ↩️ in the resulting image. Note also that a ↩️ or a whitespace repeated more than once is reduced to a single whitespace.

Draw Paths between Nodes (experimental)

You can draw any number of paths of three different types:

Each path is distinguished by a path ID number. The path ID is specified by putting a plus sign and a number (e.g. +7) at the end of the node text. If a greater-than sign is placed between the plus sign and the number (e.g. +>7), an arrowhead will appear at the end of the path. A node can have any number of path IDs. The same path ID must appear in the text of the two nodes between which the path is rendered. The same ID number cannot appear in more than two places.