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

Update handling of classes and add support for default class

Browse Source
This commit is contained in:
yari-dewalt
2024-10-24 10:18:17 -07:00
parent 1b34077f55
commit 01e5346004
6 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
cypress/integration/rendering/erDiagram-unified.spec.js
View File

@@ -634,5 +634,19 @@ describe('Entity Relationship Diagram Unified', () => {
{ ...options, htmlLabels: false } { ...options, htmlLabels: false }
); );
}); });
it(`${description}should render entities with styles applied from the default class and other styles`, () => {
imgSnapshotTest(
`
erDiagram
c[CUSTOMER]
p[PERSON]:::blue
classDef blue stroke:lightblue, color: #0000FF
classDef default fill:pink
style c color:green
`,
{ ...options }
);
});
}); });
}); });

6
docs/syntax/entityRelationshipDiagram.md
View File

@@ -575,6 +575,12 @@ Similar to the class statement, the shorthand syntax can also apply multiple cla
If a class is named default it will be assigned to all classes without specific class definitions. If a class is named default it will be assigned to all classes without specific class definitions.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
> **Note:** Custom styles from style or other class statements take priority and will overwrite the default styles. (e.g. The `default` class gives nodes a background color of pink but the `blue` class will give that node a background color of blue if applied.)
```mermaid-example ```mermaid-example
erDiagram erDiagram
CAR { CAR {

6
packages/mermaid/src/diagrams/er/erDb.ts
View File

@@ -45,7 +45,7 @@ const addEntity = function (name: string, alias = ''): EntityNode {
alias, alias,
shape: 'erBox', shape: 'erBox',
look: getConfig().look || 'default', look: getConfig().look || 'default',
cssClasses: ['default'], cssClasses: 'default',
cssStyles: [], cssStyles: [],
}); });
log.info('Added new entity :', name); log.info('Added new entity :', name);
@@ -130,7 +130,7 @@ export const getData = function () {
for (const entityKey of entities.keys()) { for (const entityKey of entities.keys()) {
const entityNode = entities.get(entityKey); const entityNode = entities.get(entityKey);
if (entityNode) { if (entityNode) {
entityNode.cssCompiledStyles = getCompiledStyles(entityNode.cssClasses!); entityNode.cssCompiledStyles = getCompiledStyles(entityNode.cssClasses!.split(' '));
nodes.push(entityNode as unknown as Node); nodes.push(entityNode as unknown as Node);
} }
} }
@@ -193,7 +193,7 @@ export const setClass = function (ids: string[], classNames: string[]) {
const entity = entities.get(id); const entity = entities.get(id);
if (entity) { if (entity) {
for (const className of classNames) { for (const className of classNames) {
entity.cssClasses!.push(className); entity.cssClasses += ' ' + className;
} }
} }
} }

2
packages/mermaid/src/diagrams/er/erTypes.ts
View File

@@ -5,7 +5,7 @@ export interface EntityNode {
alias: string; alias: string;
shape: string; shape: string;
look?: string; look?: string;
cssClasses?: string[]; cssClasses?: string;
cssStyles?: string[]; cssStyles?: string[];
cssCompiledStyles?: string[]; cssCompiledStyles?: string[];
} }

29
packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
View File

