diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml index dd97b49e1..6aaa91eb8 100644 --- a/.github/workflows/e2e-applitools.yml +++ b/.github/workflows/e2e-applitools.yml @@ -23,9 +23,6 @@ env: jobs: e2e-applitools: runs-on: ubuntu-latest - container: - image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1 - options: --user 1001 steps: - if: ${{ ! env.USE_APPLI }} name: Warn if not using Applitools diff --git a/docs/community/contributing.md b/docs/community/contributing.md index ef6bef987..ce010b316 100644 --- a/docs/community/contributing.md +++ b/docs/community/contributing.md @@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid- Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with. -> **💡 Tip** -> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo). +> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo). ```bash git clone git@github.com/your-fork/mermaid diff --git a/docs/community/intro.md b/docs/community/intro.md index a549d031e..6b1430572 100644 --- a/docs/community/intro.md +++ b/docs/community/intro.md @@ -33,8 +33,7 @@ mindmap ## Join the Development -> **💡 Tip** -> **Check out our** [**detailed contribution guide**](./contributing.md). +> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md). Where to start: @@ -48,8 +47,7 @@ Where to start: ## A Question Or a Suggestion? -> **💡 Tip** -> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md). +> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md). If you have faced a vulnerability [report it to us](./security.md). diff --git a/docs/config/directives.md b/docs/config/directives.md index 40ebd81a4..13a663133 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings, Mermaid basically supports two types of configuration options to be overridden by directives. 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: + - theme - fontFamily - logLevel diff --git a/docs/config/setup/mermaid/interfaces/LayoutData.md b/docs/config/setup/mermaid/interfaces/LayoutData.md index a6cc42a98..c9ee3775e 100644 --- a/docs/config/setup/mermaid/interfaces/LayoutData.md +++ b/docs/config/setup/mermaid/interfaces/LayoutData.md @@ -10,7 +10,7 @@ # Interface: LayoutData -Defined in: [packages/mermaid/src/rendering-util/types.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L180) +Defined in: [packages/mermaid/src/rendering-util/types.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L184) ## Indexable @@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:180](https://github.co > **config**: [`MermaidConfig`](MermaidConfig.md) -Defined in: [packages/mermaid/src/rendering-util/types.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L183) +Defined in: [packages/mermaid/src/rendering-util/types.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L187) --- @@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:183](https://github.co > **edges**: `Edge`\[] -Defined in: [packages/mermaid/src/rendering-util/types.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L182) +Defined in: [packages/mermaid/src/rendering-util/types.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L186) --- @@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:182](https://github.co > **nodes**: `Node`\[] -Defined in: [packages/mermaid/src/rendering-util/types.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L181) +Defined in: [packages/mermaid/src/rendering-util/types.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L185) diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index fd1e70aca..8100a1846 100644 --- a/docs/ecosystem/mermaid-chart.md +++ b/docs/ecosystem/mermaid-chart.md @@ -29,6 +29,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun - **Plugins** - A plugin system for extending the functionality of Mermaid. Official Mermaid Chart plugins: + - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts) - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview) - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index e054d2da0..a8a67343d 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -35,11 +35,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart Learn more: - Visual Editor For Flowcharts + - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0) - Visual Editor For Sequence diagrams + - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams) - [Demo video](https://youtu.be/imc2u5_N6Dc) diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md index ae610d152..c1d2e1597 100644 --- a/docs/syntax/c4.md +++ b/docs/syntax/c4.md @@ -139,6 +139,7 @@ The following unfinished features are not supported in the short term. - [ ] Legend - [x] System Context + - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) - [x] Person_Ext - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) @@ -152,6 +153,7 @@ The following unfinished features are not supported in the short term. - [x] System_Boundary - [x] Container diagram + - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] ContainerDb - [x] ContainerQueue @@ -161,6 +163,7 @@ The following unfinished features are not supported in the short term. - [x] Container_Boundary(alias, label, ?tags, $link) - [x] Component diagram + - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] ComponentDb - [x] ComponentQueue @@ -169,15 +172,18 @@ The following unfinished features are not supported in the short term. - [x] ComponentQueue_Ext - [x] Dynamic diagram + - [x] RelIndex(index, from, to, label, ?tags, $link) - [x] Deployment diagram + - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() - [x] Relationship Types + - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] BiRel (bidirectional relationship) - [x] Rel_U, Rel_Up diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index a9e0a08ab..e9763dd7e 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -356,6 +356,7 @@ Below is a comprehensive list of the newly introduced shapes and their correspon | Manual File | Flipped Triangle | `flip-tri` | Manual file operation | `flipped-triangle`, `manual-file` | | Manual Input | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` | | Manual Operation | Trapezoid Base Top | `trap-t` | Represents a manual task | `inv-trapezoid`, `manual`, `trapezoid-top` | +| Mindmap Circle | mindmapCircle | `mindmap-circle` | mindmapCircle | `mindmap-circle` | | Multi-Document | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` | | Multi-Process | Stacked Rectangle | `st-rect` | Multiple processes | `processes`, `procs`, `stacked-rectangle` | | Odd | Odd | `odd` | Odd shape | | diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 3a42f04e1..552c1658a 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -360,8 +360,7 @@ gantt weekday monday ``` -> **Warning** -> `millisecond` and `second` support was added in v10.3.0 +> **Warning** > `millisecond` and `second` support was added in v10.3.0 ## Output in compact mode diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index b52cba06b..af3185bf5 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -68,7 +68,7 @@ }, "dependencies": { "@braintree/sanitize-url": "^7.0.4", - "@iconify/utils": "^2.1.33", + "@iconify/utils": "^3.0.1", "@mermaid-js/parser": "workspace:^", "@types/d3": "^7.4.3", "cytoscape": "^3.29.3", diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 6ec43eb93..b5b95e7c0 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -31,7 +31,7 @@ "fast-glob": "^3.3.3", "https-localhost": "^4.7.1", "pathe": "^2.0.3", - "unocss": "^66.0.0", + "unocss": "^66.4.2", "unplugin-vue-components": "^28.4.0", "vite": "^6.1.1", "vite-plugin-pwa": "^1.0.0", diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index b2d2d3cd3..ff794abb1 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -41,7 +41,6 @@ import { decodeEntities, encodeEntities } from './utils.js'; import { toBase64 } from './utils/base64.js'; import { StateDB } from './diagrams/state/stateDb.js'; import { ensureNodeFromSelector, jsdomIt } from './tests/util.js'; -import { select } from 'd3'; import { JSDOM } from 'jsdom'; /** @@ -50,7 +49,6 @@ import { JSDOM } from 'jsdom'; */ // ------------------------------------------------------------------------------------- - describe('mermaidAPI', () => { describe('encodeEntities', () => { it('removes the ending ; from style [text1]:[optional word]#[text2]; with ', () => { @@ -913,4 +911,241 @@ graph TD;A--x|text including URL space|B;`) expect(sequenceDiagram1.db.getActors()).not.toEqual(sequenceDiagram2.db.getActors()); }); }); + + describe('mermaidAPI config precedence', () => { + const id = 'mermaid-config-test'; + + beforeEach(() => { + mermaidAPI.globalReset(); + }); + + jsdomIt('renders with YAML config taking precedence over initialize config', async () => { + mermaid.initialize({ + theme: 'forest', + fontFamily: 'Arial', + themeVariables: { fontFamily: 'Arial', fontSize: '16px' }, + flowchart: { htmlLabels: false }, + }); + + const diagramText = `--- +config: + theme: base + fontFamily: Courier + themeVariables: + fontFamily: "Courier New" + fontSize: "20px" + flowchart: + htmlLabels: true +--- +flowchart TD + A --> B +`; + + const { svg } = await mermaidAPI.render('yaml-over-init', diagramText); + + const config = mermaidAPI.getConfig(); + expect(config.theme).toBe('base'); + expect(config.fontFamily).toBe('Courier'); + expect(config.themeVariables.fontFamily).toBe('Courier New'); + expect(config.themeVariables.fontSize).toBe('20px'); + expect(config.flowchart?.htmlLabels).toBe(true); + + const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document); + expect(svgNode).not.toBeNull(); + }); + + jsdomIt( + 'renders with YAML themeVariables fully overriding initialize themeVariables', + async () => { + mermaid.initialize({ + themeVariables: { fontFamily: 'Arial', fontSize: '16px' }, + }); + + const diagramText = `--- +config: + themeVariables: + fontFamily: "Courier New" + fontSize: "20px" +--- +flowchart TD + A --> B +`; + + const { svg } = await mermaidAPI.render(id, diagramText); + const config = mermaidAPI.getConfig(); + + expect(config.themeVariables.fontFamily).toBe('Courier New'); + expect(config.themeVariables.fontSize).toBe('20px'); + expect(config.themeVariables.fontFamily).not.toBe('Arial'); + expect(config.themeVariables.fontSize).not.toBe('16px'); + + const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document); + expect(svgNode).not.toBeNull(); + } + ); + + jsdomIt( + 'renders with YAML themeVariables overriding only provided keys and keeping others from initialize', + async () => { + mermaid.initialize({ + theme: 'forest', + fontFamily: 'Arial', + themeVariables: { fontFamily: 'Arial', fontSize: '16px', colorPrimary: '#ff0000' }, + }); + + const diagramText = `--- +config: + themeVariables: + fontFamily: "Courier New" +--- +flowchart TD + A --> B +`; + + const { svg } = await mermaidAPI.render(id, diagramText); + + const config = mermaidAPI.getConfig(); + expect(config.themeVariables.fontFamily).toBe('Courier New'); + expect(config.themeVariables.fontSize).toBe('16px'); + expect(config.themeVariables.colorPrimary).toBe('#ff0000'); + + const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document); + expect(svgNode).not.toBeNull(); + } + ); + + jsdomIt( + 'renders with YAML config (no themeVariables) and falls back to initialize themeVariables', + async () => { + mermaid.initialize({ + themeVariables: { fontFamily: 'Arial', fontSize: '16px' }, + }); + + const diagramText = `--- +config: + theme: base +--- +flowchart TD + A --> B +`; + + const { svg } = await mermaidAPI.render(id, diagramText); + + const config = mermaidAPI.getConfig(); + expect(config.themeVariables.fontFamily).toBe('Arial'); + expect(config.themeVariables.fontSize).toBe('16px'); + expect(config.theme).toBe('base'); + + const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document); + expect(svgNode).not.toBeNull(); + } + ); + + jsdomIt( + 'renders with full YAML config block taking full precedence over initialize config', + async () => { + mermaid.initialize({ + theme: 'forest', + fontFamily: 'Arial', + themeVariables: { fontFamily: 'Arial', fontSize: '16px' }, + flowchart: { htmlLabels: false }, + }); + + const diagramText = `--- +config: + theme: base + fontFamily: Courier + themeVariables: + fontFamily: "Courier New" + fontSize: "20px" + flowchart: + htmlLabels: true +--- +flowchart TD + A --> B +`; + + const { svg } = await mermaidAPI.render('yaml-over-init', diagramText); + + const config = mermaidAPI.getConfig(); + expect(config.theme).toBe('base'); + expect(config.fontFamily).toBe('Courier'); + expect(config.themeVariables.fontFamily).toBe('Courier New'); + expect(config.themeVariables.fontSize).toBe('20px'); + expect(config.flowchart?.htmlLabels).toBe(true); + + const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document); + expect(svgNode).not.toBeNull(); + } + ); + + jsdomIt( + 'renders with YAML config (no themeVariables) and falls back to initialize themeVariables (duplicate scenario)', + async () => { + mermaid.initialize({ + themeVariables: { fontFamily: 'Arial', fontSize: '16px' }, + }); + + const diagramText = `--- +config: + theme: base +--- +flowchart TD + A --> B +`; + + await mermaidAPI.render(id, diagramText); + + const config = mermaidAPI.getConfig(); + expect(config.themeVariables.fontFamily).toBe('Arial'); + expect(config.themeVariables.fontSize).toBe('16px'); + expect(config.theme).toBe('base'); + } + ); + + jsdomIt('renders with no YAML config so initialize config is fully applied', async () => { + mermaid.initialize({ + theme: 'forest', + fontFamily: 'Arial', + themeVariables: { fontFamily: 'Arial', fontSize: '16px' }, + }); + + const diagramText = ` +flowchart TD + A --> B +`; + + await mermaidAPI.render(id, diagramText); + + const config = mermaidAPI.getConfig(); + expect(config.theme).toBe('forest'); + expect(config.fontFamily).toBe('Arial'); + expect(config.themeVariables.fontFamily).toBe('Arial'); + expect(config.themeVariables.fontSize).toBe('16px'); + }); + + jsdomIt( + 'renders with empty YAML config block and falls back to initialize config', + async () => { + mermaid.initialize({ + theme: 'dark', + themeVariables: { fontFamily: 'Times', fontSize: '14px' }, + }); + + const diagramText = `--- +config: {} +--- +flowchart TD + A --> B +`; + + await mermaidAPI.render(id, diagramText); + + const config = mermaidAPI.getConfig(); + expect(config.theme).toBe('dark'); + expect(config.themeVariables.fontFamily).toBe('Times'); + expect(config.themeVariables.fontSize).toBe('14px'); + } + ); + }); });