> For the complete documentation index, see [llms.txt](https://docs.documentero.com/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.documentero.com/documentation/templates/charts-and-diagrams.md).

# Charts & Diagrams

Using [Fields - HTML Support](/documentation/templates/fields-html-support.md) or [Fields - Mermaid Support](/documentation/templates/fields-mermaid-support.md) you can add simple and complex charts, diagrams and other elements based on data passed during document generation.

**Check Mermaid Tutorials & Syntax** -<https://mermaid.js.org/ecosystem/tutorials.html>

**Pie Chart**

```
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

<figure><img src="/files/gCsQM9bDqsFkBHcO8Rmu" alt="" width="375"><figcaption></figcaption></figure>

**Sequence Diagram Example**

```
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

<figure><img src="/files/9PyeBkCmCllVFu5RzbOW" alt="" width="375"><figcaption></figcaption></figure>

#### Chart XY

```
---
config:
    xyChart:
        width: 900
        height: 600
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
---
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

<figure><img src="/files/Tkx1ykLohWRw1Z7SJJ0H" alt="" width="375"><figcaption></figcaption></figure>

**Check more examples on Mermaid official documentation site** -<https://mermaid.js.org/ecosystem/tutorials.html>