Support Control Flow Diagrams

MaisiKoleni commented 3 years ago

Is your feature request related to a problem?

PgdP and EidI at the TUM use control flow diagrams in the exercises and lectures. This issue requests to integrate control flow diagrams into Apollon and Artemis.

Describe the solution you'd like

This is what a control flow diagram looks like:

Example 1
Example 2

First off: the colors and similar styling is not needed.

To allow students to freely model these diagrams, we need:

Start/End nodes. These are rounded rectangles. Students can input the text as they like. These nodes are used for "Start" and "Stop" of the program as shown above, but also for functions like here:
1. Input/Output nodes are a parallelogram where students can enter text as they like. Top and bottom are horizontal and both sides are canted to the right.
2. Assignment nodes are simply rectangles where students can enter text as they like.
3. Conditional branching nodes are a rhombus where students can enter text as they like.
4. Optional requirement: function calls (like assignment but with double border at both sides)

All of those nodes are connected by lines with arrows at one end, and those lines can be labeled. Students should be able to write the labels as they like, as e.g. switch-statements can be realized using that as well and students should still be able to make mistakes. This also makes the implementation easier.

Apart for the parallelogram and the optional requirement, very similar nodes already exist in Apollon (e.g. in the activity diagram). One major difference is that we often connect arrows to the lines of other arrows, as shown in the examples. If this is too difficult, it can be left out and students just need to connect arrows directly to the nodes (this might not be as nice visually, but is correct and easy to implement).

Note that some pictures show colored lines/texts, dotted lines, different fonts and directly connected blocks. This is not needed, as the main reason is either to make it more visually distinct in the lecture slides or to save students writing on paper some time by combining boxes. To make it clear: all of that is not needed in Apollon for now and would be a waste of time.

More Notes

To my best knowledge, this is not a UML diagram, so we should label it as such in Apollon and Artemis (like the Syntax Tree Type).
A control flow graph is something completely different, in case you search the internet for control flow diagrams. What I could find is this, which is very close:
- https://de.wikipedia.org/wiki/Programmablaufplan (this seems closer to our flavor)
- https://en.wikipedia.org/wiki/Flowchart

Revisions

Initial Version

jerhard commented 3 years ago

For the program optimization class (@izycheva) another style of control flow graphs is used. There:

regular nodes are drawn as circles.
start nodes are marked with an incoming edge that has no predecessor node.
end nodes are drawn as two equicentric circles.

Nodes and edges might be arbitrarily labeled by students.

The following is an example for such a control flow graph:

po_example

(The coloring is not important here.) I think the minimum requirement would be to have 1., (i.e. circles) available.

Could the current mode for control flow graphs be extended with the mentioned elements? In what time frame would it be doable? If it were implemented, when would it roughly be usable in Artemis?

iozbeyli commented 3 years ago

For the program optimization class (@izycheva) another style of control flow graphs is used. There:
1. regular nodes are drawn as circles.

2. start nodes are marked with an incoming edge that has no predecessor node.

3. end nodes are drawn as two equicentric circles.
Nodes and edges might be arbitrarily labeled by students.

The following is an example for such a control flow graph:

(The coloring is not important here.) I think the minimum requirement would be to have 1., (i.e. circles) available.

Could the current mode for control flow graphs be extended with the mentioned elements? In what time frame would it be doable? If it were implemented, when would it roughly be usable in Artemis?

@jerhard We decided to add control flow graph as a separate diagram. When do you need the control flow graph for the program optimization class?

Can you also create a separate issue for control flow graph and tell me what do you need?

jerhard commented 3 years ago

@iozbeyli I guess we will discuss next week how we will proceed with program optimization, and then possibly create a separate issue.

jerhard commented 3 years ago

@iozbeyli For now one kind of control flow graph (the one presented in the original post of this issue) will be sufficient.

ls1intum / Apollon