---json
{
    "description": "This article shows you how to create a flowchart diagram.",
    "page_id": "3qelvfw9g39pszfrad7ye",
    "title": "How to create a flowchart diagram with ComboStrap"
}
---
====== ComboStrap Diagram - Flowchart ======

===== About =====
The ''flowchart'' component is a [[diagram|diagram component]] that permits to create a ''flowchart''.


===== Example =====


<webcode name="Gant" frameborder="0">
  * The markup
```dw
<flowchart>
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</flowchart>
```
  * The output:
</webcode>

===== Syntax =====



The syntax is based on the [[https://mermaid-js.github.io/mermaid/#/flowchart|mermaid flow chart definition]]

<code dw>
<flowchart>
   ... Mermaid Flowchart Diagram definition ...
</flowchart>
</code>

<note>
Mermaid offers a [[https://mermaid-js.github.io/mermaid-live-editor|live editor]] that you can use to validate and develop your diagrams.
</note>

This component is based on the [[docs:utility:mermaid|mermaid component]].