{%hackmd rJ_1SdPkxx %}

# Creating a flowchart

1. Copy the syntax below and paste it into your note.
2. Using the syntax with three backticks (`) before "flow" and after the text, then the graph shows up.
3. Utilize the ``=>`` symbol to define the process of creating a flowchart.
- `st` is the rounded rectangle.
- `op` is the rectangle.
- `cond` is the diamond.
4. Determine the sequence for your flowchart.
- Write `(yes)` or `(no)` followed `cond` to describe the flow.
- You may change the description.
5. Connect each process using the ``->`` symbol.

flow
st=>start: Start
e=>end: End
op=>operation: My Operation
op2=>operation: lalala
cond=>condition: Yes or No?

st->op->op2->cond
cond(yes)->e
cond(no)->op2

### Flow charts can be specified like this:
### :eyes: Let's see how the syntax works in [both mode](https://hackmd.io/QaF5i8LlQ3GlyIhvm1w3gw/both)

st=>start: Start
e=>end: End
op=>operation: My Operation
op2=>operation: lalala
cond=>condition: Yes or No?

st->op->op2->cond
cond(yes)->e
cond(no)->op2

:
# Create more complex flowcharts
1. Copy the syntax below and paste it into your note.
2. Using the syntax with three backticks (`) before "mermaid" and after the text, then the graph shows up.
3. Use letters and ``[ ]``, ``{ }``to represent each block of the process.
4. Then, use `-->` arrows to connect them together, ensuring that each process is connected.

mermaid
graph TD;
A{Start a research}-->B[Choose topic];
B[Choose topic]-->C[Decide purpose];
C[Decide purpose]-->D[Build aresearch frame];
D[Build aresearch frame]-->E[Pose questions and hypotheses.];
E[Pose questions and hypotheses]-->F[Research subject];
E[Pose questions and hypotheses]-->G[Research tools];
E[Pose questions and hypotheses]-->H[Implementation procedure];
E[Pose questions and hypotheses]-->I[Data processing];
F[Research subject]-->J[Data collection];
G[Research tools]-->J[Data collection];
H[Implementation procedure]-->J[Data collection];
I[Data processing]-->J[Data collection];
J[Data collection]-->K{Data analysis};
K{Data analysis}-->L[Interpretation of research results];
L[Interpretation of research results]-->N[report writing];

:::info
### :pencil2: Notes
In the second line, **TD** represents the orientation of the graph. Replacing **TD** with **LR** will flatten the graph.
:::

### Followed by the presentation of the syntax

graph TD;
A{Start a research}-->B[Choose topic];
B[Choose topic]-->C[Decide purpose];
C[Decide purpose]-->D[Build aresearch frame];
D[Build aresearch frame]-->E[Pose questions and hypotheses.];
E[Pose questions and hypotheses.]-->F[Research subject];
E[Pose questions and hypotheses.]-->G[Research tools];
E[Pose questions and hypotheses.]-->H[Implementation procedure];
E[Pose questions and hypotheses.]-->I[Data processing];
F[Research subject]-->J[Data collection];
G[Research tools]-->J[Data collection];
H[Implementation procedure]-->J[Data collection];
I[Data processing]-->J[Data collection];
J[Data collection]-->K{Data analysis};
K{Data analysis}-->L[Interpretation of research results];
L[Interpretation of research results]-->N[report writing];

### :point_right: More syntax for mathematical expressions and charts can be explored [here](/s/MathJax-and-UML).