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

Updated docs and e2e test case

Browse Source
This commit is contained in:
saurabhg772244
2025-02-28 19:09:21 +05:30
parent f60ecfc2c4
commit a31adc63a9
13 changed files with 45 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.cspell/libraries.txt
View File

@@ -26,6 +26,7 @@ dompurify
elkjs elkjs
fcose fcose
fontawesome fontawesome
Fonticons
Forgejo Forgejo
Foswiki Foswiki
Gitea Gitea

4
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -86,7 +86,7 @@ describe('Flowchart v2', () => {
B --> C{Let me think} B --> C{Let me think}
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[Car]
`, `,
{ flowchart: { useMaxWidth: true } } { flowchart: { useMaxWidth: true } }
); );
@@ -109,7 +109,7 @@ describe('Flowchart v2', () => {
B --> C{Let me think} B --> C{Let me think}
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[Car]
`, `,
{ flowchart: { useMaxWidth: false } } { flowchart: { useMaxWidth: false } }
); );

5
cypress/platform/e2e.html
View File

@@ -7,16 +7,13 @@
rel="stylesheet" rel="stylesheet"
/> />
<style> <style>
svg { svg:not(svg svg) {
border: 2px solid darkred; border: 2px solid darkred;
} }
.exClass2 > rect, .exClass2 > rect,
.exClass { .exClass {
fill: greenyellow !important; fill: greenyellow !important;
} }
.label-icon {
border: none;
}
</style> </style>
</head> </head>
<body></body> <body></body>

5
cypress/platform/viewer.js
View File

