Diagrams and Charts

Zolt offers powerful data visualization tools, including native Mermaid support for diagrams and an integrated charting system for numerical data.

Mermaid Diagrams

Create complex diagrams using Mermaid syntax directly in your documents:

zolt 
:::mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Result 1]
    B -->|No| D[Result 2]
:::
Result
graph TD A[Start] --> B{Decision} B -->|Yes| C[Result 1] B -->|No| D[Result 2]

Flowchart

zolt 
:::mermaid
flowchart LR
    A[Input] --> B[Process]
    B --> C[Output]
:::
Result
flowchart LR A[Input] --> B[Process] B --> C[Output]

Sequence Diagram

zolt 
:::mermaid
sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hi Bob!
    B-->>A: Hi Alice!
:::
Result
sequenceDiagram participant A as Alice participant B as Bob A->>B: Hi Bob! B-->>A: Hi Alice!

Class Diagram

zolt 
:::mermaid
classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog
:::
Result
classDiagram class Animal { +String name +makeSound() } class Dog { +bark() } Animal <|-- Dog

Native Charts

Zolt allows you to create data visualizations with native support for several types of charts.

Line Chart

zolt 
:::chart
:::chart-line {title="Monthly Sales"}
January: 100
February: 150
March: 200
April: 250
:::
:::
Result

Bar Chart

zolt 
:::chart
:::chart-bar {title="Sales by Product"}
Product A: 150
Product B: 200
Product C: 175
:::
:::
Result

Pie Chart

zolt 
:::chart
:::chart-pie {title="Market Share"}
Company A: 35
Company B: 25
Company C: 20
Others: 20
:::
:::
Result

Area Chart

zolt 
:::chart
:::chart-area {title="Traffic"}
Morning: 120
Afternoon: 200
Evening: 180
Night: 50
:::
:::
Result

Chart Attributes

Container Attributes

The :::chart block can accept attributes to control the global layout.

zolt 
:::chart {width=100% height=400px}
:::
AttributeDescription
widthContainer width
heightContainer height
layoutLayout: horizontal or vertical

Chart-Specific Attributes

Each chart type ( chart-line , chart-bar , etc.) accepts its own attributes.

zolt 
:::chart-line {title="Title" colorScheme=cool legend=true grid=true}
:::
AttributeDescription
titleChart title
colorSchemeColor palette (cool, warm, pastel)
legendShow legend
gridShow grid

Multiple Charts

You can combine multiple charts in a single container:

zolt 
:::chart
:::chart-line {title="Revenue"}
2020: 50000
2021: 75000
2022: 100000
:::

:::chart-bar {title="Expenses"}
2020: 30000
2021: 35000
2022: 40000
:::
:::
Result

Best Practices

  1. Simplicity : Don't overload your charts with too many data points.
  2. Clear Titles : Use the title attribute to provide context to your visualizations.
  3. Consistent Colors : Use colorScheme to maintain visual harmony.
  4. Legends : Enable legends when comparing multiple data series.

© 2026 Marmotz