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

#1295 Applying new rendering engine for stateDiagrams

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-03-22 21:45:14 +01:00
parent df2925e51c
commit 5b302ae2e6
9 changed files with 643 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
cypress/platform/current.html
View File

@@ -21,23 +21,8 @@
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div style="display: flex;flex-direction:column;width: 100%; height: 100%"> <div class="mermaid2" style="width: 100%; height: 100%;">
<div class="mermaid2" style="width: 100%; height: 100%;display: none;">
flowchart LR flowchart LR
A --> B & C & D
subgraph s1
B
C
end
subgraph s2
D
end
C --> D
C --> D
C --> D
</div>
<div class="mermaid2" style="width: 100%; height: 100%; display: none">
graph LR
a --> b a --> b
subgraph id1 [Test] subgraph id1 [Test]
@@ -49,6 +34,38 @@
G-->H G-->H
G-->c G-->c
</div> </div>
<div class="mermaid2" style="width: 100%; height: 100%;">
flowchart LR
subgraph id1 [Test]
b
end
a-->id1
</div>
<div class="mermaid" style="width: 100%; height: 100%;">
stateDiagram-v2
state apa {
Still
}
state "APAN" as apa
banana --> apa
banana --> Still
</div>
<div style="display: flex;flex-direction:column;width: 100%; height: 100%">
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
state apa {
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
}
</div>
<div class="mermaid2" style="width: 100%; height: 100%"> <div class="mermaid2" style="width: 100%; height: 100%">
flowchart TB flowchart TB
a --> b a --> b
@@ -102,7 +119,7 @@
id1 --> id2 id1 --> id2
</div> </div>
new: new:
<div class="mermaid" style="width: 100%; height: 100%"> <div class="mermaid2" style="width: 100%; height: 100%">
flowchart LR flowchart LR
a <--> b a <--> b
b o--o c b o--o c
@@ -112,7 +129,7 @@
c2(c2) --x d2 --> id1{{This is the text in the box}} --> A[(cylindrical<br />shape<br />test)] c2(c2) --x d2 --> id1{{This is the text in the box}} --> A[(cylindrical<br />shape<br />test)]
</div> </div>
old: old:
<div class="mermaid" style="width: 100%; height: 100%"> <div class="mermaid2" style="width: 100%; height: 100%">
graph LR graph LR
a((a)) --> b --> id1{{This is the text in the box}} a((a)) --> b --> id1{{This is the text in the box}}
A[(cylindrical<br />shape<br />test)] A[(cylindrical<br />shape<br />test)]

11
src/dagre-wrapper/GraphObjects.md
View File

@@ -34,7 +34,7 @@ This is set by the renderer of the diagram and insert the data that the wrapper
| class | Class to be set for the shape | | class | Class to be set for the shape |
| style | Css styles for the actual shape | | style | Css styles for the actual shape |
| id | id of the shape | | id | id of the shape |
| type | if set to group then this node indicates a cluster. | | type | if set to group then this node indicates *a cluster*. |
| padding | Padding. Passed from the renderr as this might differ between react for different diagrams. Maybe obsolete. | | padding | Padding. Passed from the renderr as this might differ between react for different diagrams. Maybe obsolete. |
@@ -64,4 +64,11 @@ The example above adds the markers point and cross. This means that edges with t
Current markers: Current markers:
* point - the standard arrow from flowcharts * point - the standard arrow from flowcharts
* circle - Arrows ending with circle * circle - Arrows ending with circle
* cross - arrows starting and ending with a cross * cross - arrows starting and ending with a cross
// Todo - in case of common renderer
# Common functions used by the renderer to be implemented by the Db
getDirection
getClasses

13
src/dagre-wrapper/index.js
View File