@@ -66,6 +66,11 @@ const contentLoaded = async function () {
mermaid.registerLayoutLoaders(layouts); mermaid.registerLayoutLoaders(layouts);
mermaid.initialize(graphObj.mermaid); mermaid.initialize(graphObj.mermaid);
/**
* CC-BY-4.0
* Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free
* https://fontawesome.com/icons/bell?f=classic&s=regular
*/
const staticBellIconPack = { const staticBellIconPack = {
prefix: 'fa', prefix: 'fa',
icons: { icons: {

2
docs/syntax/flowchart.md
View File

@@ -1942,6 +1942,8 @@ There are two ways to display these FontAwesome icons:
You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md). You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).
Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.
> **Note** > **Note**
> Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered. > Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered.

16
packages/mermaid/src/diagrams/block/styles.ts
View File

@@ -1,4 +1,5 @@
import * as khroma from 'khroma'; import * as khroma from 'khroma';
import { getIconStyles } from '../globalStyles.js';
/** Returns the styles given options */ /** Returns the styles given options */
export interface BlockChartStyleOptions { export interface BlockChartStyleOptions {
@@ -142,20 +143,7 @@ const getStyles = (options: BlockChartStyleOptions) =>
font-size: 18px; font-size: 18px;
fill: ${options.textColor}; fill: ${options.textColor};
} }
.node label-icon path { ${getIconStyles()}
fill: currentColor;
stroke: revert;
stroke-width: revert;
}
/**
* These are copied from font-awesome.css
*/
.label-icon {
display: inline-block;
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}
`; `;
export default getStyles; export default getStyles;

17
packages/mermaid/src/diagrams/class/styles.js
View File

@@ -1,3 +1,5 @@
import { getIconStyles } from '../globalStyles.js';
const getStyles = (options) => const getStyles = (options) =>
`g.classGroup text { `g.classGroup text {
fill: ${options.nodeBorder || options.classText}; fill: ${options.nodeBorder || options.classText};
@@ -157,20 +159,7 @@ g.classGroup line {
font-size: 18px; font-size: 18px;
fill: ${options.textColor}; fill: ${options.textColor};
} }
.node label-icon path { ${getIconStyles()}
fill: currentColor;
stroke: revert;
stroke-width: revert;
}
/**
* These are copied from font-awesome.css
*/
.label-icon {
display: inline-block;
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}
`; `;
export default getStyles; export default getStyles;

16
packages/mermaid/src/diagrams/flowchart/styles.ts
View File

@@ -1,5 +1,6 @@
// import khroma from 'khroma'; // import khroma from 'khroma';
import * as khroma from 'khroma'; import * as khroma from 'khroma';
import { getIconStyles } from '../globalStyles.js';
/** Returns the styles given options */ /** Returns the styles given options */
export interface FlowChartStyleOptions { export interface FlowChartStyleOptions {
@@ -177,20 +178,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
} }
text-align: center; text-align: center;
} }
.node .label-icon path { ${getIconStyles()}
fill: currentColor;
stroke: revert;
stroke-width: revert;
}
/**
* These are copied from font-awesome.css
*/
.label-icon {
display: inline-block;
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}
`; `;
export default getStyles; export default getStyles;

15
packages/mermaid/src/diagrams/globalStyles.ts Normal file
View File

@@ -0,0 +1,15 @@
export const getIconStyles = () => `
/* Font Awesome icon styling - consolidated */
.label-icon {
display: inline-block;
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}
.node .label-icon path {
fill: currentColor;
stroke: revert;
stroke-width: revert;
}
`;

16
packages/mermaid/src/diagrams/kanban/styles.ts
View File

@@ -1,6 +1,7 @@
// @ts-expect-error Incorrect khroma types // @ts-expect-error Incorrect khroma types
import { darken, lighten, isDark } from 'khroma'; import { darken, lighten, isDark } from 'khroma';
import type { DiagramStylesProvider } from '../../diagram-api/types.js'; import type { DiagramStylesProvider } from '../../diagram-api/types.js';
import { getIconStyles } from '../globalStyles.js';
const genSections: DiagramStylesProvider = (options) => { const genSections: DiagramStylesProvider = (options) => {
let sections = ''; let sections = '';
@@ -105,19 +106,6 @@ const getStyles: DiagramStylesProvider = (options) =>
dominant-baseline: middle; dominant-baseline: middle;
text-align: center; text-align: center;
} }
.node label-icon path { ${getIconStyles()}
fill: currentColor;
stroke: revert;
stroke-width: revert;
}
/**
* These are copied from font-awesome.css
*/
.label-icon {
display: inline-block;
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}
`; `;
export default getStyles; export default getStyles;

17
packages/mermaid/src/diagrams/user-journey/styles.js
View File

@@ -1,3 +1,5 @@
import { getIconStyles } from '../globalStyles.js';
const getStyles = (options) => const getStyles = (options) =>
`.label { `.label {
font-family: ${options.fontFamily}; font-family: ${options.fontFamily};
@@ -131,20 +133,7 @@ const getStyles = (options) =>
.actor-5 { .actor-5 {
${options.actor5 ? `fill: ${options.actor5}` : ''}; ${options.actor5 ? `fill: ${options.actor5}` : ''};
} }
.node label-icon path { ${getIconStyles()}
fill: currentColor;
stroke: revert;
stroke-width: revert;
}
/**
* These are copied from font-awesome.css
*/
.label-icon {
display: inline-block;
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}
`; `;
export default getStyles; export default getStyles;

2
packages/mermaid/src/docs/syntax/flowchart.md
View File

@@ -1249,6 +1249,8 @@ There are two ways to display these FontAwesome icons:
You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md). You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).
Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.
```note ```note
Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered. Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered.
``` ```

5
packages/mermaid/src/rendering-util/createText.spec.ts
View File

@@ -32,6 +32,11 @@ describe('replaceIconSubstring', () => {
}); });
it('correctly process the registered icons', async () => { it('correctly process the registered icons', async () => {
/**
* CC-BY-4.0
* Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free
* https://fontawesome.com/icons/bell?f=classic&s=regular
*/
const staticBellIconPack = { const staticBellIconPack = {
prefix: 'fa', prefix: 'fa',
icons: { icons: {