@@ -803,7 +803,7 @@ describe('when parsing ER diagram it...', function () {
const entityName = 'CUSTOMER'; const entityName = 'CUSTOMER';
erDiagram.parser.parse(`erDiagram\n${entityName}\nclass ${entityName} myClass`); erDiagram.parser.parse(`erDiagram\n${entityName}\nclass ${entityName} myClass`);
expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']); expect(erDb.getEntity(entityName).cssClasses).toBe('default myClass');
}); });
it('should be possible to assign multiple classes to an entity at the same time', function () { it('should be possible to assign multiple classes to an entity at the same time', function () {
@@ -812,12 +812,7 @@ describe('when parsing ER diagram it...', function () {
`erDiagram\n${entityName}\nclass ${entityName} firstClass, secondClass, thirdClass` `erDiagram\n${entityName}\nclass ${entityName} firstClass, secondClass, thirdClass`
); );
expect(erDb.getEntity(entityName).cssClasses).toEqual([ expect(erDb.getEntity(entityName).cssClasses).toBe('default firstClass secondClass thirdClass');
'default',
'firstClass',
'secondClass',
'thirdClass',
]);
}); });
it('should be possible to assign multiple separately defined classes to an entity', function () { it('should be possible to assign multiple separately defined classes to an entity', function () {
@@ -826,7 +821,7 @@ describe('when parsing ER diagram it...', function () {
`erDiagram\n${entityName}\nclass ${entityName} firstClass\nclass ${entityName} secondClass` `erDiagram\n${entityName}\nclass ${entityName} firstClass\nclass ${entityName} secondClass`
); );
expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'firstClass', 'secondClass']); expect(erDb.getEntity(entityName).cssClasses).toBe('default firstClass secondClass');
}); });
it('should be possible to configure the default class and have it apply to each entity', function () { it('should be possible to configure the default class and have it apply to each entity', function () {
@@ -851,8 +846,8 @@ describe('when parsing ER diagram it...', function () {
], ],
]); ]);
expect(erDb.getEntity(firstEntity).cssClasses).toEqual(['default']); expect(erDb.getEntity(firstEntity).cssClasses).toBe('default');
expect(erDb.getEntity(secondEntity).cssClasses).toEqual(['default']); expect(erDb.getEntity(secondEntity).cssClasses).toBe('default');
expect(erDb.getClasses()).toEqual(expectedOutput); expect(erDb.getClasses()).toEqual(expectedOutput);
}); });
@@ -916,7 +911,7 @@ describe('when parsing ER diagram it...', function () {
const className = 'myClass'; const className = 'myClass';
erDiagram.parser.parse(`erDiagram\n${entityName}:::${className}`); erDiagram.parser.parse(`erDiagram\n${entityName}:::${className}`);
expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']); expect(erDb.getEntity(entityName).cssClasses).toBe('default myClass');
}); });
it('should be possible to assign a class using the shorthand syntax with empty block', function () { it('should be possible to assign a class using the shorthand syntax with empty block', function () {
@@ -924,7 +919,7 @@ describe('when parsing ER diagram it...', function () {
const className = 'myClass'; const className = 'myClass';
erDiagram.parser.parse(`erDiagram\n${entityName}:::${className} {}`); erDiagram.parser.parse(`erDiagram\n${entityName}:::${className} {}`);
expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']); expect(erDb.getEntity(entityName).cssClasses).toBe('default myClass');
}); });
it('should be possible to assign a class using the shorthand syntax with block of attributes', function () { it('should be possible to assign a class using the shorthand syntax with block of attributes', function () {
@@ -932,7 +927,7 @@ describe('when parsing ER diagram it...', function () {
const className = 'myClass'; const className = 'myClass';
erDiagram.parser.parse(`erDiagram\n${entityName}:::${className} {\nstring name\n}`); erDiagram.parser.parse(`erDiagram\n${entityName}:::${className} {\nstring name\n}`);
expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']); expect(erDb.getEntity(entityName).cssClasses).toBe('default myClass');
}); });
it('should be possible to assign multiple classes using the shorthand syntax', function () { it('should be possible to assign multiple classes using the shorthand syntax', function () {
@@ -941,7 +936,7 @@ describe('when parsing ER diagram it...', function () {
const secondClass = 'secondClass'; const secondClass = 'secondClass';
erDiagram.parser.parse(`erDiagram\n${entityName}:::${firstClass},${secondClass}`); erDiagram.parser.parse(`erDiagram\n${entityName}:::${firstClass},${secondClass}`);
expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'firstClass', 'secondClass']); expect(erDb.getEntity(entityName).cssClasses).toBe('default firstClass secondClass');
}); });
it('should be possible to assign classes using the shorthand syntax after defining an alias', function () { it('should be possible to assign classes using the shorthand syntax after defining an alias', function () {
@@ -951,7 +946,7 @@ describe('when parsing ER diagram it...', function () {
erDiagram.parser.parse(`erDiagram\n${entityName}[${entityAlias}]:::${myClass}`); erDiagram.parser.parse(`erDiagram\n${entityName}[${entityAlias}]:::${myClass}`);
expect(erDb.getEntity(entityName).alias).toBe(entityAlias); expect(erDb.getEntity(entityName).alias).toBe(entityAlias);
expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']); expect(erDb.getEntity(entityName).cssClasses).toBe('default myClass');
}); });
it('should be possible to assign classes using the shorthand syntax while defining a relationship', function () { it('should be possible to assign classes using the shorthand syntax while defining a relationship', function () {
@@ -962,8 +957,8 @@ describe('when parsing ER diagram it...', function () {
`erDiagram\n${entityName}:::${myClass} ||--o{ ${otherEntity}:::${myClass} : allows` `erDiagram\n${entityName}:::${myClass} ||--o{ ${otherEntity}:::${myClass} : allows`
); );
expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']); expect(erDb.getEntity(entityName).cssClasses).toBe('default myClass');
expect(erDb.getEntity(otherEntity).cssClasses).toEqual(['default', 'myClass']); expect(erDb.getEntity(otherEntity).cssClasses).toBe('default myClass');
}); });
describe('relationship labels', function () { describe('relationship labels', function () {

6
packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
View File

@@ -378,6 +378,12 @@ Similar to the class statement, the shorthand syntax can also apply multiple cla
If a class is named default it will be assigned to all classes without specific class definitions. If a class is named default it will be assigned to all classes without specific class definitions.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
> **Note:** Custom styles from style or other class statements take priority and will overwrite the default styles. (e.g. The `default` class gives nodes a background color of pink but the `blue` class will give that node a background color of blue if applied.)
```mermaid-example ```mermaid-example
erDiagram erDiagram
CAR { CAR {