I’ve been using the js-sequence-diagrams library to generate sequence diagrams dynamically in my web application. It’s a great library, but I’ve encountered an issue when creating larger diagrams: the text seems to overlap with the arrows.
Here’s a simplified version of my code:
const diagram = Diagram.parse("Title: My Large Diagram\\n\\nParticipant A\\nParticipant B\\n...\\nParticipant Z\\n\\nA-\>B: Hello\\n...\\nY-\>Z: Goodbye");
diagram.drawSVG('diagram', {theme: 'simple'});
When I run this code, the text from participant Y’s message to Z overlaps with the arrow. This issue only seems to occur when there are many participants and messages.
Has anyone else experienced this issue with js-sequence-diagrams? Is there a workaround or a fix for this bug? Any insights would be greatly appreciated.
Thank you in advance for your time and help.
>Solution :
I’ve run into similar issues in the past and found a bit of a workaround – it’s not a perfect solution, but it might just do the trick for you. You could try adding a few extra line breaks in your diagram definition.
const diagram = Diagram.parse("Title: My Large Diagram\n\nParticipant A\nParticipant B\n...\nParticipant Z\n\nA->B: Hello\n\n...\n\nY->Z: Goodbye");
diagram.drawSVG('diagram', {theme: 'simple'});
This should create a bit of extra breathing room between your messages and could help avoid the overlap.
Just bear in mind that this is more of a quick fix than a permanent solution. It would be great if the folks maintaining the library could address this in an upcoming update.
Hope this helps a bit!