mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-07 16:19:38 +02:00
Small positoining fix for parallell processes and nested composite states
This commit is contained in:
@@ -66,17 +66,43 @@ stateDiagram-v2
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||||
%%{init:{"theme":"forest", "themeVariables": {
|
|
||||||
"specialStateColor":"red",
|
|
||||||
"innerEndBackground":"lightgreen"
|
|
||||||
}}}%%
|
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state fork [[fork]]
|
state CompositeState {
|
||||||
state join [[join]]
|
state AnotherCompositeState1234567890 {
|
||||||
[*] --> fork
|
YourState
|
||||||
fork --> join
|
}
|
||||||
join --> [*]
|
}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||||
|
stateDiagram-v2
|
||||||
|
state CS {
|
||||||
|
state ACS {
|
||||||
|
YourState
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||||
|
stateDiagram-v2
|
||||||
|
[*] --> Active
|
||||||
|
|
||||||
|
state Active {
|
||||||
|
[*] --> NumLockOff
|
||||||
|
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||||
|
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||||
|
--
|
||||||
|
[*] --> CapsLockOff
|
||||||
|
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||||
|
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||||
|
}
|
||||||
|
state SomethingElse {
|
||||||
|
A --> B
|
||||||
|
B --> A
|
||||||
|
}
|
||||||
|
|
||||||
|
Active --> SomethingElse
|
||||||
|
note right of SomethingElse : This is the note to the right.
|
||||||
|
|
||||||
|
SomethingElse --> [*] </div>
|
||||||
<script src="./mermaid.js"></script>
|
<script src="./mermaid.js"></script>
|
||||||
<script>
|
<script>
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
|
@@ -146,7 +146,7 @@ const roundedWithTitle = (parent, node) => {
|
|||||||
|
|
||||||
const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;
|
const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;
|
||||||
if (node.width <= bbox.width + node.padding) {
|
if (node.width <= bbox.width + node.padding) {
|
||||||
node.diff = (bbox.width + node.padding - node.width) / 2;
|
node.diff = (bbox.width + node.padding * 0 - node.width) / 2;
|
||||||
} else {
|
} else {
|
||||||
node.diff = -node.padding / 2;
|
node.diff = -node.padding / 2;
|
||||||
}
|
}
|
||||||
@@ -212,7 +212,7 @@ const divider = (parent, node) => {
|
|||||||
const rectBox = rect.node().getBBox();
|
const rectBox = rect.node().getBBox();
|
||||||
node.width = rectBox.width;
|
node.width = rectBox.width;
|
||||||
node.height = rectBox.height;
|
node.height = rectBox.height;
|
||||||
|
node.diff = -node.padding / 2;
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersectRect(node, point);
|
return intersectRect(node, point);
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user