Charts & Diagrams

You can add Charts/Diagrams into your templates inside HTML/Markdown syntax.

Using Fields - HTML Support or Fields - Mermaid Support 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

Sequence Diagram Example

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

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]

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

Last updated