js-sequence-diagrams
js-sequence-diagrams copied to clipboard
Branching in Sequence Diagrams
Hi Andrew Brampton,
Do you have any idea of implementing branches with the current release? I have tried something using the Raphael's path. I have tried in two ways. My code is as follows:
// Basic branching.
var paper = Raphael(5, 5, 300, 300);
// Draw rectangle - this is branch.
var branch = paper.rect(10, 10, 250, 110);
branch.attr({
"stroke-dasharray": "",
"stroke": "#000"
});
var branchlabel = paper.rect(10, 10, 55, 25);
branchlabel.attr({
"fill": "#fff",
"stroke": "#000",
"stroke-linejoin": "",
"stroke-linecap": "",
"stroke-dasharray": "",
});
paper.path("M10 60 H50 260").attr({
"stroke": "#000",
"stroke-linejoin": "",
"stroke-linecap": "",
"stroke-dasharray": "--",
});
paper.text(35, 20, "Branch").attr({
"font-size": 12,
"font-family": "Segoe UI",
});
// Branching with bottom right angle.
var paper2 = Raphael(5, 310, 300, 300);
paper2.path("M75 0 V15 L65 25 H0 V0 Z").attr({
"stroke": "#000",
"stroke-width": 2,
"fill": "#fff"
});
paper2.text(32, 10, "Branch").attr({
"font": "12pt Segoe UI",
});
How do I incorporate for this case:
branch
Alice -> Bob: Hi
Bob -> Alice: Hello
end branch
Hi praveenscience,
I'm unsure what problem you are having. Are you saying that your code does not correctly render?
If you want to add new syntax, you'll have to change a few different things.
Firstly, you will have to change the grammar.jison to support the new "branch" syntax. As part of that you'll have to change the .jison and diagram.js to store that certain signals are now within a branch. I suggest you do something similar to how a Note is added.
Finally you will have to change the rendering part of the diagram, in sequence-diagram.js. Code similar to what you have may work, but I would suggest using the draw_rect, draw_line, etc methods, as they will handle the styling of the line, etc.
Yes, Andrew.
I don't know how to include that piece to the diagram. Yeah, I will try as you have explained. If any help is needed, can you please guide me? Thanks in advance.
Cheers, Praveen