Simple directed graph example

graph TB;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Flowchart left to right

flowchart LR;
    Flow1[Flowcharts are easy] --> Flow2[and fast];

Flowchart top to bottom

flowchart TB;
    Flow1[Flowcharts are flexible] --> Flow2[and informative];

Flowchart bottom to top

flowchart BT;
    Flow1[Data Acquisition Unit] --> |USB-1.1| Flow2[PC];

Flowchart right to left

flowchart RL;
    Flow1[Flowcharts flow] --> Flow2[in any direction];

Directed Graph

flowchart TB;
    Flow1[Test Computer] --> |JTAG| Flow2[Motor Controller-DUT];
    Flow1[Test Computer] --> |USB C| Flow3[Test Fixture];
    Flow3[Test Fixture]  --> Flow2[Engine Controller]
    Flow2[Motor Controller-DUT] --> |Production Cable| Flow4[Production Motor]    

Shapes

flowchart TB;
    RectRound1(rounded rectangles)
    Rect1[rectangle]
    Pill1([pill shaped])
    FancyRect1[[fancy rectangle]]
    DataBase1[(database)]
    Circle1((circle))

Subgraphs

flowchart TB
    Controller-->Solenoid
    subgraph Flowmeter
    Sensors-->Solenoid
    end
    subgraph Communication
    WiFi-->microcontroller
    end
    subgraph Compressor
    Controller-->Pump
    end

flowchart TB;
    Hex1{{hexagon are the bestagons}}
    Flag1>Flag]
    Rhombus1{rhombus}
    Parallelagram1[/Parallelagram/]
    Parallelagram2[\Parallelagram-R2L\]
    Trapezoid1[/Trapezoid 1\]
    Trapezoid2[\Trapezoid 2/]

Links

    flowchart LR;
        Start[Line]    --- End[Line];
        EndR2L[Line]   --> StartR2L[Arrow];
        Start4[Dotted] -.- End4[Line];
        StartThick2[Thick] === EndThick2[Line];
        StartThick[Thick] ==> EndThick[Arrow];
        Chain1b[Chain] --> Chain2b[Link] --> Chain3b[Nodes];
        Start2[Line]   --> |text in link| End2[Arrow];
        Start3[Line]   --- |text in link| End3[Line];
        Start5[Dotted] -.- |text in link| End5[Line];
        StartThick3[Thick] ==> |text in link| EndThick3[Arrow];
        StartThick4[Thick] === |text in link| EndThick4[Line];
        Chain1[Chain] -- text in link --> Chain2[Link] -- text in link --> Chain3[Nodes];
        a --> b & c --> d;    
        A & B --> C & D;
        StartCircle[Line] --o EndCircle[Circle]; 
        StartCross[Line]  --x EndCross[Cross];

Multiple lines

    flowchart LR;
    A o--o B <--> C x--x D;
        

Minimum length

    flowchart LR;
        A --> B;
        B --> C;
        B ----> D;
        B ------> E;
        C --------> F;
        

Special characters

    flowchart LR;
        A["use quotes to create a string"];
        B["quotes, quotation example #quot; #quot;"];
        C["use quotes to display (special characters)"];
        D["entity code: #9829;"]
        E["Arrow entity codes: #8592; #8593; #8594; #8595; #8596; #8629;"]
        F["#8719; #8721; #8734;"]

Subgraphs

    flowchart TB
        c1-->a2
        subgraph one
            a1-->a2
        end
        subgraph two
            b1-->b2
        end
        subgraph three [FOO]
            c1-->c2
        end

Styling a node

    flowchart LR
        subgraph TOP
            direction TB
            subgraph B1
                direction RL
                i1 -->f1
            end
            subgraph B2
                direction BT
                i2 -->f2
            end
        end
        A --> TOP --> B
        B1 --> B2

Node Style

    flowchart LR
        id1(Start)-->id2(Stop)
        style id1 fill:#f9f,stroke:#333,stroke-width:4px
        style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

Node colors

    flowchart LR
        id1(White)
        id2(Yellow)
        id3(Red);
        id4(Pink);
        id5(Teal);
        id6(Green);
        id7(Grey);
        id8(Blue);
        style id1 fill:#fff,stroke:#333,stroke-width:4px
        style id2 fill:#ff8,stroke:#333,stroke-width:4px
        style id3 fill:#f88,stroke:#333,stroke-width:4px
        style id4 fill:#f8f,stroke:#333,stroke-width:4px
        style id5 fill:#8ff,stroke:#333,stroke-width:4px
        style id6 fill:#8f8,stroke:#333,stroke-width:4px
        style id7 fill:#888,stroke:#333,stroke-width:4px
        style id8 fill:#88f,stroke:#333,stroke-width:4px