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

Merge branch 'develop' into sidv/fix4157

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-02-28 13:20:37 +01:00
committed by GitHub
parent 733967f65a b932cd0930
commit fda0c8d0a9
8 changed files with 70 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
cypress/platform/sidv.html
View File

@@ -1,246 +1,17 @@
<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 id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
graph TB graph TB
a --> b a --> b
a --> c a --> c
b --> d b --> d
c --> d c --> d
</pre> </pre>
<pre id="diagram" class="mermaid">
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] <div id="d2"></div>
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>
<script type="module"> <script type="module">
import mermaid from '../../packages/mermaid/src/mermaid'; import mermaid from '/mermaid.esm.mjs';
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
@@ -265,6 +36,11 @@ sequenceDiagram
console.error('In parse error:'); console.error('In parse error:');
console.error(err); console.error(err);
}; };
const value = `graph TD\nHello --> World`;
const el = document.getElementById('d2');
const { svg } = await mermaid.render('d22', value);
console.log(svg);
el.innerHTML = svg;
// mermaid.test1('first_slow', 1200).then((r) => console.info(r)); // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
// mermaid.test1('second_fast', 200).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('third_fast', 200).then((r) => console.info(r));

2
docs/config/setup/modules/mermaidAPI.md
View File

@@ -95,7 +95,7 @@ mermaid.initialize(config);
#### Defined in #### Defined in
[mermaidAPI.ts:683](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L683) [mermaidAPI.ts:683](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L680)
## Functions ## Functions

4
packages/mermaid/src/diagram-api/detectType.ts
View File

@@ -112,4 +112,6 @@ export const addDetector = (key: string, detector: DiagramDetector, loader?: Dia
log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`); log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`);
}; };
export const getDiagramLoader = (key: string) => detectors[key].loader; export const getDiagramLoader = (key: string) => {
return detectors[key].loader;
};

9
packages/mermaid/src/diagram-api/diagramAPI.spec.ts
View File

