marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +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
fcose
fontawesome
Fonticons
Forgejo
Foswiki
Gitea

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

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

5
cypress/platform/e2e.html
View File

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

5
cypress/platform/viewer.js
View File

@@ -66,6 +66,11 @@ const contentLoaded = async function () {
mermaid.registerLayoutLoaders(layouts);
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 = {
prefix: 'fa',
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).
Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.
> **Note**
> 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 { getIconStyles } from '../globalStyles.js';
/** Returns the styles given options */
export interface BlockChartStyleOptions {
@@ -142,20 +143,7 @@ const getStyles = (options: BlockChartStyleOptions) =>
font-size: 18px;
fill: ${options.textColor};
}
.node label-icon path {
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;
}
${getIconStyles()}
`;
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) =>
`g.classGroup text {
fill: ${options.nodeBorder || options.classText};
@@ -157,20 +159,7 @@ g.classGroup line {
font-size: 18px;
fill: ${options.textColor};
}
.node label-icon path {
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;
}
${getIconStyles()}
`;
export default getStyles;

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

@@ -1,5 +1,6 @@
// import khroma from 'khroma';
import * as khroma from 'khroma';
import { getIconStyles } from '../globalStyles.js';
/** Returns the styles given options */
export interface FlowChartStyleOptions {
@@ -177,20 +178,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
}
text-align: center;
}
.node .label-icon path {
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;
}
${getIconStyles()}
`;
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
import { darken, lighten, isDark } from 'khroma';
import type { DiagramStylesProvider } from '../../diagram-api/types.js';
import { getIconStyles } from '../globalStyles.js';
const genSections: DiagramStylesProvider = (options) => {
let sections = '';
@@ -105,19 +106,6 @@ const getStyles: DiagramStylesProvider = (options) =>
dominant-baseline: middle;
text-align: center;
}
.node label-icon path {
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;
}
${getIconStyles()}
`;
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) =>
`.label {
font-family: ${options.fontFamily};
@@ -131,20 +133,7 @@ const getStyles = (options) =>
.actor-5 {
${options.actor5 ? `fill: ${options.actor5}` : ''};
}
.node label-icon path {
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;
}
${getIconStyles()}
`;
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).
Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.
```note
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 () => {
/**
* CC-BY-4.0
* Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free
* https://fontawesome.com/icons/bell?f=classic&s=regular
*/
const staticBellIconPack = {
prefix: 'fa',
icons: {