[**English version**](/@docs/use-mathjax-and-UML-en) {%hackmd BJOT7rhoyl %} # 如何撰寫數學式及圖表 **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/@docs/use-mathjax-and-UML-zh/edit)** 您可以在 HackMD 上撰寫出很多種圖表與數學表達式，請參考以下的範例。 # MathJax 您可以使用 **MathJax** 語法 來產生 *LaTeX* 數學表達式，如同 [math.stackexchange.com](http://math.stackexchange.com/)，但是開始的 `$` 後面以及結尾的 `$` 前面不能有空白： The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral 使用區塊層級的數學式時，請在您的數學式之前與之後給予 `$$` 以及換行： - 範例一 ``` $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$ ``` $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$ - 範例二 ``` $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ ``` $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ >[!Note]更多關於 **LaTeX** 數學表達式 [開啟新分頁查看 <i class="fa fa-external-link"></i>](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) # 心智圖 **Markmap** 用 Markdown 建立心智圖時，會根據標題階層建立節點。每個節點下可以用無序清單列出項目。 ### 範例與步驟 1. 使用程式碼區塊(code block)包覆以下的心智圖架構，你可以直接將滑鼠停留在程式碼區塊並一鍵 ![image](https://hackmd.io/_uploads/S1m3Gm_PWx.png =22x) 複製。 >[!Tip] 什麼是程式碼區塊？ >使用連續三個反向撇 \`\`\` 在第一行與最後一行包覆一段程式碼，編輯器會將這段視作「呈現一段裸程式碼」 > >我們可以在第一行的 \`\`\` 後面加上想要渲染的圖表類型 ``` # markmap - An end point without parent node name ## Links - <https://markmap.js.org/> - [GitHub](https://github.com/gera2ld/markmap) ## Related - [coc-markmap](https://github.com/gera2ld/coc-markmap) - [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap) ## Features - links - **inline** ~~text~~ *styles* - multiline text - `inline code` - ```js console.log('code block'); ``` ``` 2. 在首行的 \`\`\` 後面加上 「markmap」 3. 最終渲染出來會呈現 :point_down: ```markmap # markmap - An end point without parent node name ## Links - <https://markmap.js.org/> - [GitHub](https://github.com/gera2ld/markmap) ## Related - [coc-markmap](https://github.com/gera2ld/coc-markmap) - [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap) ## Features - links - **inline** ~~text~~ *styles* - multiline text - `inline code` - ```js console.log('code block'); ``` ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/r1p_loXISn69k3t5cYMbtg#%E5%BF%83%E6%99%BA%E5%9C%96)** # UML 圖表 ### 循序圖 1. 使用程式碼區塊(code block)包覆以下的心智圖架構，你可以直接將滑鼠停留在程式碼區塊並一鍵 ![image](https://hackmd.io/_uploads/S1m3Gm_PWx.png =22x) 複製。 ``` 艾莉絲->包柏: 哈摟，你好嗎？ Note right of 包柏: 包柏思考中 包柏-->艾莉絲: 我很好，謝謝！ Note left of 艾莉絲: 艾莉絲回應 艾莉絲->包柏: 最近過得怎樣？ ``` 2. 在首行的 \`\`\` 後面加上 「sequence」 3. 最終渲染出來會呈現 :point_down: ```sequence 艾莉絲->包柏: 哈摟，你好嗎？ Note right of 包柏: 包柏思考中 包柏-->艾莉絲: 我很好，謝謝！ Note left of 艾莉絲: 艾莉絲回應 艾莉絲->包柏: 最近過得怎樣？ ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/r1p_loXISn69k3t5cYMbtg#UML-%E5%9C%96%E8%A1%A8)** [更多關於 **循序圖** 語法 <i class="fa fa-external-link"></i>](http://bramp.github.io/js-sequence-diagrams/) # 流程圖 您可以像是以下使用流程圖： ```flow st=>start: 開始 e=>end: 結束 op=>operation: 我的操作 op2=>operation: 啦啦啦 cond=>condition: 是或否？ st->op->op2->cond cond(yes)->e cond(no)->op2 ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/r1p_loXISn69k3t5cYMbtg#%E6%B5%81%E7%A8%8B%E5%9C%96)** [更多關於 **流程圖** 語法 <i class="fa fa-external-link"></i>](http://adrai.github.io/flowchart.js/) # Graphviz ```graphviz digraph hierarchy { nodesep=1.0 // increases the separation between nodes node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour edge [color=Blue, style=dashed] //All the lines look like this Headteacher->{Deputy1 Deputy2 BusinessManager} Deputy1->{Teacher1 Teacher2} BusinessManager->ITManager {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level } ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/r1p_loXISn69k3t5cYMbtg#Graphviz)** [更多關於 **graphviz** 語法 <i class="fa fa-external-link"></i>](https://github.com/caseywatts/graphviz-tutorial?tab=readme-ov-file#tutorial) # Mermaid ```mermaid gantt title A Gantt Diagram section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d anther task : 24d ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/@docs/use-mathjax-and-UML-zh/edit)** [更多關於 **mermaid** 語法 <i class="fa fa-external-link"></i>](http://mermaid-js.github.io/mermaid) # Abc / 樂譜 ### 範例與步驟 1. 使用程式碼區塊(code block)包覆以下的架構，你可以直接將滑鼠停留在程式碼區塊並一鍵 ![image](https://hackmd.io/_uploads/S1m3Gm_PWx.png =22x) 複製。 ``` X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ``` 2. 在首行的 ` ``` `後面加上 `abc` 3. 最終渲染出來會呈現 :point_down: ```abc X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/r1p_loXISn69k3t5cYMbtg#Abc--%E6%A8%82%E8%AD%9C)** [更多關於 **abc** 語法 <i class="fa fa-external-link"></i>](http://abcnotation.com/learn) &nbsp; # 相關功能 - [基本排版](https://hackmd.io/s/B1CII--57) - [在筆記中貼入程式碼](https://hackmd.io/s/Hk8sclbq7) # 常見功能 - [如何刪除筆記](https://hackmd.io/s/rJrvQDm97) - [儲存我的筆記](https://hackmd.io/s/HkDYdjLcX) - [幫筆記加上標籤](https://hackmd.io/s/S1wjouv5X)