Angled arrows

[raboof]

It'd be really great to have support for angled (and even crossing!) arrows, to represent messages being sent e.g. over a network.

Example: http://tex.stackexchange.com/questions/99436/network-message-sequence-diagram

I fully realize this would be nontrivial to add: finding a good way to represent such diagrams in text is a challenge on its own. It'd probably be wise to consider this a 'other diagram' (I don't seem to be able to add milestones to issues though). Hopefully much of the rendering and styling code can be generalized/re-used, though.

Inspiration for the textual representation could be:

• http://satoss.uni.lu/software/mscpackage/
• https://code.google.com/p/msc2svg/wiki/Example
• http://www.mcternan.me.uk/mscgen/

Though none of those are particularly appealing.

search terms: diagonal, slanted

[bramp]

Would forward and back slashes work?

A->B: Normal
A/>B: Angled up
A\>B: Angled down

Not very pretty, but the simplest I could think of just now.

[raboof]

Thanks for the quick reply. That is actually an interesting proposal - though extending it to the other 3 arrow types (A\\>B, A\>>B, A\\>>B) seems a bit nasty.

An alternative might be to keep the existing arrows but allow annotations specifying how many lines to 'drop' (where a 'drop' of 0 would be a horizontal line). This would also fairly naturally support diagrams like the first one at https://w3.cs.jmu.edu/bernstdh/Web/CS460/study-aids/exam2-sample.php:

(...)
T->R [drop = 1]: F3
R->T [drop = 4]: ACK 4
T->R [drop = 1]: F4
T->R [drop = 1]: F5

This could be made more readable by allowing to set a 'default drop' at the top of the file, and set that to '1' if you're drawing these kinds of diagrams.

[raboof]

Ah, looks like the attributes are added at the end of the line in #74.

So representing https://w3.cs.jmu.edu/bernstdh/Web/CS460/study-aids/exam2-sample.php as:

default-drop = 1
(...)
T->R: F3
R->T: ACK 4 [drop = 4]
T->R: F4
T->R: F5

[davidje13]

@raboof I know it's been several years, but if you're still interested in this feature I've just added a version of it to my editor (https://github.com/davidje13/SequenceDiagram), and I'd be keen to hear your feedback on whether it fulfils your needs. It's a little rough-around-the-edges, but should be functional.

I think the syntax is quite natural, so I'd suggest it for this project too:

# the arrow begins ("identifier" could be anything; it just links the statements):
Agent1 -> ...identifier

# some time later, the arrow ends:
...identifier -> Agent2: message

So your example could be drawn with:

begin T, R

T -> ...pingNumber3
...pingNumber3 -> R: F3

# labels and "simultaneously" are the only way to have simultaneous
# actions so far, so use those to have the response begin at the same
# time as the next ping:

response: # mark this point with the name "response"
R -> ...aDelayedThing

# go back to the point named "response" (like a "goto")
simultaneously with response:

T -> ...pingNumber4
...pingNumber4 -> R: F4

T -> ...pingNumber5
...pingNumber5 -> R: F5

# finally the response is received
...aDelayedThing -> T: ACK 4

As you can see from the example, the downside of this syntax is that lines won't align automatically. You have to put some thought into which actions must be simultaneous to make the final diagram regular (same slants and spacing).

[raboof]

Thanks for the ping, that looks quite cool! Indeed a bit 'goto-ish' but that is probably hard to avoid - my drop=x proposal above is not much better in that respect ;).

I hadn't found a satisfying way of drawing such diagrams yet, you I'll be sure to make a note for when the need arises again!

[grssam]

Someone over at mermaid js pointed out the behavior in sequencediagram.org - https://github.com/mermaid-js/mermaid/issues/450#issuecomment-2276235646

I think this is quite a minimal and intuitive syntax.

sender->(delay)recipient