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

Adjusting classDiagram marker styling

Browse Source
This commit is contained in:
Ashish Jain
2020-06-24 21:46:59 +02:00
parent b190a0eaba
commit 1e400624e0
2 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,6 +32,7 @@ export const addClasses = function(classes, g) {
// const svg = select(`[id="${svgId}"]`); // const svg = select(`[id="${svgId}"]`);
const keys = Object.keys(classes); const keys = Object.keys(classes);
logger.info('keys:', keys); logger.info('keys:', keys);
logger.info(classes);
// 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
keys.forEach(function(id) { keys.forEach(function(id) {
@@ -154,8 +155,8 @@ export const addRelations = function(relations, g) {
logger.info(edgeData, edge); logger.info(edgeData, edge);
//Set relation arrow types //Set relation arrow types
edgeData.arrowStartType = getArrowMarker(edge.relation.type1); edgeData.arrowTypeStart = getArrowMarker(edge.relation.type1);
edgeData.arrowEndType = getArrowMarker(edge.relation.type2); edgeData.arrowTypeEnd = getArrowMarker(edge.relation.type2);
let style = ''; let style = '';
let labelStyle = ''; let labelStyle = '';
@@ -409,7 +410,7 @@ export const draw = function(text, 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 = select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'classDiagram', id); render(element, g, ['aggregation', 'extension', 'composition', 'dependency'], 'classDiagram', id);
// element.selectAll('g.node').attr('title', function() { // element.selectAll('g.node').attr('title', function() {
// return flowDb.getTooltip(this.id); // return flowDb.getTooltip(this.id);

24
src/themes/class.scss
View File

@@ -47,45 +47,45 @@ g.classGroup line {
} }
@mixin composition { @mixin composition {
fill: $nodeBorder; fill: $nodeBorder !important ;
stroke: $nodeBorder; stroke: $nodeBorder !important ;
stroke-width: 1; stroke-width: 1;
} }
#compositionStart { #compositionStart, .composition {
@include composition; @include composition;
} }
#compositionEnd { #compositionEnd, .composition {
@include composition; @include composition;
} }
@mixin aggregation { @mixin aggregation {
fill: $nodeBkg; fill: $nodeBkg !important ;
stroke: $nodeBorder; stroke: $nodeBorder !important ;
stroke-width: 1; stroke-width: 1;
} }
#aggregationStart { #aggregationStart, .aggregation {
@include aggregation; @include aggregation;
} }
#aggregationEnd { #aggregationEnd, .aggregation {
@include aggregation; @include aggregation;
} }
#dependencyStart { #dependencyStart, .dependency {
@include composition; @include composition;
} }
#dependencyEnd { #dependencyEnd, .dependency {
@include composition; @include composition;
} }
#extensionStart { #extensionStart , .extension{
@include composition; @include composition;
} }
#extensionEnd { #extensionEnd, .extension {
@include composition; @include composition;
} }