@@ -3,6 +3,7 @@ import { getDiagram, registerDiagram } from './diagramAPI';
import { addDiagrams } from './diagram-orchestration'; import { addDiagrams } from './diagram-orchestration';
import { DiagramDetector } from './types'; import { DiagramDetector } from './types';
import { getDiagramFromText } from '../Diagram'; import { getDiagramFromText } from '../Diagram';
import { it, describe, expect, beforeAll } from 'vitest';
addDiagrams(); addDiagrams();
beforeAll(async () => { beforeAll(async () => {
@@ -15,11 +16,15 @@ describe('DiagramAPI', () => {
}); });
it('should throw error if diagram is not defined', () => { it('should throw error if diagram is not defined', () => {
expect(() => getDiagram('loki')).toThrow(); expect(() => getDiagram('loki')).toThrowErrorMatchingInlineSnapshot(
'"Diagram loki not found."'
);
}); });
it('should handle diagram registrations', () => { it('should handle diagram registrations', () => {
expect(() => getDiagram('loki')).toThrow(); expect(() => getDiagram('loki')).toThrowErrorMatchingInlineSnapshot(
'"Diagram loki not found."'
);
expect(() => detectType('loki diagram')).toThrowErrorMatchingInlineSnapshot( expect(() => detectType('loki diagram')).toThrowErrorMatchingInlineSnapshot(
'"No diagram type detected matching given configuration for text: loki diagram"' '"No diagram type detected matching given configuration for text: loki diagram"'
); );

2
packages/mermaid/src/diagrams/er/parser/erDiagram.jison
View File

@@ -35,6 +35,8 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
<block>[A-Za-z_][A-Za-z0-9\-_\[\]\(\)]* return 'ATTRIBUTE_WORD' <block>[A-Za-z_][A-Za-z0-9\-_\[\]\(\)]* return 'ATTRIBUTE_WORD'
<block>\"[^"]*\" return 'COMMENT'; <block>\"[^"]*\" return 'COMMENT';
<block>[\n]+ /* nothing */ <block>[\n]+ /* nothing */
<block>\%%(?!\{)[^\n]* /* skip comments in attribute block */
<block>[^\}]\%\%[^\n]* /* skip comments in attribute block */
<block>"}" { this.popState(); return 'BLOCK_STOP'; } <block>"}" { this.popState(); return 'BLOCK_STOP'; }
<block>. return yytext[0]; <block>. return yytext[0];

27
packages/mermaid/src/mermaid.spec.ts
View File

@@ -2,6 +2,7 @@ import mermaid from './mermaid';
import { mermaidAPI } from './mermaidAPI'; import { mermaidAPI } from './mermaidAPI';
import './diagram-api/diagram-orchestration'; import './diagram-api/diagram-orchestration';
import { addDiagrams } from './diagram-api/diagram-orchestration'; import { addDiagrams } from './diagram-api/diagram-orchestration';
import { beforeAll, describe, it, expect, vi } from 'vitest';
beforeAll(async () => { beforeAll(async () => {
addDiagrams(); addDiagrams();
@@ -151,7 +152,11 @@ describe('when using mermaid and ', () => {
describe('checking validity of input ', () => { describe('checking validity of input ', () => {
it('should throw for an invalid definition', async () => { it('should throw for an invalid definition', async () => {
await expect(mermaid.parse('this is not a mermaid diagram definition')).rejects.toThrow(); await expect(
mermaid.parse('this is not a mermaid diagram definition')
).rejects.toThrowErrorMatchingInlineSnapshot(
'"No diagram type detected matching given configuration for text: this is not a mermaid diagram definition"'
);
}); });
it('should not throw for a valid flow definition', async () => { it('should not throw for a valid flow definition', async () => {
@@ -160,7 +165,12 @@ describe('when using mermaid and ', () => {
).resolves.not.toThrow(); ).resolves.not.toThrow();
}); });
it('should throw for an invalid flow definition', async () => { it('should throw for an invalid flow definition', async () => {
await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects.toThrow(); await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects
.toThrowErrorMatchingInlineSnapshot(`
"Lexical error on line 1. Unrecognized text.
graph TQ;A--x|text includ
-----^"
`);
}); });
it('should not throw for a valid sequenceDiagram definition (mmds1)', async () => { it('should not throw for a valid sequenceDiagram definition (mmds1)', async () => {
@@ -188,7 +198,12 @@ describe('when using mermaid and ', () => {
'else isSick\n' + 'else isSick\n' +
'Bob-->Alice: Feel sick...\n' + 'Bob-->Alice: Feel sick...\n' +
'end'; 'end';
await expect(mermaid.parse(text)).rejects.toThrow(); await expect(mermaid.parse(text)).rejects.toThrowErrorMatchingInlineSnapshot(`
"Parse error on line 2:
...equenceDiagramAlice:->Bob: Hello Bob, h...
----------------------^
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT'"
`);
}); });
it('should return false for invalid definition WITH a parseError() callback defined', async () => { it('should return false for invalid definition WITH a parseError() callback defined', async () => {
@@ -196,7 +211,11 @@ describe('when using mermaid and ', () => {
mermaid.setParseErrorHandler(() => { mermaid.setParseErrorHandler(() => {
parseErrorWasCalled = true; parseErrorWasCalled = true;
}); });
await expect(mermaid.parse('this is not a mermaid diagram definition')).rejects.toThrow(); await expect(
mermaid.parse('this is not a mermaid diagram definition')
).rejects.toThrowErrorMatchingInlineSnapshot(
'"No diagram type detected matching given configuration for text: this is not a mermaid diagram definition"'
);
expect(parseErrorWasCalled).toEqual(true); expect(parseErrorWasCalled).toEqual(true);
}); });
}); });

27
packages/mermaid/src/mermaid.ts
View File

@@ -164,7 +164,7 @@ const runThrowsErrors = async function (
log.debug('Detected early reinit: ', init); log.debug('Detected early reinit: ', init);
} }
try { try {
const { svg, bindFunctions } = await mermaidAPI.render(id, txt, element); const { svg, bindFunctions } = await render(id, txt, element);
element.innerHTML = svg; element.innerHTML = svg;
if (postRenderCallback) { if (postRenderCallback) {
await postRenderCallback(id); await postRenderCallback(id);
@@ -315,7 +315,7 @@ const executeQueue = async () => {
*/ */
const parse = async (text: string, parseOptions?: ParseOptions): Promise<boolean | void> => { const parse = async (text: string, parseOptions?: ParseOptions): Promise<boolean | void> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// This promise will resolve when the mermaidAPI.render call is done. // This promise will resolve when the render call is done.
// It will be queued first and will be executed when it is first in line // It will be queued first and will be executed when it is first in line
const performCall = () => const performCall = () =>
new Promise((res, rej) => { new Promise((res, rej) => {
@@ -339,6 +339,29 @@ const parse = async (text: string, parseOptions?: ParseOptions): Promise<boolean
}); });
}; };
/**
* Function that renders an svg with a graph from a chart definition. Usage example below.
*
* ```javascript
* element = document.querySelector('#graphDiv');
* const graphDefinition = 'graph TB\na-->b';
* const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);
* element.innerHTML = svg;
* bindFunctions?.(element);
* ```
*
* @remarks
* Multiple calls to this function will be enqueued to run serially.
*
* @param id - The id for the SVG element (the element to be rendered)
* @param text - The text for the graph definition
* @param container - HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
* If no svgContainingElement is provided then the SVG element will be appended to the body.
* Selector to element in which a div with the graph temporarily will be
* inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
* element will be removed when rendering is completed.
* @returns Returns the SVG Definition and BindFunctions.
*/
const render = (id: string, text: string, container?: Element): Promise<RenderResult> => { const render = (id: string, text: string, container?: Element): Promise<RenderResult> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// This promise will resolve when the mermaidAPI.render call is done. // This promise will resolve when the mermaidAPI.render call is done.

25
packages/mermaid/src/mermaidAPI.ts
View File

@@ -370,30 +370,9 @@ export const removeExistingElements = (
}; };
/** /**
* Function that renders an svg with a graph from a chart definition. Usage example below. * @deprecated - use the `mermaid.render` function instead of `mermaid.mermaidAPI.render`
* *
* ```javascript * Deprecated for external use.
* mermaidAPI.initialize({
* startOnLoad: true,
* });
* $(function () {
* const graphDefinition = 'graph TB\na-->b';
* const cb = function (svgGraph) {
* console.log(svgGraph);
* };
* mermaidAPI.render('id1', graphDefinition, cb);
* });
* ```
*
* @param id - The id for the SVG element (the element to be rendered)
* @param text - The text for the graph definition
* @param cb - Callback which is called after rendering is finished with the svg code as in param.
* @param svgContainingElement - HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
* If no svgContainingElement is provided then the SVG element will be appended to the body.
* Selector to element in which a div with the graph temporarily will be
* inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
* element will be removed when rendering is completed.
* @returns Returns the rendered element as a string containing the SVG definition.
*/ */
const render = async function ( const render = async function (