marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added support for classDiagram relation arrow markers

Browse Source
This commit is contained in:
Ashish Jain
2020-06-24 21:45:19 +02:00
parent b9931da241
commit b190a0eaba
3 changed files with 56 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
cypress/platform/class.html
View File

@@ -8,8 +8,8 @@
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
background:#333;
background: rgb(221, 208, 208);
/*background:#333;*/
font-family: 'Arial';
}
h1 { color: white;}
@@ -30,6 +30,10 @@
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
classA : +attr1
classA : attr2
classA : method1()
classB : method2() int
</div>
<script src="./mermaid.js"></script>
<script>
@@ -37,7 +41,7 @@
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'dark',
theme: 'default',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,

59
src/dagre-wrapper/edges.js
View File

@@ -288,35 +288,60 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
url = url.replace(/\(/g, '\\(');
url = url.replace(/\)/g, '\\)');
}
logger.info('arrowType', edge.arrowType);
switch (edge.arrowType) {
logger.info('arrowTypeStart', edge.arrowTypeStart);
logger.info('arrowTypeEnd', edge.arrowTypeEnd);
switch (edge.arrowTypeStart) {
case 'arrow_cross':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');
break;
case 'arrow_point':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');
break;
case 'arrow_barb':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');
break;
case 'arrow_circle':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');
break;
case 'aggregation':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')');
break;
case 'extension':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')');
break;
case 'composition':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')');
break;
case 'dependency':
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')');
break;
default:
}
switch (edge.arrowTypeEnd) {
case 'arrow_cross':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
break;
case 'double_arrow_cross':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');
break;
case 'arrow_point':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
break;
case 'double_arrow_point':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');
break;
case 'arrow_barb':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');
break;
case 'double_arrow_barb':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barnEnd' + ')');
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');
break;
case 'arrow_circle':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
break;
case 'double_arrow_circle':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');
case 'aggregation':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')');
break;
case 'extension':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')');
break;
case 'composition':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')');
break;
case 'dependency':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')');
break;
default:
}

14
src/dagre-wrapper/markers.js
View File

@@ -29,7 +29,7 @@ const extension = (elem, type, id) => {
elem
.append('defs')
.append('marker')
.attr('id', type + '-extensionEnd ' + type)
.attr('id', type + '-extensionEnd')
.attr('class', 'marker extension ' + type)
.attr('refX', 19)
.attr('refY', 7)
@@ -45,7 +45,7 @@ const composition = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-compositionStart')
.attr('class', 'marker extension ' + type)
.attr('class', 'marker composition ' + type)
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
@@ -58,7 +58,7 @@ const composition = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-compositionEnd')
.attr('class', 'marker extension ' + type)
.attr('class', 'marker composition ' + type)
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
@@ -72,7 +72,7 @@ const aggregation = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-aggregationStart')
.attr('class', 'marker extension ' + type)
.attr('class', 'marker aggregation ' + type)
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
@@ -85,7 +85,7 @@ const aggregation = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-aggregationEnd')
.attr('class', 'marker ' + type)
.attr('class', 'marker aggregation ' + type)
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
@@ -99,7 +99,7 @@ const dependency = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-dependencyStart')
.attr('class', 'marker extension ' + type)
.attr('class', 'marker dependency ' + type)
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
@@ -112,7 +112,7 @@ const dependency = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-dependencyEnd')
.attr('class', 'marker ' + type)
.attr('class', 'marker dependency ' + type)
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)