Sankey Diagram with javascript

نعم يمكن استخدام الجافاسكريبت لذلك، بحيث يتم استخدام العنصر canvas في HTML كحاوية للرسومات التي يتم إنشائها والتحكم بها من خلال الجافاسكريبت وتتيح لك رسم النقاط والخطوط وجميع الأشكال الهندسية دائرة، مربع، مستطيل،..إلخ أو أي شكل هندسي آخر تبعاً لإحداثيات النقاط والوصل فيما بينها. مثال:

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script> 

بحيث تبدأ الإحداثيات من أعلى اليسار، وعند الرسم يتم استخدام التوابع المتاحة في جافاسكريبت لتحريك نقطة البداية والوصل بين هذه النقاط على شكل خطوط وأشكال هندسية.

يمكنك الاطلاع أكثر على canvas والتوابع الرسومية المتاحة من خلال البحث على الانترنت. ويوجد أيضاً بعض الطرق الأخرى للرسم من خلال استخدام عنصر SVG أو مكتبات إضافية متاحة للتعامل مع الرسوم والتحريك.

شرح عن العنصر canvas في ويكي حسوب: https://wiki.hsoub.com/HTML/canvas

مقال مفيد عن canvas:

نعم يمكنك فعل ذلك، إذا كنت تقصد الشكل المرفق فقط، ولا استطيع بناء الـ diagram من اجلك ولكن يمكنك بنائه باستخدام الـ html مثل svg واضافة التعديلات عليه باستخدام js و css.

أما إذا كنت تريد بناء تطبيق يتيح انشاء diagrams فستحتاج إلى استخدام مكتبة مثل bpmn، وهذا مثال عملي عنها :

https://codesandbox.io/s/bpmn-js-properties-panel-forked-648fb

يمكن تنفيذ المطلوب من خلال استخدام الجافاسكريبت ، عن طريق استخدام العنصر canvas ولكن لتنفيذ مثل هذا ال diagram تحتاج أن تكون لديك خبرة جيدة باستخدام العنصر canvas حتى تقوم ببناء ال diagram من البداية

بينما هناك مكتبات جاهزة تسهل عمل هذه ال diagram مثل 

• amCharts : حيث يوجد قسم خاص لتنفيذ ال Sankey Diagram
•  مكتبة D3 : هي مكتبة كبيرة خاصة بالجافاسكريبت لهذه الرسومات
• كما يوجد google charts

الروابط السابقة تحتوي على أمثلة على الSankey Diagram لذلك هي الحل المناسب لك حالياً