Charts and Graphs

Cohesion allows the creation of vector based charts and graphs.

Graphs

Used to display numeric data, graphs utilize from the document block feature, inherited from GFM's Admonitions. A graph block can be created using the [!GRAPH] header:

> [!GRAPH]
> data 1, 50
> data 2, 25
> data 3, 25

The type of a graph can be declared after a colon:

> [!GRAPH:pizza]
> data 1, 50
> data 2, 25
> data 3, 25

> [!GRAPH:pie]
> data 1, 50
> data 2, 25
> data 3, 25

> [!GRAPH:bars]
> data 1, 50
> data 2, 25
> data 3, 25

If at least one line contains a % character after its value, all rendered values will contain a percentage character in the end.

Flowcharts

Flowcharts are used to represent processes, decisions, or system structures in a visual way.
Like graphs, flowcharts also make use of the document block feature.

A flowchart block can be created using the [!FLOWCHART] header:

> [!FLOWCHART]
> start(Start)
> step1[Do you want to continue?]
> yes{Proceed}
> no{Stop}
> end(End)
>
> start -> step1
> step1(Yes) -> yes
> step1(No) -> no
> yes -> end
> no -> end

Shapes

Flowcharts support multiple node shapes:

• () rounded rectangle, used for start or end
• [] standard rectangle, used for steps
• {} diamond, used for decisions

Edges

Connections between nodes are declared with the -> operator.

Optional labels can be provided inside parentheses:

> [!FLOWCHART]
> q1[Hungry?]
> eat{Eat something}
> skip{Skip meal}
> end(Done)
>
> q1(Yes) -> eat
> q1(No) -> skip
> eat -> end
> skip -> end

Directions

By default, flowcharts are rendered horizontally (left to right).

The direction can be specified after the colon in the header:

> [!FLOWCHART:tb]
> start(Begin)
> task[Do something]
> end(Finish)
>
> start -> task
> task -> end

> [!FLOWCHART:lr]
> start(Begin)
> task[Do something]
> end(Finish)
>
> start -> task
> task -> end