marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-18 11:44:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'alanaV11' into pebr/neo-style

Browse Source
This commit is contained in:
Per Brolin
2024-06-18 14:59:02 +02:00
parent 444bad5f20 0d630862ee
commit 7f8ca0c77e
18 changed files with 546 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
cypress/platform/ash.html Normal file
View File

@@ -0,0 +1,200 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style>
body {
/* background: rgb(221, 208, 208); */
/* background: #333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
/* background-color: #efefef;
background-image: radial-gradient(#fff 51%, transparent 91%),
radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px;
background-position:
0 0,
10px 10px;
background-repeat: repeat; */
}
.malware {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
}
/* tspan {
font-size: 6px !important;
} */
</style>
</head>
<body>
<pre id="diagram" class="mermaid">
flowchart
node
id1([This is the text in the box])
id2((circle))
id3(((double circle)))
id4>Asymetrical]
id5{This is the text in the box}
id6{{This is the text in the box}}
</pre
>
<pre id="diagram" class="mermaid">
---
config:
theme: default
look: classic
---
flowchart
node
id1([This is the text in the box])
id2((circle))
id3(((double circle)))
id4>Asymetrical]
id5{This is the text in the box}
id6{{This is the text in the box}}
</pre
>
<pre id="diagram" class="mermaid">
stateDiagram
[*] --> Active
Active --> Inactive
Inactive --> Active
Active --> [*]
</pre>
<pre id="diagram" class="mermaid2">
flowchart
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
click a_a "http://www.aftonbladet.se" "bookmark"
click c_c callback "new tooltip"
</pre
>
<pre id="diagram2" class="mermaid2">
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
</pre>
<pre id="diagram3" class="mermaid2">
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef ash color:red
class C ash
style C stroke:#00f, fill:black
</pre>
<pre id="diagram4" class="mermaid2">
stateDiagram
A:::foo
B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
style C stroke:#00f, fill:black, color:white
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err);
};
window.callback = function () {
alert('A callback was triggered');
};
mermaid.initialize({
theme: 'neo',
look: 'neo',
// handdrawnSeed: 12,
// look: 'handdrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
// layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
// fontFamily: 'courier',
fontFamily: 'arial',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
fontSize: 12,
logLevel: 0,
securityLevel: 'loose',
});
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
</script>
</body>
</html>

23
packages/mermaid/src/rendering-util/render.ts
View File

@@ -44,5 +44,28 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm]; const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
const layoutRenderer = await layoutDefinition.loader(); const layoutRenderer = await layoutDefinition.loader();
const { useGradient, gradientStart, gradientStop } = data4Layout.config.themeVariables;
if (useGradient) {
const gradient = svg.append('linearGradient');
gradient
.attr('id', 'gradient')
.attr('gradientUnits', 'userSpaceOnUse')
.attr('spreadMethod', 'pad');
gradient
.append('svg:stop')
.attr('offset', '0%')
.attr('stop-color', gradientStart)
.attr('stop-opacity', 1);
gradient
.append('svg:stop')
.attr('offset', '100%')
.attr('stop-color', gradientStop)
.attr('stop-opacity', 1);
}
return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm, positions); return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm, positions);
}; };

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
View File

@@ -8,7 +8,8 @@ import rough from 'roughjs';
export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
const radius = bbox.width / 2 + halfPadding; const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const radius = bbox.width / 2 + labelPadding;
let circleElem; let circleElem;
const { cssStyles } = node; const { cssStyles } = node;

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
View File

