# Mermaid Example

* [Mermaid](https://mermaid-js.github.io/mermaid/) - Generation of diagrams and flowcharts from text in a similar manner as markdown.
* [mermaid-live-editor](https://mermaid-js.github.io/mermaid-live-editor/)
* [vscode markdown support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)

* ```mermaid
graph TD

SubGraph1 --> SubGraph1Flow
subgraph "SubGraph 1 Flow"
SubGraph1Flow(SubNode 1)
SubGraph1Flow -- Choice1 --> DoChoice1
SubGraph1Flow -- Choice2 --> DoChoice2
end

subgraph "Main Graph"
Node1[Node 1] --> Node2[Node 2]
Node2 --> SubGraph1[Jump to SubGraph1]
SubGraph1 --> FinalThing[Final Thing]
end

    * ```mermaid
        gantt
            title A Gantt Diagram

            section Section
            A task           :a1, 2014-01-01, 30d
            Another task     :after a1  , 20d
            section Another
            Task in sec      :2014-01-12  , 12d
            anther task      : 24d

* ```mermaid
stateDiagram

%% pg148
%% AQA Computer Science : Bob Reeves
%% Finite State Machines with Outputs
%% The Mealy machine performing a right shift

[*] --> S0
S0 --> S1 : 1/0
S0 --> S2 : 0/0

S1 --> S1 : 1/1
S1 --> S2 : 0/1
S2 --> S1 : 1/0
S2 --> S2 : 0/0

    * ```mermaid
        graph TD
            %% AQA GCSE Computer Science : Steve Cushing
            %% Chapter 4: Algorithms in Mathematics - pg39
            %% Figure 4.1 Flowchart for finding the sum of five numbers

            start(Start)
            init[sum=0 <br> count=0]
            input[Enter n]
            increment[sum=sum+n <br> count=count+1]
            check{Is count <5}
            output(Print Sum)
            stop(Stop)

            start --> init --> input --> increment --> check -- No --> output --> stop
            check -- Yes --> input

* [PlantUML](https://plantuml.com/)
* ```plantuml
Bob -> Alice : hello
Alice -> Bob : hi

    * ```plantuml
        start

        if (Graphviz installed?) then (yes)
        :process all diagrams;
        else (no)
        :process only
        __
        nce__ and __activity__ diagrams;
        endif

        stop

* [flowchart.js](http://flowchart.js.org/)
* [example](https://hackmd.io/MathJax-and-UML?both)
* ```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?

    * ```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

* [graphviz]()
* [gallery](https://graphviz.org/gallery/)
* [Drawing Graphs using Dot and Graphviz](https://www.tonyballantyne.com/graphs.html)
* ```graphviz
digraph G {
rankdir=LR;
main -> parse -> execute;
main -> init;
main -> cleanup;
execute -> make_string;
execute -> printf
init -> make_string;
main -> printf;
execute -> compare;
}

    * ```graphviz
        digraph G {
            node [shape = record,height=.1];
            node0[label = "<f0> |<f1> G|<f2> "];
            node1[label = "<f0> |<f1> E|<f2> "];
            node2[label = "<f0> |<f1> B|<f2> "];
            node3[label = "<f0> |<f1> F|<f2> "];
            node4[label = "<f0> |<f1> R|<f2> "];
            node5[label = "<f0> |<f1> H|<f2> "];
            node6[label = "<f0> |<f1> Y|<f2> "];
            node7[label = "<f0> |<f1> A|<f2> "];
            node8[label = "<f0> |<f1> C|<f2> "];
            "node0":f2 -> "node4":f1;
            "node0":f0 -> "node1":f1;
            "node1":f0 -> "node2":f1;
            "node1":f2 -> "node3":f1;
            "node2":f2 -> "node8":f1;
            "node2":f0 -> "node7":f1;
            "node4":f2 -> "node6":f1;
            "node4":f0 -> "node5":f1;
        }

* ```graphviz
digraph hierarchy {

nodesep=1.0 // increases the separation between nodes

node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this

Headteacher->{Deputy1 Deputy2 BusinessManager}
Deputy1->{Teacher1 Teacher2}
BusinessManager->ITManager
{rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
}

* [abc](http://abcnotation.com/examples) - Musical notation
    * [Abc music notation tutorial](http://www.lesession.co.uk/abc/abc_notation.htm)
    * [abc:standard](http://abcnotation.com/wiki/abc:standard)
* [abc](http://abcnotation.com/examples) - Musical notation
    * [Abc music notation tutorial](http://www.lesession.co.uk/abc/abc_notation.htm)
    * [abc:standard](http://abcnotation.com/wiki/abc:standard)
*   ```abc
    M:6/8
    L:1/8
    K:G
    V:1 name="Whistle" snm="wh"  
    B3 A3 | G6 | B3 A3 | G6 ||  
    V:2 name="violin" snm="v"  
    BdB AcA | GAG D3 | BdB AcA | GAG D6 ||  
    V:3 name="Bass" snm="b" clef=bass  
    D3 D3 | D6 | D3 D3 | D6 ||