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

Merge branch 'develop' into release/9.4.0

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-01-17 18:08:04 +01:00
parent 7e8c1b0393 549483d19b
commit e573be4afd
7 changed files with 371 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.github/FUNDING.yml vendored
View File

@@ -1,6 +1,8 @@
# These are supported funding model platforms # These are supported funding model platforms
github: [knsv] github:
- knsv
- sidharthv96
#patreon: # Replace with a single Patreon username #patreon: # Replace with a single Patreon username
#open_collective: # Replace with a single Open Collective username #open_collective: # Replace with a single Open Collective username
#ko_fi: # Replace with a single Ko-fi username #ko_fi: # Replace with a single Ko-fi username

1
cSpell.json
View File

@@ -85,6 +85,7 @@
"setupgraphviewbox", "setupgraphviewbox",
"shiki", "shiki",
"sidharth", "sidharth",
"sidharthv",
"sphinxcontrib", "sphinxcontrib",
"statediagram", "statediagram",
"stylis", "stylis",

281
cypress/platform/sidv.html
View File

@@ -1,14 +1,283 @@
<html> <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"
/>
<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: #eee;
background-image: radial-gradient(#fff 1%, transparent 11%),
radial-gradient(#fff 1%, transparent 11%);
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;
}
</style>
</head>
<body> <body>
<pre class="mermaid"> <pre id="diagram" class="mermaid">
none %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
hello world graph TB
a --> b
a --> c
b --> d
c --> d
</pre> </pre>
<script src="./mermaid.js"></script> <pre id="diagram" class="mermaid">
<script> flowchart-elk LR
subgraph A
a -->b
end
subgraph B
b
end
</pre>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
core0[IBM PowerPC Broadway Core 0]
core1[IBM PowerPC Broadway Core 1]
core2[IBM PowerPC Broadway Core 2]
rom[16 KB ROM]
core0 --- core2
rom --> core2
end
subgraph amd[AMD Latte GPU]
mem[Memory & I/O Bridge]
dram[DRAM Controller]
edram[32 MB EDRAM MEM1]
rom[512 B SEEPROM]
sata[SATA IF]
exi[EXI]
subgraph gx[GX]
sram[3 MB 1T-SRAM]
end
radeon[AMD Radeon R7xx GX2]
mem --- gx
mem --- radeon
rom --- mem
mem --- sata
mem --- exi
dram --- sata
dram --- exi
end
ddr3[2 GB DDR3 RAM MEM2]
mem --- ddr3
dram --- ddr3
edram --- ddr3
core1 --- mem
exi --- rtc
rtc{{rtc}}
</pre
>
<br />
<pre id="diagram" class="mermaid">
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
core0[IBM PowerPC Broadway Core 0]
core1[IBM PowerPC Broadway Core 1]
core2[IBM PowerPC Broadway Core 2]
rom[16 KB ROM]
core0 --- core2
rom --> core2
end
subgraph amd[AMD Latte GPU]
mem[Memory & I/O Bridge]
dram[DRAM Controller]
edram[32 MB EDRAM MEM1]
rom[512 B SEEPROM]
sata[SATA IF]
exi[EXI]
subgraph gx[GX]
sram[3 MB 1T-SRAM]
end
radeon[AMD Radeon R7xx GX2]
mem --- gx
mem --- radeon
rom --- mem
mem --- sata
mem --- exi
dram --- sata
dram --- exi
end
ddr3[2 GB DDR3 RAM MEM2]
mem --- ddr3
dram --- ddr3
edram --- ddr3
core1 --- mem
exi --- rtc
rtc{{rtc}}
</pre
>
<br />
&nbsp;
<pre id="diagram" class="mermaid2">
flowchart LR
B1 --be be--x B2
B1 --bo bo--o B3
subgraph Ugge
B2
B3
subgraph inner
B4
B5
end
subgraph inner2
subgraph deeper
C4
C5
end
C6
end
B4 --> C4
B3 -- X --> B4
B2 --> inner
C4 --> C5
end
subgraph outer
B6
end
B6 --> B5
</pre
>
<pre id="diagram" class="mermaid2">
sequenceDiagram
Customer->>+Stripe: Makes a payment request
Stripe->>+Bank: Forwards the payment request to the bank
Bank->>+Customer: Asks for authorization
Customer->>+Bank: Provides authorization
Bank->>+Stripe: Sends a response with payment details
Stripe->>+Merchant: Sends a notification of payment receipt
Merchant->>+Stripe: Confirms the payment
Stripe->>+Customer: Sends a confirmation of payment
Customer->>+Merchant: Receives goods or services
</pre
>
<pre id="diagram" class="mermaid2">
gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD
axisFormat %d
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1
Today: 1, -1h
</pre>
<!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<!-- <script src="./mermaid.js"></script> -->
<script type="module">
import mindmap from '../../packages/mermaid-mindmap/src/detector';
// import example from '../../packages/mermaid-example-diagram/src/detector';
import mermaid from '../../packages/mermaid/src/mermaid';
await mermaid.registerExternalDiagrams([mindmap]);
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({ mermaid.initialize({
logLevel: 1, // theme: 'forest',
startOnLoad: true,
logLevel: 0,
flowchart: {
// defaultRenderer: 'elk',
useMaxWidth: false,
htmlLabels: true,
},
gantt: {
useMaxWidth: false,
},
useMaxWidth: false,
}); });
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
</script> </script>
</body> </body>
</html> </html>

16
packages/mermaid/src/diagrams/sequence/svgDraw.js
View File

@@ -1,5 +1,6 @@
import common from '../common/common'; import common from '../common/common';
import { addFunction } from '../../interactionDb'; import { addFunction } from '../../interactionDb';
import { parseFontSize } from '../../utils';
import { sanitizeUrl } from '@braintree/sanitize-url'; import { sanitizeUrl } from '@braintree/sanitize-url';
export const drawRect = function (elem, rectData) { export const drawRect = function (elem, rectData) {
@@ -156,6 +157,8 @@ export const drawText = function (elem, textData) {
textHeight = 0; textHeight = 0;
const lines = textData.text.split(common.lineBreakRegex); const lines = textData.text.split(common.lineBreakRegex);
const [_textFontSize, _textFontSizePx] = parseFontSize(textData.fontSize);
let textElems = []; let textElems = [];
let dy = 0; let dy = 0;
let yfunc = () => textData.y; let yfunc = () => textData.y;
@@ -218,9 +221,9 @@ export const drawText = function (elem, textData) {
if ( if (
textData.textMargin !== undefined && textData.textMargin !== undefined &&
textData.textMargin === 0 && textData.textMargin === 0 &&
textData.fontSize !== undefined _textFontSize !== undefined
) { ) {
dy = i * textData.fontSize; dy = i * _textFontSize;
} }
const textElem = elem.append('text'); const textElem = elem.append('text');
@@ -235,8 +238,8 @@ export const drawText = function (elem, textData) {
if (textData.fontFamily !== undefined) { if (textData.fontFamily !== undefined) {
textElem.style('font-family', textData.fontFamily); textElem.style('font-family', textData.fontFamily);
} }
if (textData.fontSize !== undefined) { if (_textFontSizePx !== undefined) {
textElem.style('font-size', textData.fontSize); textElem.style('font-size', _textFontSizePx);
} }
if (textData.fontWeight !== undefined) { if (textData.fontWeight !== undefined) {
textElem.style('font-weight', textData.fontWeight); textElem.style('font-weight', textData.fontWeight);
@@ -840,8 +843,7 @@ const _drawTextCandidateFunc = (function () {
function byTspan(content, g, x, y, width, height, textAttrs, conf) { function byTspan(content, g, x, y, width, height, textAttrs, conf) {
const { actorFontSize, actorFontFamily, actorFontWeight } = conf; const { actorFontSize, actorFontFamily, actorFontWeight } = conf;
let _actorFontSize = const [_actorFontSize, _actorFontSizePx] = parseFontSize(actorFontSize);
actorFontSize && actorFontSize.replace ? actorFontSize.replace('px', '') : actorFontSize;
const lines = content.split(common.lineBreakRegex); const lines = content.split(common.lineBreakRegex);
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
@@ -851,7 +853,7 @@ const _drawTextCandidateFunc = (function () {
.attr('x', x + width / 2) .attr('x', x + width / 2)
.attr('y', y) .attr('y', y)
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.style('font-size', actorFontSize) .style('font-size', _actorFontSizePx)
.style('font-weight', actorFontWeight) .style('font-weight', actorFontWeight)
.style('font-family', actorFontFamily); .style('font-family', actorFontFamily);
text text

24
packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
View File

@@ -125,6 +125,30 @@ describe('svgDraw', function () {
expect(text3.attr).toHaveBeenCalledWith('y', 10); expect(text3.attr).toHaveBeenCalledWith('y', 10);
expect(text3.text).toHaveBeenCalledWith('fine lines'); expect(text3.text).toHaveBeenCalledWith('fine lines');
}); });
it('should work with numeral font sizes', function () {
const svg = MockD3('svg');
svgDraw.drawText(svg, {
x: 10,
y: 10,
dy: '1em',
text: 'One fine text message',
class: 'noteText',
fontFamily: 'courier',
fontSize: 10,
fontWeight: '500',
});
expect(svg.__children.length).toBe(1);
const text = svg.__children[0];
expect(text.__name).toBe('text');
expect(text.attr).toHaveBeenCalledWith('x', 10);
expect(text.attr).toHaveBeenCalledWith('y', 10);
expect(text.attr).toHaveBeenCalledWith('dy', '1em');
expect(text.attr).toHaveBeenCalledWith('class', 'noteText');
expect(text.text).toHaveBeenCalledWith('One fine text message');
expect(text.style).toHaveBeenCalledWith('font-family', 'courier');
expect(text.style).toHaveBeenCalledWith('font-size', '10px');
expect(text.style).toHaveBeenCalledWith('font-weight', '500');
});
}); });
describe('drawBackgroundRect', function () { describe('drawBackgroundRect', function () {
it('should append a rect before the previous element within a given bound', function () { it('should append a rect before the previous element within a given bound', function () {

26
packages/mermaid/src/utils.spec.js
View File

@@ -402,3 +402,29 @@ describe('when inserting titles', function () {
expect(titleAttrSpy).toHaveBeenCalledWith('class', 'testClass'); expect(titleAttrSpy).toHaveBeenCalledWith('class', 'testClass');
}); });
}); });
describe('when parsing font sizes', function () {
it('parses number inputs', function () {
expect(utils.parseFontSize(14)).toEqual([14, '14px']);
});
it('parses string em inputs', function () {
expect(utils.parseFontSize('14em')).toEqual([14, '14em']);
});
it('parses string px inputs', function () {
expect(utils.parseFontSize('14px')).toEqual([14, '14px']);
});
it('parses string inputs without units', function () {
expect(utils.parseFontSize('14')).toEqual([14, '14px']);
});
it('handles undefined input', function () {
expect(utils.parseFontSize(undefined)).toEqual([undefined, undefined]);
});
it('handles unparseable input', function () {
expect(utils.parseFontSize({ fontSize: 14 })).toEqual([undefined, undefined]);
});
});

35
packages/mermaid/src/utils.ts
View File

@@ -543,12 +543,14 @@ export const drawSimpleText = function (
// Remove and ignore br:s // Remove and ignore br:s
const nText = textData.text.replace(common.lineBreakRegex, ' '); const nText = textData.text.replace(common.lineBreakRegex, ' ');
const [, _fontSizePx] = parseFontSize(textData.fontSize);
const textElem = elem.append('text'); const textElem = elem.append('text');
textElem.attr('x', textData.x); textElem.attr('x', textData.x);
textElem.attr('y', textData.y); textElem.attr('y', textData.y);
textElem.style('text-anchor', textData.anchor); textElem.style('text-anchor', textData.anchor);
textElem.style('font-family', textData.fontFamily); textElem.style('font-family', textData.fontFamily);
textElem.style('font-size', textData.fontSize); textElem.style('font-size', _fontSizePx);
textElem.style('font-weight', textData.fontWeight); textElem.style('font-weight', textData.fontWeight);
textElem.attr('fill', textData.fill); textElem.attr('fill', textData.fill);
if (textData.class !== undefined) { if (textData.class !== undefined) {
@@ -722,6 +724,8 @@ export const calculateTextDimensions: (
return { width: 0, height: 0 }; return { width: 0, height: 0 };
} }
const [, _fontSizePx] = parseFontSize(fontSize);
// We can't really know if the user supplied font family will render on the user agent; // We can't really know if the user supplied font family will render on the user agent;
// thus, we'll take the max width between the user supplied font family, and a default // thus, we'll take the max width between the user supplied font family, and a default
// of sans-serif. // of sans-serif.
@@ -745,7 +749,7 @@ export const calculateTextDimensions: (
const textObj = getTextObj(); const textObj = getTextObj();
textObj.text = line; textObj.text = line;
const textElem = drawSimpleText(g, textObj) const textElem = drawSimpleText(g, textObj)
.style('font-size', fontSize) .style('font-size', _fontSizePx)
.style('font-weight', fontWeight) .style('font-weight', fontWeight)
.style('font-family', fontFamily); .style('font-family', fontFamily);
@@ -941,6 +945,32 @@ export const insertTitle = (
.attr('class', cssClass); .attr('class', cssClass);
}; };
/**
* Parses a raw fontSize configuration value into a number and string value.
*
* @param fontSize - a string or number font size configuration value
*
* @returns parsed number and string style font size values, or nulls if a number value can't
* be parsed from an input string.
*/
export const parseFontSize = (fontSize: string | number | undefined): [number?, string?] => {
// if the font size is a number, assume a px string representation
if (typeof fontSize === 'number') {
return [fontSize, fontSize + 'px'];
}
const fontSizeNumber = parseInt(fontSize, 10);
if (Number.isNaN(fontSizeNumber)) {
// if a number value can't be parsed, return null for both values
return [undefined, undefined];
} else if (fontSize === String(fontSizeNumber)) {
// if a string input doesn't contain any units, assume px units
return [fontSizeNumber, fontSize + 'px'];
} else {
return [fontSizeNumber, fontSize];
}
};
export default { export default {
assignWithDepth, assignWithDepth,
wrapLabel, wrapLabel,
@@ -964,4 +994,5 @@ export default {
directiveSanitizer, directiveSanitizer,
sanitizeCss, sanitizeCss,
insertTitle, insertTitle,
parseFontSize,
}; };