GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

feat: adding new security level sandbox, diagram updates

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-01-21 17:17:31 +01:00
parent 413816783d
commit 06834eb383
19 changed files with 399 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
cypress/platform/knsv.html
View File

@ -25,28 +25,156 @@
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid2" style="width: 100%;">
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
</div>
<div class="mermaid" style="width: 100%;"> <div class="mermaid" style="width: 100%;">
classDiagram gantt
Animal "1" <|-- Duck dateFormat :YYYY-MM-DD
Animal <|-- Fish title Adding GANTT diagram functionality to mermaid
Animal <--o Zebra excludes :excludes the named dates/days from being included in a charted task..
Animal : +int age section A section
Animal : +String gender Completed task :done, des1, 2014-01-06,2014-01-08
Animal: +isMammal() Active task :active, des2, 2014-01-09, 3d
Animal: +mate() Future task : des3, after des2, 5d
class Duck{ Future task2 : des4, after des3, 5d
+String beakColor
+swim() section Critical tasks
+quack() Completed task in the critical line :crit, done, 2014-01-06,24h
} Implement parser and jison :crit, done, after des1, 2d
class Fish{ Create tests for parser :crit, active, 3d
-int sizeInFeet Future task in critical line :crit, 5d
-canEat() Create tests for renderer :2d
} Add to mermaid :1d
class Zebra{
+bool is_wild section Documentation
+run() Describe gantt syntax :active, a1, after des1, 3d
} Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
</div>
<div class="mermaid2" style="width: 100%;">
info
</div>
<div class="mermaid2" style="width: 100%;">
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
</div>
<div class="mermaid2" style="width: 100%;">
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
</div>
<div class="mermaid2" style="width: 100%;">
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
functionalRequirement test_req2 {
id: 1.1
text: the second test text.
risk: low
verifymethod: inspection
}
performanceRequirement test_req3 {
id: 1.2
text: the third test text.
risk: medium
verifymethod: demonstration
}
element test_entity {
type: simulation
}
element test_entity2 {
type: word doc
docRef: reqs/test_entity
}
test_entity - satisfies -> test_req2
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid2" style="width: 100%;">
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
<div class="mermaid2" style="width: 100%;">
graph TB
subgraph One
a1-->a2-->a3
end
</div>
<div class="mermaid2" style="width: 100%;">
stateDiagram
[*] --> S1
state "Some long name" as S1
</div>
<div class="mermaid2" style="width: 100%;">
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
@ -57,9 +185,17 @@ classDiagram
mermaid.initialize({ mermaid.initialize({
// theme: 'dark', // theme: 'dark',
theme: 'forest', theme: 'forest',
arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false }, flowchart: {
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
defaultRenderer: 'dagre-d3',
},
class: {
defaultRenderer: 'dagre-d3',
},
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false }, sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
@ -68,12 +204,12 @@ classDiagram
state: { state: {
nodeSpacing: 50, nodeSpacing: 50,
rankSpacing: 50, rankSpacing: 50,
defaultRenderer: 'dagre-wrapper', defaultRenderer: 'dagre-d3',
}, },
logLevel: 0, logLevel: 0,
fontSize: 18, fontSize: 18,
curve: 'cardinal', curve: 'cardinal',
securityLevel: 'sandbox', // securityLevel: 'sandbox',
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {

BIN
cypress/screenshots/other/rerender.spec.js/Rerendering -- should be able to render after an error has occured (failed).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
cypress/screenshots/rendering/sequencediagram.spec.js/Sequence diagram -- svg size -- should render a sequence diagram when useMaxWidth is false (failed).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
cypress/screenshots/rendering/sequencediagram.spec.js/Sequence diagram -- svg size -- should render a sequence diagram when useMaxWidth is true (default) (failed).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

93
src/diagrams/class/classRenderer-v2.js
View File

@ -269,99 +269,6 @@ export const setConf = function (cnf) {
* @param {string} text * @param {string} text
* @param {string} id * @param {string} id
*/ */
export const drawOld = function (text, id) {
idCache = {};
parser.yy.clear();
parser.parse(text);
log.info('Rendering diagram ' + text);
// Fetch the default direction, use TD if none was found
const diagram = select(`[id='${id}']`);
// insertMarkers(diagram);
// Layout graph, Create a new directed graph
const g = new graphlib.Graph({
multigraph: true,
});
// Set an object for the graph label
g.setGraph({
isMultiGraph: true,
});
// Default to assigning a new object as a label for each new edge.
g.setDefaultEdgeLabel(function () {
return {};
});
const classes = classDb.getClasses();
log.info('classes:');
log.info(classes);
const keys = Object.keys(classes);
for (let i = 0; i < keys.length; i++) {
const classDef = classes[keys[i]];
const node = svgDraw.drawClass(diagram, classDef, conf);
idCache[node.id] = node;
// Add nodes to the graph. The first argument is the node id. The second is
// metadata about the node. In this case we're going to add labels to each of
// our nodes.
g.setNode(node.id, node);
log.info('Org height: ' + node.height);
}
const relations = classDb.getRelations();
log.info('relations:', relations);
relations.forEach(function (relation) {
log.info(
'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
);
g.setEdge(
getGraphId(relation.id1),
getGraphId(relation.id2),
{
relation: relation,
},
relation.title || 'DEFAULT'
);
});
dagre.layout(g);
g.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
select('#' + lookUpDomId(v)).attr(
'transform',
'translate(' +
(g.node(v).x - g.node(v).width / 2) +
',' +
(g.node(v).y - g.node(v).height / 2) +
' )'
);
}
});
g.edges().forEach(function (e) {
if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);
}
});
const svgBounds = diagram.node().getBBox();
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
log.debug(`viewBox ${vBox}`);
diagram.attr('viewBox', vBox);
};
export const draw = function (text, id) { export const draw = function (text, id) {
log.info('Drawing class - ', id); log.info('Drawing class - ', id);
classDb.clear(); classDb.clear();

33
src/diagrams/class/classRenderer.js
View File

@ -6,6 +6,7 @@ import classDb, { lookUpDomId } from './classDb';
import { parser } from './parser/classDiagram'; import { parser } from './parser/classDiagram';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
import { getConfig } from '../../config';
parser.yy = classDb; parser.yy = classDb;
@ -165,8 +166,20 @@ export const draw = function (text, id) {
log.info('Rendering diagram ' + text); log.info('Rendering diagram ' + text);
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// Fetch the default direction, use TD if none was found // Fetch the default direction, use TD if none was found
const diagram = select(`[id='${id}']`); const diagram = root.select(`[id='${id}']`);
diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
insertMarkers(diagram); insertMarkers(diagram);
@ -220,14 +233,16 @@ export const draw = function (text, id) {
g.nodes().forEach(function (v) { g.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') { if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v))); log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
select('#' + lookUpDomId(v)).attr( root
'transform', .select('#' + lookUpDomId(v))
'translate(' + .attr(
(g.node(v).x - g.node(v).width / 2) + 'transform',
',' + 'translate(' +
(g.node(v).y - g.node(v).height / 2) + (g.node(v).x - g.node(v).width / 2) +
' )' ',' +
); (g.node(v).y - g.node(v).height / 2) +
' )'
);
} }
}); });

