marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-16 22:09:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix for issue #895

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-08-15 08:57:49 +02:00
parent 23b567e11b
commit a35892da4f
4 changed files with 133 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
e2e/platform/subgraph.html
View File

@@ -5,15 +5,29 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
body {
font-family: 'trebuchet ms', verdana, arial;
}
</style>
</head>
<body>
<div id="FirstLine" class="mermaid">
<div class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
subgraph 1test["Text"]
A
end
</div>
A[Christmas] -->|Get money| B(Go shopping)
subgraph 1test["id starting with number"]
A
end
style 1test fill:#F99,stroke-width:2px,stroke:#F0F
</div>
<div class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
subgraph test["id starting with number"]
A
end
style test fill:#F99,stroke-width:2px,stroke:#F0F
</div>
<script src="./mermaid.js"></script>
<script>
function showFullFirstSquad(elemName) {

15
src/diagrams/flowchart/flowDb.js
View File

@@ -37,9 +37,9 @@ const sanitize = text => {
* @param style
* @param classes
*/
export const addVertex = function (id, text, type, style, classes) {
export const addVertex = function (_id, text, type, style, classes) {
let txt
let id = _id
if (typeof id === 'undefined') {
return
}
@@ -47,6 +47,8 @@ export const addVertex = function (id, text, type, style, classes) {
return
}
if (id[0].match(/\d/)) id = 's' + id
if (typeof vertices[id] === 'undefined') {
vertices[id] = { id: id, styles: [], classes: [] }
}
@@ -338,7 +340,12 @@ export const defaultStyle = function () {
/**
* Clears the internal graph db so that a new graph can be parsed.
*/
export const addSubGraph = function (id, list, title) {
export const addSubGraph = function (_id, list, _title) {
let id = _id
let title = _title
if (_id === _title && _title.match(/\s/)) {
id = undefined
}
function uniq (a) {
const prims = { 'boolean': {}, 'number': {}, 'string': {} }
const objs = []
@@ -357,7 +364,7 @@ export const addSubGraph = function (id, list, title) {
nodeList = uniq(nodeList.concat.apply(nodeList, list))
id = id || ('subGraph' + subCount)
id = 's' + id
if (id[0].match(/\d/)) id = 's' + id
title = title || ''
title = sanitize(title)
subCount = subCount + 1

28
src/diagrams/flowchart/parser/flow.jison
View File

@@ -251,12 +251,12 @@ statement
{$$=[];}
| clickStatement separator
{$$=[];}
| subgraph SPACE alphaNum SQS text SQE separator document end
| subgraph SPACE text SQS text SQE separator document end
{$$=yy.addSubGraph($3,$8,$5);}
| subgraph SPACE STR separator document end
{$$=yy.addSubGraph(undefined,$5,$3);}
| subgraph SPACE alphaNum separator document end
| subgraph SPACE text separator document end
{$$=yy.addSubGraph($3,$5,$3);}
// | subgraph SPACE text separator document end
// {$$=yy.addSubGraph($3,$5,$3);}
| subgraph separator document end
{$$=yy.addSubGraph(undefined,$3,undefined);}
;
@@ -265,20 +265,20 @@ separator: NEWLINE | SEMI | EOF ;
verticeStatement:
vertex link vertex
{ yy.addLink($1,$3,$2);$$ = [$1,$3];}
{ yy.addLink($1,$3,$2);$$ = [$1,$3];}
| vertex link vertex DOT idString
{ yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);}
| vertex DOT idString link vertex
| vertex DOT idString link vertex
{ yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);}
| vertex DOT idString link vertex DOT idString
{ yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}
{ yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}
|vertex
{$$ = [$1];}
|vertex DOT idString
{$$ = [$1];yy.setClass($1,$3)}
{$$ = [$1];yy.setClass($1,$3)}
;
vertex: idString SQS text SQE
vertex: idString SQS text SQE
{$$ = $1;yy.addVertex($1,$3,'square');}
| idString SQS text SQE spaceList
{$$ = $1;yy.addVertex($1,$3,'square');}
@@ -403,25 +403,25 @@ linkStatement: ARROW_POINT
| DOTTED_ARROW_CIRCLE
{$$ = {"type":"arrow_circle","stroke":"dotted"};}
| DOUBLE_DOTTED_ARROW_CIRCLE
{$$ = {"type":"double_arrow_circle","stroke":"dotted"};}
{$$ = {"type":"double_arrow_circle","stroke":"dotted"};}
| DOTTED_ARROW_CROSS
{$$ = {"type":"arrow_cross","stroke":"dotted"};}
| DOUBLE_DOTTED_ARROW_CROSS
{$$ = {"type":"double_arrow_cross","stroke":"dotted"};}
{$$ = {"type":"double_arrow_cross","stroke":"dotted"};}
| DOTTED_ARROW_OPEN
{$$ = {"type":"arrow_open","stroke":"dotted"};}
| THICK_ARROW_POINT
{$$ = {"type":"arrow","stroke":"thick"};}
| DOUBLE_THICK_ARROW_POINT
{$$ = {"type":"double_arrow_point","stroke":"thick"};}
{$$ = {"type":"double_arrow_point","stroke":"thick"};}
| THICK_ARROW_CIRCLE
{$$ = {"type":"arrow_circle","stroke":"thick"};}
| DOUBLE_THICK_ARROW_CIRCLE
{$$ = {"type":"double_arrow_circle","stroke":"thick"};}
{$$ = {"type":"double_arrow_circle","stroke":"thick"};}
| THICK_ARROW_CROSS
{$$ = {"type":"arrow_cross","stroke":"thick"};}
| DOUBLE_THICK_ARROW_CROSS
{$$ = {"type":"double_arrow_cross","stroke":"thick"};}
{$$ = {"type":"double_arrow_cross","stroke":"thick"};}
| THICK_ARROW_OPEN
{$$ = {"type":"arrow_open","stroke":"thick"};}
;

89
src/diagrams/flowchart/parser/subgraph.spec.js
View File

@@ -71,7 +71,7 @@ describe('when parsing subgraphs', function () {
const subgraph = subgraphs[0]
expect(subgraph.nodes.length).toBe(1)
expect(subgraph.nodes[0]).toBe('A')
expect(subgraph.id).toBe('1test')
expect(subgraph.id).toBe('s1test')
});
it('should handle subgraphs1', function () {
@@ -82,6 +82,93 @@ describe('when parsing subgraphs', function () {
expect(edges[0].type).toBe('arrow')
})
it('should handle subgraphs with title in quotes', function () {
const res = flow.parser.parse('graph TD;A-->B;subgraph "title in quotes";c-->d;end;')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
const subgraphs = flow.parser.yy.getSubGraphs()
expect(subgraphs.length).toBe(1)
const subgraph = subgraphs[0]
expect(subgraph.title).toBe('title in quotes')
expect(edges[0].type).toBe('arrow')
})
it('should handle subgraphs in old style that was broken', function () {
const res = flow.parser.parse('graph TD;A-->B;subgraph old style that is broken;c-->d;end;')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
const subgraphs = flow.parser.yy.getSubGraphs()
expect(subgraphs.length).toBe(1)
const subgraph = subgraphs[0]
expect(subgraph.title).toBe('old style that is broken')
expect(edges[0].type).toBe('arrow')
})
it('should handle subgraphs with dashes in the title', function () {
const res = flow.parser.parse('graph TD;A-->B;subgraph a-b-c;c-->d;end;')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
const subgraphs = flow.parser.yy.getSubGraphs()
expect(subgraphs.length).toBe(1)
const subgraph = subgraphs[0]
expect(subgraph.title).toBe('a-b-c')
expect(edges[0].type).toBe('arrow')
})
it('should handle subgraphs with id and title in brackets', function () {
const res = flow.parser.parse('graph TD;A-->B;subgraph uid1[text of doom];c-->d;end;')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
const subgraphs = flow.parser.yy.getSubGraphs()
expect(subgraphs.length).toBe(1)
const subgraph = subgraphs[0]
expect(subgraph.title).toBe('text of doom')
expect(subgraph.id).toBe('uid1')
expect(edges[0].type).toBe('arrow')
})
it('should handle subgraphs with id and title in brackets and quotes', function () {
const res = flow.parser.parse('graph TD;A-->B;subgraph uid2["text of doom"];c-->d;end;')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
const subgraphs = flow.parser.yy.getSubGraphs()
expect(subgraphs.length).toBe(1)
const subgraph = subgraphs[0]
expect(subgraph.title).toBe('text of doom')
expect(subgraph.id).toBe('uid2')
expect(edges[0].type).toBe('arrow')
})
it('should handle subgraphs with id and title in brackets without spaces', function () {
const res = flow.parser.parse('graph TD;A-->B;subgraph uid2[textofdoom];c-->d;end;')
const vert = flow.parser.yy.getVertices()
const edges = flow.parser.yy.getEdges()
const subgraphs = flow.parser.yy.getSubGraphs()
expect(subgraphs.length).toBe(1)
const subgraph = subgraphs[0]
expect(subgraph.title).toBe('textofdoom')
expect(subgraph.id).toBe('uid2')
expect(edges[0].type).toBe('arrow')
})
it('should handle subgraphs2', function () {
const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\n\n c-->d \nend\n')