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

Add support for classDef statement

Browse Source
This commit is contained in:
yari-dewalt
2024-09-13 12:55:10 -07:00
parent ca93280b17
commit 3782b69744
2 changed files with 53 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
View File

@@ -69,5 +69,47 @@ describe('class diagram, ', function () {
expect(styleElements[1]).toBe('stroke:#333'); expect(styleElements[1]).toBe('stroke:#333');
expect(styleElements[2]).toBe('stroke-width:4px'); expect(styleElements[2]).toBe('stroke-width:4px');
}); });
it('should be possible to define and assign a class inside the diagram', function () {
const str =
'classDiagram\n' + 'class Class01\n cssClass "Class01" pink\n classDef pink fill:#f9f';
parser.parse(str);
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('pink');
});
it('should be possible to define and assign a class using shorthand inside the diagram', function () {
const str = 'classDiagram\n' + 'class Class01:::pink\n classDef pink fill:#f9f';
parser.parse(str);
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('pink');
});
it('should properly assign styles from a class defined inside the diagram', function () {
const str =
'classDiagram\n' +
'class Class01:::pink\n classDef pink fill:#f9f,stroke:#333,stroke-width:6px';
parser.parse(str);
expect(parser.yy.getClass('Class01').styles).toStrictEqual([
'fill:#f9f',
'stroke:#333',
'stroke-width:6px',
]);
});
it('should properly assign multiple classes and styles from classes defined inside the diagram', function () {
const str =
'classDiagram\n' +
'class Class01:::pink\n cssClass "Class01" bold\n classDef pink fill:#f9f\n classDef bold stroke:#333,stroke-width:6px';
parser.parse(str);
expect(parser.yy.getClass('Class01').styles).toStrictEqual([
'fill:#f9f',
'stroke:#333',
'stroke-width:6px',
]);
expect(parser.yy.getClass('Class01').cssClasses).toStrictEqual(['pink', 'bold']);
});
}); });
}); });

11
packages/mermaid/src/diagrams/class/parser/classDiagram.jison
View File

@@ -61,6 +61,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
<string>[^"]* return "STR"; <string>[^"]* return "STR";
<*>["] this.begin("string"); <*>["] this.begin("string");
"style" return 'STYLE'; "style" return 'STYLE';
"classDef" return 'CLASSDEF';
<INITIAL,namespace>"namespace" { this.begin('namespace'); return 'NAMESPACE'; } <INITIAL,namespace>"namespace" { this.begin('namespace'); return 'NAMESPACE'; }
<namespace>\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; } <namespace>\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; }
@@ -263,6 +264,7 @@ statement
| styleStatement | styleStatement
| cssClassStatement | cssClassStatement
| noteStatement | noteStatement
| classDefStatement
| direction | direction
| acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); } | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
@@ -324,6 +326,15 @@ noteStatement
| NOTE noteText { yy.addNote($2); } | NOTE noteText { yy.addNote($2); }
; ;
classDefStatement
: CLASSDEF classList stylesOpt {$$ = $CLASSDEF;yy.defineClass($classList,$stylesOpt);}
;
classList
: ALPHA { $$ = [$ALPHA]; }
| classList COMMA ALPHA = { $$ = $classList.concat([$ALPHA]); }
;
direction direction
: direction_tb : direction_tb
{ yy.setDirection('TB');} { yy.setDirection('TB');}