mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge pull request #318 from ciekawy/activation_draft
activations doc + few fixes
This commit is contained in:
commit
1ad9e75a86
@ -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
|
||||
|
@ -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];
|
||||
var fromIdx = fromBounds[0] <= toBounds[0]?1:0;
|
||||
var toIdx = fromBounds[0] < toBounds[0]?0:1;
|
||||
startx = fromBounds[fromIdx];
|
||||
stopx = toBounds[toIdx];
|
||||
|
||||
drawMessage(diagram, startx, stopx, exports.bounds.getVerticalPos(), msg);
|
||||
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);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user