Updated the docs, updated the sections and fixed some bad links
This commit is contained in:
Knut Sveidqvist
parent
855dec7fcd
commit
7a3ecb339b
|
|
@ -656,7 +656,7 @@ module.exports = function(module) {
|
|||
/*! exports provided: name, version, description, main, keywords, scripts, repository, author, license, standard, dependencies, devDependencies, files, yarn-upgrade-all, sideEffects, husky, default */
|
||||
/***/ (function(module) {
|
||||
|
||||
module.exports = JSON.parse("{\"name\":\"mermaid\",\"version\":\"8.8.2\",\"description\":\"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\",\"main\":\"dist/mermaid.core.js\",\"keywords\":[\"diagram\",\"markdown\",\"flowchart\",\"sequence diagram\",\"gantt\",\"class diagram\",\"git graph\"],\"scripts\":{\"build:development\":\"webpack --progress --colors\",\"build:production\":\"yarn build:development -p --config webpack.config.prod.babel.js\",\"build\":\"yarn build:development && yarn build:production\",\"postbuild\":\"documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false | sed '1i---\\\\nsort: 3\\\\ntitle: Configurations\\\\n---\\\\n' > docs/getting-started/Setup.md\",\"build:watch\":\"yarn build --watch\",\"minify\":\"minify ./dist/mermaid.js > ./dist/mermaid.min.js\",\"release\":\"yarn build\",\"lint\":\"eslint src\",\"e2e:depr\":\"yarn lint && jest e2e --config e2e/jest.config.js\",\"cypress\":\"percy exec -- cypress run\",\"e2e\":\"start-server-and-test dev http://localhost:9000/ cypress\",\"e2e-upd\":\"yarn lint && jest e2e -u --config e2e/jest.config.js\",\"dev\":\"webpack-dev-server --config webpack.config.e2e.js\",\"test\":\"yarn lint && jest src/.*\",\"test:watch\":\"jest --watch src\",\"prepublishOnly\":\"yarn build && yarn test\",\"prepare\":\"yarn build\"},\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/knsv/mermaid\"},\"author\":\"Knut Sveidqvist\",\"license\":\"MIT\",\"standard\":{\"ignore\":[\"**/parser/*.js\",\"dist/**/*.js\",\"cypress/**/*.js\"],\"globals\":[\"page\"]},\"dependencies\":{\"@braintree/sanitize-url\":\"^3.1.0\",\"babel-eslint\":\"^10.1.0\",\"d3\":\"^5.7.0\",\"dagre\":\"^0.8.4\",\"dagre-d3\":\"^0.6.4\",\"entity-decode\":\"^2.0.2\",\"graphlib\":\"^2.1.7\",\"he\":\"^1.2.0\",\"khroma\":\"^1.1.0\",\"minify\":\"^4.1.1\",\"moment-mini\":\"^2.22.1\",\"stylis\":\"^3.5.2\"},\"devDependencies\":{\"@babel/core\":\"^7.2.2\",\"@babel/preset-env\":\"^7.8.4\",\"@babel/register\":\"^7.0.0\",\"@percy/cypress\":\"*\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^24.9.0\",\"babel-loader\":\"^8.0.4\",\"coveralls\":\"^3.0.2\",\"css-loader\":\"^2.0.1\",\"css-to-string-loader\":\"^0.1.3\",\"cypress\":\"4.0.1\",\"documentation\":\"^12.0.1\",\"eslint\":\"^6.3.0\",\"eslint-config-prettier\":\"^6.3.0\",\"eslint-plugin-prettier\":\"^3.1.0\",\"husky\":\"^1.2.1\",\"identity-obj-proxy\":\"^3.0.0\",\"jest\":\"^24.9.0\",\"jison\":\"^0.4.18\",\"moment\":\"^2.23.0\",\"node-sass\":\"^4.12.0\",\"prettier\":\"^1.18.2\",\"puppeteer\":\"^1.17.0\",\"sass-loader\":\"^7.1.0\",\"start-server-and-test\":\"^1.10.6\",\"terser-webpack-plugin\":\"^2.2.2\",\"webpack\":\"^4.41.2\",\"webpack-bundle-analyzer\":\"^3.7.0\",\"webpack-cli\":\"^3.1.2\",\"webpack-dev-server\":\"^3.4.1\",\"webpack-node-externals\":\"^1.7.2\",\"yarn-upgrade-all\":\"^0.5.0\"},\"files\":[\"dist\"],\"yarn-upgrade-all\":{\"ignore\":[\"babel-core\"]},\"sideEffects\":[\"**/*.css\",\"**/*.scss\"],\"husky\":{\"hooks\":{\"pre-push\":\"yarn test\"}}}");
|
||||
module.exports = JSON.parse("{\"name\":\"mermaid\",\"version\":\"8.8.3\",\"description\":\"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\",\"main\":\"dist/mermaid.core.js\",\"keywords\":[\"diagram\",\"markdown\",\"flowchart\",\"sequence diagram\",\"gantt\",\"class diagram\",\"git graph\"],\"scripts\":{\"build:development\":\"webpack --progress --colors\",\"build:production\":\"yarn build:development -p --config webpack.config.prod.babel.js\",\"build\":\"yarn build:development && yarn build:production\",\"postbuild\":\"documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false > docs/Setup.md\",\"build:watch\":\"yarn build --watch\",\"minify\":\"minify ./dist/mermaid.js > ./dist/mermaid.min.js\",\"release\":\"yarn build\",\"lint\":\"eslint src\",\"e2e:depr\":\"yarn lint && jest e2e --config e2e/jest.config.js\",\"cypress\":\"percy exec -- cypress run\",\"e2e\":\"start-server-and-test dev http://localhost:9000/ cypress\",\"e2e-upd\":\"yarn lint && jest e2e -u --config e2e/jest.config.js\",\"dev\":\"webpack-dev-server --config webpack.config.e2e.js\",\"test\":\"yarn lint && jest src/.*\",\"test:watch\":\"jest --watch src\",\"prepublishOnly\":\"yarn build && yarn test\",\"prepare\":\"yarn build\"},\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/knsv/mermaid\"},\"author\":\"Knut Sveidqvist\",\"license\":\"MIT\",\"standard\":{\"ignore\":[\"**/parser/*.js\",\"dist/**/*.js\",\"cypress/**/*.js\"],\"globals\":[\"page\"]},\"dependencies\":{\"@braintree/sanitize-url\":\"^3.1.0\",\"babel-eslint\":\"^10.1.0\",\"d3\":\"^5.7.0\",\"dagre\":\"^0.8.4\",\"dagre-d3\":\"^0.6.4\",\"entity-decode\":\"^2.0.2\",\"graphlib\":\"^2.1.7\",\"he\":\"^1.2.0\",\"khroma\":\"^1.1.0\",\"minify\":\"^4.1.1\",\"moment-mini\":\"^2.22.1\",\"stylis\":\"^3.5.2\"},\"devDependencies\":{\"@babel/core\":\"^7.2.2\",\"@babel/preset-env\":\"^7.8.4\",\"@babel/register\":\"^7.0.0\",\"@percy/cypress\":\"*\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^24.9.0\",\"babel-loader\":\"^8.0.4\",\"coveralls\":\"^3.0.2\",\"css-loader\":\"^2.0.1\",\"css-to-string-loader\":\"^0.1.3\",\"cypress\":\"4.0.1\",\"documentation\":\"^12.0.1\",\"eslint\":\"^6.3.0\",\"eslint-config-prettier\":\"^6.3.0\",\"eslint-plugin-prettier\":\"^3.1.0\",\"husky\":\"^1.2.1\",\"identity-obj-proxy\":\"^3.0.0\",\"jest\":\"^24.9.0\",\"jison\":\"^0.4.18\",\"moment\":\"^2.23.0\",\"node-sass\":\"^4.12.0\",\"prettier\":\"^1.18.2\",\"puppeteer\":\"^1.17.0\",\"sass-loader\":\"^7.1.0\",\"start-server-and-test\":\"^1.10.6\",\"terser-webpack-plugin\":\"^2.2.2\",\"webpack\":\"^4.41.2\",\"webpack-bundle-analyzer\":\"^3.7.0\",\"webpack-cli\":\"^3.1.2\",\"webpack-dev-server\":\"^3.4.1\",\"webpack-node-externals\":\"^1.7.2\",\"yarn-upgrade-all\":\"^0.5.0\"},\"files\":[\"dist\"],\"yarn-upgrade-all\":{\"ignore\":[\"babel-core\"]},\"sideEffects\":[\"**/*.css\",\"**/*.scss\"],\"husky\":{\"hooks\":{\"pre-push\":\"yarn test\"}}}");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -896,7 +896,7 @@ __webpack_require__.r(__webpack_exports__);
|
|||
var rect = function rect(parent, node) {
|
||||
_logger__WEBPACK_IMPORTED_MODULE_1__["logger"].trace('Creating subgraph rect for ', node.id, node); // Add outer g element
|
||||
|
||||
var shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id); // add the rect
|
||||
var shapeSvg = parent.insert('g').attr('class', 'cluster' + (node.class ? ' ' + node.class : '')).attr('id', node.id); // add the rect
|
||||
|
||||
var rect = shapeSvg.insert('rect', ':first-child'); // Create the label and insert it after the rect
|
||||
|
||||
|
|
@ -1138,7 +1138,8 @@ var createLabel = function createLabel(_vertexText, style, isTitle, isNode) {
|
|||
isNode: isNode,
|
||||
label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, function (s) {
|
||||
return "<i class='".concat(s.replace(':', ' '), "'></i>");
|
||||
})
|
||||
}),
|
||||
labelStyle: style.replace('fill:', 'color:')
|
||||
};
|
||||
var vertexNode = addHtmlLabel(node); // vertexNode.parentNode.removeChild(vertexNode);
|
||||
|
||||
|
|
@ -1466,7 +1467,7 @@ var intersection = function intersection(node, outsidePoint, insidePoint) {
|
|||
r = R * q / Q;
|
||||
var res = {
|
||||
x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - r,
|
||||
y: outsidePoint.y + q
|
||||
y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - q
|
||||
};
|
||||
_logger__WEBPACK_IMPORTED_MODULE_0__["logger"].warn("topp/bott calc, Q ".concat(Q, ", q ").concat(q, ", R ").concat(R, ", r ").concat(r), res);
|
||||
return res;
|
||||
|
|
@ -1618,7 +1619,7 @@ var insertEdge = function insertEdge(elem, e, edge, clusterDb, diagramType, grap
|
|||
break;
|
||||
}
|
||||
|
||||
var svgPath = elem.append('path').attr('d', lineFunction(lineData)).attr('id', edge.id).attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')); // DEBUG code, adds a red circle at each edge coordinate
|
||||
var svgPath = elem.append('path').attr('d', lineFunction(lineData)).attr('id', edge.id).attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')).attr('style', edge.style); // DEBUG code, adds a red circle at each edge coordinate
|
||||
// edge.points.forEach(point => {
|
||||
// elem
|
||||
// .append('circle')
|
||||
|
|
@ -7359,7 +7360,7 @@ var parser = {trace: function trace () { },
|
|||
yy: {},
|
||||
symbols_: {"error":2,"start":3,"ER_DIAGRAM":4,"document":5,"EOF":6,"directive":7,"line":8,"SPACE":9,"statement":10,"NEWLINE":11,"openDirective":12,"typeDirective":13,"closeDirective":14,":":15,"argDirective":16,"entityName":17,"relSpec":18,"role":19,"ALPHANUM":20,"cardinality":21,"relType":22,"ZERO_OR_ONE":23,"ZERO_OR_MORE":24,"ONE_OR_MORE":25,"ONLY_ONE":26,"NON_IDENTIFYING":27,"IDENTIFYING":28,"WORD":29,"open_directive":30,"type_directive":31,"arg_directive":32,"close_directive":33,"$accept":0,"$end":1},
|
||||
terminals_: {2:"error",4:"ER_DIAGRAM",6:"EOF",9:"SPACE",11:"NEWLINE",15:":",20:"ALPHANUM",23:"ZERO_OR_ONE",24:"ZERO_OR_MORE",25:"ONE_OR_MORE",26:"ONLY_ONE",27:"NON_IDENTIFYING",28:"IDENTIFYING",29:"WORD",30:"open_directive",31:"type_directive",32:"arg_directive",33:"close_directive"},
|
||||
productions_: [0,[3,3],[3,2],[5,0],[5,2],[8,2],[8,1],[8,1],[8,1],[7,4],[7,6],[10,1],[10,5],[17,1],[18,3],[21,1],[21,1],[21,1],[21,1],[22,1],[22,1],[19,1],[19,1],[12,1],[13,1],[16,1],[14,1]],
|
||||
productions_: [0,[3,3],[3,2],[5,0],[5,2],[8,2],[8,1],[8,1],[8,1],[7,4],[7,6],[10,1],[10,5],[10,1],[17,1],[18,3],[21,1],[21,1],[21,1],[21,1],[22,1],[22,1],[19,1],[19,1],[12,1],[13,1],[16,1],[14,1]],
|
||||
performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {
|
||||
/* this == yyval */
|
||||
|
||||
|
|
@ -7389,54 +7390,57 @@ case 12:
|
|||
|
||||
break;
|
||||
case 13:
|
||||
this.$ = $$[$0]; /*console.log('Entity: ' + $$[$0]);*/
|
||||
yy.addEntity($$[$0]);
|
||||
break;
|
||||
case 14:
|
||||
this.$ = $$[$0]; /*console.log('Entity: ' + $$[$0]);*/
|
||||
break;
|
||||
case 15:
|
||||
|
||||
this.$ = { cardA: $$[$0], relType: $$[$0-1], cardB: $$[$0-2] };
|
||||
/*console.log('relSpec: ' + $$[$0] + $$[$0-1] + $$[$0-2]);*/
|
||||
|
||||
break;
|
||||
case 15:
|
||||
case 16:
|
||||
this.$ = yy.Cardinality.ZERO_OR_ONE;
|
||||
break;
|
||||
case 16:
|
||||
case 17:
|
||||
this.$ = yy.Cardinality.ZERO_OR_MORE;
|
||||
break;
|
||||
case 17:
|
||||
case 18:
|
||||
this.$ = yy.Cardinality.ONE_OR_MORE;
|
||||
break;
|
||||
case 18:
|
||||
case 19:
|
||||
this.$ = yy.Cardinality.ONLY_ONE;
|
||||
break;
|
||||
case 19:
|
||||
case 20:
|
||||
this.$ = yy.Identification.NON_IDENTIFYING;
|
||||
break;
|
||||
case 20:
|
||||
case 21:
|
||||
this.$ = yy.Identification.IDENTIFYING;
|
||||
break;
|
||||
case 21:
|
||||
case 22:
|
||||
this.$ = $$[$0].replace(/"/g, '');
|
||||
break;
|
||||
case 22:
|
||||
case 23:
|
||||
this.$ = $$[$0];
|
||||
break;
|
||||
case 23:
|
||||
case 24:
|
||||
yy.parseDirective('%%{', 'open_directive');
|
||||
break;
|
||||
case 24:
|
||||
case 25:
|
||||
yy.parseDirective($$[$0], 'type_directive');
|
||||
break;
|
||||
case 25:
|
||||
case 26:
|
||||
$$[$0] = $$[$0].trim().replace(/'/g, '"'); yy.parseDirective($$[$0], 'arg_directive');
|
||||
break;
|
||||
case 26:
|
||||
case 27:
|
||||
yy.parseDirective('}%%', 'close_directive', 'er');
|
||||
break;
|
||||
}
|
||||
},
|
||||
table: [{3:1,4:$V0,7:3,12:4,30:$V1},{1:[3]},o($V2,[2,3],{5:6}),{3:7,4:$V0,7:3,12:4,30:$V1},{13:8,31:[1,9]},{31:[2,23]},{6:[1,10],7:15,8:11,9:[1,12],10:13,11:[1,14],12:4,17:16,20:$V3,30:$V1},{1:[2,2]},{14:18,15:[1,19],33:$V4},o([15,33],[2,24]),o($V2,[2,8],{1:[2,1]}),o($V2,[2,4]),{7:15,10:21,12:4,17:16,20:$V3,30:$V1},o($V2,[2,6]),o($V2,[2,7]),o($V2,[2,11]),{18:22,21:23,23:$V5,24:$V6,25:$V7,26:$V8},o([15,23,24,25,26],[2,13]),{11:[1,28]},{16:29,32:[1,30]},{11:[2,26]},o($V2,[2,5]),{17:31,20:$V3},{22:32,27:[1,33],28:[1,34]},o($V9,[2,15]),o($V9,[2,16]),o($V9,[2,17]),o($V9,[2,18]),o($Va,[2,9]),{14:35,33:$V4},{33:[2,25]},{15:[1,36]},{21:37,23:$V5,24:$V6,25:$V7,26:$V8},o($Vb,[2,19]),o($Vb,[2,20]),{11:[1,38]},{19:39,20:[1,41],29:[1,40]},{20:[2,14]},o($Va,[2,10]),o($V2,[2,12]),o($V2,[2,21]),o($V2,[2,22])],
|
||||
defaultActions: {5:[2,23],7:[2,2],20:[2,26],30:[2,25],37:[2,14]},
|
||||
table: [{3:1,4:$V0,7:3,12:4,30:$V1},{1:[3]},o($V2,[2,3],{5:6}),{3:7,4:$V0,7:3,12:4,30:$V1},{13:8,31:[1,9]},{31:[2,24]},{6:[1,10],7:15,8:11,9:[1,12],10:13,11:[1,14],12:4,17:16,20:$V3,30:$V1},{1:[2,2]},{14:18,15:[1,19],33:$V4},o([15,33],[2,25]),o($V2,[2,8],{1:[2,1]}),o($V2,[2,4]),{7:15,10:21,12:4,17:16,20:$V3,30:$V1},o($V2,[2,6]),o($V2,[2,7]),o($V2,[2,11]),o($V2,[2,13],{18:22,21:23,23:$V5,24:$V6,25:$V7,26:$V8}),o([6,9,11,15,20,23,24,25,26,30],[2,14]),{11:[1,28]},{16:29,32:[1,30]},{11:[2,27]},o($V2,[2,5]),{17:31,20:$V3},{22:32,27:[1,33],28:[1,34]},o($V9,[2,16]),o($V9,[2,17]),o($V9,[2,18]),o($V9,[2,19]),o($Va,[2,9]),{14:35,33:$V4},{33:[2,26]},{15:[1,36]},{21:37,23:$V5,24:$V6,25:$V7,26:$V8},o($Vb,[2,20]),o($Vb,[2,21]),{11:[1,38]},{19:39,20:[1,41],29:[1,40]},{20:[2,15]},o($Va,[2,10]),o($V2,[2,12]),o($V2,[2,22]),o($V2,[2,23])],
|
||||
defaultActions: {5:[2,24],7:[2,2],20:[2,27],30:[2,26],37:[2,15]},
|
||||
parseError: function parseError (str, hash) {
|
||||
if (hash.recoverable) {
|
||||
this.trace(str);
|
||||
|
|
@ -7969,7 +7973,7 @@ case 25:return 6;
|
|||
break;
|
||||
}
|
||||
},
|
||||
rules: [/^(?:%%\{)/i,/^(?:((?:(?!\}%%)[^:.])*))/i,/^(?::)/i,/^(?:\}%%)/i,/^(?:((?:(?!\}%%).|\n)*))/i,/^(?:%(?!\{)[^\n]*)/i,/^(?:[^\}]%%[^\n]*)/i,/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:[\s]+)/i,/^(?:"[^"]*")/i,/^(?:erDiagram\b)/i,/^(?:\|o\b)/i,/^(?:\}o\b)/i,/^(?:\}\|)/i,/^(?:\|\|)/i,/^(?:o\|)/i,/^(?:o\{)/i,/^(?:\|\{)/i,/^(?:\.\.)/i,/^(?:--)/i,/^(?:\.-)/i,/^(?:-\.)/i,/^(?:[A-Za-z][A-Za-z0-9\-]*)/i,/^(?:.)/i,/^(?:$)/i],
|
||||
rules: [/^(?:%%\{)/i,/^(?:((?:(?!\}%%)[^:.])*))/i,/^(?::)/i,/^(?:\}%%)/i,/^(?:((?:(?!\}%%).|\n)*))/i,/^(?:%(?!\{)[^\n]*)/i,/^(?:[^\}]%%[^\n]*)/i,/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:[\s]+)/i,/^(?:"[^"]*")/i,/^(?:erDiagram\b)/i,/^(?:\|o\b)/i,/^(?:\}o\b)/i,/^(?:\}\|)/i,/^(?:\|\|)/i,/^(?:o\|)/i,/^(?:o\{)/i,/^(?:\|\{)/i,/^(?:\.\.)/i,/^(?:--)/i,/^(?:\.-)/i,/^(?:-\.)/i,/^(?:[A-Za-z][A-Za-z0-9\-_]*)/i,/^(?:.)/i,/^(?:$)/i],
|
||||
conditions: {"open_directive":{"rules":[1],"inclusive":false},"type_directive":{"rules":[2,3],"inclusive":false},"arg_directive":{"rules":[3,4],"inclusive":false},"INITIAL":{"rules":[0,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],"inclusive":true}}
|
||||
});
|
||||
return lexer;
|
||||
|
|
@ -9472,7 +9476,10 @@ var addEdges = function addEdges(edges, g) {
|
|||
var linkId = 'L-' + edge.start + '-' + edge.end;
|
||||
var linkNameStart = 'LS-' + edge.start;
|
||||
var linkNameEnd = 'LE-' + edge.end;
|
||||
var edgeData = {};
|
||||
var edgeData = {
|
||||
style: '',
|
||||
labelStyle: ''
|
||||
};
|
||||
edgeData.minlen = edge.length || 1; //edgeData.id = 'id' + cnt;
|
||||
// Set link type for rendering
|
||||
|
||||
|
|
@ -9508,51 +9515,48 @@ var addEdges = function addEdges(edges, g) {
|
|||
case 'arrow_circle':
|
||||
edgeData.arrowTypeEnd = 'arrow_circle';
|
||||
break;
|
||||
} // logger.info('apa', edgeData, edge);
|
||||
// edgeData.arrowTypeStart = edge.arrowTypeStart;
|
||||
// edgeData.arrowTypeStart = edge.arrowTypeStart;
|
||||
// edgeData.arrowType = edgeData.arrowTypeEnd;
|
||||
// logger.info('apa', edgeData, edge);
|
||||
|
||||
}
|
||||
|
||||
var style = '';
|
||||
var labelStyle = '';
|
||||
|
||||
switch (edge.stroke) {
|
||||
case 'normal':
|
||||
style = 'fill:none;';
|
||||
|
||||
if (typeof defaultStyle !== 'undefined') {
|
||||
style = defaultStyle;
|
||||
}
|
||||
|
||||
if (typeof defaultLabelStyle !== 'undefined') {
|
||||
labelStyle = defaultLabelStyle;
|
||||
}
|
||||
|
||||
edgeData.thickness = 'normal';
|
||||
edgeData.pattern = 'solid';
|
||||
break;
|
||||
|
||||
case 'dotted':
|
||||
edgeData.thickness = 'normal';
|
||||
edgeData.pattern = 'dotted';
|
||||
edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
|
||||
break;
|
||||
|
||||
case 'thick':
|
||||
edgeData.thickness = 'thick';
|
||||
edgeData.pattern = 'solid';
|
||||
edgeData.style = 'stroke-width: 3.5px;fill:none;';
|
||||
break;
|
||||
}
|
||||
|
||||
if (typeof edge.style !== 'undefined') {
|
||||
var styles = Object(_utils__WEBPACK_IMPORTED_MODULE_9__["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;
|
||||
}
|
||||
|
||||
edgeData.thickness = 'normal';
|
||||
edgeData.pattern = 'solid';
|
||||
break;
|
||||
|
||||
case 'dotted':
|
||||
edgeData.thickness = 'normal';
|
||||
edgeData.pattern = 'dotted';
|
||||
break;
|
||||
|
||||
case 'thick':
|
||||
edgeData.thickness = 'thick';
|
||||
edgeData.pattern = 'solid';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
edgeData.style = style;
|
||||
edgeData.labelStyle = labelStyle;
|
||||
edgeData.style = edgeData.style += style;
|
||||
edgeData.labelStyle = edgeData.labelStyle += labelStyle;
|
||||
|
||||
if (typeof edge.interpolate !== 'undefined') {
|
||||
edgeData.curve = Object(_utils__WEBPACK_IMPORTED_MODULE_9__["interpolateToCurve"])(edge.interpolate, d3__WEBPACK_IMPORTED_MODULE_1__["curveLinear"]);
|
||||
|
|
@ -9569,23 +9573,22 @@ var addEdges = function addEdges(edges, g) {
|
|||
} else {
|
||||
edgeData.arrowheadStyle = 'fill: #333';
|
||||
edgeData.labelpos = 'c';
|
||||
} // if (getConfig().flowchart.htmlLabels && false) {
|
||||
// // eslint-disable-line
|
||||
// edgeData.labelType = 'html';
|
||||
// edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
|
||||
// } else {
|
||||
|
||||
if (Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().flowchart.htmlLabels && false) {
|
||||
// eslint-disable-line
|
||||
edgeData.labelType = 'html';
|
||||
edgeData.label = "<span id=\"L-".concat(linkId, "\" class=\"edgeLabel L-").concat(linkNameStart, "' L-").concat(linkNameEnd, "\">").concat(edge.text, "</span>");
|
||||
} else {
|
||||
edgeData.labelType = 'text';
|
||||
edgeData.label = edge.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_8__["default"].lineBreakRegex, '\n');
|
||||
|
||||
if (typeof edge.style === 'undefined') {
|
||||
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
|
||||
}
|
||||
edgeData.labelType = 'text';
|
||||
edgeData.label = edge.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_8__["default"].lineBreakRegex, '\n');
|
||||
|
||||
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
|
||||
}
|
||||
if (typeof edge.style === 'undefined') {
|
||||
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
|
||||
}
|
||||
|
||||
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); // }
|
||||
|
||||
edgeData.id = linkId;
|
||||
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; // Add the edge to the graph
|
||||
|
||||
|
|
@ -10044,7 +10047,9 @@ var addEdges = function addEdges(edges, g) {
|
|||
|
||||
if (Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().flowchart.htmlLabels) {
|
||||
edgeData.labelType = 'html';
|
||||
edgeData.label = "<span id=\"L-".concat(linkId, "\" class=\"edgeLabel L-").concat(linkNameStart, "' L-").concat(linkNameEnd, "\">").concat(edge.text, "</span>");
|
||||
edgeData.label = "<span id=\"L-".concat(linkId, "\" class=\"edgeLabel L-").concat(linkNameStart, "' L-").concat(linkNameEnd, "\">").concat(edge.text.replace(/fa[lrsb]?:fa-[\w-]+/g, function (s) {
|
||||
return "<i class='".concat(s.replace(':', ' '), "'></i>");
|
||||
}), "</span>");
|
||||
} else {
|
||||
edgeData.labelType = 'text';
|
||||
edgeData.label = edge.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_8__["default"].lineBreakRegex, '\n');
|
||||
|
|
@ -23751,7 +23756,7 @@ function () {
|
|||
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
|
||||
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
|
||||
this.titleColor = this.titleColor || this.tertiaryTextColor;
|
||||
this.edgeLabelBackground = this.edgeLabelBackground || this.darkMode ? Object(khroma__WEBPACK_IMPORTED_MODULE_0__["darken"])(this.secondaryColor, 30) : this.secondaryColor;
|
||||
this.edgeLabelBackground = this.edgeLabelBackground || (this.darkMode ? Object(khroma__WEBPACK_IMPORTED_MODULE_0__["darken"])(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
|
||||
/* Sequence Diagram variables */
|
||||
// this.actorBorder = lighten(this.border1, 0.5);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -49035,7 +49035,7 @@ module.exports = function(module) {
|
|||
/*! exports provided: name, version, description, main, keywords, scripts, repository, author, license, standard, dependencies, devDependencies, files, yarn-upgrade-all, sideEffects, husky, default */
|
||||
/***/ (function(module) {
|
||||
|
||||
module.exports = JSON.parse("{\"name\":\"mermaid\",\"version\":\"8.8.2\",\"description\":\"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\",\"main\":\"dist/mermaid.core.js\",\"keywords\":[\"diagram\",\"markdown\",\"flowchart\",\"sequence diagram\",\"gantt\",\"class diagram\",\"git graph\"],\"scripts\":{\"build:development\":\"webpack --progress --colors\",\"build:production\":\"yarn build:development -p --config webpack.config.prod.babel.js\",\"build\":\"yarn build:development && yarn build:production\",\"postbuild\":\"documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false | sed '1i---\\\\nsort: 3\\\\ntitle: Configurations\\\\n---\\\\n' > docs/getting-started/Setup.md\",\"build:watch\":\"yarn build --watch\",\"minify\":\"minify ./dist/mermaid.js > ./dist/mermaid.min.js\",\"release\":\"yarn build\",\"lint\":\"eslint src\",\"e2e:depr\":\"yarn lint && jest e2e --config e2e/jest.config.js\",\"cypress\":\"percy exec -- cypress run\",\"e2e\":\"start-server-and-test dev http://localhost:9000/ cypress\",\"e2e-upd\":\"yarn lint && jest e2e -u --config e2e/jest.config.js\",\"dev\":\"webpack-dev-server --config webpack.config.e2e.js\",\"test\":\"yarn lint && jest src/.*\",\"test:watch\":\"jest --watch src\",\"prepublishOnly\":\"yarn build && yarn test\",\"prepare\":\"yarn build\"},\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/knsv/mermaid\"},\"author\":\"Knut Sveidqvist\",\"license\":\"MIT\",\"standard\":{\"ignore\":[\"**/parser/*.js\",\"dist/**/*.js\",\"cypress/**/*.js\"],\"globals\":[\"page\"]},\"dependencies\":{\"@braintree/sanitize-url\":\"^3.1.0\",\"babel-eslint\":\"^10.1.0\",\"d3\":\"^5.7.0\",\"dagre\":\"^0.8.4\",\"dagre-d3\":\"^0.6.4\",\"entity-decode\":\"^2.0.2\",\"graphlib\":\"^2.1.7\",\"he\":\"^1.2.0\",\"khroma\":\"^1.1.0\",\"minify\":\"^4.1.1\",\"moment-mini\":\"^2.22.1\",\"stylis\":\"^3.5.2\"},\"devDependencies\":{\"@babel/core\":\"^7.2.2\",\"@babel/preset-env\":\"^7.8.4\",\"@babel/register\":\"^7.0.0\",\"@percy/cypress\":\"*\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^24.9.0\",\"babel-loader\":\"^8.0.4\",\"coveralls\":\"^3.0.2\",\"css-loader\":\"^2.0.1\",\"css-to-string-loader\":\"^0.1.3\",\"cypress\":\"4.0.1\",\"documentation\":\"^12.0.1\",\"eslint\":\"^6.3.0\",\"eslint-config-prettier\":\"^6.3.0\",\"eslint-plugin-prettier\":\"^3.1.0\",\"husky\":\"^1.2.1\",\"identity-obj-proxy\":\"^3.0.0\",\"jest\":\"^24.9.0\",\"jison\":\"^0.4.18\",\"moment\":\"^2.23.0\",\"node-sass\":\"^4.12.0\",\"prettier\":\"^1.18.2\",\"puppeteer\":\"^1.17.0\",\"sass-loader\":\"^7.1.0\",\"start-server-and-test\":\"^1.10.6\",\"terser-webpack-plugin\":\"^2.2.2\",\"webpack\":\"^4.41.2\",\"webpack-bundle-analyzer\":\"^3.7.0\",\"webpack-cli\":\"^3.1.2\",\"webpack-dev-server\":\"^3.4.1\",\"webpack-node-externals\":\"^1.7.2\",\"yarn-upgrade-all\":\"^0.5.0\"},\"files\":[\"dist\"],\"yarn-upgrade-all\":{\"ignore\":[\"babel-core\"]},\"sideEffects\":[\"**/*.css\",\"**/*.scss\"],\"husky\":{\"hooks\":{\"pre-push\":\"yarn test\"}}}");
|
||||
module.exports = JSON.parse("{\"name\":\"mermaid\",\"version\":\"8.8.3\",\"description\":\"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\",\"main\":\"dist/mermaid.core.js\",\"keywords\":[\"diagram\",\"markdown\",\"flowchart\",\"sequence diagram\",\"gantt\",\"class diagram\",\"git graph\"],\"scripts\":{\"build:development\":\"webpack --progress --colors\",\"build:production\":\"yarn build:development -p --config webpack.config.prod.babel.js\",\"build\":\"yarn build:development && yarn build:production\",\"postbuild\":\"documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false > docs/Setup.md\",\"build:watch\":\"yarn build --watch\",\"minify\":\"minify ./dist/mermaid.js > ./dist/mermaid.min.js\",\"release\":\"yarn build\",\"lint\":\"eslint src\",\"e2e:depr\":\"yarn lint && jest e2e --config e2e/jest.config.js\",\"cypress\":\"percy exec -- cypress run\",\"e2e\":\"start-server-and-test dev http://localhost:9000/ cypress\",\"e2e-upd\":\"yarn lint && jest e2e -u --config e2e/jest.config.js\",\"dev\":\"webpack-dev-server --config webpack.config.e2e.js\",\"test\":\"yarn lint && jest src/.*\",\"test:watch\":\"jest --watch src\",\"prepublishOnly\":\"yarn build && yarn test\",\"prepare\":\"yarn build\"},\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/knsv/mermaid\"},\"author\":\"Knut Sveidqvist\",\"license\":\"MIT\",\"standard\":{\"ignore\":[\"**/parser/*.js\",\"dist/**/*.js\",\"cypress/**/*.js\"],\"globals\":[\"page\"]},\"dependencies\":{\"@braintree/sanitize-url\":\"^3.1.0\",\"babel-eslint\":\"^10.1.0\",\"d3\":\"^5.7.0\",\"dagre\":\"^0.8.4\",\"dagre-d3\":\"^0.6.4\",\"entity-decode\":\"^2.0.2\",\"graphlib\":\"^2.1.7\",\"he\":\"^1.2.0\",\"khroma\":\"^1.1.0\",\"minify\":\"^4.1.1\",\"moment-mini\":\"^2.22.1\",\"stylis\":\"^3.5.2\"},\"devDependencies\":{\"@babel/core\":\"^7.2.2\",\"@babel/preset-env\":\"^7.8.4\",\"@babel/register\":\"^7.0.0\",\"@percy/cypress\":\"*\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^24.9.0\",\"babel-loader\":\"^8.0.4\",\"coveralls\":\"^3.0.2\",\"css-loader\":\"^2.0.1\",\"css-to-string-loader\":\"^0.1.3\",\"cypress\":\"4.0.1\",\"documentation\":\"^12.0.1\",\"eslint\":\"^6.3.0\",\"eslint-config-prettier\":\"^6.3.0\",\"eslint-plugin-prettier\":\"^3.1.0\",\"husky\":\"^1.2.1\",\"identity-obj-proxy\":\"^3.0.0\",\"jest\":\"^24.9.0\",\"jison\":\"^0.4.18\",\"moment\":\"^2.23.0\",\"node-sass\":\"^4.12.0\",\"prettier\":\"^1.18.2\",\"puppeteer\":\"^1.17.0\",\"sass-loader\":\"^7.1.0\",\"start-server-and-test\":\"^1.10.6\",\"terser-webpack-plugin\":\"^2.2.2\",\"webpack\":\"^4.41.2\",\"webpack-bundle-analyzer\":\"^3.7.0\",\"webpack-cli\":\"^3.1.2\",\"webpack-dev-server\":\"^3.4.1\",\"webpack-node-externals\":\"^1.7.2\",\"yarn-upgrade-all\":\"^0.5.0\"},\"files\":[\"dist\"],\"yarn-upgrade-all\":{\"ignore\":[\"babel-core\"]},\"sideEffects\":[\"**/*.css\",\"**/*.scss\"],\"husky\":{\"hooks\":{\"pre-push\":\"yarn test\"}}}");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -49274,7 +49274,7 @@ __webpack_require__.r(__webpack_exports__);
|
|||
var rect = function rect(parent, node) {
|
||||
_logger__WEBPACK_IMPORTED_MODULE_1__["logger"].trace('Creating subgraph rect for ', node.id, node); // Add outer g element
|
||||
|
||||
var shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id); // add the rect
|
||||
var shapeSvg = parent.insert('g').attr('class', 'cluster' + (node.class ? ' ' + node.class : '')).attr('id', node.id); // add the rect
|
||||
|
||||
var rect = shapeSvg.insert('rect', ':first-child'); // Create the label and insert it after the rect
|
||||
|
||||
|
|
@ -49515,7 +49515,8 @@ var createLabel = function createLabel(_vertexText, style, isTitle, isNode) {
|
|||
isNode: isNode,
|
||||
label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, function (s) {
|
||||
return "<i class='".concat(s.replace(':', ' '), "'></i>");
|
||||
})
|
||||
}),
|
||||
labelStyle: style.replace('fill:', 'color:')
|
||||
};
|
||||
var vertexNode = addHtmlLabel(node); // vertexNode.parentNode.removeChild(vertexNode);
|
||||
|
||||
|
|
@ -49842,7 +49843,7 @@ var intersection = function intersection(node, outsidePoint, insidePoint) {
|
|||
r = R * q / Q;
|
||||
var res = {
|
||||
x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - r,
|
||||
y: outsidePoint.y + q
|
||||
y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - q
|
||||
};
|
||||
_logger__WEBPACK_IMPORTED_MODULE_0__["logger"].warn("topp/bott calc, Q ".concat(Q, ", q ").concat(q, ", R ").concat(R, ", r ").concat(r), res);
|
||||
return res;
|
||||
|
|
@ -49994,7 +49995,7 @@ var insertEdge = function insertEdge(elem, e, edge, clusterDb, diagramType, grap
|
|||
break;
|
||||
}
|
||||
|
||||
var svgPath = elem.append('path').attr('d', lineFunction(lineData)).attr('id', edge.id).attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')); // DEBUG code, adds a red circle at each edge coordinate
|
||||
var svgPath = elem.append('path').attr('d', lineFunction(lineData)).attr('id', edge.id).attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')).attr('style', edge.style); // DEBUG code, adds a red circle at each edge coordinate
|
||||
// edge.points.forEach(point => {
|
||||
// elem
|
||||
// .append('circle')
|
||||
|
|
@ -55728,7 +55729,7 @@ var parser = {trace: function trace () { },
|
|||
yy: {},
|
||||
symbols_: {"error":2,"start":3,"ER_DIAGRAM":4,"document":5,"EOF":6,"directive":7,"line":8,"SPACE":9,"statement":10,"NEWLINE":11,"openDirective":12,"typeDirective":13,"closeDirective":14,":":15,"argDirective":16,"entityName":17,"relSpec":18,"role":19,"ALPHANUM":20,"cardinality":21,"relType":22,"ZERO_OR_ONE":23,"ZERO_OR_MORE":24,"ONE_OR_MORE":25,"ONLY_ONE":26,"NON_IDENTIFYING":27,"IDENTIFYING":28,"WORD":29,"open_directive":30,"type_directive":31,"arg_directive":32,"close_directive":33,"$accept":0,"$end":1},
|
||||
terminals_: {2:"error",4:"ER_DIAGRAM",6:"EOF",9:"SPACE",11:"NEWLINE",15:":",20:"ALPHANUM",23:"ZERO_OR_ONE",24:"ZERO_OR_MORE",25:"ONE_OR_MORE",26:"ONLY_ONE",27:"NON_IDENTIFYING",28:"IDENTIFYING",29:"WORD",30:"open_directive",31:"type_directive",32:"arg_directive",33:"close_directive"},
|
||||
productions_: [0,[3,3],[3,2],[5,0],[5,2],[8,2],[8,1],[8,1],[8,1],[7,4],[7,6],[10,1],[10,5],[17,1],[18,3],[21,1],[21,1],[21,1],[21,1],[22,1],[22,1],[19,1],[19,1],[12,1],[13,1],[16,1],[14,1]],
|
||||
productions_: [0,[3,3],[3,2],[5,0],[5,2],[8,2],[8,1],[8,1],[8,1],[7,4],[7,6],[10,1],[10,5],[10,1],[17,1],[18,3],[21,1],[21,1],[21,1],[21,1],[22,1],[22,1],[19,1],[19,1],[12,1],[13,1],[16,1],[14,1]],
|
||||
performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {
|
||||
/* this == yyval */
|
||||
|
||||
|
|
@ -55758,54 +55759,57 @@ case 12:
|
|||
|
||||
break;
|
||||
case 13:
|
||||
this.$ = $$[$0]; /*console.log('Entity: ' + $$[$0]);*/
|
||||
yy.addEntity($$[$0]);
|
||||
break;
|
||||
case 14:
|
||||
this.$ = $$[$0]; /*console.log('Entity: ' + $$[$0]);*/
|
||||
break;
|
||||
case 15:
|
||||
|
||||
this.$ = { cardA: $$[$0], relType: $$[$0-1], cardB: $$[$0-2] };
|
||||
/*console.log('relSpec: ' + $$[$0] + $$[$0-1] + $$[$0-2]);*/
|
||||
|
||||
break;
|
||||
case 15:
|
||||
case 16:
|
||||
this.$ = yy.Cardinality.ZERO_OR_ONE;
|
||||
break;
|
||||
case 16:
|
||||
case 17:
|
||||
this.$ = yy.Cardinality.ZERO_OR_MORE;
|
||||
break;
|
||||
case 17:
|
||||
case 18:
|
||||
this.$ = yy.Cardinality.ONE_OR_MORE;
|
||||
break;
|
||||
case 18:
|
||||
case 19:
|
||||
this.$ = yy.Cardinality.ONLY_ONE;
|
||||
break;
|
||||
case 19:
|
||||
case 20:
|
||||
this.$ = yy.Identification.NON_IDENTIFYING;
|
||||
break;
|
||||
case 20:
|
||||
case 21:
|
||||
this.$ = yy.Identification.IDENTIFYING;
|
||||
break;
|
||||
case 21:
|
||||
case 22:
|
||||
this.$ = $$[$0].replace(/"/g, '');
|
||||
break;
|
||||
case 22:
|
||||
case 23:
|
||||
this.$ = $$[$0];
|
||||
break;
|
||||
case 23:
|
||||
case 24:
|
||||
yy.parseDirective('%%{', 'open_directive');
|
||||
break;
|
||||
case 24:
|
||||
case 25:
|
||||
yy.parseDirective($$[$0], 'type_directive');
|
||||
break;
|
||||
case 25:
|
||||
case 26:
|
||||
$$[$0] = $$[$0].trim().replace(/'/g, '"'); yy.parseDirective($$[$0], 'arg_directive');
|
||||
break;
|
||||
case 26:
|
||||
case 27:
|
||||
yy.parseDirective('}%%', 'close_directive', 'er');
|
||||
break;
|
||||
}
|
||||
},
|
||||
table: [{3:1,4:$V0,7:3,12:4,30:$V1},{1:[3]},o($V2,[2,3],{5:6}),{3:7,4:$V0,7:3,12:4,30:$V1},{13:8,31:[1,9]},{31:[2,23]},{6:[1,10],7:15,8:11,9:[1,12],10:13,11:[1,14],12:4,17:16,20:$V3,30:$V1},{1:[2,2]},{14:18,15:[1,19],33:$V4},o([15,33],[2,24]),o($V2,[2,8],{1:[2,1]}),o($V2,[2,4]),{7:15,10:21,12:4,17:16,20:$V3,30:$V1},o($V2,[2,6]),o($V2,[2,7]),o($V2,[2,11]),{18:22,21:23,23:$V5,24:$V6,25:$V7,26:$V8},o([15,23,24,25,26],[2,13]),{11:[1,28]},{16:29,32:[1,30]},{11:[2,26]},o($V2,[2,5]),{17:31,20:$V3},{22:32,27:[1,33],28:[1,34]},o($V9,[2,15]),o($V9,[2,16]),o($V9,[2,17]),o($V9,[2,18]),o($Va,[2,9]),{14:35,33:$V4},{33:[2,25]},{15:[1,36]},{21:37,23:$V5,24:$V6,25:$V7,26:$V8},o($Vb,[2,19]),o($Vb,[2,20]),{11:[1,38]},{19:39,20:[1,41],29:[1,40]},{20:[2,14]},o($Va,[2,10]),o($V2,[2,12]),o($V2,[2,21]),o($V2,[2,22])],
|
||||
defaultActions: {5:[2,23],7:[2,2],20:[2,26],30:[2,25],37:[2,14]},
|
||||
table: [{3:1,4:$V0,7:3,12:4,30:$V1},{1:[3]},o($V2,[2,3],{5:6}),{3:7,4:$V0,7:3,12:4,30:$V1},{13:8,31:[1,9]},{31:[2,24]},{6:[1,10],7:15,8:11,9:[1,12],10:13,11:[1,14],12:4,17:16,20:$V3,30:$V1},{1:[2,2]},{14:18,15:[1,19],33:$V4},o([15,33],[2,25]),o($V2,[2,8],{1:[2,1]}),o($V2,[2,4]),{7:15,10:21,12:4,17:16,20:$V3,30:$V1},o($V2,[2,6]),o($V2,[2,7]),o($V2,[2,11]),o($V2,[2,13],{18:22,21:23,23:$V5,24:$V6,25:$V7,26:$V8}),o([6,9,11,15,20,23,24,25,26,30],[2,14]),{11:[1,28]},{16:29,32:[1,30]},{11:[2,27]},o($V2,[2,5]),{17:31,20:$V3},{22:32,27:[1,33],28:[1,34]},o($V9,[2,16]),o($V9,[2,17]),o($V9,[2,18]),o($V9,[2,19]),o($Va,[2,9]),{14:35,33:$V4},{33:[2,26]},{15:[1,36]},{21:37,23:$V5,24:$V6,25:$V7,26:$V8},o($Vb,[2,20]),o($Vb,[2,21]),{11:[1,38]},{19:39,20:[1,41],29:[1,40]},{20:[2,15]},o($Va,[2,10]),o($V2,[2,12]),o($V2,[2,22]),o($V2,[2,23])],
|
||||
defaultActions: {5:[2,24],7:[2,2],20:[2,27],30:[2,26],37:[2,15]},
|
||||
parseError: function parseError (str, hash) {
|
||||
if (hash.recoverable) {
|
||||
this.trace(str);
|
||||
|
|
@ -56338,7 +56342,7 @@ case 25:return 6;
|
|||
break;
|
||||
}
|
||||
},
|
||||
rules: [/^(?:%%\{)/i,/^(?:((?:(?!\}%%)[^:.])*))/i,/^(?::)/i,/^(?:\}%%)/i,/^(?:((?:(?!\}%%).|\n)*))/i,/^(?:%(?!\{)[^\n]*)/i,/^(?:[^\}]%%[^\n]*)/i,/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:[\s]+)/i,/^(?:"[^"]*")/i,/^(?:erDiagram\b)/i,/^(?:\|o\b)/i,/^(?:\}o\b)/i,/^(?:\}\|)/i,/^(?:\|\|)/i,/^(?:o\|)/i,/^(?:o\{)/i,/^(?:\|\{)/i,/^(?:\.\.)/i,/^(?:--)/i,/^(?:\.-)/i,/^(?:-\.)/i,/^(?:[A-Za-z][A-Za-z0-9\-]*)/i,/^(?:.)/i,/^(?:$)/i],
|
||||
rules: [/^(?:%%\{)/i,/^(?:((?:(?!\}%%)[^:.])*))/i,/^(?::)/i,/^(?:\}%%)/i,/^(?:((?:(?!\}%%).|\n)*))/i,/^(?:%(?!\{)[^\n]*)/i,/^(?:[^\}]%%[^\n]*)/i,/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:[\s]+)/i,/^(?:"[^"]*")/i,/^(?:erDiagram\b)/i,/^(?:\|o\b)/i,/^(?:\}o\b)/i,/^(?:\}\|)/i,/^(?:\|\|)/i,/^(?:o\|)/i,/^(?:o\{)/i,/^(?:\|\{)/i,/^(?:\.\.)/i,/^(?:--)/i,/^(?:\.-)/i,/^(?:-\.)/i,/^(?:[A-Za-z][A-Za-z0-9\-_]*)/i,/^(?:.)/i,/^(?:$)/i],
|
||||
conditions: {"open_directive":{"rules":[1],"inclusive":false},"type_directive":{"rules":[2,3],"inclusive":false},"arg_directive":{"rules":[3,4],"inclusive":false},"INITIAL":{"rules":[0,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],"inclusive":true}}
|
||||
});
|
||||
return lexer;
|
||||
|
|
@ -57839,7 +57843,10 @@ var addEdges = function addEdges(edges, g) {
|
|||
var linkId = 'L-' + edge.start + '-' + edge.end;
|
||||
var linkNameStart = 'LS-' + edge.start;
|
||||
var linkNameEnd = 'LE-' + edge.end;
|
||||
var edgeData = {};
|
||||
var edgeData = {
|
||||
style: '',
|
||||
labelStyle: ''
|
||||
};
|
||||
edgeData.minlen = edge.length || 1; //edgeData.id = 'id' + cnt;
|
||||
// Set link type for rendering
|
||||
|
||||
|
|
@ -57875,51 +57882,48 @@ var addEdges = function addEdges(edges, g) {
|
|||
case 'arrow_circle':
|
||||
edgeData.arrowTypeEnd = 'arrow_circle';
|
||||
break;
|
||||
} // logger.info('apa', edgeData, edge);
|
||||
// edgeData.arrowTypeStart = edge.arrowTypeStart;
|
||||
// edgeData.arrowTypeStart = edge.arrowTypeStart;
|
||||
// edgeData.arrowType = edgeData.arrowTypeEnd;
|
||||
// logger.info('apa', edgeData, edge);
|
||||
|
||||
}
|
||||
|
||||
var style = '';
|
||||
var labelStyle = '';
|
||||
|
||||
switch (edge.stroke) {
|
||||
case 'normal':
|
||||
style = 'fill:none;';
|
||||
|
||||
if (typeof defaultStyle !== 'undefined') {
|
||||
style = defaultStyle;
|
||||
}
|
||||
|
||||
if (typeof defaultLabelStyle !== 'undefined') {
|
||||
labelStyle = defaultLabelStyle;
|
||||
}
|
||||
|
||||
edgeData.thickness = 'normal';
|
||||
edgeData.pattern = 'solid';
|
||||
break;
|
||||
|
||||
case 'dotted':
|
||||
edgeData.thickness = 'normal';
|
||||
edgeData.pattern = 'dotted';
|
||||
edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
|
||||
break;
|
||||
|
||||
case 'thick':
|
||||
edgeData.thickness = 'thick';
|
||||
edgeData.pattern = 'solid';
|
||||
edgeData.style = 'stroke-width: 3.5px;fill:none;';
|
||||
break;
|
||||
}
|
||||
|
||||
if (typeof edge.style !== 'undefined') {
|
||||
var styles = Object(_utils__WEBPACK_IMPORTED_MODULE_9__["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;
|
||||
}
|
||||
|
||||
edgeData.thickness = 'normal';
|
||||
edgeData.pattern = 'solid';
|
||||
break;
|
||||
|
||||
case 'dotted':
|
||||
edgeData.thickness = 'normal';
|
||||
edgeData.pattern = 'dotted';
|
||||
break;
|
||||
|
||||
case 'thick':
|
||||
edgeData.thickness = 'thick';
|
||||
edgeData.pattern = 'solid';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
edgeData.style = style;
|
||||
edgeData.labelStyle = labelStyle;
|
||||
edgeData.style = edgeData.style += style;
|
||||
edgeData.labelStyle = edgeData.labelStyle += labelStyle;
|
||||
|
||||
if (typeof edge.interpolate !== 'undefined') {
|
||||
edgeData.curve = Object(_utils__WEBPACK_IMPORTED_MODULE_9__["interpolateToCurve"])(edge.interpolate, d3__WEBPACK_IMPORTED_MODULE_1__["curveLinear"]);
|
||||
|
|
@ -57936,23 +57940,22 @@ var addEdges = function addEdges(edges, g) {
|
|||
} else {
|
||||
edgeData.arrowheadStyle = 'fill: #333';
|
||||
edgeData.labelpos = 'c';
|
||||
} // if (getConfig().flowchart.htmlLabels && false) {
|
||||
// // eslint-disable-line
|
||||
// edgeData.labelType = 'html';
|
||||
// edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
|
||||
// } else {
|
||||
|
||||
if (Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().flowchart.htmlLabels && false) {
|
||||
// eslint-disable-line
|
||||
edgeData.labelType = 'html';
|
||||
edgeData.label = "<span id=\"L-".concat(linkId, "\" class=\"edgeLabel L-").concat(linkNameStart, "' L-").concat(linkNameEnd, "\">").concat(edge.text, "</span>");
|
||||
} else {
|
||||
edgeData.labelType = 'text';
|
||||
edgeData.label = edge.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_8__["default"].lineBreakRegex, '\n');
|
||||
|
||||
if (typeof edge.style === 'undefined') {
|
||||
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
|
||||
}
|
||||
edgeData.labelType = 'text';
|
||||
edgeData.label = edge.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_8__["default"].lineBreakRegex, '\n');
|
||||
|
||||
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
|
||||
}
|
||||
if (typeof edge.style === 'undefined') {
|
||||
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
|
||||
}
|
||||
|
||||
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); // }
|
||||
|
||||
edgeData.id = linkId;
|
||||
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; // Add the edge to the graph
|
||||
|
||||
|
|
@ -58410,7 +58413,9 @@ var addEdges = function addEdges(edges, g) {
|
|||
|
||||
if (Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().flowchart.htmlLabels) {
|
||||
edgeData.labelType = 'html';
|
||||
edgeData.label = "<span id=\"L-".concat(linkId, "\" class=\"edgeLabel L-").concat(linkNameStart, "' L-").concat(linkNameEnd, "\">").concat(edge.text, "</span>");
|
||||
edgeData.label = "<span id=\"L-".concat(linkId, "\" class=\"edgeLabel L-").concat(linkNameStart, "' L-").concat(linkNameEnd, "\">").concat(edge.text.replace(/fa[lrsb]?:fa-[\w-]+/g, function (s) {
|
||||
return "<i class='".concat(s.replace(':', ' '), "'></i>");
|
||||
}), "</span>");
|
||||
} else {
|
||||
edgeData.labelType = 'text';
|
||||
edgeData.label = edge.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_8__["default"].lineBreakRegex, '\n');
|
||||
|
|
@ -72104,7 +72109,7 @@ function () {
|
|||
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
|
||||
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
|
||||
this.titleColor = this.titleColor || this.tertiaryTextColor;
|
||||
this.edgeLabelBackground = this.edgeLabelBackground || this.darkMode ? Object(khroma__WEBPACK_IMPORTED_MODULE_0__["darken"])(this.secondaryColor, 30) : this.secondaryColor;
|
||||
this.edgeLabelBackground = this.edgeLabelBackground || (this.darkMode ? Object(khroma__WEBPACK_IMPORTED_MODULE_0__["darken"])(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
|
||||
/* Sequence Diagram variables */
|
||||
// this.actorBorder = lighten(this.border1, 0.5);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,277 @@
|
|||
# About Mermaid
|
||||
|
||||
**Mermaid lets you represent diagrams using text and code.** This simplifies maintianing complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
|
||||
|
||||
Many editors, wikis and other tools have mermaid integrations already making it easy to start using mermaid. A few of those are described in [Simple start to write diagrams](./n00b-GettingStarted.md).
|
||||
|
||||
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/About.md)
|
||||
|
||||
|
||||
[](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
|
||||
<!-- <Main description> -->
|
||||
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
|
||||
|
||||
Diagramming and documentation costs precious developer time and gets outdated quickly.
|
||||
But not having diagrams or docs ruins productivity and hurts organizational learning. <br/>
|
||||
Mermaid addresses this Catch-22 by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
|
||||
Mermaid, as a text-based diagramming tool allows for quick and easy updates, it can also be made part of production scripts (and other pieces of code), to make documentation much easier.
|
||||
With Mermaid less time needs to be spent on making diagrams, as a separate documentation task. <br/>
|
||||
|
||||
> Mermaid is a Diagramming tool for everyone.
|
||||
|
||||
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](./Tutorials.md) for the Live Editor video tutorials.
|
||||
|
||||
Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](./integrations.md).
|
||||
|
||||
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Overview for Beginners](./n00b-overview.md) and [Usage](./usage.md).
|
||||
|
||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md)
|
||||
|
||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
||||
|
||||
|
||||
# Diagrams that mermaid can render:
|
||||
|
||||
### [Flowchart](/flowchart?id=flowcharts-basic-syntax)
|
||||
|
||||
```
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Sequence diagram](/sequenceDiagram)
|
||||
|
||||
```
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Gantt diagram](/gantt)
|
||||
|
||||
```
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Class diagram - :exclamation: experimental](/classDiagram)
|
||||
|
||||
```
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Git graph - :exclamation: experimental
|
||||
|
||||
```
|
||||
gitGraph:
|
||||
options
|
||||
{
|
||||
"nodeSpacing": 150,
|
||||
"nodeRadius": 10
|
||||
}
|
||||
end
|
||||
commit
|
||||
branch newbranch
|
||||
checkout newbranch
|
||||
commit
|
||||
commit
|
||||
checkout master
|
||||
commit
|
||||
commit
|
||||
merge newbranch
|
||||
|
||||
```
|
||||
|
||||
|
||||
### [Entity Relationship Diagram - :exclamation: experimental](/entityRelationshipDiagram)
|
||||
|
||||
```
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [User Journey Diagram](/user-journey)
|
||||
|
||||
```markdown
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
```
|
||||
|
||||
|
||||
# Installation
|
||||
|
||||
**In depth guides and examples can be found in [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
|
||||
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).**
|
||||
|
||||
### CDN
|
||||
|
||||
```
|
||||
https://unpkg.com/mermaid@<version>/dist/
|
||||
```
|
||||
|
||||
To select a version:
|
||||
|
||||
Replace `<version>` with the desired version number.
|
||||
|
||||
Alternatively, you can also adjust the version number in the page itself.
|
||||
|
||||
Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
|
||||
|
||||
## Mermaid on a website
|
||||
To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
|
||||
|
||||
```
|
||||
1.You will need to install node v10 or 12, which would have npm
|
||||
|
||||
2. download yarn using npm.
|
||||
|
||||
3. enter the following command:
|
||||
yarn add mermaid
|
||||
|
||||
4. You can then add mermaid as a dev dependency using this command:
|
||||
yarn add --dev mermaid
|
||||
|
||||
```
|
||||
|
||||
**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:**
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
```
|
||||
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.**
|
||||
|
||||
## Examples can be found in [Getting Started](./n00b-gettingStarted.md)
|
||||
|
||||
# Sibling projects
|
||||
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
||||
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
|
||||
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
|
||||
- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
|
||||
|
||||
## Request for Assistance
|
||||
|
||||
Things are piling up and I have a hard time keeping up. To remedy this
|
||||
it would be great if we could form a core team of developers to cooperate
|
||||
with the future development of mermaid.
|
||||
|
||||
As part of this team you would get write access to the repository and would
|
||||
represent the project when answering questions and issues.
|
||||
|
||||
Together we could continue the work with things like:
|
||||
|
||||
- Adding more types of diagrams like mindmaps, ert diagrams, etc.
|
||||
- Improving existing diagrams
|
||||
|
||||
Don't hesitate to contact me if you want to get involved!
|
||||
|
||||
## For contributors
|
||||
|
||||
### Setup
|
||||
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
```
|
||||
yarn build:watch
|
||||
```
|
||||
|
||||
### Lint
|
||||
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
We use [eslint](https://eslint.org/).
|
||||
We recommend you installing [editor plugins](https://eslint.org/docs/user-guide/integrations) so you can get real time lint result.
|
||||
|
||||
### Test
|
||||
|
||||
```
|
||||
yarn test
|
||||
```
|
||||
Manual test in browser: open `dist/index.html`
|
||||
|
||||
### Release
|
||||
|
||||
For those who have the permission to do so:
|
||||
|
||||
Update version number in `package.json`.
|
||||
|
||||
```
|
||||
npm publish
|
||||
```
|
||||
|
||||
Command above generates files into the `dist` folder and publishes them to npmjs.org.
|
||||
|
||||
## Credits
|
||||
|
||||
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!
|
||||
|
||||
Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.
|
||||
|
||||
_Mermaid was created by Knut Sveidqvist for easier documentation._
|
||||
|
||||
Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
|
||||
|
|
@ -1,18 +1,17 @@
|
|||
# mermaid [](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
# About Mermaid
|
||||
|
||||
**Mermaid lets you represent diagrams using text and code.** This simplifies maintianing complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
|
||||
|
||||
Many editors, wikis and other tools have mermaid integrations already making it easy to start using mermaid. A few of those are described in [Simple start to write diagrams](./n00b-GettingStarted.md).
|
||||
|
||||
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/About.md)
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
||||
|
||||
## About
|
||||
[](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
|
||||
<!-- <Main description> -->
|
||||
Mermaid simplifies complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
|
||||
|
||||
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
|
||||
|
||||
Diagramming and documentation costs precious developer time and gets outdated quickly.
|
||||
|
|
@ -21,21 +20,26 @@ Mermaid addresses this Catch-22 by cutting the time, effort and tooling that is
|
|||
Mermaid, as a text-based diagramming tool allows for quick and easy updates, it can also be made part of production scripts (and other pieces of code), to make documentation much easier.
|
||||
With Mermaid less time needs to be spent on making diagrams, as a separate documentation task. <br/>
|
||||
|
||||
> Mermaid is a Diagramming tool for everyone.
|
||||
> Mermaid is a Diagramming tool for everyone.
|
||||
|
||||
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md) for the Live Editor video tutorials.
|
||||
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](./Tutorials.md) for the Live Editor video tutorials.
|
||||
|
||||
Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](./integrations.md).
|
||||
|
||||
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
|
||||
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Overview for Beginners](./n00b-overview.md) and [Usage](./usage.md).
|
||||
|
||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md)
|
||||
|
||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
||||
|
||||
|
||||
# Diagrams that mermaid can render:
|
||||
|
||||
### [Flowchart](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/flowchart.html)
|
||||
### [Flowchart](/flowchart?id=flowcharts-basic-syntax)
|
||||
|
||||
```
|
||||
graph TD;
|
||||
|
|
@ -47,7 +51,7 @@ graph TD;
|
|||
|
||||
|
||||
|
||||
### [Sequence diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/sequenceDiagram.html)
|
||||
### [Sequence diagram](/sequenceDiagram)
|
||||
|
||||
```
|
||||
sequenceDiagram
|
||||
|
|
@ -65,7 +69,7 @@ sequenceDiagram
|
|||
|
||||
|
||||
|
||||
### [Gantt diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/gantt.html)
|
||||
### [Gantt diagram](/gantt)
|
||||
|
||||
```
|
||||
gantt
|
||||
|
|
@ -82,7 +86,7 @@ Future task2 : des4, after des3, 5d
|
|||
|
||||
|
||||
|
||||
### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/classDiagram.html)
|
||||
### [Class diagram - :exclamation: experimental](/classDiagram)
|
||||
|
||||
```
|
||||
classDiagram
|
||||
|
|
@ -126,7 +130,7 @@ merge newbranch
|
|||
```
|
||||
|
||||
|
||||
### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/entityRelationshipDiagram.html)
|
||||
### [Entity Relationship Diagram - :exclamation: experimental](/entityRelationshipDiagram)
|
||||
|
||||
```
|
||||
erDiagram
|
||||
|
|
@ -138,7 +142,7 @@ erDiagram
|
|||
|
||||
|
||||
|
||||
### [User Journey Diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/user-journey.html)
|
||||
### [User Journey Diagram](/user-journey)
|
||||
|
||||
```markdown
|
||||
journey
|
||||
|
|
@ -155,9 +159,9 @@ journey
|
|||
|
||||
# Installation
|
||||
|
||||
**In depth guides and examples can be found in [Getting Started](./n00b-gettingStarted.md) and [Usage](./usage.md).**
|
||||
**In depth guides and examples can be found in [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
|
||||
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).**
|
||||
|
||||
### CDN
|
||||
|
||||
|
|
@ -196,7 +200,7 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
|
|||
```
|
||||
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.**
|
||||
|
||||
## Examples can be found in [Getting Started](./n00b-gettingStarted.md)
|
||||
## Examples can be found in [Other examples](/examples)
|
||||
|
||||
# Sibling projects
|
||||
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
||||
|
|
@ -270,6 +274,4 @@ Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diag
|
|||
|
||||
_Mermaid was created by Knut Sveidqvist for easier documentation._
|
||||
|
||||
_[Tyler Long](https://github.com/tylerlong) has became a collaborator since April 2017._
|
||||
|
||||
Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
|
||||
|
|
|
|||
|
|
@ -1,32 +1,11 @@
|
|||
- Overview 📚
|
||||
- [mermaid](README.md)
|
||||
- [overview](n00b-overview.md)
|
||||
- [Use-Cases and Integrations](integrations.md)
|
||||
- [FAQ](faq.md)
|
||||
- Introduction 📊
|
||||
|
||||
- Getting Started✒️
|
||||
- [About mermaid](Readme.md)
|
||||
- [Simple start to write diagrams](n00b-gettingStarted.md)
|
||||
- [Overview for Beginners](n00b-overview.md)
|
||||
|
||||
- [Getting started - easier](n00b-gettingStarted.md)
|
||||
- [Tutorials](Tutorials.md)
|
||||
- [API-Usage](usage.md)
|
||||
- [Configurations](Setup.md)
|
||||
- [Directives](8.6.0_docs.md)
|
||||
- [Theming](theming.md)
|
||||
- [mermaid CLI](mermaidCLI.md)
|
||||
- [Advanced usage](n00b-advanced.md)
|
||||
- Diagram Syntax 📊
|
||||
|
||||
|
||||
- Contributions and Community 🙌
|
||||
|
||||
- [Development and Contribution ](development.md)
|
||||
- [Mermaid Versions](versionUpdates.md)
|
||||
- [Changelog](CHANGELOG.md)
|
||||
- [Adding Diagrams ](newDiagram.md)
|
||||
|
||||
- Diagrams and Syntax and Examples 📊
|
||||
|
||||
- [Diagram syntax intro](n00b-syntaxReference.md)
|
||||
- [Examples](examples.md)
|
||||
- [Flowchart](flowchart.md)
|
||||
- [Sequence diagram](sequenceDiagram.md)
|
||||
- [Class Diagram](classDiagram.md)
|
||||
|
|
@ -35,3 +14,26 @@
|
|||
- [User Journey](user-journey.md)
|
||||
- [Gantt](gantt.md)
|
||||
- [Pie Chart](pie.md)
|
||||
- [Other Examples](examples.md)
|
||||
|
||||
- Adding mermaid✒️
|
||||
|
||||
- [Diagram syntax intro](n00b-syntaxReference.md)
|
||||
- [Tutorials](Tutorials.md)
|
||||
- [API-Usage](usage.md)
|
||||
- [Configurations](Setup.md)
|
||||
- [Directives](8.6.0_docs.md)
|
||||
- [Theming](theming.md)
|
||||
- [mermaid CLI](mermaidCLI.md)
|
||||
- [Advanced usage](n00b-advanced.md)
|
||||
|
||||
- Misc 📚
|
||||
- [Use-Cases and Integrations](integrations.md)
|
||||
- [FAQ](faq.md)
|
||||
|
||||
- Contributions and Community 🙌
|
||||
|
||||
- [Development and Contribution ](development.md)
|
||||
- [Mermaid Versions](versionUpdates.md)
|
||||
- [Changelog](CHANGELOG.md)
|
||||
- [Adding Diagrams ](newDiagram.md)
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
|
||||
|
||||
## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../getting-started/n00b-gettingStarted.md).
|
||||
**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](/usage?id=usage).**
|
||||
|
||||
## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](n00b-syntaxReference.md) section.
|
||||
**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](/flowchart?id=flowcharts-basic-syntax) section.**
|
||||
|
||||
## Basic Pie Chart
|
||||
|
||||
|
|
@ -125,7 +125,7 @@ graph TB
|
|||
```
|
||||
|
||||
|
||||
## Loops, alt and opt
|
||||
## SequenceDiagram: Loops, alt and opt
|
||||
|
||||
```
|
||||
sequenceDiagram
|
||||
|
|
@ -159,7 +159,7 @@ sequenceDiagram
|
|||
```
|
||||
|
||||
|
||||
## Message to self in loop
|
||||
## SequenceDiagram: Message to self in loop
|
||||
|
||||
```
|
||||
sequenceDiagram
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md)
|
||||
|
||||
If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid.
|
||||
If you are new to mermaid, read the [Simple start to write diagrams](/n00b-gettingStarted.md) and [Overview for Beginners](/n00b-overview.md) sections, to learn the basics of mermaid.
|
||||
Video Tutorials can be found at the bottom of the Overview Section.
|
||||
|
||||
This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called.
|
||||
|
||||
They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
|
||||
|
||||
### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.
|
||||
**The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.**
|
||||
|
||||
## mermaid tag:
|
||||
These Diagram Definitions can be entered within a \<div class=mermaid> tag.
|
||||
|
|
@ -27,5 +27,3 @@ like so :
|
|||
These definitions can also be entered into the [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor), to render them immediately.
|
||||
This would then offer
|
||||
|
||||
|
||||
{% include list.liquid %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue