程式化的畫句法學的樹狀圖，Joplin Mermiad與手繪的應用

Drawing syntax binary trees usign Mermaid and Joplin.

語言學有一門分支叫做句法學(Syntax)，因為我畫圖出來的字很醜，所以想用電腦產生樹狀圖。

我不想用Draw.io來拉線，而是利用 Mermaid.js套件，設計宗旨很像Markdown的套件，強調用簡單的語法就能畫出各種圖表。

那麼程式化的產生樹狀圖應該可以吧？

這樣我就能在iPad的Joplin裡面邊寫筆記，邊打字畫圖了。

1. 實際操作
#

Mermaid版本10.9.1

我採用的理論是(2004）這本書裡面的樹狀圖，採取極簡主義，所有的單位都是二元分叉。多餘的元素，除非是Null節點，否則就刪除。

例如這是一句簡單的直述句：

Ivon takes a note.

一行式的括號寫法如下，每個中括號包含一個節點，每個節點下面的中括號就是它的分叉節點。

[CP[C ∅] [TP [DP Ivon] [T' [T -s] [VP [V take] [DP [D a] [N note] ] ] ] ] ]

如果畫成樹狀圖，Mermaid程式碼如下：

flowchart TD
    CP[CP]
    CP --- C[C
	∅]
    CP --- TP[TP]
    TP --- DP[DP
	Ivon]
    TP --- T'[T']
    T' --- T[T
	-s]
    T' --- VP[VP]
	VP --- V[V
	take]
	VP --- DP_Obj[DP]
    DP_Obj --- Det[D
	a]
    DP_Obj --- N[N
	note]

結果

有了基本的雛形，那麼來試試進階的。

若要表示head movement的移動過程，因為這裡是現在式，所以要在T節點畫一個箭頭指向V的節點。Mermaid程式碼：

flowchart TD
    CP[CP]
    CP --- C[C
	∅]
    CP --- TP[TP]
    TP --- DP[DP
	Ivon]
    TP --- T'[T']
    T' --- T[T
	-s]
    T' --- VP[VP]
	VP --- V[V
	take]
	VP --- DP_Obj[DP]
    DP_Obj --- Det[D
	a]
    DP_Obj --- N[N
	note]

	T --> V ~~~ T

結果

如果我們把它改成疑問句，用箭頭表示移動到句首的do support

Does Ivon take a note?

結果長這樣

問題大了，句子階層….亂掉了，C是跟TP同一層的，卻被箭頭拉了下來。雖然從分支圖來看C還是跟TP同一層，可是視覺上看起來很詭異。還有節點不能控制在左還是右

這個問題可以用subgraph解決，強制C和TP在同一層。再調整一下節點順序，使T在左邊，VP在右邊：

flowchart TD
    subgraph T1
    CP[CP]
    CP --- C[C
	Does]
    CP --- TP[TP]
	end
    TP --- DP[DP
	Ivon]
    TP --- T'[T']
	T' --- T[T
	-s do-support]
    T' --- VP[VP]
    VP --- V[V
	take]
    VP --- DP_Obj[DP]
    DP_Obj --- Det[D
	a]
    DP_Obj --- N[N
	note]
T --> C ~~~ T

這樣圖就正常了。

繼續討論其他句子的畫法。

如果改成完成式：

Has Ivon taken a note?

Mermaid程式碼：

flowchart TD
    subgraph T1
    CP[CP]
    CP --- C[C
	Have]
    CP --- TP[TP]
	end
    TP --- DP[DP
	Ivon]
    TP --- T'[T']
	T' --- T[T
	-ed]
	T' --- VP[VP]
    VP --- V[V
	have take]
    VP --- DP_Obj[DP]
    DP_Obj --- Det[D
	a]
    DP_Obj --- N[N
	note]
T --> C ~~~ T
V --> T ~~~ V

結果：

接著改成wh疑問句，應有箭頭表示head-movement和wh-movement：

What was Ivon taking?

Mermaid程式碼：

flowchart TD
    subgraph T1
    CP[CP]
	CP --- DP[DP
	What]
	CP --- CBar[C']
	end
	CBar --- C[C
	was]
	CBar --- TP
	TP --- DP2[Ivon]
	TP --- TBar[T']
	TBar --- T[T
	-ed]
	TBar --- VP[VP]
	VP --- V[V
	was taking]
	VP --- DP3["DP
	What "]

	V ---> T ~~~ V
	T ---> C ~~~ T
	DP3 --> DP ~~~ DP3

生成的圖又有問題了，最下面的what應該要在右下角，但是被箭頭牽引到左下角，你沒辦法叫Mermaid的箭頭往外繞。這個時候subgraph也沒用。