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

Add support for changing the length of edges

Browse Source 
Resolves #637, resolves #1495.

The syntax for edges is extended to allow for extra
dashes/equals signs/dots (depending on the edge type). Each added
character increases the length of the edge by one rank level, as
follows:

Length            |    1   |    2    |     3    |
------------------|:------:|:-------:|:--------:|
Normal            |  `---` |  `----` |  `-----` |
Normal with arrow |  `-->` |  `--->` |  `---->` |
Thick             |  `===` |  `====` |  `=====` |
Thick with arrow  |  `==>` |  `===>` |  `====>` |
Dotted            |  `-.-` |  `-..-` |  `-...-` |
Dotted with arrow | `-.->` | `-..->` | `-...->` |

This features leverages the `minlen` property exposed by Dagre which was
not previously available when using Mermaid.
This commit is contained in:
Mattéo Delabre
2020-08-07 01:20:44 +02:00
parent a97cc62d0a
commit 01344a991d
14 changed files with 870 additions and 898 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -110,6 +110,7 @@ export const addSingleLink = function(_start, _end, type, linktext) {
if (typeof type !== 'undefined') {
edge.type = type.type;
edge.stroke = type.stroke;
edge.length = type.length;
}
edges.push(edge);
};
@@ -498,97 +499,92 @@ export const firstGraph = () => {
};
const destructStartLink = _str => {
const str = _str.trim();
let str = _str.trim();
let type = 'arrow_open';
switch (str) {
case '<--':
return { type: 'arrow_point', stroke: 'normal' };
case 'x--':
return { type: 'arrow_cross', stroke: 'normal' };
case 'o--':
return { type: 'arrow_circle', stroke: 'normal' };
case '<-.':
return { type: 'arrow_point', stroke: 'dotted' };
case 'x-.':
return { type: 'arrow_cross', stroke: 'dotted' };
case 'o-.':
return { type: 'arrow_circle', stroke: 'dotted' };
case '<==':
return { type: 'arrow_point', stroke: 'thick' };
case 'x==':
return { type: 'arrow_cross', stroke: 'thick' };
case 'o==':
return { type: 'arrow_circle', stroke: 'thick' };
case '--':
return { type: 'arrow_open', stroke: 'normal' };
case '==':
return { type: 'arrow_open', stroke: 'thick' };
case '-.':
return { type: 'arrow_open', stroke: 'dotted' };
switch (str[0]) {
case '<':
type = 'arrow_point';
str = str.slice(1);
break;
case 'x':
type = 'arrow_cross';
str = str.slice(1);
break;
case 'o':
type = 'arrow_circle';
str = str.slice(1);
break;
}
let stroke = 'normal';
if (str.indexOf('=') !== -1) {
stroke = 'thick';
}
if (str.indexOf('.') !== -1) {
stroke = 'dotted';
}
return { type, stroke };
};
const countChar = (char, str) => {
const length = str.length;
let count = 0;
for (let i = 0; i < length; ++i) {
if (str[i] === char) {
++count;
}
}
return count;
};
const destructEndLink = _str => {
const str = _str.trim();
let line = str.slice(0, -1);
let type = 'arrow_open';
switch (str) {
case '--x':
return { type: 'arrow_cross', stroke: 'normal' };
case '-->':
return { type: 'arrow_point', stroke: 'normal' };
case '<-->':
return { type: 'double_arrow_point', stroke: 'normal' };
case 'x--x':
return { type: 'double_arrow_cross', stroke: 'normal' };
case 'o--o':
return { type: 'double_arrow_circle', stroke: 'normal' };
case 'o.-o':
return { type: 'double_arrow_circle', stroke: 'dotted' };
case '<==>':
return { type: 'double_arrow_point', stroke: 'thick' };
case 'o==o':
return { type: 'double_arrow_circle', stroke: 'thick' };
case 'x==x':
return { type: 'double_arrow_cross', stroke: 'thick' };
case 'x.-x':
return { type: 'double_arrow_cross', stroke: 'dotted' };
case 'x-.-x':
return { type: 'double_arrow_cross', stroke: 'dotted' };
case '<.->':
return { type: 'double_arrow_point', stroke: 'dotted' };
case '<-.->':
return { type: 'double_arrow_point', stroke: 'dotted' };
case 'o-.-o':
return { type: 'double_arrow_circle', stroke: 'dotted' };
case '--o':
return { type: 'arrow_circle', stroke: 'normal' };
case '---':
return { type: 'arrow_open', stroke: 'normal' };
case '-.-x':
return { type: 'arrow_cross', stroke: 'dotted' };
case '-.->':
return { type: 'arrow_point', stroke: 'dotted' };
case '-.-o':
return { type: 'arrow_circle', stroke: 'dotted' };
case '-.-':
return { type: 'arrow_open', stroke: 'dotted' };
case '.-x':
return { type: 'arrow_cross', stroke: 'dotted' };
case '.->':
return { type: 'arrow_point', stroke: 'dotted' };
case '.-o':
return { type: 'arrow_circle', stroke: 'dotted' };
case '.-':
return { type: 'arrow_open', stroke: 'dotted' };
case '==x':
return { type: 'arrow_cross', stroke: 'thick' };
case '==>':
return { type: 'arrow_point', stroke: 'thick' };
case '==o':
return { type: 'arrow_circle', stroke: 'thick' };
case '===':
return { type: 'arrow_open', stroke: 'thick' };
switch (str.slice(-1)) {
case 'x':
type = 'arrow_cross';
if (str[0] === 'x') {
type = 'double_' + type;
line = line.slice(1);
}
break;
case '>':
type = 'arrow_point';
if (str[0] === '<') {
type = 'double_' + type;
line = line.slice(1);
}
break;
case 'o':
type = 'arrow_circle';
if (str[0] === 'o') {
type = 'double_' + type;
line = line.slice(1);
}
break;
}
let stroke = 'normal';
let length = line.length - 1;
if (line[0] === '=') {
stroke = 'thick';
}
let dots = countChar('.', line);
if (dots) {
stroke = 'dotted';
length = dots;
}
return { type, stroke, length };
};
const destructLink = (_str, _startStr) => {
@@ -602,7 +598,7 @@ const destructLink = (_str, _startStr) => {
}
if (startInfo.type === 'arrow_open') {
// -- xyz --> - take arrow type form ending
// -- xyz --> - take arrow type from ending
startInfo.type = info.type;
} else {
// x-- xyz --> - not supported
@@ -615,6 +611,7 @@ const destructLink = (_str, _startStr) => {
startInfo.type = 'double_arrow_point';
}
startInfo.length = info.length;
return startInfo;
}