marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-10 09:39:38 +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 token
package-lock.json 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( imgSnapshotTest(
` `
stateDiagram 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" rel="stylesheet"
/> />
<style> <style>
body {background: black} body {background: white}
h1 { color: white;} h1 { color: white;}
.arrowheadPath {fill: red;} .arrowheadPath {fill: red;}
.edgePath .path {stroke: red;} .edgePath .path {stroke: red;}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div style="display: flex;width: 100%; height: 100%"> <div style="display: flex;width: 100%; height: 100%">
<div class="mermaid" style="width: 100%; height: 100%"> <div class="mermaid" style="width: 100%; height: 100%">
graph TB stateDiagram
A --> B
A ==> C NotFound --> NotFound: Status
A .-> D NotFound --> NotFound: Stop
A === E
A -.- F
D -- Hello --> a
D-- text including R TD space --xb
</div> </div>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'dark', // theme: 'dark',
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, 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 // Layout graph, Create a new directed graph
const graph = new graphlib.Graph({ const graph = new graphlib.Graph({
multigraph: false, multigraph: true,
compound: true, compound: true,
// acyclicer: 'greedy', // acyclicer: 'greedy',
rankdir: 'RL' rankdir: 'RL'
@@ -110,7 +110,8 @@ const getRows = s => {
const renderDoc = (doc, diagram, parentId, altBkg) => { const renderDoc = (doc, diagram, parentId, altBkg) => {
// // Layout graph, Create a new directed graph // // Layout graph, Create a new directed graph
const graph = new graphlib.Graph({ const graph = new graphlib.Graph({
compound: true compound: true,
multigraph: true
}); });
let i; let i;
@@ -126,28 +127,29 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
if (parentId) if (parentId)
graph.setGraph({ graph.setGraph({
rankdir: 'LR', rankdir: 'LR',
// multigraph: false, multigraph: true,
compound: true, compound: true,
// acyclicer: 'greedy', // acyclicer: 'greedy',
ranker: 'tight-tree', ranker: 'tight-tree',
ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor, ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
nodeSep: edgeFreeDoc ? 1 : 50 nodeSep: edgeFreeDoc ? 1 : 50,
// isMultiGraph: false isMultiGraph: true
// ranksep: 5, // ranksep: 5,
// nodesep: 1 // nodesep: 1
}); });
else { else {
graph.setGraph({ graph.setGraph({
rankdir: 'TB', rankdir: 'TB',
multigraph: true,
compound: true, compound: true,
// isCompound: true, // isCompound: true,
// acyclicer: 'greedy', // acyclicer: 'greedy',
// ranker: 'longest-path' // ranker: 'longest-path'
ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor, ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
nodeSep: edgeFreeDoc ? 1 : 50, nodeSep: edgeFreeDoc ? 1 : 50,
ranker: 'tight-tree' ranker: 'tight-tree',
// ranker: 'network-simplex' // 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) { relations.forEach(function(relation) {
graph.setEdge(relation.id1, relation.id2, { cnt++;
relation: relation, logger.debug('Setting edge', relation);
width: getLabelWidth(relation.title), graph.setEdge(
height: conf.labelHeight * getRows(relation.title).length, relation.id1,
labelpos: 'c' relation.id2,
}); {
relation: relation,
width: getLabelWidth(relation.title),
height: conf.labelHeight * getRows(relation.title).length,
labelpos: 'c'
},
'id' + cnt
);
}); });
dagre.layout(graph); dagre.layout(graph);
@@ -299,7 +309,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
stateInfo.width = stateBox.width + 2 * conf.padding; stateInfo.width = stateBox.width + 2 * conf.padding;
stateInfo.height = stateBox.height + 2 * conf.padding; stateInfo.height = stateBox.height + 2 * conf.padding;
logger.info('Doc rendered', stateInfo, graph); logger.debug('Doc rendered', stateInfo, graph);
return stateInfo; return stateInfo;
}; };