Documentation

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, Circle, Bar, and Arrow
   5. Whitespace inside Label
   6. Newline
   7. Horizontal Line
5. Triangle, Square Brackets, Rectangle
6. Escape Special Characters
7. Draw Paths between Nodes (experimental)
8. Draw Extra Connectors 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 connectors can be made transparent using the Hide default connectors option.

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 among the font styles Noto Sans, Noto Serif, Noto Sans Mono and WQY Zen Hei.

• Noto Sans can display basic Unicode characters (including Japanese hiragana/katakana/kanji).
• Noto Serif can display basic Unicode characters (including Japanese hiragana/katakana/kanji).
• WQY Zen Hei can display a wide range of Chinese/Japanese/Korean (CJK) characters.
• Noto Sans Mono can display basic Unicode characters in a mono-spaced typeface.

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.

• Noto Sans: for latin and other basic Unicode characters in sans serif
• Noto Sans JP: for Japanese characters in sans serif
• Noto Serif: for latin and other basic Unicode characters in serif
• Noto Serif JP: for Japanese characters in serif
• WQY Zen Hei: for CJK characters
• Noto Sans Mono: for latin and other basic Unicode characters in sans serif mono (semi-condensed)
• OpenMoji: for emoji characters.

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, Circle, Bar, and Arrow

Sample Input	Output
||
{}
*||*
*{}*
|/|
{/}
|1|
{1}
|abc|
{abc}
--
*--*
->
*->*
<-
*<-*
<->
*<->*

Whitespace inside Label

Sample Input	Output
X<>Y	X Y

Newline

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

Horizontal Line

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

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 a label or leaf text (right after ^ if there is one), the text is enclosed in a pair of square brackets (e.g. [#NP text], [NP #text], [NP ^#text]).

If ## is placed at the beginning of the leaf text, a rectangle is drawn instead of brackets.

If ### is placed at the beginning of the leaf text, a rectangle with thicker lines is drawn.

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	Appearance
\[	[
\]	]
\<	<
\>	>
\^	^
\+	+
\*	*
\-	-
\_	_
\=	=
\~	~
\|	|
\\	\
\¥	¥
<>	whitespace
\n	↩️
\↩️	↩️
\ + 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:

• Non-directional (rendered as dashed line - - -)
• Directional (rendered as solid line ----▶)
• Bidirectional (rendered as solid line ◀----▶)

Each path is distinguished by a unique ID number. The 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 > or less-than < symbol is placed between the plus sign and the number (e.g. +>7 or +<7), an arrowhead will appear at the end of the path. Note that it makes no difference whether +> or +< is used. The arrow is always directed to the element with one of these ID symbols.

A node can have any number of IDs. The same 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.

Draw Extra Connectors between Nodes (experimental)

You can also add extra connector between nodes in the same fasion as you draw paths between nodes. Extra connectors are drawn as straigt lines (not as polylines). You may enable the Hide default connectors option when drawing extra connectors.

• Non-directional (rendered as solid line -----)
• Directional (rendered as solid line --▶--)
• Bidirectional (rendered as solid line -◀-▶-)

Each additional connectors is distinguished by an ID number. The ID is specified by putting a a number after a sequence of a plus and a minus symbols (e.g. +-8) at the end of the node text. If a greater-than > or less-than < symbol is placed between the minus sign and the number (e.g. +->8), an arrowhead will appear at the end of the connector. Note that it makes no difference whether +-> or +-< is used. The arrow is always directed to the element with one of these ID symbols.

A node can have any number of IDs. The same ID must appear in the text of the two nodes between which the additional connector is rendered. The same ID number cannot appear in more than two places.

---