marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-17 23:39:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: Use graphlib from dagre-d3-es

Browse Source
This commit is contained in:
Sidharth Vinod
2022-11-20 23:13:55 +05:30
parent 931661ed67
commit f687abb165
11 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/mermaid/src/dagre-wrapper/index.js
View File

@@ -1,5 +1,5 @@
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib'; import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import insertMarkers from './markers'; import insertMarkers from './markers';
import { updateNodeBounds } from './shapes/util'; import { updateNodeBounds } from './shapes/util';
import { import {
@@ -15,7 +15,7 @@ import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } f
import { log } from '../logger'; import { log } from '../logger';
const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster); log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
const dir = graph.graph().rankdir; const dir = graph.graph().rankdir;
log.trace('Dir in recursive render - dir:', dir); log.trace('Dir in recursive render - dir:', dir);
@@ -96,7 +96,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
log.info('#############################################'); log.info('#############################################');
log.info(graph); log.info(graph);
dagreLayout(graph); dagreLayout(graph);
log.info('Graph after layout:', graphlib.json.write(graph)); log.info('Graph after layout:', graphlibJson.write(graph));
// Move the nodes to the correct place // Move the nodes to the correct place
let diff = 0; let diff = 0;
sortNodesByHierarchy(graph).forEach(function (v) { sortNodesByHierarchy(graph).forEach(function (v) {
@@ -153,10 +153,10 @@ export const render = (elem, graph, markers, diagramtype, id) => {
clearClusters(); clearClusters();
clearGraphlib(); clearGraphlib();
log.warn('Graph at first:', graphlib.json.write(graph)); log.warn('Graph at first:', graphlibJson.write(graph));
adjustClustersAndEdges(graph); adjustClustersAndEdges(graph);
log.warn('Graph after:', graphlib.json.write(graph)); log.warn('Graph after:', graphlibJson.write(graph));
// log.warn('Graph ever after:', graphlib.json.write(graph.node('A').graph)); // log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
recursiveRender(elem, graph, diagramtype); recursiveRender(elem, graph, diagramtype);
}; };

13
packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
View File

@@ -1,6 +1,7 @@
/** Decorates with functions required by mermaids dagre-wrapper. */ /** Decorates with functions required by mermaids dagre-wrapper. */
import { log } from '../logger'; import { log } from '../logger';
import graphlib from 'graphlib'; import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import * as graphlib from 'dagre-d3-es/src/graphlib';
export let clusterDb = {}; export let clusterDb = {};
let decendants = {}; let decendants = {};
@@ -322,7 +323,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
graph.setEdge(v, w, edge, e.name); graph.setEdge(v, w, edge, e.name);
} }
}); });
log.warn('Adjusted Graph', graphlib.json.write(graph)); log.warn('Adjusted Graph', graphlibJson.write(graph));
extractor(graph, 0); extractor(graph, 0);
log.trace(clusterDb); log.trace(clusterDb);
@@ -336,7 +337,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
}; };
export const extractor = (graph, depth) => { export const extractor = (graph, depth) => {
log.warn('extractor - ', depth, graphlib.json.write(graph), graph.children('D')); log.warn('extractor - ', depth, graphlibJson.write(graph), graph.children('D'));
if (depth > 10) { if (depth > 10) {
log.error('Bailing out'); log.error('Bailing out');
return; return;
@@ -415,7 +416,7 @@ export const extractor = (graph, depth) => {
return {}; return {};
}); });
log.warn('Old graph before copy', graphlib.json.write(graph)); log.warn('Old graph before copy', graphlibJson.write(graph));
copy(node, graph, clusterGraph, node); copy(node, graph, clusterGraph, node);
graph.setNode(node, { graph.setNode(node, {
clusterNode: true, clusterNode: true,
@@ -424,8 +425,8 @@ export const extractor = (graph, depth) => {
labelText: clusterDb[node].labelText, labelText: clusterDb[node].labelText,
graph: clusterGraph, graph: clusterGraph,
}); });
log.warn('New graph after copy node: (', node, ')', graphlib.json.write(clusterGraph)); log.warn('New graph after copy node: (', node, ')', graphlibJson.write(clusterGraph));
log.debug('Old graph after copy', graphlib.json.write(graph)); log.debug('Old graph after copy', graphlibJson.write(graph));
} else { } else {
log.warn( log.warn(
'Cluster ** ', 'Cluster ** ',

31
packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
View File

@@ -1,4 +1,5 @@
import graphlib from 'graphlib'; import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import { import {
validate, validate,
adjustClustersAndEdges, adjustClustersAndEdges,
@@ -232,9 +233,9 @@ describe('Graphlib decorations', () => {
g.setParent('D', 'C'); g.setParent('D', 'C');
// log.info('Graph before', g.node('D')) // log.info('Graph before', g.node('D'))
// log.info('Graph before', graphlib.json.write(g)) // log.info('Graph before', graphlibJson.write(g))
adjustClustersAndEdges(g); adjustClustersAndEdges(g);
// log.info('Graph after', graphlib.json.write(g), g.node('C').graph) // log.info('Graph after', graphlibJson.write(g), g.node('C').graph)
const CGraph = g.node('C').graph; const CGraph = g.node('C').graph;
const DGraph = CGraph.node('D').graph; const DGraph = CGraph.node('D').graph;
@@ -278,9 +279,9 @@ describe('Graphlib decorations', () => {
g.setEdge('A', 'C', { data: 'link2' }, '2'); g.setEdge('A', 'C', { data: 'link2' }, '2');
log.info('Graph before', g.node('D')); log.info('Graph before', g.node('D'));
log.info('Graph before', graphlib.json.write(g)); log.info('Graph before', graphlibJson.write(g));
adjustClustersAndEdges(g); adjustClustersAndEdges(g);
log.trace('Graph after', graphlib.json.write(g)); log.trace('Graph after', graphlibJson.write(g));
expect(g.nodes()).toEqual(['C', 'B', 'A']); expect(g.nodes()).toEqual(['C', 'B', 'A']);
expect(g.nodes().length).toBe(3); expect(g.nodes().length).toBe(3);
expect(g.edges().length).toBe(2); expect(g.edges().length).toBe(2);
@@ -333,11 +334,11 @@ describe('Graphlib decorations', () => {
g.setEdge('c', 'd', { data: 'link2' }, '2'); g.setEdge('c', 'd', { data: 'link2' }, '2');
g.setEdge('d', 'e', { data: 'link2' }, '2'); g.setEdge('d', 'e', { data: 'link2' }, '2');
log.info('Graph before', graphlib.json.write(g)); log.info('Graph before', graphlibJson.write(g));
adjustClustersAndEdges(g); adjustClustersAndEdges(g);
const bGraph = g.node('b').graph; const bGraph = g.node('b').graph;
// log.trace('Graph after', graphlib.json.write(g)) // log.trace('Graph after', graphlibJson.write(g))
log.info('Graph after', graphlib.json.write(bGraph)); log.info('Graph after', graphlibJson.write(bGraph));
expect(bGraph.nodes().length).toBe(3); expect(bGraph.nodes().length).toBe(3);
expect(bGraph.edges().length).toBe(2); expect(bGraph.edges().length).toBe(2);
}); });
@@ -359,13 +360,13 @@ describe('Graphlib decorations', () => {
g.setParent('c', 'b'); g.setParent('c', 'b');
g.setParent('e', 'c'); g.setParent('e', 'c');
log.info('Graph before', graphlib.json.write(g)); log.info('Graph before', graphlibJson.write(g));
adjustClustersAndEdges(g); adjustClustersAndEdges(g);
const aGraph = g.node('a').graph; const aGraph = g.node('a').graph;
const bGraph = aGraph.node('b').graph; const bGraph = aGraph.node('b').graph;
log.info('Graph after', graphlib.json.write(aGraph)); log.info('Graph after', graphlibJson.write(aGraph));
const cGraph = bGraph.node('c').graph; const cGraph = bGraph.node('c').graph;
// log.trace('Graph after', graphlib.json.write(g)) // log.trace('Graph after', graphlibJson.write(g))
expect(aGraph.nodes().length).toBe(1); expect(aGraph.nodes().length).toBe(1);
expect(bGraph.nodes().length).toBe(1); expect(bGraph.nodes().length).toBe(1);
expect(cGraph.nodes().length).toBe(1); expect(cGraph.nodes().length).toBe(1);
@@ -387,14 +388,14 @@ flowchart TB
const exportedGraph = JSON.parse( const exportedGraph = JSON.parse(
'{"options":{"directed":true,"multigraph":true,"compound":true},"nodes":[{"v":"A","value":{"labelStyle":"","shape":"rect","labelText":"A","rx":0,"ry":0,"class":"default","style":"","id":"A","width":500,"type":"group","padding":15}},{"v":"B","value":{"labelStyle":"","shape":"rect","labelText":"B","rx":0,"ry":0,"class":"default","style":"","id":"B","width":500,"type":"group","padding":15},"parent":"A"},{"v":"b","value":{"labelStyle":"","shape":"rect","labelText":"b","rx":0,"ry":0,"class":"default","style":"","id":"b","padding":15},"parent":"A"},{"v":"c","value":{"labelStyle":"","shape":"rect","labelText":"c","rx":0,"ry":0,"class":"default","style":"","id":"c","padding":15},"parent":"B"},{"v":"a","value":{"labelStyle":"","shape":"rect","labelText":"a","rx":0,"ry":0,"class":"default","style":"","id":"a","padding":15},"parent":"A"}],"edges":[{"v":"b","w":"B","name":"1","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-b-B","classes":"flowchart-link LS-b LE-B"}},{"v":"a","w":"c","name":"2","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-a-c","classes":"flowchart-link LS-a LE-c"}}],"value":{"rankdir":"TB","nodesep":50,"ranksep":50,"marginx":8,"marginy":8}}' '{"options":{"directed":true,"multigraph":true,"compound":true},"nodes":[{"v":"A","value":{"labelStyle":"","shape":"rect","labelText":"A","rx":0,"ry":0,"class":"default","style":"","id":"A","width":500,"type":"group","padding":15}},{"v":"B","value":{"labelStyle":"","shape":"rect","labelText":"B","rx":0,"ry":0,"class":"default","style":"","id":"B","width":500,"type":"group","padding":15},"parent":"A"},{"v":"b","value":{"labelStyle":"","shape":"rect","labelText":"b","rx":0,"ry":0,"class":"default","style":"","id":"b","padding":15},"parent":"A"},{"v":"c","value":{"labelStyle":"","shape":"rect","labelText":"c","rx":0,"ry":0,"class":"default","style":"","id":"c","padding":15},"parent":"B"},{"v":"a","value":{"labelStyle":"","shape":"rect","labelText":"a","rx":0,"ry":0,"class":"default","style":"","id":"a","padding":15},"parent":"A"}],"edges":[{"v":"b","w":"B","name":"1","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-b-B","classes":"flowchart-link LS-b LE-B"}},{"v":"a","w":"c","name":"2","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-a-c","classes":"flowchart-link LS-a LE-c"}}],"value":{"rankdir":"TB","nodesep":50,"ranksep":50,"marginx":8,"marginy":8}}'
); );
const gr = graphlib.json.read(exportedGraph); const gr = graphlibJson.read(exportedGraph);
log.info('Graph before', graphlib.json.write(gr)); log.info('Graph before', graphlibJson.write(gr));
adjustClustersAndEdges(gr); adjustClustersAndEdges(gr);
const aGraph = gr.node('A').graph; const aGraph = gr.node('A').graph;
const bGraph = aGraph.node('B').graph; const bGraph = aGraph.node('B').graph;
log.info('Graph after', graphlib.json.write(aGraph)); log.info('Graph after', graphlibJson.write(aGraph));
// log.trace('Graph after', graphlib.json.write(g)) // log.trace('Graph after', graphlibJson.write(g))
expect(aGraph.parent('c')).toBe('B'); expect(aGraph.parent('c')).toBe('B');
expect(aGraph.parent('B')).toBe(undefined); expect(aGraph.parent('B')).toBe(undefined);
}); });

2
packages/mermaid/src/diagrams/class/classRenderer-v2.js
View File

@@ -1,5 +1,5 @@
import { select } from 'd3'; import { select } from 'd3';
import graphlib from 'graphlib'; import * as graphlib from 'dagre-d3-es/src/graphlib';
import { log } from '../../logger'; import { log } from '../../logger';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js'; import { render } from '../../dagre-wrapper/index.js';

2
packages/mermaid/src/diagrams/class/classRenderer.js
View File

@@ -1,6 +1,6 @@
import { select } from 'd3'; import { select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { log } from '../../logger'; import { log } from '../../logger';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';

2
packages/mermaid/src/diagrams/er/erRenderer.js
View File

@@ -1,4 +1,4 @@
import graphlib from 'graphlib'; import * as graphlib from 'dagre-d3-es/src/graphlib';
import { line, curveBasis, select } from 'd3'; import { line, curveBasis, select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import { getConfig } from '../../config'; import { getConfig } from '../../config';

2
packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -1,4 +1,4 @@
import graphlib from 'graphlib'; import * as graphlib from 'dagre-d3-es/src/graphlib';
import { select, curveLinear, selectAll } from 'd3'; import { select, curveLinear, selectAll } from 'd3';
import flowDb from './flowDb'; import flowDb from './flowDb';

2
packages/mermaid/src/diagrams/flowchart/flowRenderer.js
View File

@@ -1,4 +1,4 @@
import graphlib from 'graphlib'; import * as graphlib from 'dagre-d3-es/src/graphlib';
import { select, curveLinear, selectAll } from 'd3'; import { select, curveLinear, selectAll } from 'd3';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { render as Render } from 'dagre-d3-es'; import { render as Render } from 'dagre-d3-es';

2
packages/mermaid/src/diagrams/requirement/requirementRenderer.js
View File

@@ -1,6 +1,6 @@
import { line, select } from 'd3'; import { line, select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { log } from '../../logger'; import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common'; import common from '../common/common';

2
packages/mermaid/src/diagrams/state/stateRenderer-v2.js
View File

@@ -1,4 +1,4 @@
import graphlib from 'graphlib'; import * as graphlib from 'dagre-d3-es/src/graphlib';
import { select } from 'd3'; import { select } from 'd3';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js'; import { render } from '../../dagre-wrapper/index.js';

2
packages/mermaid/src/diagrams/state/stateRenderer.js
View File

@@ -1,6 +1,6 @@
import { select } from 'd3'; import { select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { log } from '../../logger'; import { log } from '../../logger';
import common from '../common/common'; import common from '../common/common';
import { drawState, addTitleAndBox, drawEdge } from './shapes'; import { drawState, addTitleAndBox, drawEdge } from './shapes';