Sankey Diagrams

​

What are Sankey Diagrams?

​

Creating Your First Sankey Diagram

1. Launch DinoAI: From Code IDE, access DinoAI to start creating diagrams.
2. Use a Simple Prompt: Tell DinoAI what kind of Sankey Diagram you want to create. For example:

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

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:

​

Diagram Syntax Guide

​

Basic Syntax

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

​

Formatting Rules

1. Empty Lines: You can leave blank lines for better readability.
2. Commas: Enclose text with commas in double quotes.
3. Double Quotes: Escape double quotes by using two double quotes.

​

Configuration Options

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

• 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

​

Energy Distribution

​

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.