# Sankey Diagrams

### What are Sankey Diagrams?

Mermaid's Sankey diagrams provide a visual representation of flow and relationships between nodes, showing the proportional values in a process. Commonly used to display resource or energy flow, they highlight the relative sizes of inputs, outputs, and connections, making it easy to analyze and optimize processes.

### Creating Your First Sankey Diagram

1. **Launch DinoAI:** From Code IDE, access [DinoAI](https://docs.paradime.io/app-help/documentation/dino-ai) to start creating diagrams.
2. **Use a Simple Prompt:** Tell DinoAI what kind of Sankey Diagram you want to create. For example:

{% code overflow="wrap" %}

```
- "Create a Sankey diagram showing data flow volumes through my ETL pipeline"

- "Generate a Sankey diagram for my data warehouse showing source to destination flows"

- "Build a Sankey diagram showing data processing stages with volume changes"
```

{% endcode %}

3. **Get Your Diagram:** DinoAI will generate a complete `.mmd` file with proper Mermaid syntax.
4. **Preview Your Work:** Click the eye icon (👁️) to preview your diagram in real-time as you edit.
5. **Iterate and Refine:** Modify the generated `.mmd` file directly, or ask DinoAI to make specific changes.

#### Example: 

```mermaid
---
config:
  sankey:
    showValues: false
---
sankey-beta

Agricultural 'waste',Bio-conversion,124.7
Bio-conversion,Liquid,0.6
Bio-conversion,Solid,280.3
Coal reserves,Coal,75.6
Electricity grid,Heating and cooling - homes,113.7
Electricity grid,Industry,342.2
Electricity grid,Road transport,37.8
Gas reserves,Ngas,123.0
H2 conversion,H2,20.9
Liquid,Road transport,135.8
Nuclear,Thermal generation,840.0
Oil reserves,Oil,612.0
Pumped heat,Heating and cooling - homes,193.0
Solar,Solar PV,59.9
Thermal generation,Electricity grid,525.5
Wind,Electricity grid,289.4
```

<figure><img src="https://2337193041-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHET0AD04uHMgdeLAjptq%2Fuploads%2FlIPUnWqBG8DTH0Lx5pFy%2Fimage.png?alt=media&#x26;token=30b82507-8bc9-4e1d-a083-db1bb7b35fe2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### Reusable Sankey Diagrams prompts for you and your team

You can create custom, standardized [.dinoprompts](https://docs.paradime.io/app-help/documentation/dino-ai/dino-prompts) for Mermaid's Sankey Diagrams that ensure consistency across your data team. See [step-by-step guide.](https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/..#creating-mermaid-diagrams-with-.dinoprompts)
{% endhint %}

***

### Diagram Syntax Guide

#### Basic Syntax

* Define the diagram using `sankey-beta`.
* Each row specifies a source, target, and value, separated by commas.

```mermaid
sankey-beta

Source,Target,Value
Electricity grid,Heating and cooling - homes,113.7
Electricity grid,Industry,342.2
```

#### Formatting Rules

1. **Empty Lines**: You can leave blank lines for better readability.

   ```mermaid
   sankey-beta

   Source,Target,Value
   Bio-conversion,Losses,26.9

   Bio-conversion,Solid,280.3
   ```
2. **Commas**: Enclose text with commas in double quotes.

   ```mermaid
   sankey-beta
   Pumped heat,"Heating and cooling, homes",193.0
   ```
3. **Double Quotes**: Escape double quotes by using two double quotes.

   ```mermaid
   sankey-beta
   Pumped heat,"Heating and cooling, ""homes""",193.0
   ```

#### Configuration Options

You can customize the diagram’s appearance using configuration settings.

**Example Configuration**

```javascript
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    sankey: {
      width: 800,
      height: 400,
      linkColor: 'source',
      nodeAlignment: 'left',
    },
  };
  mermaid.initialize(config);
</script>
```

**Available Settings**

* **Link Colors**: Adjust the link colors.
  * `source`: Color matches source node.
  * `target`: Color matches target node.
  * `gradient`: Smooth transition between source and target colors.
  * `#hexcode`: Specify a specific hex color.
* **Node Alignment**: Change alignment using `justify`, `center`, `left`, or `right`.

### Data Team Examples

#### Resource Flow

```mermaid
sankey-beta

Coal reserves,Coal,75.6
Coal,Thermal generation,400.1
Thermal generation,Electricity grid,525.5
Electricity grid,Industry,342.2
```

#### Energy Distribution

```mermaid
---
config:
  sankey:
    showValues: true
---
sankey-beta

Oil reserves,Oil,612.0
Oil,Liquid,611.9
Liquid,Road transport,135.8
Liquid,International aviation,206.3
```

### Best Practices

1. Clearly define nodes and values.
2. Use intuitive labels for source and target nodes.
3. Adjust link colors and node alignments for clarity.
4. Keep the number of nodes manageable for readability.
5. Regularly update diagrams to reflect current data flows.

***

{% hint style="info" %}

### Additional Resources

For more syntax options and advanced features, visit the [official Mermaid documentation](https://mermaid.js.org/syntax/sankey.html).
{% endhint %}