@@ -24,11 +24,13 @@ export const render = (elem, graph, markers) => {
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels'); const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
const nodes = elem.insert('g').attr('class', 'nodes'); const nodes = elem.insert('g').attr('class', 'nodes');
logger.warn('graph', graph);
// Insert nodes, this will insert them into the dom and each node will get a size. The size is updated // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
// to the abstract node and is later used by dagre for the layout // to the abstract node and is later used by dagre for the layout
graph.nodes().forEach(function(v) { graph.nodes().forEach(function(v) {
const node = graph.node(v); const node = graph.node(v);
logger.trace('Node ' + v + ': ' + JSON.stringify(graph.node(v))); logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
if (node.type !== 'group') { if (node.type !== 'group') {
insertNode(nodes, graph.node(v)); insertNode(nodes, graph.node(v));
} else { } else {
@@ -47,7 +49,7 @@ export const render = (elem, graph, markers) => {
// TODO: pick optimal child in the cluster to us as link anchor // TODO: pick optimal child in the cluster to us as link anchor
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
const edge = graph.edge(e); const edge = graph.edge(e);
// logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); logger.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
// logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e))); // logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
const v = translateClusterId(e.v); const v = translateClusterId(e.v);
const w = translateClusterId(e.w); const w = translateClusterId(e.w);
@@ -60,12 +62,13 @@ export const render = (elem, graph, markers) => {
insertEdgeLabel(edgeLabels, edge); insertEdgeLabel(edgeLabels, edge);
}); });
// graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
// logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
// }); });
logger.info('#############################################'); logger.info('#############################################');
logger.info('### Layout ###'); logger.info('### Layout ###');
logger.info('#############################################'); logger.info('#############################################');
logger.info(graph);
dagre.layout(graph); dagre.layout(graph);
// Move the nodes to the correct place // Move the nodes to the correct place

16
src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -144,6 +144,22 @@ export const addVertices = function(vert, g, svgId) {
type: vertex.type, type: vertex.type,
padding: getConfig().flowchart.padding padding: getConfig().flowchart.padding
}); });
logger.info('setNode', {
labelType: 'svg',
labelStyle: styles.labelStyle,
shape: _shape,
label: vertexNode,
labelText: vertexText,
rx: radious,
ry: radious,
class: classStr,
style: styles.style,
id: vertex.id,
width: vertex.type === 'group' ? 500 : undefined,
type: vertex.type,
padding: getConfig().flowchart.padding
});
}); });
}; };

1
src/diagrams/state/parser/stateDiagram.jison
View File