13
src/diagrams/er/erRenderer.js
View File

@ -545,6 +545,17 @@ export const draw = function (text, id) {
erDb.clear(); erDb.clear();
const parser = erParser.parser; const parser = erParser.parser;
parser.yy = erDb; parser.yy = erDb;
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// Parse the text to populate erDb // Parse the text to populate erDb
try { try {
@ -554,7 +565,7 @@ export const draw = function (text, id) {
} }
// Get a reference to the svg node that contains the text // Get a reference to the svg node that contains the text
const svg = select(`[id='${id}']`); const svg = root.select(`[id='${id}']`);
// Add cardinality marker definitions to the svg // Add cardinality marker definitions to the svg
erMarkers.insertMarkers(svg, conf); erMarkers.insertMarkers(svg, conf);

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

@ -25,9 +25,11 @@ export const setConf = function (cnf) {
* @param vert Object containing the vertices. * @param vert Object containing the vertices.
* @param g The graph that is to be drawn. * @param g The graph that is to be drawn.
* @param svgId * @param svgId
* @param root
* @param doc
*/ */
export const addVertices = function (vert, g, svgId) { export const addVertices = function (vert, g, svgId, root, doc) {
const svg = select(`[id="${svgId}"]`); const svg = root.select(`[id="${svgId}"]`);
const keys = Object.keys(vert); const keys = Object.keys(vert);
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
@ -62,13 +64,13 @@ export const addVertices = function (vert, g, svgId) {
vertexNode = addHtmlLabel(svg, node).node(); vertexNode = addHtmlLabel(svg, node).node();
vertexNode.parentNode.removeChild(vertexNode); vertexNode.parentNode.removeChild(vertexNode);
} else { } else {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:')); svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
const rows = vertexText.split(common.lineBreakRegex); const rows = vertexText.split(common.lineBreakRegex);
for (let j = 0; j < rows.length; j++) { for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em'); tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1'); tspan.setAttribute('x', '1');
@ -374,6 +376,18 @@ export const draw = function (text, id) {
const nodeSpacing = conf.nodeSpacing || 50; const nodeSpacing = conf.nodeSpacing || 50;
const rankSpacing = conf.rankSpacing || 50; const rankSpacing = conf.rankSpacing || 50;
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// Create the input mermaid.graph // Create the input mermaid.graph
const g = new graphlib.Graph({ const g = new graphlib.Graph({
multigraph: true, multigraph: true,
@ -417,18 +431,18 @@ export const draw = function (text, id) {
g.setParent(subG.nodes[j], subG.id); g.setParent(subG.nodes[j], subG.id);
} }
} }
addVertices(vert, g, id); addVertices(vert, g, id, root, doc);
addEdges(edges, g); addEdges(edges, g);
// Add custom shapes // Add custom shapes
// flowChartShapes.addToRenderV2(addShape); // flowChartShapes.addToRenderV2(addShape);
// Set up an SVG group so that we can translate the final graph. // Set up an SVG group so that we can translate the final graph.
const svg = select(`[id="${id}"]`); const svg = root.select(`[id="${id}"]`);
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
const element = select('#' + id + ' g'); const element = root.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id); render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
const padding = conf.diagramPadding; const padding = conf.diagramPadding;
@ -452,14 +466,14 @@ export const draw = function (text, id) {
// Add label rects for non html labels // Add label rects for non html labels
if (!conf.htmlLabels) { if (!conf.htmlLabels) {
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) { for (let k = 0; k < labels.length; k++) {
const label = labels[k]; const label = labels[k];
// Get dimensions of label // Get dimensions of label
const dim = label.getBBox(); const dim = label.getBBox();
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); const rect = doc.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('rx', 0); rect.setAttribute('rx', 0);
rect.setAttribute('ry', 0); rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width); rect.setAttribute('width', dim.width);
@ -478,7 +492,7 @@ export const draw = function (text, id) {
if (vertex.link) { if (vertex.link) {
const node = select('#' + id + ' [id="' + key + '"]'); const node = select('#' + id + ' [id="' + key + '"]');
if (node) { if (node) {
const link = document.createElementNS('http://www.w3.org/2000/svg', 'a'); const link = doc.createElementNS('http://www.w3.org/2000/svg', 'a');
link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' ')); link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link); link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener'); link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');

40
src/diagrams/flowchart/flowRenderer.js
View File

@ -26,9 +26,12 @@ export const setConf = function (cnf) {
* @param vert Object containing the vertices. * @param vert Object containing the vertices.
* @param g The graph that is to be drawn. * @param g The graph that is to be drawn.
* @param svgId * @param svgId
* @param root
* @param doc
*/ */
export const addVertices = function (vert, g, svgId) { export const addVertices = function (vert, g, svgId, root, doc) {
const svg = select(`[id="${svgId}"]`); const securityLevel = getConfig().securityLevel;
const svg = root.select(`[id="${svgId}"]`);
const keys = Object.keys(vert); const keys = Object.keys(vert);
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
@ -63,13 +66,13 @@ export const addVertices = function (vert, g, svgId) {
vertexNode = addHtmlLabel(svg, node).node(); vertexNode = addHtmlLabel(svg, node).node();
vertexNode.parentNode.removeChild(vertexNode); vertexNode.parentNode.removeChild(vertexNode);
} else { } else {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:')); svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
const rows = vertexText.split(common.lineBreakRegex); const rows = vertexText.split(common.lineBreakRegex);
for (let j = 0; j < rows.length; j++) { for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em'); tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1'); tspan.setAttribute('x', '1');
@ -293,6 +296,17 @@ export const draw = function (text, id) {
const parser = flow.parser; const parser = flow.parser;
parser.yy = flowDb; parser.yy = flowDb;
const securityLevel = getConfig().securityLevel;
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// Parse the graph definition // Parse the graph definition
// try { // try {
parser.parse(text); parser.parse(text);
@ -355,7 +369,7 @@ export const draw = function (text, id) {
g.setParent(flowDb.lookUpDomId(subG.nodes[j]), flowDb.lookUpDomId(subG.id)); g.setParent(flowDb.lookUpDomId(subG.nodes[j]), flowDb.lookUpDomId(subG.id));
} }
} }
addVertices(vert, g, id); addVertices(vert, g, id, root, doc);
addEdges(edges, g); addEdges(edges, g);
// Create the renderer // Create the renderer
@ -404,13 +418,13 @@ export const draw = function (text, id) {
}; };
// Set up an SVG group so that we can translate the final graph. // Set up an SVG group so that we can translate the final graph.
const svg = select(`[id="${id}"]`); const svg = root.select(`[id="${id}"]`);
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
log.warn(g); log.warn(g);
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
const element = select('#' + id + ' g'); const element = root.select('#' + id + ' g');
render(element, g); render(element, g);
element.selectAll('g.node').attr('title', function () { element.selectAll('g.node').attr('title', function () {
@ -436,10 +450,10 @@ export const draw = function (text, id) {
for (i = 0; i < subGraphs.length; i++) { for (i = 0; i < subGraphs.length; i++) {
subG = subGraphs[i]; subG = subGraphs[i];
if (subG.title !== 'undefined') { if (subG.title !== 'undefined') {
const clusterRects = document.querySelectorAll( const clusterRects = doc.querySelectorAll(
'#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"] rect' '#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"] rect'
); );
const clusterEl = document.querySelectorAll( const clusterEl = doc.querySelectorAll(
'#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"]' '#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"]'
); );
@ -459,14 +473,14 @@ export const draw = function (text, id) {
// Add label rects for non html labels // Add label rects for non html labels
if (!evaluate(conf.htmlLabels) || true) { // eslint-disable-line if (!evaluate(conf.htmlLabels) || true) { // eslint-disable-line
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) { for (let k = 0; k < labels.length; k++) {
const label = labels[k]; const label = labels[k];
// Get dimensions of label // Get dimensions of label
const dim = label.getBBox(); const dim = label.getBBox();
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); const rect = doc.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('rx', 0); rect.setAttribute('rx', 0);
rect.setAttribute('ry', 0); rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width); rect.setAttribute('width', dim.width);
@ -483,9 +497,9 @@ export const draw = function (text, id) {
const vertex = vert[key]; const vertex = vert[key];
if (vertex.link) { if (vertex.link) {
const node = select('#' + id + ' [id="' + flowDb.lookUpDomId(key) + '"]'); const node = root.select('#' + id + ' [id="' + flowDb.lookUpDomId(key) + '"]');
if (node) { if (node) {
const link = document.createElementNS('http://www.w3.org/2000/svg', 'a'); const link = doc.createElementNS('http://www.w3.org/2000/svg', 'a');
link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' ')); link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link); link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener'); link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');

20
src/diagrams/gantt/ganttRenderer.js
View File

@ -29,7 +29,19 @@ export const draw = function (text, id) {
parser.yy.clear(); parser.yy.clear();
parser.parse(text); parser.parse(text);
const elem = document.getElementById(id); const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
const elem = doc.getElementById(id);
w = elem.parentElement.offsetWidth; w = elem.parentElement.offsetWidth;
if (typeof w === 'undefined') { if (typeof w === 'undefined') {
@ -47,7 +59,7 @@ export const draw = function (text, id) {
// Set viewBox // Set viewBox
elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h); elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
const svg = select(`[id="${id}"]`); const svg = root.select(`[id="${id}"]`);
// Set timescale // Set timescale
const timeScale = scaleTime() const timeScale = scaleTime()
@ -505,11 +517,11 @@ export const draw = function (text, id) {
const rows = d[0].split(common.lineBreakRegex); const rows = d[0].split(common.lineBreakRegex);
const dy = -(rows.length - 1) / 2; const dy = -(rows.length - 1) / 2;
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('dy', dy + 'em'); svgLabel.setAttribute('dy', dy + 'em');
for (let j = 0; j < rows.length; j++) { for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttribute('alignment-baseline', 'central'); tspan.setAttribute('alignment-baseline', 'central');
tspan.setAttribute('x', '10'); tspan.setAttribute('x', '10');
if (j > 0) tspan.setAttribute('dy', '1em'); if (j > 0) tspan.setAttribute('dy', '1em');

15
src/diagrams/git/gitGraphRenderer.js
View File

@ -4,6 +4,7 @@ import db from './gitGraphAst';
import gitGraphParser from './parser/gitGraph'; import gitGraphParser from './parser/gitGraph';
import { log } from '../../logger'; import { log } from '../../logger';
import { interpolateToCurve } from '../../utils'; import { interpolateToCurve } from '../../utils';
import { getConfig } from '../../config';
let allCommitsDict = {}; let allCommitsDict = {};
let branchNum; let branchNum;
@ -338,6 +339,18 @@ export const draw = function (txt, id, ver) {
parser.yy = db; parser.yy = db;
parser.yy.clear(); parser.yy.clear();
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver); log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
// Parse the graph definition // Parse the graph definition
parser.parse(txt + '\n'); parser.parse(txt + '\n');
@ -352,7 +365,7 @@ export const draw = function (txt, id, ver) {
config.nodeLabel.width = '100%'; config.nodeLabel.width = '100%';
config.nodeLabel.y = -1 * 2 * config.nodeRadius; config.nodeLabel.y = -1 * 2 * config.nodeRadius;
} }
const svg = select(`[id="${id}"]`); const svg = root.select(`[id="${id}"]`);
svgCreateDefs(svg); svgCreateDefs(svg);
branchNum = 1; branchNum = 1;
for (let branch in branches) { for (let branch in branches) {

16
src/diagrams/info/infoRenderer.js
View File

@ -3,6 +3,7 @@ import { select } from 'd3';
import db from './infoDb'; import db from './infoDb';
import infoParser from './parser/info'; import infoParser from './parser/info';
import { log } from '../../logger'; import { log } from '../../logger';
import { getConfig } from '../../config';
const conf = {}; const conf = {};
export const setConf = function (cnf) { export const setConf = function (cnf) {
@ -25,11 +26,24 @@ export const draw = (text, id, version) => {
const parser = infoParser.parser; const parser = infoParser.parser;
parser.yy = db; parser.yy = db;
log.debug('Renering info diagram\n' + text); log.debug('Renering info diagram\n' + text);
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// Parse the graph definition // Parse the graph definition
parser.parse(text); parser.parse(text);
log.debug('Parsed info diagram'); log.debug('Parsed info diagram');
// Fetch the default direction, use TD if none was found // Fetch the default direction, use TD if none was found
const svg = select('#' + id); const svg = root.select('#' + id);
const g = svg.append('g'); const g = svg.append('g');

17
src/diagrams/pie/pieRenderer.js
View File

@ -22,11 +22,24 @@ export const draw = (txt, id) => {
const parser = pieParser.parser; const parser = pieParser.parser;
parser.yy = pieData; parser.yy = pieData;
log.debug('Rendering info diagram\n' + txt); log.debug('Rendering info diagram\n' + txt);
const securityLevel = configApi.getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// Parse the Pie Chart definition // Parse the Pie Chart definition
parser.yy.clear(); parser.yy.clear();
parser.parse(txt); parser.parse(txt);
log.debug('Parsed info diagram'); log.debug('Parsed info diagram');
const elem = document.getElementById(id); const elem = doc.getElementById(id);
width = elem.parentElement.offsetWidth; width = elem.parentElement.offsetWidth;
if (typeof width === 'undefined') { if (typeof width === 'undefined') {
@ -40,7 +53,7 @@ export const draw = (txt, id) => {
width = conf.pie.useWidth; width = conf.pie.useWidth;
} }
const diagram = select('#' + id); const diagram = root.select('#' + id);
configureSvgSize(diagram, height, width, conf.pie.useMaxWidth); configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
// Set viewBox // Set viewBox

15
src/diagrams/requirement/requirementRenderer.js
View File

@ -8,6 +8,7 @@ import common from '../common/common';
import { parser } from './parser/requirementDiagram'; import { parser } from './parser/requirementDiagram';
import requirementDb from './requirementDb'; import requirementDb from './requirementDb';
import markers from './requirementMarkers'; import markers from './requirementMarkers';
import { getConfig } from '../../config';
const conf = {}; const conf = {};
let relCnt = 0; let relCnt = 0;
@ -321,7 +322,19 @@ export const draw = (text, id) => {
parser.yy.clear(); parser.yy.clear();
parser.parse(text); parser.parse(text);
const svg = select(`[id='${id}']`); const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
const svg = root.select(`[id='${id}']`);
markers.insertLineEndings(svg, conf); markers.insertLineEndings(svg, conf);
const g = new graphlib.Graph({ const g = new graphlib.Graph({

12
src/diagrams/sequence/sequenceRenderer.js
View File

@ -539,6 +539,18 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
*/ */
export const draw = function (text, id) { export const draw = function (text, id) {
conf = configApi.getConfig().sequence; conf = configApi.getConfig().sequence;
const securityLevel = configApi.getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
parser.yy.clear(); parser.yy.clear();
parser.yy.setWrap(conf.wrap); parser.yy.setWrap(conf.wrap);
parser.parse(text + '\n'); parser.parse(text + '\n');

16
src/diagrams/state/stateRenderer-v2.js
View File

@ -258,6 +258,8 @@ export const draw = function (text, id) {
const nodeSpacing = conf.nodeSpacing || 50; const nodeSpacing = conf.nodeSpacing || 50;
const rankSpacing = conf.rankSpacing || 50; const rankSpacing = conf.rankSpacing || 50;
const securityLevel = getConfig().securityLevel;
log.info(stateDb.getRootDocV2()); log.info(stateDb.getRootDocV2());
stateDb.extract(stateDb.getRootDocV2()); stateDb.extract(stateDb.getRootDocV2());
log.info(stateDb.getRootDocV2()); log.info(stateDb.getRootDocV2());
@ -281,10 +283,20 @@ export const draw = function (text, id) {
setupNode(g, undefined, stateDb.getRootDocV2(), true); setupNode(g, undefined, stateDb.getRootDocV2(), true);
// Set up an SVG group so that we can translate the final graph. // Set up an SVG group so that we can translate the final graph.
const svg = select(`[id="${id}"]`); let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
const svg = root.select(`[id="${id}"]`);
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
const element = select('#' + id + ' g');
const element = root.select('#' + id + ' g');
render(element, g, ['barb'], 'statediagram', id); render(element, g, ['barb'], 'statediagram', id);
const padding = 8; const padding = 8;

51
src/diagrams/state/stateRenderer.js
View File

@ -46,12 +46,24 @@ const insertMarkers = function (elem) {
*/ */
export const draw = function (text, id) { export const draw = function (text, id) {
conf = getConfig().state; conf = getConfig().state;
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
parser.yy.clear(); parser.yy.clear();
parser.parse(text); parser.parse(text);
log.debug('Rendering diagram ' + text); log.debug('Rendering diagram ' + text);
// Fetch the default direction, use TD if none was found // Fetch the default direction, use TD if none was found
const diagram = select(`[id='${id}']`); const diagram = root.select(`[id='${id}']`);
insertMarkers(diagram); insertMarkers(diagram);
// Layout graph, Create a new directed graph // Layout graph, Create a new directed graph
@ -69,7 +81,7 @@ export const draw = function (text, id) {
}); });
const rootDoc = stateDb.getRootDoc(); const rootDoc = stateDb.getRootDoc();
renderDoc(rootDoc, diagram, undefined, false); renderDoc(rootDoc, diagram, undefined, false, root, doc);
const padding = conf.padding; const padding = conf.padding;
const bounds = diagram.node().getBBox(); const bounds = diagram.node().getBBox();
@ -90,7 +102,7 @@ const getLabelWidth = (text) => {
return text ? text.length * conf.fontSizeFactor : 1; return text ? text.length * conf.fontSizeFactor : 1;
}; };
const renderDoc = (doc, diagram, parentId, altBkg) => { const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument) => {
// Layout graph, Create a new directed graph // Layout graph, Create a new directed graph
const graph = new graphlib.Graph({ const graph = new graphlib.Graph({
compound: true, compound: true,
@ -159,7 +171,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
let node; let node;
if (stateDef.doc) { if (stateDef.doc) {
let sub = diagram.append('g').attr('id', stateDef.id).attr('class', 'stateGroup'); let sub = diagram.append('g').attr('id', stateDef.id).attr('class', 'stateGroup');
node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg); node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg, root, domDocument);
if (first) { if (first) {
// first = false; // first = false;
@ -234,21 +246,22 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
graph.nodes().forEach(function (v) { graph.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') { if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
log.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v))); log.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
select('#' + svgElem.id + ' #' + v).attr( root
'transform', .select('#' + svgElem.id + ' #' + v)
'translate(' + .attr(
(graph.node(v).x - graph.node(v).width / 2) + 'transform',
',' + 'translate(' +
(graph.node(v).y + (graph.node(v).x - graph.node(v).width / 2) +
(transformationLog[v] ? transformationLog[v].y : 0) - ',' +
graph.node(v).height / 2) + (graph.node(v).y +
' )' (transformationLog[v] ? transformationLog[v].y : 0) -
); graph.node(v).height / 2) +
select('#' + svgElem.id + ' #' + v).attr( ' )'
'data-x-shift', );
graph.node(v).x - graph.node(v).width / 2 root
); .select('#' + svgElem.id + ' #' + v)
const dividers = document.querySelectorAll('#' + svgElem.id + ' #' + v + ' .divider'); .attr('data-x-shift', graph.node(v).x - graph.node(v).width / 2);
const dividers = domDocument.querySelectorAll('#' + svgElem.id + ' #' + v + ' .divider');
dividers.forEach((divider) => { dividers.forEach((divider) => {
const parent = divider.parentElement; const parent = divider.parentElement;
let pWidth = 0; let pWidth = 0;

14
src/diagrams/user-journey/journeyRenderer.js
View File

@ -54,8 +54,20 @@ export const draw = function (text, id) {
parser.yy.clear(); parser.yy.clear();
parser.parse(text + '\n'); parser.parse(text + '\n');
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
bounds.init(); bounds.init();
const diagram = select('#' + id); const diagram = root.select('#' + id);
diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
svgDraw.initGraphics(diagram); svgDraw.initGraphics(diagram);

7
src/mermaidAPI.js
View File

@ -240,6 +240,7 @@ const render = function (id, _txt, cb, container) {
const iframe = select('body') const iframe = select('body')
.append('iframe') .append('iframe')
.attr('id', 'i' + id) .attr('id', 'i' + id)
.attr('style', 'width: 100%; height: 100%;')
.attr('sandbox', ''); .attr('sandbox', '');
// const iframeBody = ; // const iframeBody = ;
root = select(iframe.nodes()[0].contentDocument.body); root = select(iframe.nodes()[0].contentDocument.body);
@ -258,6 +259,7 @@ const render = function (id, _txt, cb, container) {
const iframe = select(container) const iframe = select(container)
.append('iframe') .append('iframe')
.attr('id', 'i' + id) .attr('id', 'i' + id)
.attr('style', 'width: 100%; height: 100%;')
.attr('sandbox', ''); .attr('sandbox', '');
// const iframeBody = ; // const iframeBody = ;
root = select(iframe.nodes()[0].contentDocument.body); root = select(iframe.nodes()[0].contentDocument.body);
@ -492,7 +494,10 @@ const render = function (id, _txt, cb, container) {
// Fix for when the base tag is used // Fix for when the base tag is used
let svgCode = root.select('#d' + id).node().innerHTML; let svgCode = root.select('#d' + id).node().innerHTML;
log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute); log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
if (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') { if (
(!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') &&
cnf.arrowMarkerAbsolute !== 'sandbox'
) {
svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g'); svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
} }