diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 3ae66bba2..231c91f8f 100644 --- a/.lintstagedrc.mjs +++ b/.lintstagedrc.mjs @@ -6,6 +6,6 @@ export default { // https://prettier.io/docs/en/cli.html#--cache 'prettier --write', ], - 'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'], + 'cSpell.json': ['tsx scripts/fixCSpell.ts'], '**/*.jison': ['pnpm -w run lint:jison'], }; diff --git a/.prettierignore b/.prettierignore index 8a9086315..fb9b694b7 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,3 +10,6 @@ stats .nyc_output # Autogenerated by `pnpm run --filter mermaid types:build-config` packages/mermaid/src/config.type.ts +# Ignore the files creates in /demos/dev except for example.html +demos/dev/** +!/demos/dev/example.html \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json index dc5ec94a1..7d17e55d2 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -18,7 +18,8 @@ "type": "node", "request": "launch", "args": ["scripts/docs.cli.mts"], - "runtimeArgs": ["--loader", "ts-node/esm"], + // we'll need to change this to --import in Node.JS v20.6.0 and up + "runtimeArgs": ["--loader", "tsx/esm"], "cwd": "${workspaceRoot}/packages/mermaid", "skipFiles": ["/**", "**/node_modules/**"], "smartStep": true, diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 37e9cada0..20a1aea0a 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -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 } } + ); + }); }); diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 339a5f028..a2836c51a 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -811,7 +811,22 @@ gitGraph TB: {} ); }); - it('40: should render default GitGraph with parallelCommits set to false', () => { + it('40: should render a simple gitgraph with cherry pick merge commit', () => { + imgSnapshotTest( + `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + cherry-pick id: "M" parent:"B"` + ); + }); + it('41: should render default GitGraph with parallelCommits set to false', () => { imgSnapshotTest( `gitGraph commit id:"1-abcdefg" @@ -830,7 +845,7 @@ gitGraph TB: { gitGraph: { parallelCommits: false } } ); }); - it('41: should render GitGraph with parallel commits', () => { + it('42: should render GitGraph with parallel commits', () => { imgSnapshotTest( `gitGraph commit id:"1-abcdefg" @@ -849,7 +864,7 @@ gitGraph TB: { gitGraph: { parallelCommits: true } } ); }); - it('42: should render GitGraph with parallel commits | Vertical Branch', () => { + it('43: should render GitGraph with parallel commits | Vertical Branch', () => { imgSnapshotTest( `gitGraph TB: commit id:"1-abcdefg" diff --git a/demos/sankey.html b/demos/sankey.html index 5a76f476a..22ec849c7 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -33,6 +33,7 @@ --- config: sankey: + useMaxWidth: true showValues: false width: 1200 height: 600 diff --git a/docker-compose.yml b/docker-compose.yml index e2484bdc5..65acab37e 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -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 diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 846ec51ac..38c1e6e5f 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -111,6 +111,8 @@ Communication tools and platforms ### Wikis +- [PmWiki](https://www.pmwiki.org) + - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs) - [MediaWiki](https://www.mediawiki.org) - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid) - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams) @@ -234,5 +236,5 @@ Communication tools and platforms - [ExDoc](https://github.com/elixir-lang/ex_doc) - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs) - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) - - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams) - - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/reference#markdown_element) + - [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element) + - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams) diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index 2f2c3da88..b20ccccb3 100644 --- a/docs/syntax/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -240,9 +240,9 @@ class BankAccount{ #### Generic Types -Members can be defined using generic types, such as `List`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List>` 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>` are supported, though generics that include a comma are currently not supported. (such as `List>`) -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\+) -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