@@ -9,8 +9,9 @@ import rough from 'roughjs';
export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
const gap = 5; const gap = 5;
const outerRadius = bbox.width / 2 + halfPadding + gap; const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const innerRadius = bbox.width / 2 + halfPadding; const outerRadius = bbox.width / 2 + labelPadding + gap;
const innerRadius = bbox.width / 2 + labelPadding;
let circleGroup; let circleGroup;
const { cssStyles } = node; const { cssStyles } = node;
@@ -32,8 +33,9 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
circleGroup.node()?.appendChild(innerRoughNode); circleGroup.node()?.appendChild(innerRoughNode);
} else { } else {
circleGroup = shapeSvg.insert('g', ':first-child'); circleGroup = shapeSvg.insert('g', ':first-child');
const outerCircle = circleGroup.insert('circle', ':first-child');
const innerCircle = circleGroup.insert('circle', ':first-child'); const innerCircle = circleGroup.insert('circle', ':first-child');
const outerCircle = circleGroup.insert('circle', ':first-child');
circleGroup.attr('class', 'basic label-container').attr('style', cssStyles); circleGroup.attr('class', 'basic label-container').attr('style', cssStyles);

17
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -47,24 +47,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
rect.attr('class', 'basic label-container').attr('style', cssStyles); rect.attr('class', 'basic label-container').attr('style', cssStyles);
} else { } else {
rect = shapeSvg.insert('rect', ':first-child'); rect = shapeSvg.insert('rect', ':first-child');
let gradient = shapeSvg.append('linearGradient');
gradient
.attr('id', 'gradient')
.attr('gradientUnits', 'userSpaceOnUse')
.attr('spreadMethod', 'pad');
gradient
.append('svg:stop')
.attr('offset', '0%')
.attr('stop-color', '#eb0042')
.attr('stop-opacity', 1);
gradient
.append('svg:stop')
.attr('offset', '100%')
.attr('stop-color', '#0042eb')
.attr('stop-opacity', 1);
const rectClass = 'basic label-container'; const rectClass = 'basic label-container';
rect rect

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
View File

@@ -28,7 +28,8 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const f = 4; const f = 4;
const h = bbox.height + node.padding; const labelPaddingX = node.look === 'neo' ? node.padding * 2 : node.padding;
const h = bbox.height + labelPaddingX;
const m = h / f; const m = h / f;
const w = bbox.width + 2 * m + node.padding; const w = bbox.width + 2 * m + node.padding;
const points = [ const points = [

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
View File

@@ -21,9 +21,9 @@ export const rect_left_inv_arrow = async (
node: Node node: Node
): Promise<SVGAElement> => { ): Promise<SVGAElement> => {
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const labelPadding = node.look === 'neo' ? node.padding * 2 : node.padding;
const w = bbox.width + node.padding; const w = bbox.width + labelPadding;
const h = bbox.height + node.padding; const h = bbox.height + labelPadding;
const points = [ const points = [
{ x: -h / 2, y: 0 }, { x: -h / 2, y: 0 },
{ x: w, y: 0 }, { x: w, y: 0 },

11
packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
View File

@@ -53,8 +53,15 @@ export const createStadiumPathD = (
export const stadium = async (parent: SVGAElement, node: Node) => { export const stadium = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = bbox.height + node.padding; let labelPaddingX = node.padding;
const w = bbox.width + h / 4 + node.padding; const labelPaddingY = node.padding;
if (node.look === 'neo') {
labelPaddingX = node.padding ? node.padding * 2 : 0;
}
const h = bbox.height + labelPaddingX;
const w = bbox.width + h / 4 + labelPaddingY;
let rect; let rect;
const { cssStyles } = node; const { cssStyles } = node;

18
packages/mermaid/src/styles.ts
View File

@@ -77,25 +77,31 @@ const getStyles = (
//stroke: none; //stroke: none;
stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) ); filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
rx: 3; // rx: 3;
ry: 3; // ry: 3;
} }
[data-look="neo"].node rect, [data-look="neo"].node circle, [data-look="neo"].node polygon { [data-look="neo"].node rect, [data-look="neo"].node circle, [data-look="neo"].node polygon {
//stroke: $(options.nodeBorder); //stroke: $(options.nodeBorder);
stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) ); filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
rx: 3; // rx: 3;
ry: 3; // ry: 3;
} }
[data-look="neo"].node circle{ [data-look="neo"].node circle{
stroke: $(options.nodeBorder); stroke: $(options.nodeBorder);
stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) ); filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
//fill: #000000;
// rx: 3;
// ry: 3;
}
[data-look="neo"].node circle .state-start{
fill: #000000; fill: #000000;
rx: 3;
ry: 3;
} }
[data-look="neo"].statediagram-cluster rect { [data-look="neo"].statediagram-cluster rect {

6
packages/mermaid/src/themes/index.js
View File

@@ -4,7 +4,7 @@ import { getThemeVariables as defaultThemeVariables } from './theme-default.js';
import { getThemeVariables as forestThemeVariables } from './theme-forest.js'; import { getThemeVariables as forestThemeVariables } from './theme-forest.js';
import { getThemeVariables as neutralThemeVariables } from './theme-neutral.js'; import { getThemeVariables as neutralThemeVariables } from './theme-neutral.js';
import { getThemeVariables as neoThemeVariables } from './theme-neo.js'; import { getThemeVariables as neoThemeVariables } from './theme-neo.js';
import { getThemeVariables as gradientThemeVariables } from './theme-gradient.js'; import { getThemeVariables as neoDarkThemeVariables } from './theme-neo-dark.js';
export default { export default {
base: { base: {
@@ -25,7 +25,7 @@ export default {
neo: { neo: {
getThemeVariables: neoThemeVariables, getThemeVariables: neoThemeVariables,
}, },
gradient: { 'neo-dark': {
getThemeVariables: gradientThemeVariables, getThemeVariables: neoDarkThemeVariables,
}, },
}; };

4
packages/mermaid/src/themes/theme-base.js
View File

@@ -25,6 +25,7 @@ class Theme {
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
this.fontSize = '16px'; this.fontSize = '16px';
this.useGradient = true;
} }
updateColors() { updateColors() {
// The || is to make sure that if the variable has been defined by a user override that value is to be used // The || is to make sure that if the variable has been defined by a user override that value is to be used
@@ -336,6 +337,9 @@ class Theme {
this.attributeBackgroundColorEven = this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven; this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */ /* -------------------------------------------------- */
this.gradientStart = this.primaryBorderColor;
this.gradientStop = this.secondaryBorderColor;
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {

3
packages/mermaid/src/themes/theme-dark.js
View File

@@ -90,6 +90,9 @@ class Theme {
this.errorBkgColor = '#a44141'; this.errorBkgColor = '#a44141';
this.errorTextColor = '#ddd'; this.errorTextColor = '#ddd';
this.useGradient = true;
this.gradientStart = this.primaryBorderColor;
this.gradientStop = this.secondaryBorderColor;
} }
updateColors() { updateColors() {
this.secondBkg = lighten(this.mainBkg, 16); this.secondBkg = lighten(this.mainBkg, 16);

3
packages/mermaid/src/themes/theme-default.js
View File

@@ -117,6 +117,9 @@ class Theme {
this.labelColor = 'black'; this.labelColor = 'black';
this.errorBkgColor = '#552222'; this.errorBkgColor = '#552222';
this.errorTextColor = '#552222'; this.errorTextColor = '#552222';
this.useGradient = true;
this.gradientStart = this.primaryBorderColor;
this.gradientStop = this.secondaryBorderColor;
this.updateColors(); this.updateColors();
} }
updateColors() { updateColors() {

6
packages/mermaid/src/themes/theme-forest.js
View File

@@ -92,6 +92,10 @@ class Theme {
this.errorBkgColor = '#552222'; this.errorBkgColor = '#552222';
this.errorTextColor = '#552222'; this.errorTextColor = '#552222';
this.useGradient = true;
this.gradientStart = this.primaryBorderColor;
this.gradientStop = this.secondaryBorderColor;
} }
updateColors() { updateColors() {
/* Sequence Diagram variables */ /* Sequence Diagram variables */
@@ -338,6 +342,8 @@ class Theme {
this.attributeBackgroundColorEven = this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven; this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */ /* -------------------------------------------------- */
this.useGradient = true;
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {

36
packages/mermaid/src/themes/theme-gradient.js → packages/mermaid/src/themes/theme-neo-dark.js
View File

@@ -1,4 +1,4 @@
import { darken, lighten, adjust, invert, isDark, toRgba } from 'khroma'; import { adjust, darken, invert, isDark, lighten, rgba } from 'khroma';
import { mkBorder } from './theme-helpers.js'; import { mkBorder } from './theme-helpers.js';
import { import {
oldAttributeBackgroundColorEven, oldAttributeBackgroundColorEven,
@@ -12,24 +12,46 @@ class Theme {
* - Background - used to know what the background color is of the diagram. This is used for * - Background - used to know what the background color is of the diagram. This is used for
* deducing colors for instance line color. Default value is #f4f4f4. * deducing colors for instance line color. Default value is #f4f4f4.
*/ */
this.background = '#ffffff'; this.background = '#333';
this.primaryColor = '#1f2020';
this.secondaryColor = lighten(this.primaryColor, 16);
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
this.primaryBorderColor = invert(this.background);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.primaryColor = '#cccccc'; this.mainBkg = '#1f2020';
this.mainBkg = '#ffffff'; this.secondBkg = 'calculated';
this.mainContrastColor = 'lightgrey';
this.darkTextColor = lighten(invert('#323D47'), 10);
this.border1 = '#ccc';
this.border2 = rgba(255, 255, 255, 0.25);
this.arrowheadColor = 'calculated';
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
this.fontSize = '16px';
this.labelBackground = '#181818';
this.textColor = '#ccc';
this.THEME_COLOR_LIMIT = 12;
this.radius = 3;
this.noteBkgColor = '#fff5ad'; this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333'; this.noteTextColor = '#333';
this.THEME_COLOR_LIMIT = 12; this.THEME_COLOR_LIMIT = 12;
this.radius = 3;
// dark // dark
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
this.fontSize = '10px'; this.fontSize = '10px';
// Neo-specific // Neo-specific
this.nodeBorder = '#550000'; this.nodeBorder = 'none';
this.stateBorder = 'none'; this.stateBorder = 'none';
this.useGradient = true;
this.gradientStart = '#eb0042';
this.gradientStop = '#0042eb';
} }
updateColors() { updateColors() {
// The || is to make sure that if the variable has been defined by a user override that value is to be used // The || is to make sure that if the variable has been defined by a user override that value is to be used

4
packages/mermaid/src/themes/theme-neo.js
View File

@@ -30,7 +30,9 @@ class Theme {
// Neo-specific // Neo-specific
this.nodeBorder = 'none'; this.nodeBorder = 'none';
this.stateBorder = 'none'; this.stateBorder = 'none';
this.useGradient = false; this.useGradient = true;
this.gradientStart = '#eb0042';
this.gradientStop = '#0042eb';
} }
updateColors() { updateColors() {
// The || is to make sure that if the variable has been defined by a user override that value is to be used // The || is to make sure that if the variable has been defined by a user override that value is to be used

3
packages/mermaid/src/themes/theme-neutral.js
View File

@@ -104,6 +104,9 @@ class Theme {
this.errorBkgColor = '#552222'; this.errorBkgColor = '#552222';
this.errorTextColor = '#552222'; this.errorTextColor = '#552222';
this.useGradient = true;
this.gradientStart = this.primaryBorderColor;
this.gradientStop = this.secondaryBorderColor;
} }
updateColors() { updateColors() {
this.secondBkg = lighten(this.contrast, 55); this.secondBkg = lighten(this.contrast, 55);

387
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff