Typora中使用mermaid的流程图节点布局问题

最近使用Typora写编译原理课程的作业，遇到语法分析树时就使用mermaid画，效果还不错，但是最近遇到了节点的顺序不对的问题。
对比下面两个代码段和图
图一

graph TB
a[S]-->b["("]
a-->c[T]
a-->d[")"]
c-->e[T]
c-->f[,]
c-->g[S]
g-->h[a]
e-->i[S]
i-->j["("]
i-->k[T]
i-->l[")"]
k-->m[T]
k-->n[,]
k-->p[S]

图二

graph TB
a[S]-->b["("]
a-->c[T]
a-->d[")"]
c-->e[T]
c-->f[,]
c-->g[S]
e-->i[S]
g-->h[a]
i-->j["("]
i-->k[T]
i-->l[")"]
k-->m[T]
k-->n[,]
k-->p[S]

发现只是调换的部分顺序，就导致了渲染出来的流程图布局不相同，具体原理不太明白，码在这里，希望能帮到遇到一样坑的人。