mermaid-flowchartlisted

# Flowcharts - Basic Syntax Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs. ```warning If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart. ``` ```warning If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops"). Typing "A---oB" will create a [circle edge](#circle-edge-example). Typing "A---xB" will create a [cross edge](#cross-edge-example). ``` ### A node (default) ```mermaid-example --- title: Node --- flowchart LR id ``` ```note The id is what is displayed in the box. ``` ```tip Instead of `flowchart` one can also use `graph`. ``` ### A node with text It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The one previously defined will be used when rendering the box. ```mermaid-example --- title: Node with text --- flowchart