快轉到主要內容

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

分類   人文藝術 隨筆
標籤   Joplin Linguistics Markdown
🗓️ 民國113年 甲辰年
✍ 切換正體/簡體字
目錄

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也沒用。

如果不畫箭頭,句子的階層是正確的

連這麽簡單的句子都有問題了,在更複雜的句子,情況會更詭異。

2.暫時的結論
#

Mermaid畫基本的二元樹狀圖是可以,但是表示head movement和wh movement的箭頭難以實現。

Mermaid勉強能畫出反向的箭頭,可是Mermiad在渲染的時候沒有階層和順序的概念,當它畫出反向的箭頭的時候,如果跨越了一層以上的節點,或者出現兩個以上箭頭,上層的節點就會被「拉下來」,導致階層亂掉。還有Mermaid不能指定節點要在左邊還是右邊,破壞美觀。

目前Mermaid版本10.9.1,Github討論的相關issue還沒解決,例如:

因此,畫更複雜的句子就會出問題。

我找到了 Linguistics Syntax Tree generator by Miles Shang網頁,它可以用一行括號式的語法產生樹狀圖。這是比較正規的做法吧,不用轉換為Mermaid語法就能繪製,但也只能畫樹狀圖而已。

總而言之,Mermaid能夠生成二元樹狀圖,但要進一步的標示移位的動作,就得用手寫筆標註。

3. 匯出後再標注
#

值得慶幸的是Joplin Mermaid所生成的樹狀圖可以另存為SVG,再將SVG圖檔放到Joplin的Freehand Drawing界面用手寫筆進一步加工。這個SVG畫布日後依然能夠編輯。

所以Mermaid用來做出樹狀圖雛形是可以的。

有個問題是Mermaid轉SVG的功能目前只有電腦版Joplin有,所以在iPad上使用較為不便,或許截圖再直接畫是最好解方!?

相關文章

學習英文的歷程(三)讀英語研究所心得,發覺到我的英文真的很爛
分類   人文藝術 隨筆
標籤   Memoir Linguistics Kaohsiung Teaching English
學習英文的歷程(二),寫Essay改善我的英語力,但真的學好英文了嗎
分類   人文藝術 隨筆
標籤   Memoir Linguistics PingTung Teaching English
學習英文的歷程(一),英文變好的方法與其影響
分類   人文藝術 隨筆
標籤   Memoir Linguistics Teaching English

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur或Postimages。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。為防止垃圾內容,有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。若要上傳圖片請善用圖床網站。