Merge branch 'develop' into release/10.6.2
* develop: (22 commits) chore(deps): update all minor dependencies adds corresponding change in docs/ecosystem Adds Unison programming language to community integrations list Fixed parser/tests Update docs Update classDiagram.md Update classDiagram.md Update docs Update packages/mermaid/src/diagrams/class/classDb.ts Update packages/mermaid/src/docs/syntax/classDiagram.md Update packages/mermaid/src/diagrams/class/classDb.ts chore(deps): update all minor dependencies Update generics docs Update docs Address potential undefined refactor: Move maxEdges out of flowchart config. refactor: Move maxEdges out of flowchart config. chore: Add maxEdges to secure list Update packages/mermaid/src/diagrams/class/classDb.ts Update docs ...
This commit is contained in:
Sidharth Vinod
commit
977a3f2246
|
|
@ -36,7 +36,7 @@ jobs:
|
|||
restore-keys: cache-lychee-
|
||||
|
||||
- name: Link Checker
|
||||
uses: lycheeverse/lychee-action@v1.8.0
|
||||
uses: lycheeverse/lychee-action@v1.9.1
|
||||
with:
|
||||
args: >-
|
||||
--config .github/lychee.toml
|
||||
|
|
|
|||
|
|
@ -571,4 +571,14 @@ class C13["With Città foreign language"]
|
|||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
});
|
||||
it('should render a simple class diagram with style definition', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
classDiagram-v2
|
||||
class Class10
|
||||
style Class10 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
version: '3.9'
|
||||
services:
|
||||
mermaid:
|
||||
image: node:18.18.2-alpine3.18
|
||||
image: node:18.19.0-alpine3.18
|
||||
stdin_open: true
|
||||
tty: true
|
||||
working_dir: /mermaid
|
||||
|
|
|
|||
|
|
@ -181,6 +181,7 @@ Communication tools and platforms
|
|||
### Document Generation
|
||||
|
||||
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
|
||||
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
||||
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
||||
|
|
|
|||
|
|
@ -240,9 +240,9 @@ class BankAccount{
|
|||
|
||||
#### Generic Types
|
||||
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
|
||||
Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
|
||||
> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
|
|
@ -766,9 +766,30 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
|||
|
||||
## Styling
|
||||
|
||||
### Styling a node
|
||||
### Styling a node (v\<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class Animal
|
||||
class Mineral
|
||||
style Animal fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Animal
|
||||
class Mineral
|
||||
style Animal fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"version": "10.2.4",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@8.11.0",
|
||||
"packageManager": "pnpm@8.14.1",
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
"vitest": "^0.34.0"
|
||||
},
|
||||
"volta": {
|
||||
"node": "18.18.2"
|
||||
"node": "18.19.0"
|
||||
},
|
||||
"nyc": {
|
||||
"report-dir": "coverage/cypress"
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
"dagre-d3-es": "7.0.10",
|
||||
"dayjs": "^1.11.7",
|
||||
"dompurify": "^3.0.5",
|
||||
"elkjs": "^0.8.2",
|
||||
"elkjs": "^0.9.0",
|
||||
"khroma": "^2.0.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mdast-util-from-markdown": "^1.3.0",
|
||||
|
|
|
|||
|
|
@ -68,6 +68,11 @@ export interface MermaidConfig {
|
|||
* The maximum allowed size of the users text diagram
|
||||
*/
|
||||
maxTextSize?: number;
|
||||
/**
|
||||
* Defines the maximum number of edges that can be drawn in a graph.
|
||||
*
|
||||
*/
|
||||
maxEdges?: number;
|
||||
darkMode?: boolean;
|
||||
htmlLabels?: boolean;
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1013,6 +1013,7 @@ const class_box = (parent, node) => {
|
|||
});
|
||||
|
||||
rect
|
||||
.attr('style', node.style)
|
||||
.attr('class', 'outer title-state')
|
||||
.attr('x', -maxWidth / 2 - halfPadding)
|
||||
.attr('y', -(maxHeight / 2) - halfPadding)
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ export const addClass = function (_id: string) {
|
|||
methods: [],
|
||||
members: [],
|
||||
annotations: [],
|
||||
styles: [],
|
||||
domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
|
||||
} as ClassNode;
|
||||
|
||||
|
|
@ -214,7 +215,7 @@ export const cleanupLabel = function (label: string) {
|
|||
};
|
||||
|
||||
/**
|
||||
* Called by parser when a special node is found, e.g. a clickable element.
|
||||
* Called by parser when assigning cssClass to a class
|
||||
*
|
||||
* @param ids - Comma separated list of ids
|
||||
* @param className - Class to add
|
||||
|
|
@ -456,6 +457,20 @@ export const addClassesToNamespace = function (id: string, classNames: string[])
|
|||
}
|
||||
};
|
||||
|
||||
export const setCssStyle = function (id: string, styles: string[]) {
|
||||
const thisClass = classes[id];
|
||||
if (!styles || !thisClass) {
|
||||
return;
|
||||
}
|
||||
for (const s of styles) {
|
||||
if (s.includes(',')) {
|
||||
thisClass.styles.push(...s.split(','));
|
||||
} else {
|
||||
thisClass.styles.push(s);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
|
|
@ -492,4 +507,5 @@ export default {
|
|||
addClassesToNamespace,
|
||||
getNamespace,
|
||||
getNamespaces,
|
||||
setCssStyle,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -56,5 +56,18 @@ describe('class diagram, ', function () {
|
|||
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
|
||||
expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
|
||||
});
|
||||
it('should be possible to apply a style to an individual node', function () {
|
||||
const str =
|
||||
'classDiagram\n' +
|
||||
'class Class01\n class Class02\n style Class01 fill:#f9f,stroke:#333,stroke-width:4px';
|
||||
|
||||
parser.parse(str);
|
||||
|
||||
const styleElements = parser.yy.getClass('Class01').styles;
|
||||
|
||||
expect(styleElements[0]).toBe('fill:#f9f');
|
||||
expect(styleElements[1]).toBe('stroke:#333');
|
||||
expect(styleElements[2]).toBe('stroke-width:4px');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -409,6 +409,7 @@ class C13["With Città foreign language"]
|
|||
},
|
||||
],
|
||||
"methods": [],
|
||||
"styles": [],
|
||||
"type": "",
|
||||
}
|
||||
`);
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export const addClasses = function (
|
|||
*/
|
||||
const cssClassStr = vertex.cssClasses.join(' ');
|
||||
|
||||
const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
|
||||
const styles = getStylesFromArray(vertex.styles);
|
||||
|
||||
// Use vertex id as text in the box if no text is provided by the graph definition
|
||||
const vertexText = vertex.label ?? vertex.id;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export interface ClassNode {
|
|||
members: ClassMember[];
|
||||
annotations: string[];
|
||||
domId: string;
|
||||
styles: string[];
|
||||
parent?: string;
|
||||
link?: string;
|
||||
linkTarget?: string;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
|
|||
<string>["] this.popState();
|
||||
<string>[^"]* return "STR";
|
||||
<*>["] this.begin("string");
|
||||
"style" return 'STYLE';
|
||||
|
||||
<INITIAL,namespace>"namespace" { this.begin('namespace'); return 'NAMESPACE'; }
|
||||
<namespace>\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; }
|
||||
|
|
@ -127,6 +128,10 @@ line was introduced with 'click'.
|
|||
<*>\- return 'MINUS';
|
||||
<*>"." return 'DOT';
|
||||
<*>\+ return 'PLUS';
|
||||
":" return 'COLON';
|
||||
"," return 'COMMA';
|
||||
\# return 'BRKT';
|
||||
"#" return 'BRKT';
|
||||
<*>\% return 'PCT';
|
||||
<*>"=" return 'EQUALS';
|
||||
<*>\= return 'EQUALS';
|
||||
|
|
@ -198,6 +203,7 @@ line was introduced with 'click'.
|
|||
[\uFFD2-\uFFD7\uFFDA-\uFFDC]
|
||||
return 'UNICODE_TEXT';
|
||||
<*>\s return 'SPACE';
|
||||
\s return 'SPACE';
|
||||
<*><<EOF>> return 'EOF';
|
||||
|
||||
/lex
|
||||
|
|
@ -254,6 +260,7 @@ statement
|
|||
| memberStatement
|
||||
| annotationStatement
|
||||
| clickStatement
|
||||
| styleStatement
|
||||
| cssClassStatement
|
||||
| noteStatement
|
||||
| direction
|
||||
|
|
@ -365,10 +372,26 @@ clickStatement
|
|||
| CLICK className HREF STR STR LINK_TARGET {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);}
|
||||
;
|
||||
|
||||
cssClassStatement
|
||||
: CSSCLASS STR alphaNumToken {yy.setCssClass($2, $3);}
|
||||
styleStatement
|
||||
:STYLE ALPHA stylesOpt {$$ = $STYLE;yy.setCssStyle($2,$stylesOpt);}
|
||||
;
|
||||
|
||||
cssClassStatement
|
||||
: CSSCLASS STR ALPHA {yy.setCssClass($2, $3);}
|
||||
;
|
||||
|
||||
stylesOpt
|
||||
: style {$$ = [$style]}
|
||||
| stylesOpt COMMA style {$stylesOpt.push($style);$$ = $stylesOpt;}
|
||||
;
|
||||
|
||||
style
|
||||
: styleComponent
|
||||
| style styleComponent {$$ = $style + $styleComponent;}
|
||||
;
|
||||
|
||||
styleComponent: ALPHA | NUM | COLON | UNIT | SPACE | BRKT | STYLE | PCT | LABEL;
|
||||
|
||||
commentToken : textToken | graphCodeTokens ;
|
||||
|
||||
textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT | DEFAULT;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
} from '../common/commonDb.js';
|
||||
import errorDiagram from '../error/errorDiagram.js';
|
||||
|
||||
const MERMAID_DOM_ID_PREFIX = 'flowchart-';
|
||||
let vertexCounter = 0;
|
||||
|
|
@ -92,7 +91,6 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop
|
|||
if (txt[0] === '"' && txt[txt.length - 1] === '"') {
|
||||
txt = txt.substring(1, txt.length - 1);
|
||||
}
|
||||
|
||||
vertices[id].text = txt;
|
||||
} else {
|
||||
if (vertices[id].text === undefined) {
|
||||
|
|
@ -160,11 +158,17 @@ export const addSingleLink = function (_start, _end, type) {
|
|||
if (edge?.length > 10) {
|
||||
edge.length = 10;
|
||||
}
|
||||
if (edges.length < 280) {
|
||||
if (edges.length < (config.maxEdges ?? 500)) {
|
||||
log.info('abc78 pushing edge...');
|
||||
edges.push(edge);
|
||||
} else {
|
||||
throw new Error('Too many edges');
|
||||
throw new Error(
|
||||
`Edge limit exceeded. ${edges.length} edges found, but the limit is ${config.maxEdges}.
|
||||
|
||||
Initialize mermaid with maxEdges set to a higher number to allow more edges.
|
||||
You cannot set this config via configuration inside the diagram as it is a secure config.
|
||||
You have to call mermaid.initialize.`
|
||||
);
|
||||
}
|
||||
};
|
||||
export const addLink = function (_start, _end, type) {
|
||||
|
|
@ -460,6 +464,7 @@ export const clear = function (ver = 'gen-1') {
|
|||
tooltips = {};
|
||||
firstGraphFlag = true;
|
||||
version = ver;
|
||||
config = getConfig();
|
||||
commonClear();
|
||||
};
|
||||
export const setGen = (ver) => {
|
||||
|
|
|
|||
|
|
@ -179,6 +179,7 @@ Communication tools and platforms
|
|||
### Document Generation
|
||||
|
||||
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
|
||||
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
||||
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
||||
|
|
|
|||
|
|
@ -143,9 +143,9 @@ class BankAccount{
|
|||
|
||||
#### Generic Types
|
||||
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
|
||||
Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
|
||||
> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
|
|
@ -518,9 +518,22 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
|||
|
||||
## Styling
|
||||
|
||||
### Styling a node
|
||||
### Styling a node (v<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class Animal
|
||||
class Mineral
|
||||
style Animal fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -74,6 +74,12 @@ properties:
|
|||
description: The maximum allowed size of the users text diagram
|
||||
type: number
|
||||
default: 50000
|
||||
maxEdges:
|
||||
description: |
|
||||
Defines the maximum number of edges that can be drawn in a graph.
|
||||
type: integer
|
||||
default: 500
|
||||
minimum: 0
|
||||
darkMode:
|
||||
type: boolean
|
||||
default: false
|
||||
|
|
@ -156,7 +162,7 @@ properties:
|
|||
in the current `currentConfig`.
|
||||
|
||||
This prevents malicious graph directives from overriding a site's default security.
|
||||
default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'maxEdges']
|
||||
type: array
|
||||
items:
|
||||
type: string
|
||||
|
|
|
|||
|
|
@ -225,8 +225,8 @@ importers:
|
|||
specifier: ^3.0.5
|
||||
version: 3.0.5
|
||||
elkjs:
|
||||
specifier: ^0.8.2
|
||||
version: 0.8.2
|
||||
specifier: ^0.9.0
|
||||
version: 0.9.1
|
||||
khroma:
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
|
|
@ -9006,8 +9006,8 @@ packages:
|
|||
resolution: {integrity: sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==}
|
||||
dev: true
|
||||
|
||||
/elkjs@0.8.2:
|
||||
resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
|
||||
/elkjs@0.9.1:
|
||||
resolution: {integrity: sha512-JWKDyqAdltuUcyxaECtYG6H4sqysXSLeoXuGUBfRNESMTkj+w+qdb0jya8Z/WI0jVd03WQtCGhS6FOFtlhD5FQ==}
|
||||
dev: false
|
||||
|
||||
/emittery@0.13.1:
|
||||
|
|
|
|||
Loading…
Reference in New Issue