diff --git a/docs/content/sequenceDiagram.md b/docs/content/sequenceDiagram.md index 3da5d988ac..8261456b3d 100755 --- a/docs/content/sequenceDiagram.md +++ b/docs/content/sequenceDiagram.md @@ -72,6 +72,55 @@ There are six types of arrows currently supported: --x which will render a dotted line with a cross at the end (async) +## Activations +It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations: + +``` +sequenceDiagram + Alice->>John: Hello John, how are you? + activate John + John-->>Alice: Great! + deactivate John +``` + +Renders to the diagram below: + +```mermaid +sequenceDiagram + Alice->>John: Hello John, how are you? + activate John + John-->>Alice: Great! + deactivate John +``` + +There is also a shortcut notation by appending `+`/`-` suffix to the message arrow: + +``` +sequenceDiagram + Alice->>+John: Hello John, how are you? + John-->>-Alice: Great! +``` + +Activations can be stacked for same actor: + +``` +sequenceDiagram + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can yoy hear me? + John-->>-Alice: Hi Alice, I can hear you! + John-->>-Alice: I feel great! +``` + +Stacked activations look like this: + +```mermaid +sequenceDiagram + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can yoy hear me? + John-->>-Alice: Hi Alice, I can hear you! + John-->>-Alice: I feel great! +``` + ## Notes It is possible to add notes to a sequence diagram. This is done by the notation Note [ right of | left of | over ] [Actor]: Text in note content diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js index 6e9f7cf5cc..2c88bf3e76 100644 --- a/src/diagrams/sequenceDiagram/sequenceRenderer.js +++ b/src/diagrams/sequenceDiagram/sequenceRenderer.js @@ -347,6 +347,19 @@ module.exports.draw = function (text, id) { svgDraw.insertArrowHead(diagram); svgDraw.insertArrowCrossHead(diagram); + function activeEnd(msg, verticalPos) { + var activationData = exports.bounds.endActivation(msg); + if(activationData.starty + 18 > verticalPos) { + activationData.starty = verticalPos - 6; + verticalPos += 12; + } + svgDraw.drawActivation(diagram, activationData, verticalPos, conf); + + exports.bounds.insert(activationData.startx, verticalPos -10, activationData.stopx, verticalPos); + } + + var lastMsg; + // Draw the messages/signals messages.forEach(function(msg){ var loopData; @@ -374,15 +387,10 @@ module.exports.draw = function (text, id) { } break; case sq.yy.LINETYPE.ACTIVE_START: - // exports.bounds.bumpVerticalPos(conf.boxMargin); exports.bounds.newActivation(msg, diagram); - // exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin); break; case sq.yy.LINETYPE.ACTIVE_END: - var activationData = exports.bounds.endActivation(msg); - svgDraw.drawActivation(diagram, activationData, exports.bounds.getVerticalPos(), conf); - - exports.bounds.insert(activationData.startx, exports.bounds.getVerticalPos() -10, activationData.stopx, exports.bounds.getVerticalPos()); + activeEnd(msg, exports.bounds.getVerticalPos()); break; case sq.yy.LINETYPE.LOOP_START: exports.bounds.bumpVerticalPos(conf.boxMargin); @@ -426,14 +434,19 @@ module.exports.draw = function (text, id) { break; default: try { + lastMsg = msg; exports.bounds.bumpVerticalPos(conf.messageMargin); var fromBounds = actorFlowVerticaBounds(msg.from); var toBounds = actorFlowVerticaBounds(msg.to); - var forward = fromBounds[0] < toBounds[0]; - startx = fromBounds[forward?1:0]; - stopx = toBounds[forward?0:1]; - - drawMessage(diagram, startx, stopx, exports.bounds.getVerticalPos(), msg); + var fromIdx = fromBounds[0] <= toBounds[0]?1:0; + var toIdx = fromBounds[0] < toBounds[0]?0:1; + startx = fromBounds[fromIdx]; + stopx = toBounds[toIdx]; + + var verticalPos = exports.bounds.getVerticalPos(); + drawMessage(diagram, startx, stopx, verticalPos, msg); + var allBounds = fromBounds.concat(toBounds); + exports.bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos); } catch (e) { console.error('error while drawing message', e); }