marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-06 07:39:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1230 from mermaid-js/bug/1223_multiple_transitions_in_statediagram

Browse Source 
Bug/1223 multiple transitions in statediagram
This commit is contained in:
Ashish Jain
2020-01-29 21:02:14 +01:00
committed by GitHub
parent 39b873cd5f c43f791b29
commit fbd8dfa5be
4 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -12,3 +12,4 @@ yarn-error.log
token
package-lock.json
cypress/platform/current.html

14
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -319,7 +319,7 @@ describe('State diagram', () => {
}
);
});
it('Simplest compone state', () => {
it('Simplest composit state', () => {
imgSnapshotTest(
`
stateDiagram
@@ -332,5 +332,17 @@ describe('State diagram', () => {
}
);
});
it('should handle multiple arrows from one node to another', () => {
imgSnapshotTest(
`
stateDiagram
a --> b: Start
a --> b: Stop
`,
{
logLevel: 0,
}
);
});
});

19
cypress/platform/current.html
View File

@@ -5,33 +5,28 @@
rel="stylesheet"
/>
<style>
body {background: black}
body {background: white}
h1 { color: white;}
.arrowheadPath {fill: red;}
.edgePath .path {stroke: red;}
</style>
</head>
<body>
<h1>info below</h1>
<div style="display: flex;width: 100%; height: 100%">
<div class="mermaid" style="width: 100%; height: 100%">
graph TB
A --> B
A ==> C
A .-> D
A === E
A -.- F
D -- Hello --> a
D-- text including R TD space --xb
stateDiagram
NotFound --> NotFound: Status
NotFound --> NotFound: Stop
</div>
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'dark',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,

40
src/diagrams/state/stateRenderer.js
View File

@@ -53,7 +53,7 @@ export const draw = function(text, id) {
// Layout graph, Create a new directed graph
const graph = new graphlib.Graph({
multigraph: false,
multigraph: true,
compound: true,
// acyclicer: 'greedy',
rankdir: 'RL'
@@ -110,7 +110,8 @@ const getRows = s => {
const renderDoc = (doc, diagram, parentId, altBkg) => {
// // Layout graph, Create a new directed graph
const graph = new graphlib.Graph({
compound: true
compound: true,
multigraph: true
});
let i;
@@ -126,28 +127,29 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
if (parentId)
graph.setGraph({
rankdir: 'LR',
// multigraph: false,
multigraph: true,
compound: true,
// acyclicer: 'greedy',
ranker: 'tight-tree',
ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
nodeSep: edgeFreeDoc ? 1 : 50
// isMultiGraph: false
nodeSep: edgeFreeDoc ? 1 : 50,
isMultiGraph: true
// ranksep: 5,
// nodesep: 1
});
else {
graph.setGraph({
rankdir: 'TB',
multigraph: true,
compound: true,
// isCompound: true,
// acyclicer: 'greedy',
// ranker: 'longest-path'
ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
nodeSep: edgeFreeDoc ? 1 : 50,
ranker: 'tight-tree'
ranker: 'tight-tree',
// ranker: 'network-simplex'
// isMultiGraph: false
isMultiGraph: true
});
}
@@ -226,14 +228,22 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
}
}
logger.info('Count=', graph.nodeCount());
logger.debug('Count=', graph.nodeCount(), graph);
let cnt = 0;
relations.forEach(function(relation) {
graph.setEdge(relation.id1, relation.id2, {
relation: relation,
width: getLabelWidth(relation.title),
height: conf.labelHeight * getRows(relation.title).length,
labelpos: 'c'
});
cnt++;
logger.debug('Setting edge', relation);
graph.setEdge(
relation.id1,
relation.id2,
{
relation: relation,
width: getLabelWidth(relation.title),
height: conf.labelHeight * getRows(relation.title).length,
labelpos: 'c'
},
'id' + cnt
);
});
dagre.layout(graph);
@@ -299,7 +309,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
stateInfo.width = stateBox.width + 2 * conf.padding;
stateInfo.height = stateBox.height + 2 * conf.padding;
logger.info('Doc rendered', stateInfo, graph);
logger.debug('Doc rendered', stateInfo, graph);
return stateInfo;
};