@@ -71,6 +71,7 @@
<NOTE_TEXT>\s*[^:;]+"end note" { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';} <NOTE_TEXT>\s*[^:;]+"end note" { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';}
"stateDiagram"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; } "stateDiagram"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
"stateDiagram-v2"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
"hide empty description" { /*console.log('HIDE_EMPTY', yytext,'#');*/return 'HIDE_EMPTY'; } "hide empty description" { /*console.log('HIDE_EMPTY', yytext,'#');*/return 'HIDE_EMPTY'; }
<INITIAL,struct>"[*]" { /*console.log('EDGE_STATE=',yytext);*/ return 'EDGE_STATE';} <INITIAL,struct>"[*]" { /*console.log('EDGE_STATE=',yytext);*/ return 'EDGE_STATE';}
<INITIAL,struct>[^:\n\s\-\{]+ { /*console.log('=>ID=',yytext);*/ return 'ID';} <INITIAL,struct>[^:\n\s\-\{]+ { /*console.log('=>ID=',yytext);*/ return 'ID';}

10
src/diagrams/state/stateDb.js
View File

@@ -3,7 +3,7 @@ import { logger } from '../../logger';
let rootDoc = []; let rootDoc = [];
const setRootDoc = o => { const setRootDoc = o => {
logger.info('Setting root doc', o); logger.info('Setting root doc', o);
rootDoc = o; rootDoc = { id: 'root', doc: o };
}; };
const getRootDoc = () => rootDoc; const getRootDoc = () => rootDoc;
@@ -145,6 +145,12 @@ const getDividerId = () => {
return 'divider-id-' + dividerCnt; return 'divider-id-' + dividerCnt;
}; };
const classes = [];
const getClasses = () => classes;
const getDirection = () => 'TB';
export const relationType = { export const relationType = {
AGGREGATION: 0, AGGREGATION: 0,
EXTENSION: 1, EXTENSION: 1,
@@ -158,6 +164,8 @@ export default {
getState, getState,
getStates, getStates,
getRelations, getRelations,
getClasses,
getDirection,
addRelation, addRelation,
getDividerId, getDividerId,
// addDescription, // addDescription,

552
src/diagrams/state/stateRenderer-v2.js Normal file
View File

@@ -0,0 +1,552 @@
import graphlib from 'graphlib';
import * as d3 from 'd3';
import dagre from 'dagre';
import stateDb from './stateDb';
import state from './parser/stateDiagram';
import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { logger } from '../../logger';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
const conf = {};
export const setConf = function(cnf) {
const keys = Object.keys(cnf);
for (let i = 0; i < keys.length; i++) {
conf[keys[i]] = cnf[keys[i]];
}
};
const nodeDb = {};
/**
* Function that adds the vertices found during parsing to the graph to be rendered.
* @param vert Object containing the vertices.
* @param g The graph that is to be drawn.
*/
export const addVertices = function(vert, g, svgId) {
const svg = d3.select(`[id="${svgId}"]`);
const keys = Object.keys(vert);
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
keys.forEach(function(id) {
const vertex = vert[id];
/**
* Variable for storing the classes for the vertex
* @type {string}
*/
let classStr = 'default';
if (vertex.classes.length > 0) {
classStr = vertex.classes.join(' ');
}
const styles = getStylesFromArray(vertex.styles);
// Use vertex id as text in the box if no text is provided by the graph definition
let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
// We create a SVG label, either by delegating to addHtmlLabel or manually
let vertexNode;
if (getConfig().flowchart.htmlLabels) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
const node = {
label: vertexText.replace(
/fa[lrsb]?:fa-[\w-]+/g,
s => `<i class='${s.replace(':', ' ')}'></i>`
)
};
vertexNode = addHtmlLabel(svg, node).node();
vertexNode.parentNode.removeChild(vertexNode);
} else {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
const rows = vertexText.split(/<br\s*\/?>/gi);
for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1');
tspan.textContent = rows[j];
svgLabel.appendChild(tspan);
}
vertexNode = svgLabel;
}
let radious = 0;
let _shape = '';
// Set the shape based parameters
switch (vertex.type) {
case 'round':
radious = 5;
_shape = 'rect';
break;
case 'square':
_shape = 'rect';
break;
case 'diamond':
_shape = 'question';
break;
case 'hexagon':
_shape = 'hexagon';
break;
case 'odd':
_shape = 'rect_left_inv_arrow';
break;
case 'lean_right':
_shape = 'lean_right';
break;
case 'lean_left':
_shape = 'lean_left';
break;
case 'trapezoid':
_shape = 'trapezoid';
break;
case 'inv_trapezoid':
_shape = 'inv_trapezoid';
break;
case 'odd_right':
_shape = 'rect_left_inv_arrow';
break;
case 'circle':
_shape = 'circle';
break;
case 'ellipse':
_shape = 'ellipse';
break;
case 'stadium':
_shape = 'stadium';
break;
case 'cylinder':
_shape = 'cylinder';
break;
case 'group':
_shape = 'rect';
break;
default:
_shape = 'rect';
}
// Add the node
g.setNode(vertex.id, {
labelType: 'svg',
labelStyle: styles.labelStyle,
shape: _shape,
label: vertexNode,
labelText: vertexText,
rx: radious,
ry: radious,
class: classStr,
style: styles.style,
id: vertex.id,
width: vertex.type === 'group' ? 500 : undefined,
type: vertex.type,
padding: getConfig().flowchart.padding
});
});
};
/**
* Add edges to graph based on parsed graph defninition
* @param {Object} edges The edges to add to the graph
* @param {Object} g The graph object
*/
export const addEdges = function(edges, g) {
let cnt = 0;
let defaultStyle;
let defaultLabelStyle;
if (typeof edges.defaultStyle !== 'undefined') {
const defaultStyles = getStylesFromArray(edges.defaultStyle);
defaultStyle = defaultStyles.style;
defaultLabelStyle = defaultStyles.labelStyle;
}
edges.forEach(function(edge) {
cnt++;
const edgeData = {};
edgeData.id = 'id' + cnt;
// Set link type for rendering
if (edge.type === 'arrow_open') {
edgeData.arrowhead = 'none';
} else {
edgeData.arrowhead = 'normal';
}
edgeData.arrowType = edge.type;
let style = '';
let labelStyle = '';
if (typeof edge.style !== 'undefined') {
const styles = getStylesFromArray(edge.style);
style = styles.style;
labelStyle = styles.labelStyle;
} else {
switch (edge.stroke) {
case 'normal':
style = 'fill:none';
if (typeof defaultStyle !== 'undefined') {
style = defaultStyle;
}
if (typeof defaultLabelStyle !== 'undefined') {
labelStyle = defaultLabelStyle;
}
break;
case 'dotted':
style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
break;
case 'thick':
style = ' stroke-width: 3.5px;fill:none';
break;
}
}
edgeData.style = style;
edgeData.labelStyle = labelStyle;
if (typeof edge.interpolate !== 'undefined') {
edgeData.curve = interpolateToCurve(edge.interpolate, d3.curveLinear);
} else if (typeof edges.defaultInterpolate !== 'undefined') {
edgeData.curve = interpolateToCurve(edges.defaultInterpolate, d3.curveLinear);
} else {
edgeData.curve = interpolateToCurve(conf.curve, d3.curveLinear);
}
if (typeof edge.text === 'undefined') {
if (typeof edge.style !== 'undefined') {
edgeData.arrowheadStyle = 'fill: #333';
}
} else {
edgeData.arrowheadStyle = 'fill: #333';
edgeData.labelpos = 'c';
if (getConfig().flowchart.htmlLabels) {
edgeData.labelType = 'html';
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
} else {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(/<br\s*\/?>/gi, '\n');
if (typeof edge.style === 'undefined') {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
}
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
}
}
// Add the edge to the graph
g.setEdge(edge.start, edge.end, edgeData, cnt);
});
};
/**
* Returns the all the styles from classDef statements in the graph definition.
* @returns {object} classDef styles
*/
export const getClasses = function(text) {
logger.trace('Extracting classes');
stateDb.clear();
const parser = state.parser;
parser.yy = stateDb;
// Parse the graph definition
parser.parse(text);
return stateDb.getClasses();
};
const setupNode = (g, parent, node) => {
// logger.trace('node', node);
// , {
// labelType: 'svg',
// labelStyle: '',
// shape: 'rect',
// label: node.description || node.id,
// labelText: node.description || node.id,
// rx: 0,
// ry: 0,
// class: 'default', //classStr,
// style: '', //styles.style,
// id: node.id,
// // width: node.type === 'group' ? 500 : undefined,
// // type: node.type,
// padding: 15 //getConfig().flowchart.padding
// });
// Add the node
if (node.id !== 'root') {
if (!nodeDb[node.id]) {
nodeDb[node.id] = {
id: node.id
};
}
// Save data for description and group so that for instance a statement without description overwrites
// one with description
// Description
if (nodeDb[node.id].description) {
nodeDb[node.id].description = node.description;
}
// group
if (!nodeDb[node.id].type && node.doc) {
logger.info('Setting cluser for ', node.id);
nodeDb[node.id].type = 'group';
}
const nodeData = {
labelType: 'svg',
labelStyle: '',
shape: 'rect',
label: node.id,
labelText: node.id,
// label: nodeDb[node.id].description || node.id,
// labelText: nodeDb[node.id].description || node.id,
rx: 0,
ry: 0,
class: 'default', //classStr,
style: '', //styles.style,
id: node.id,
type: nodeDb[node.id].type,
padding: 15 //getConfig().flowchart.padding
};
g.setNode(node.id, nodeData);
logger.warn('nodeData = ', node.id, nodeData);
}
if (parent) {
if (parent.id !== 'root') {
logger.trace('Setting node ', node.id, ' to be child of its parent ', parent.id);
g.setParent(node.id, parent.id);
}
}
if (node.doc) {
logger.trace('Adding nodes children ');
setupDoc(g, node, node.doc);
}
};
let cnt = 0;
const setupDoc = (g, parent, doc) => {
logger.trace('items', doc);
doc.forEach(item => {
if (item.stmt === 'state' || item.stmt === 'default') {
setupNode(g, parent, item);
} else if (item.stmt === 'relation') {
setupNode(g, parent, item.state1);
setupNode(g, parent, item.state2);
const edgeData = {
arrowhead: 'normal',
arrowType: 'arrow_point',
style: 'fill:none',
labelStyle: '',
arrowheadStyle: 'fill: #333',
labelpos: 'c',
labelType: 'text',
label: ''
};
g.setEdge(item.state1.id, item.state2.id, edgeData, cnt);
cnt++;
}
});
};
/**
* Draws a flowchart in the tag with id: id based on the graph definition in text.
* @param text
* @param id
*/
export const draw = function(text, id) {
logger.trace('Drawing state diagram (v2)');
stateDb.clear();
const parser = state.parser;
parser.yy = stateDb;
// Parse the graph definition
try {
parser.parse(text);
} catch (err) {
logger.debug('Parsing failed');
}
// Fetch the default direction, use TD if none was found
let dir = stateDb.getDirection();
if (typeof dir === 'undefined') {
dir = 'TD';
}
const conf = getConfig().state;
const nodeSpacing = conf.nodeSpacing || 50;
const rankSpacing = conf.rankSpacing || 50;
// Create the input mermaid.graph
const g = new graphlib.Graph({
multigraph: true,
compound: true
})
.setGraph({
rankdir: dir,
nodesep: nodeSpacing,
ranksep: rankSpacing,
marginx: 8,
marginy: 8
})
.setDefaultEdgeLabel(function() {
return {};
});
setupNode(g, undefined, stateDb.getRootDoc());
// let subG;
// const subGraphs = stateDb.getSubGraphs();
// for (let i = subGraphs.length - 1; i >= 0; i--) {
// subG = subGraphs[i];
// stateDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
// }
// // Fetch the verices/nodes and edges/links from the parsed graph definition
// const vert = stateDb.getVertices();
// const edges = stateDb.getEdges();
// logger.trace(edges);
// let i = 0;
// for (i = subGraphs.length - 1; i >= 0; i--) {
// subG = subGraphs[i];
// d3.selectAll('cluster').append('text');
// for (let j = 0; j < subG.nodes.length; j++) {
// g.setParent(subG.nodes[j], subG.id);
// }
// }
// addVertices(vert, g, id);
// addEdges(edges, g);
// Add custom shapes
// flowChartShapes.addToRenderV2(addShape);
// Set up an SVG group so that we can translate the final graph.
const svg = d3.select(`[id="${id}"]`);
// Run the renderer. This is what draws the final graph.
const element = d3.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross']);
// // dagre.layout(g);
// element.selectAll('g.node').attr('title', function() {
// return stateDb.getTooltip(this.id);
// });
const padding = 8;
const svgBounds = svg.node().getBBox();
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
logger.debug(
`new ViewBox 0 0 ${width} ${height}`,
`translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
);
if (conf.useMaxWidth) {
svg.attr('width', '100%');
svg.attr('style', `max-width: ${width}px;`);
} else {
svg.attr('height', height);
svg.attr('width', width);
}
svg.attr('viewBox', `0 0 ${width} ${height}`);
svg
.select('g')
.attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
// Index nodes
// stateDb.indexNodes('subGraph' + i);
// // reposition labels
// for (i = 0; i < subGraphs.length; i++) {
// subG = subGraphs[i];
// if (subG.title !== 'undefined') {
// const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
// const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
// const xPos = clusterRects[0].x.baseVal.value;
// const yPos = clusterRects[0].y.baseVal.value;
// const width = clusterRects[0].width.baseVal.value;
// const cluster = d3.select(clusterEl[0]);
// const te = cluster.select('.label');
// te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
// te.attr('id', id + 'Text');
// for (let j = 0; j < subG.classes.length; j++) {
// clusterEl[0].classList.add(subG.classes[j]);
// }
// }
// }
// Add label rects for non html labels
if (!conf.htmlLabels) {
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) {
const label = labels[k];
// Get dimensions of label
const dim = label.getBBox();
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('rx', 0);
rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild);
}
}
// // If node has a link, wrap it in an anchor SVG object.
// const keys = Object.keys(vert);
// keys.forEach(function(key) {
// const vertex = vert[key];
// if (vertex.link) {
// const node = d3.select('#' + id + ' [id="' + key + '"]');
// if (node) {
// const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
// link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
// link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
// link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
// const linkNode = node.insert(function() {
// return link;
// }, ':first-child');
// const shape = node.select('.label-container');
// if (shape) {
// linkNode.append(function() {
// return shape.node();
// });
// }
// const label = node.select('.label');
// if (label) {
// linkNode.append(function() {
// return label.node();
// });
// }
// }
// }
// });
};
export default {
setConf,
addVertices,
addEdges,
getClasses,
draw
};

10
src/mermaidAPI.js
View File

@@ -30,6 +30,7 @@ import classRenderer from './diagrams/class/classRenderer';
import classParser from './diagrams/class/parser/classDiagram'; import classParser from './diagrams/class/parser/classDiagram';
import classDb from './diagrams/class/classDb'; import classDb from './diagrams/class/classDb';
import stateRenderer from './diagrams/state/stateRenderer'; import stateRenderer from './diagrams/state/stateRenderer';
import stateRendererV2 from './diagrams/state/stateRenderer-v2';
import stateParser from './diagrams/state/parser/stateDiagram'; import stateParser from './diagrams/state/parser/stateDiagram';
import stateDb from './diagrams/state/stateDb'; import stateDb from './diagrams/state/stateDb';
import gitGraphRenderer from './diagrams/git/gitGraphRenderer'; import gitGraphRenderer from './diagrams/git/gitGraphRenderer';
@@ -439,6 +440,10 @@ function parse(text) {
parser = stateParser; parser = stateParser;
parser.parser.yy = stateDb; parser.parser.yy = stateDb;
break; break;
case 'stateDiagram':
parser = stateParser;
parser.parser.yy = stateDb;
break;
case 'info': case 'info':
logger.debug('info info info'); logger.debug('info info info');
parser = infoParser; parser = infoParser;
@@ -666,6 +671,11 @@ const render = function(id, _txt, cb, container) {
stateRenderer.setConf(config.state); stateRenderer.setConf(config.state);
stateRenderer.draw(txt, id); stateRenderer.draw(txt, id);
break; break;
case 'stateDiagram':
// config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
stateRendererV2.setConf(config.state);
stateRendererV2.draw(txt, id);
break;
case 'info': case 'info':
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
infoRenderer.setConf(config.class); infoRenderer.setConf(config.class);

3
src/utils.js
View File

@@ -33,6 +33,9 @@ export const detectType = function(text) {
if (text.match(/^\s*classDiagram/)) { if (text.match(/^\s*classDiagram/)) {
return 'class'; return 'class';
} }
if (text.match(/^\s*stateDiagram-v2/)) {
return 'stateDiagram';
}
if (text.match(/^\s*stateDiagram/)) { if (text.match(/^\s*stateDiagram/)) {
return 'state'; return 'state';