> ## Documentation Index
> Fetch the complete documentation index at: https://calcs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Diagram Widget

> Overview of diagram widgets for creating visual representations in Calcs.com templates

## Diagram Widget Types

<CardGroup cols={2}>
  <Card title="Legacy Diagrams" href="/calcs_builder/diagrams/legacy_diagrams" icon="chart-line">
    Pre-built diagrams for common engineering visualizations including cross-sections, free-body diagrams, load diagrams, and XY plots
  </Card>

  <Card title="Interactive Diagrams" href="/calcs_builder/diagrams/interactive_diagrams" icon="chart-pie">
    Custom interactive diagrams with dynamic elements, custom shapes, and real-time data binding
  </Card>
</CardGroup>

## When to Use Each Type

### Legacy Diagrams

Use legacy diagrams when you need:

* **Standard engineering visualizations** (cross-sections, free-body diagrams)
* **Quick implementation** with pre-built templates
* **Consistent styling** across all Calcs.com templates
* **Proven reliability** with battle-tested functionality

### Interactive Diagrams

Use interactive diagrams when you need:

* **Custom visualizations** specific to your calculation
* **Dynamic elements** that update with calculation results
* **Interactive features** like tooltips and clickable elements
* **Complex layouts** with multiple diagram components

## Implementation

Both diagram types are implemented as widget types in the Calcs.com builder:

* **Drag "Diagram"** from the widget palette for legacy diagrams
* **Drag "Custom Diagram"** from the widget palette for interactive diagrams

## Key Features

### Common Capabilities

* **Real-time updates** when calculation inputs change
* **Unit awareness** with automatic unit conversion and display
* **Conditional display** based on template logic
* **Export support** for PDF generation and load linking

### Legacy Diagram Features

* **Pre-built templates** for common engineering use cases
* **Standardized styling** consistent across the platform
* **Simple configuration** with minimal setup required

### Interactive Diagram Features

* **Custom elements** with full design control
* **Dynamic data binding** to calculation results
* **Interactive components** like tooltips and navigation
* **Flexible layouts** with custom positioning

## Best Practices

<Tip>
  * Choose legacy diagrams for standard engineering visualizations
  * Use interactive diagrams for custom or complex visualizations
  * Consider user experience and clarity when designing diagrams
  * Test diagram updates with various calculation scenarios
  * Ensure diagrams are accessible and well-documented
</Tip>

<Note>
  Both diagram types are fully supported and maintained. Legacy diagrams provide reliability and consistency, while interactive diagrams offer flexibility and customization.
</Note>