Documentation
  • Welcome to Documentero Docs
  • General
    • Usage Limits and Quotas
    • Manage Account & Plans
    • Documentero Roadmap / Changelog
    • Privacy Policy
    • Frequently Asked Questions
  • templates
    • Templates Introduction & Tutorial
    • Template Upload/Re-upload
    • Organize Templates into Folders
    • Fields
    • Fields - Images
    • Fields - QRCodes
    • Fields - Links
    • Fields - HTML Support
    • Fields - Markdown Support
    • Fields - Mermaid Support
    • Fields - Formatters
    • Sections
    • Sections - Types & Options
    • Smart Fields
    • Smart Sections
    • Template Variables
  • Charts & Diagrams
  • Forms
    • Create Documents using Form
    • How to customize document form
    • Fields/Sections - General Settings
    • Field- Types & Options
      • Field - Multi Checkbox
      • Field - Checkbox
      • Field - Radio Button
      • Field - Datepicker
      • Field - Radio Select
      • Field - Select
      • Field - Multiline
      • Field - Number
      • Field - TextField
    • Conditional Fields & Sections
    • Shared Forms
      • Sharing Forms
      • Shared Form Configuration
      • Consent Form (GDPR)
      • Embeed & customize shared form on your website
  • Spreadsheet
    • Create Documents using Spreadsheet
  • API
    • Create Documents using API & JSON
    • Integrate with Documentero Cloud API
  • ChatGPT
    • Create Documents using ChatGPT
  • Integrations
    • Zapier
    • Make.com
    • Integrately
    • Pabbly Connect
    • Albato
    • Bubble.io Plugin
    • Webflow
    • Flutterflow
Powered by GitBook
On this page

Charts & Diagrams

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

PreviousTemplate VariablesNextCreate Documents using Form

Last updated 27 days ago

Using 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 -

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
https://mermaid.js.org/ecosystem/tutorials.html