# 上傳圖片 測試
# 如何撰寫數學式及圖表
您可以在 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}.
$$
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
[更多關於 **LaTeX** 數學表達式 ](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
UML 圖表
---
### 循序圖
```sequence
艾莉絲->包柏: 哈摟，你好嗎？
Note right of 包柏: 包柏思考中
包柏-->艾莉絲: 我很好，謝謝！
Note left of 艾莉絲: 艾莉絲回應
艾莉絲->包柏: 最近過得怎樣？
```
[更多關於 **循序圖** 語法 ](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
```
[更多關於 **流程圖** 語法 ](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
}
```
[更多關於 **graphviz** 語法 ](http://www.tonyballantyne.com/graphs.html)
---
### 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
```
[更多關於 **mermaid** 語法 ](http://mermaid-js.github.io/mermaid)
---
### Abc
```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:|
```
[更多關於 **abc** 語法 ](http://abcnotation.com/learn)
###### tags: `tutorial`