mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge pull request #2031 from mermaid-js/2029_option_to_configure_renderer
2029 option to configure renderer
This commit is contained in:
Knut Sveidqvist
GitHub
commit
d3f8f03a7d
@ -55,7 +55,7 @@ flowchart TD
|
||||
class T TestSub
|
||||
linkStyle 0,1 color:orange, stroke: orange;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
[*] --> Off
|
||||
Off --> On
|
||||
@ -102,12 +102,13 @@ stateDiagram-v2
|
||||
|
||||
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
state "Not Shooting State" as NotShooting {
|
||||
state "Idle mode" as Idle
|
||||
state "Configuring mode" as Configuring
|
||||
[*] --> Idle
|
||||
Idle : this is a string
|
||||
Idle : this is another string
|
||||
Idle --> Configuring : EvConfig
|
||||
Configuring --> Idle : EvConfig
|
||||
}
|
||||
@ -115,15 +116,49 @@ state "Not Shooting State" as NotShooting {
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
state S1 {
|
||||
sub1 -->sub2
|
||||
}
|
||||
state S2 {
|
||||
sub4
|
||||
}
|
||||
S1 --> S2
|
||||
sub1 --> sub4
|
||||
[*] --> Off
|
||||
Off --> On
|
||||
On --> Select
|
||||
Select --> Washing
|
||||
Washing --> Finished
|
||||
Finished --> [*]
|
||||
state Select
|
||||
{
|
||||
state "Program 1" as Prg1
|
||||
[*] --> Prg1
|
||||
Prg1 --> [*]
|
||||
[*] --> Prg2
|
||||
Prg2 --> [*]
|
||||
[*] --> Prg3
|
||||
Prg3 --> [*]
|
||||
}
|
||||
|
||||
state Washing {
|
||||
state Using_Prg1 {
|
||||
[*] --> P1Step1
|
||||
P1Step1 --> P1Step2
|
||||
P1Step2 --> P1Step3
|
||||
P1Step3 --> [*]
|
||||
}
|
||||
state Using_Prg2 {
|
||||
[*] --> P2Step1
|
||||
P2Step1 --> P2Step2
|
||||
P2Step2 --> P2Step3
|
||||
P2Step3 --> [*]
|
||||
}
|
||||
|
||||
state Using_Prg3 {
|
||||
[*] --> Step1
|
||||
Step1 --> Step2
|
||||
Step2 --> [*]
|
||||
}
|
||||
[*] --> Using_Prg1
|
||||
[*] --> Using_Prg2
|
||||
[*] --> Using_Prg3
|
||||
Using_Prg1 --> [*]
|
||||
Using_Prg2 --> [*]
|
||||
Using_Prg3 --> [*]
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
requirementDiagram
|
||||
@ -233,7 +268,9 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
state:{
|
||||
nodeSpacing: 50,
|
||||
rankSpacing: 50,
|
||||
defaultRenderer: 'dagre-wrapper',
|
||||
},
|
||||
|
||||
fontSize: 18,
|
||||
curve: 'cardinal',
|
||||
securityLevel: 'loose',
|
||||
|
||||
@ -55,8 +55,8 @@ flowchart TD
|
||||
class T TestSub
|
||||
linkStyle 0,1 color:orange, stroke: orange;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
flowchart TD
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
graph TD
|
||||
subgraph S1
|
||||
sub1 -->sub2
|
||||
end
|
||||
@ -67,16 +67,8 @@ flowchart TD
|
||||
sub1 --> sub4
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
state S1 {
|
||||
sub1 -->sub2
|
||||
}
|
||||
|
||||
state S2 {
|
||||
sub4
|
||||
}
|
||||
S1 --> S2
|
||||
sub1 --> sub4
|
||||
graph TB
|
||||
A --> B
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
stateDiagram-v2
|
||||
@ -184,11 +176,17 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'neutral',
|
||||
theme: 'forest',
|
||||
arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
|
||||
state: {
|
||||
defaultRenderer: 'dagre-wrapper',
|
||||
},
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
|
||||
|
||||
80
dist/mermaid.core.js
vendored
80
dist/mermaid.core.js
vendored
@ -2813,6 +2813,8 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _createLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./createLabel */ "./src/dagre-wrapper/createLabel.js");
|
||||
/* harmony import */ var _shapes_note__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./shapes/note */ "./src/dagre-wrapper/shapes/note.js");
|
||||
/* harmony import */ var _diagrams_class_svgDraw__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../diagrams/class/svgDraw */ "./src/diagrams/class/svgDraw.js");
|
||||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
|
||||
// eslint-disable-line
|
||||
|
||||
@ -3158,9 +3160,10 @@ var rectWithTitle = function rectWithTitle(parent, node) {
|
||||
|
||||
var innerLine = shapeSvg.insert('line');
|
||||
var label = shapeSvg.insert('g').attr('class', 'label');
|
||||
var text2 = node.labelText.flat();
|
||||
_logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Label text', text2[0]);
|
||||
var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(text2[0], node.labelStyle, true, true));
|
||||
var text2prim = node.labelText.flat ? node.labelText.flat() : node.labelText;
|
||||
var text2 = _typeof(text2prim) === 'object' ? text2prim[0] : text2prim;
|
||||
_logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Label text', text2);
|
||||
var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(text2, node.labelStyle, true, true));
|
||||
var bbox;
|
||||
|
||||
if (Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])().flowchart.htmlLabels) {
|
||||
@ -3174,7 +3177,7 @@ var rectWithTitle = function rectWithTitle(parent, node) {
|
||||
_logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Text 2', text2);
|
||||
var textRows = text2.slice(1, text2.length);
|
||||
var titleBox = text.getBBox();
|
||||
var descr = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(textRows.join('<br/>'), node.labelStyle, true, true));
|
||||
var descr = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(textRows.join ? textRows.join('<br/>') : textRows, node.labelStyle, true, true));
|
||||
|
||||
if (Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])().flowchart.htmlLabels) {
|
||||
var _div = descr.children[0];
|
||||
@ -3978,7 +3981,22 @@ var config = {
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
|
||||
/**
|
||||
@ -4619,7 +4637,22 @@ var config = {
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
git: {
|
||||
arrowMarkerAbsolute: false,
|
||||
@ -4671,7 +4704,22 @@ var config = {
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
|
||||
/**
|
||||
@ -21507,7 +21555,7 @@ case 13:return 16;
|
||||
break;
|
||||
case 14:this.popState();
|
||||
break;
|
||||
case 15: this.pushState('STATE');
|
||||
case 15: console.log('Starting STATE');this.pushState('STATE');
|
||||
break;
|
||||
case 16:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yy_.yytext);*/return 23;
|
||||
break;
|
||||
@ -21517,7 +21565,7 @@ case 18:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim();/*console.warn(
|
||||
break;
|
||||
case 19:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yy_.yytext);*/return 24;
|
||||
break;
|
||||
case 20:this.begin("STATE_STRING");
|
||||
case 20: console.log('Starting STATE_STRING');this.begin("STATE_STRING");
|
||||
break;
|
||||
case 21:this.popState();this.pushState('STATE_ID');return "AS";
|
||||
break;
|
||||
@ -21525,7 +21573,7 @@ case 22:this.popState();/* console.log('STATE_ID', yy_.yytext);*/return "ID";
|
||||
break;
|
||||
case 23:this.popState();
|
||||
break;
|
||||
case 24: /*console.log('Long description:', yy_.yytext);*/return "STATE_DESCR";
|
||||
case 24: console.log('Long description:', yy_.yytext);return "STATE_DESCR";
|
||||
break;
|
||||
case 25:/*console.log('COMPOSIT_STATE', yy_.yytext);*/return 17;
|
||||
break;
|
||||
@ -22389,6 +22437,8 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _dagre_wrapper_index_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../dagre-wrapper/index.js */ "./src/dagre-wrapper/index.js");
|
||||
/* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
|
||||
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils.js");
|
||||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
|
||||
|
||||
|
||||
@ -22484,7 +22534,7 @@ var setupNode = function setupNode(g, parent, node, altFlag) {
|
||||
var nodeData = {
|
||||
labelStyle: '',
|
||||
shape: nodeDb[node.id].shape,
|
||||
labelText: nodeDb[node.id].description,
|
||||
labelText: _typeof(nodeDb[node.id].description) === 'object' ? nodeDb[node.id].description[0] : nodeDb[node.id].description,
|
||||
classes: nodeDb[node.id].classes,
|
||||
//classStr,
|
||||
style: '',
|
||||
@ -24884,13 +24934,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
|
||||
|
||||
function parse(text) {
|
||||
var graphInit = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectInit(text);
|
||||
var cnf = _config__WEBPACK_IMPORTED_MODULE_3__["getConfig"]();
|
||||
|
||||
if (graphInit) {
|
||||
reinitialize(graphInit);
|
||||
_logger__WEBPACK_IMPORTED_MODULE_41__["log"].debug('reinit ', graphInit);
|
||||
}
|
||||
|
||||
var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(text);
|
||||
var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(text, cnf);
|
||||
var parser;
|
||||
_logger__WEBPACK_IMPORTED_MODULE_41__["log"].debug('Type ' + graphType);
|
||||
|
||||
@ -25090,7 +25141,7 @@ var render = function render(id, _txt, cb, container) {
|
||||
window.txt = txt;
|
||||
txt = encodeEntities(txt);
|
||||
var element = Object(d3__WEBPACK_IMPORTED_MODULE_0__["select"])('#d' + id).node();
|
||||
var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(txt); // insert inline style into svg
|
||||
var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(txt, cnf); // insert inline style into svg
|
||||
|
||||
var svg = element.firstChild;
|
||||
var firstChild = svg.firstChild;
|
||||
@ -25370,6 +25421,7 @@ var handleDirective = function handleDirective(p, directive, type) {
|
||||
};
|
||||
|
||||
function updateRendererConfigs(conf) {
|
||||
// Todo remove, all diagrams should get config on demoand from the config object, no need for this
|
||||
_diagrams_git_gitGraphRenderer__WEBPACK_IMPORTED_MODULE_19__["default"].setConf(conf.git);
|
||||
_diagrams_flowchart_flowRenderer__WEBPACK_IMPORTED_MODULE_12__["default"].setConf(conf.flowchart);
|
||||
_diagrams_flowchart_flowRenderer_v2__WEBPACK_IMPORTED_MODULE_13__["default"].setConf(conf.flowchart);
|
||||
@ -26992,7 +27044,7 @@ var detectType = function detectType(text) {
|
||||
}
|
||||
|
||||
if (text.match(/^\s*classDiagram/)) {
|
||||
return 'class';
|
||||
if (cnf && cnf.class && cnf.class) return 'class';
|
||||
}
|
||||
|
||||
if (text.match(/^\s*stateDiagram-v2/)) {
|
||||
|
||||
2
dist/mermaid.core.js.map
vendored
2
dist/mermaid.core.js.map
vendored
File diff suppressed because one or more lines are too long
80
dist/mermaid.js
vendored
80
dist/mermaid.js
vendored
@ -51188,6 +51188,8 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _createLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./createLabel */ "./src/dagre-wrapper/createLabel.js");
|
||||
/* harmony import */ var _shapes_note__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./shapes/note */ "./src/dagre-wrapper/shapes/note.js");
|
||||
/* harmony import */ var _diagrams_class_svgDraw__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../diagrams/class/svgDraw */ "./src/diagrams/class/svgDraw.js");
|
||||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
|
||||
// eslint-disable-line
|
||||
|
||||
@ -51533,9 +51535,10 @@ var rectWithTitle = function rectWithTitle(parent, node) {
|
||||
|
||||
var innerLine = shapeSvg.insert('line');
|
||||
var label = shapeSvg.insert('g').attr('class', 'label');
|
||||
var text2 = node.labelText.flat();
|
||||
_logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Label text', text2[0]);
|
||||
var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(text2[0], node.labelStyle, true, true));
|
||||
var text2prim = node.labelText.flat ? node.labelText.flat() : node.labelText;
|
||||
var text2 = _typeof(text2prim) === 'object' ? text2prim[0] : text2prim;
|
||||
_logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Label text', text2);
|
||||
var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(text2, node.labelStyle, true, true));
|
||||
var bbox;
|
||||
|
||||
if (Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])().flowchart.htmlLabels) {
|
||||
@ -51549,7 +51552,7 @@ var rectWithTitle = function rectWithTitle(parent, node) {
|
||||
_logger__WEBPACK_IMPORTED_MODULE_1__["log"].info('Text 2', text2);
|
||||
var textRows = text2.slice(1, text2.length);
|
||||
var titleBox = text.getBBox();
|
||||
var descr = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(textRows.join('<br/>'), node.labelStyle, true, true));
|
||||
var descr = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_5__["default"])(textRows.join ? textRows.join('<br/>') : textRows, node.labelStyle, true, true));
|
||||
|
||||
if (Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])().flowchart.htmlLabels) {
|
||||
var _div = descr.children[0];
|
||||
@ -52352,7 +52355,22 @@ var config = {
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
|
||||
/**
|
||||
@ -52993,7 +53011,22 @@ var config = {
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
git: {
|
||||
arrowMarkerAbsolute: false,
|
||||
@ -53045,7 +53078,22 @@ var config = {
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
|
||||
/**
|
||||
@ -69867,7 +69915,7 @@ case 13:return 16;
|
||||
break;
|
||||
case 14:this.popState();
|
||||
break;
|
||||
case 15: this.pushState('STATE');
|
||||
case 15: console.log('Starting STATE');this.pushState('STATE');
|
||||
break;
|
||||
case 16:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yy_.yytext);*/return 23;
|
||||
break;
|
||||
@ -69877,7 +69925,7 @@ case 18:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim();/*console.warn(
|
||||
break;
|
||||
case 19:this.popState();yy_.yytext=yy_.yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yy_.yytext);*/return 24;
|
||||
break;
|
||||
case 20:this.begin("STATE_STRING");
|
||||
case 20: console.log('Starting STATE_STRING');this.begin("STATE_STRING");
|
||||
break;
|
||||
case 21:this.popState();this.pushState('STATE_ID');return "AS";
|
||||
break;
|
||||
@ -69885,7 +69933,7 @@ case 22:this.popState();/* console.log('STATE_ID', yy_.yytext);*/return "ID";
|
||||
break;
|
||||
case 23:this.popState();
|
||||
break;
|
||||
case 24: /*console.log('Long description:', yy_.yytext);*/return "STATE_DESCR";
|
||||
case 24: console.log('Long description:', yy_.yytext);return "STATE_DESCR";
|
||||
break;
|
||||
case 25:/*console.log('COMPOSIT_STATE', yy_.yytext);*/return 17;
|
||||
break;
|
||||
@ -70747,6 +70795,8 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _dagre_wrapper_index_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../dagre-wrapper/index.js */ "./src/dagre-wrapper/index.js");
|
||||
/* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
|
||||
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils.js");
|
||||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
|
||||
|
||||
|
||||
@ -70842,7 +70892,7 @@ var setupNode = function setupNode(g, parent, node, altFlag) {
|
||||
var nodeData = {
|
||||
labelStyle: '',
|
||||
shape: nodeDb[node.id].shape,
|
||||
labelText: nodeDb[node.id].description,
|
||||
labelText: _typeof(nodeDb[node.id].description) === 'object' ? nodeDb[node.id].description[0] : nodeDb[node.id].description,
|
||||
classes: nodeDb[node.id].classes,
|
||||
//classStr,
|
||||
style: '',
|
||||
@ -73236,13 +73286,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
|
||||
|
||||
function parse(text) {
|
||||
var graphInit = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectInit(text);
|
||||
var cnf = _config__WEBPACK_IMPORTED_MODULE_3__["getConfig"]();
|
||||
|
||||
if (graphInit) {
|
||||
reinitialize(graphInit);
|
||||
_logger__WEBPACK_IMPORTED_MODULE_41__["log"].debug('reinit ', graphInit);
|
||||
}
|
||||
|
||||
var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(text);
|
||||
var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(text, cnf);
|
||||
var parser;
|
||||
_logger__WEBPACK_IMPORTED_MODULE_41__["log"].debug('Type ' + graphType);
|
||||
|
||||
@ -73442,7 +73493,7 @@ var render = function render(id, _txt, cb, container) {
|
||||
window.txt = txt;
|
||||
txt = encodeEntities(txt);
|
||||
var element = Object(d3__WEBPACK_IMPORTED_MODULE_0__["select"])('#d' + id).node();
|
||||
var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(txt); // insert inline style into svg
|
||||
var graphType = _utils__WEBPACK_IMPORTED_MODULE_44__["default"].detectType(txt, cnf); // insert inline style into svg
|
||||
|
||||
var svg = element.firstChild;
|
||||
var firstChild = svg.firstChild;
|
||||
@ -73722,6 +73773,7 @@ var handleDirective = function handleDirective(p, directive, type) {
|
||||
};
|
||||
|
||||
function updateRendererConfigs(conf) {
|
||||
// Todo remove, all diagrams should get config on demoand from the config object, no need for this
|
||||
_diagrams_git_gitGraphRenderer__WEBPACK_IMPORTED_MODULE_19__["default"].setConf(conf.git);
|
||||
_diagrams_flowchart_flowRenderer__WEBPACK_IMPORTED_MODULE_12__["default"].setConf(conf.flowchart);
|
||||
_diagrams_flowchart_flowRenderer_v2__WEBPACK_IMPORTED_MODULE_13__["default"].setConf(conf.flowchart);
|
||||
@ -75343,7 +75395,7 @@ var detectType = function detectType(text) {
|
||||
}
|
||||
|
||||
if (text.match(/^\s*classDiagram/)) {
|
||||
return 'class';
|
||||
if (cnf && cnf.class && cnf.class) return 'class';
|
||||
}
|
||||
|
||||
if (text.match(/^\s*stateDiagram-v2/)) {
|
||||
|
||||
2
dist/mermaid.js.map
vendored
2
dist/mermaid.js.map
vendored
File diff suppressed because one or more lines are too long
10
dist/mermaid.min.js
vendored
10
dist/mermaid.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mermaid.min.js.map
vendored
2
dist/mermaid.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -219,6 +219,21 @@ available space if not the absolute space required is used.
|
||||
|
||||
Default value: true
|
||||
|
||||
### defaultRenderer
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------------- | ----------- | ------- | -------- | ----------------------- |
|
||||
| defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
|
||||
**Notes:**
|
||||
|
||||
Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
|
||||
- dagre-d3
|
||||
- dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
|
||||
Default value: 'dagre-d3'
|
||||
|
||||
## sequence
|
||||
|
||||
The object containing configurations specific for sequence diagrams
|
||||
@ -764,6 +779,21 @@ available space if not the absolute space required is used.
|
||||
|
||||
Default value: true
|
||||
|
||||
## defaultRenderer
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------------- | ----------- | ------- | -------- | ----------------------- |
|
||||
| defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
|
||||
**Notes:**
|
||||
|
||||
Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
|
||||
- dagre-d3
|
||||
- dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
|
||||
Default value: 'dagre-d3'
|
||||
|
||||
## useMaxWidth
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
@ -790,6 +820,21 @@ available space if not the absolute space required is used.
|
||||
|
||||
Default value: true
|
||||
|
||||
## defaultRenderer
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------------- | ----------- | ------- | -------- | ----------------------- |
|
||||
| defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
|
||||
**Notes:**
|
||||
|
||||
Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
|
||||
- dagre-d3
|
||||
- dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
|
||||
Default value: 'dagre-d3'
|
||||
|
||||
## er
|
||||
|
||||
The object containing configurations specific for entity relationship diagrams
|
||||
|
||||
@ -85,6 +85,7 @@ function addHtmlLabel(node) {
|
||||
|
||||
const createLabel = (_vertexText, style, isTitle, isNode) => {
|
||||
let vertexText = _vertexText || '';
|
||||
if (typeof vertexText === 'object') vertexText = vertexText[0];
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
|
||||
vertexText = vertexText.replace(/\\n|\n/g, '<br />');
|
||||
|
||||
@ -17,7 +17,7 @@ import { log } from '../logger';
|
||||
const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
||||
log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);
|
||||
const dir = graph.graph().rankdir;
|
||||
log.warn('Dir in recursive render - dir:', dir);
|
||||
log.trace('Dir in recursive render - dir:', dir);
|
||||
|
||||
const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
|
||||
if (!graph.nodes()) {
|
||||
@ -26,7 +26,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
||||
log.info('Recursive render XXX', graph.nodes());
|
||||
}
|
||||
if (graph.edges().length > 0) {
|
||||
log.info('Recursive edges', graph.edge(graph.edges()[0]));
|
||||
log.trace('Recursive edges', graph.edge(graph.edges()[0]));
|
||||
}
|
||||
const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
|
||||
const edgePaths = elem.insert('g').attr('class', 'edgePaths');
|
||||
@ -43,7 +43,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
||||
log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
|
||||
graph.setNode(parentCluster.id, data);
|
||||
if (!graph.parent(v)) {
|
||||
log.warn('Setting parent', v, parentCluster.id);
|
||||
log.trace('Setting parent', v, parentCluster.id);
|
||||
graph.setParent(v, parentCluster.id, data);
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ export const clear = () => {
|
||||
const isDecendant = (id, ancenstorId) => {
|
||||
// if (id === ancenstorId) return true;
|
||||
|
||||
log.debug(
|
||||
log.trace(
|
||||
'In isDecendant',
|
||||
ancenstorId,
|
||||
' ',
|
||||
@ -358,13 +358,20 @@ export const extractor = (graph, depth) => {
|
||||
);
|
||||
|
||||
const graphSettings = graph.graph();
|
||||
let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB';
|
||||
if (clusterDb[node]) {
|
||||
if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
|
||||
dir = clusterDb[node].clusterData.dir;
|
||||
log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);
|
||||
}
|
||||
}
|
||||
|
||||
const clusterGraph = new graphlib.Graph({
|
||||
multigraph: true,
|
||||
compound: true
|
||||
})
|
||||
.setGraph({
|
||||
rankdir: graphSettings.rankdir === 'TB' ? 'LR' : 'TB', // Todo: set proper spacing
|
||||
rankdir: dir, // Todo: set proper spacing
|
||||
nodesep: 50,
|
||||
ranksep: 50,
|
||||
marginx: 8,
|
||||
|
||||
@ -319,12 +319,18 @@ const rectWithTitle = (parent, node) => {
|
||||
|
||||
const label = shapeSvg.insert('g').attr('class', 'label');
|
||||
|
||||
const text2prim = node.labelText.flat ? node.labelText.flat() : node.labelText;
|
||||
const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;
|
||||
const text2 = node.labelText.flat ? node.labelText.flat() : node.labelText;
|
||||
// const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;
|
||||
|
||||
log.info('Label text', text2);
|
||||
let title = '';
|
||||
if (typeof text2 === 'object') {
|
||||
title = text2[0];
|
||||
} else {
|
||||
title = text2;
|
||||
}
|
||||
log.info('Label text abc79', title, text2, typeof text2 === 'object');
|
||||
|
||||
const text = label.node().appendChild(createLabel(text2, node.labelStyle, true, true));
|
||||
const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true));
|
||||
let bbox;
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
const div = text.children[0];
|
||||
|
||||
@ -226,7 +226,22 @@ const config = {
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
|
||||
/**
|
||||
@ -871,7 +886,21 @@ top of the chart
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
git: {
|
||||
arrowMarkerAbsolute: false,
|
||||
@ -923,7 +952,21 @@ top of the chart
|
||||
*
|
||||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true
|
||||
useMaxWidth: true,
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values|
|
||||
* | --- | --- | --- | --- | --- |
|
||||
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||||
* * dagre-d3
|
||||
* * dagre-wrapper - wrapper for dagre implemented in mermaid
|
||||
*
|
||||
* Default value: 'dagre-d3'
|
||||
*/
|
||||
defaultRenderer: 'dagre-d3'
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -96,13 +96,14 @@ const setupNode = (g, parent, node, altFlag) => {
|
||||
const nodeData = {
|
||||
labelStyle: '',
|
||||
shape: nodeDb[node.id].shape,
|
||||
labelText:
|
||||
typeof nodeDb[node.id].description === 'object'
|
||||
? nodeDb[node.id].description[0]
|
||||
: nodeDb[node.id].description,
|
||||
labelText: nodeDb[node.id].description,
|
||||
// typeof nodeDb[node.id].description === 'object'
|
||||
// ? nodeDb[node.id].description[0]
|
||||
// : nodeDb[node.id].description,
|
||||
classes: nodeDb[node.id].classes, //classStr,
|
||||
style: '', //styles.style,
|
||||
id: node.id,
|
||||
dir: altFlag ? 'LR' : 'TB',
|
||||
domId: 'state-' + node.id + '-' + cnt,
|
||||
type: nodeDb[node.id].type,
|
||||
padding: 15 //getConfig().flowchart.padding
|
||||
@ -167,12 +168,12 @@ const setupNode = (g, parent, node, altFlag) => {
|
||||
|
||||
if (parent) {
|
||||
if (parent.id !== 'root') {
|
||||
log.info('Setting node ', node.id, ' to be child of its parent ', parent.id);
|
||||
log.trace('Setting node ', node.id, ' to be child of its parent ', parent.id);
|
||||
g.setParent(node.id, parent.id);
|
||||
}
|
||||
}
|
||||
if (node.doc) {
|
||||
log.info('Adding nodes children ');
|
||||
log.trace('Adding nodes children ');
|
||||
setupDoc(g, node, node.doc, !altFlag);
|
||||
}
|
||||
};
|
||||
|
||||
@ -69,12 +69,13 @@ import theme from './themes';
|
||||
import utils, { assignWithDepth } from './utils';
|
||||
|
||||
function parse(text) {
|
||||
const graphInit = utils.detectInit(text);
|
||||
const cnf = configApi.getConfig();
|
||||
const graphInit = utils.detectInit(text, cnf);
|
||||
if (graphInit) {
|
||||
reinitialize(graphInit);
|
||||
log.debug('reinit ', graphInit);
|
||||
}
|
||||
const graphType = utils.detectType(text);
|
||||
const graphType = utils.detectType(text, cnf);
|
||||
let parser;
|
||||
|
||||
log.debug('Type ' + graphType);
|
||||
@ -232,7 +233,7 @@ const render = function(id, _txt, cb, container) {
|
||||
// }
|
||||
// console.warn('Render fetching config');
|
||||
|
||||
const cnf = configApi.getConfig();
|
||||
let cnf = configApi.getConfig();
|
||||
// Check the maximum allowed text size
|
||||
if (_txt.length > cnf.maxTextSize) {
|
||||
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
|
||||
@ -274,7 +275,7 @@ const render = function(id, _txt, cb, container) {
|
||||
txt = encodeEntities(txt);
|
||||
|
||||
const element = select('#d' + id).node();
|
||||
const graphType = utils.detectType(txt);
|
||||
const graphType = utils.detectType(txt, cnf);
|
||||
|
||||
// insert inline style into svg
|
||||
const svg = element.firstChild;
|
||||
@ -560,6 +561,7 @@ const handleDirective = function(p, directive, type) {
|
||||
};
|
||||
|
||||
function updateRendererConfigs(conf) {
|
||||
// Todo remove, all diagrams should get config on demoand from the config object, no need for this
|
||||
gitGraphRenderer.setConf(conf.git);
|
||||
flowRenderer.setConf(conf.flowchart);
|
||||
flowRendererV2.setConf(conf.flowchart);
|
||||
|
||||
10
src/utils.js
10
src/utils.js
@ -65,7 +65,7 @@ const anyComment = /\s*%%.*\n/gm;
|
||||
* @param {string} text The text defining the graph
|
||||
* @returns {object} the json object representing the init passed to mermaid.initialize()
|
||||
*/
|
||||
export const detectInit = function(text) {
|
||||
export const detectInit = function(text, cnf) {
|
||||
let inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
|
||||
let results = {};
|
||||
if (Array.isArray(inits)) {
|
||||
@ -75,7 +75,7 @@ export const detectInit = function(text) {
|
||||
results = inits.args;
|
||||
}
|
||||
if (results) {
|
||||
let type = detectType(text);
|
||||
let type = detectType(text, cnf);
|
||||
['config'].forEach(prop => {
|
||||
if (typeof results[prop] !== 'undefined') {
|
||||
if (type === 'flowchart-v2') {
|
||||
@ -173,7 +173,7 @@ export const detectDirective = function(text, type = null) {
|
||||
* @param {string} text The text defining the graph
|
||||
* @returns {string} A graph definition key
|
||||
*/
|
||||
export const detectType = function(text) {
|
||||
export const detectType = function(text, cnf) {
|
||||
text = text.replace(directive, '').replace(anyComment, '\n');
|
||||
log.debug('Detecting diagram type based on the text ' + text);
|
||||
if (text.match(/^\s*sequenceDiagram/)) {
|
||||
@ -187,6 +187,7 @@ export const detectType = function(text) {
|
||||
return 'classDiagram';
|
||||
}
|
||||
if (text.match(/^\s*classDiagram/)) {
|
||||
if (cnf && cnf.class && cnf.class.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
|
||||
return 'class';
|
||||
}
|
||||
|
||||
@ -195,6 +196,7 @@ export const detectType = function(text) {
|
||||
}
|
||||
|
||||
if (text.match(/^\s*stateDiagram/)) {
|
||||
if (cnf && cnf.class && cnf.state.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
|
||||
return 'state';
|
||||
}
|
||||
|
||||
@ -223,6 +225,8 @@ export const detectType = function(text) {
|
||||
if (text.match(/^\s*requirement/) || text.match(/^\s*requirementDiagram/)) {
|
||||
return 'requirement';
|
||||
}
|
||||
if (cnf && cnf.flowchart && cnf.flowchart.defaultRenderer === 'dagre-wrapper')
|
||||
return 'flowchart-v2';
|
||||
|
||||
return 'flowchart';
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user