# Using flow chart in Hackmd
###### tags: `linux2020` `hackmd`
[Introdution (click here)](https://hackmd.io/s/MathJax-and-UML-tw)
## Insert graphviz
In the Hackmd edit mode, input this code if you want to add a flow chart or graph in your note by graphviz :
> ### ```graphviz
> ### typing your graphviz code here...
> ### ```
For example:
> ### ```graphviz
> ### digraph graphname {
>
> ### W [label="Working directory" fontcolor=red]
>
> ### S [label="Staging Area" fontcolor=darkgreen]
>
> ### R [label="Repository" fontcolor=blue]
>
> ### G [label="Remote Server (e.g. GitHub)" fontcolor=purple]
>
> ### W->S [label=" git add"]
>
> ### S->R [label=" git commit"]
>
> ### R->G [label=" git push"]
>
> ### }
> ### ```
This code will generate the flowchart like：

digraph graphname {

W [label="Working directory" fontcolor=red] 

S [label="Staging Area" fontcolor=darkgreen]

R [label="Repository" fontcolor=blue]

G [label="Remote Server (e.g. GitHub)" fontcolor=purple]

W->S [label="    git add"]

S->R [label="    git commit"]

R->G [label="    git push"]

}

---
>[name=Huang Yu Hsuan] [time=Mon, Feb 24, 2020][color=darkgreen]