ApexSankey Skill

AI models routinely get Sankey-diagram code wrong: passing data to the constructor, omitting render(), dangling source / target references, or dropping options from the render payload.

The ApexSankey Skill is a context file you add to your project once. Your AI assistant reads it and generates correct ApexSankey code from the start.

→ GitHub: apexcharts/apexsankey-skill

---

Install

Claude Code

mkdir -p .claude/skills
cd .claude/skills
git clone https://github.com/apexcharts/apexsankey-skill.git

Cursor / Windsurf

curl -o .cursorrules https://raw.githubusercontent.com/apexcharts/apexsankey-skill/main/.cursorrules

GitHub Copilot

Reference the skill file in Copilot Chat:

@workspace #file:SKILL.md How do I build a Sankey diagram?

Or paste the contents of .cursorrules into your Copilot custom instructions so it applies to all conversations.

Generic AI (ChatGPT, Gemini, etc.)

Paste the contents of SKILL.md into your system prompt or attach it as context at the start of the conversation.

As an npm dependency

npm install apexsankey-skill

import { skillFile, referencePath } from 'apexsankey-skill';
import { readFile } from 'node:fs/promises';

const skill = await readFile(skillFile, 'utf8');
const data  = await readFile(referencePath('data-format.md'), 'utf8');

---

What the skill covers

• Data format — { nodes, edges, options }, layer ordering, edge grouping
• Lifecycle — setLicense(), construct, render(), destroy(), exporting SVG
• Tooltips — separate edge / node template shapes
• Interaction — path highlighting, click callbacks, animation, accessibility
• Framework wrappers — react-apexsankey, vue-apexsankey, ngx-apexsankey

---

Repository structure

├── SKILL.md                           # Main entry point
├── .cursorrules                       # Self-contained Cursor / Windsurf version
├── references/
│   ├── data-format.md                 # nodes, edges, options, layer order
│   ├── styling-and-interaction.md     # tooltips, animation, a11y, callbacks
│   └── framework-wrappers.md          # React, Vue, Angular
└── install/
    ├── claude-code.md
    ├── cursor.md
    └── copilot.md

---

Repository

https://github.com/apexcharts/apexsankey-skill

See also: ApexCharts Skill for the core charting library.