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:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Let's see how the syntax works in both mode

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];

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
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];

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
More syntax for mathematical expressions and charts can be explored here.

Select a repo