mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Fix for amp and adjusted tests
This commit is contained in:
Knut Sveidqvist
parent
355e218837
commit
4162a25425
@ -126,7 +126,7 @@ aliasSets.forEach((aliasSet) => {
|
||||
it(`All ${aliasSet.join(',')} should render same shape`, () => {
|
||||
let flowchartCode = `flowchart \n`;
|
||||
aliasSet.forEach((alias, index) => {
|
||||
flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }@\n`;
|
||||
flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode);
|
||||
});
|
||||
|
||||
@ -16,7 +16,7 @@ looks.forEach((look) => {
|
||||
if (form) {
|
||||
flowchartCode += `, form: '${form}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
|
||||
@ -29,7 +29,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
|
||||
@ -42,7 +42,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
|
||||
@ -55,7 +55,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
|
||||
@ -68,7 +68,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, {
|
||||
look,
|
||||
htmlLabels: false,
|
||||
@ -85,7 +85,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
flowchartCode += ` style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -100,7 +100,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
flowchartCode += ` nAA:::customClazz\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -115,7 +115,7 @@ describe('Test iconShape with different h', () => {
|
||||
let flowchartCode = `flowchart TB\n`;
|
||||
const icon = 'fa:bell';
|
||||
const iconHeight = 64;
|
||||
flowchartCode += ` nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }@\n`;
|
||||
flowchartCode += ` nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }\n`;
|
||||
imgSnapshotTest(flowchartCode);
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,7 +10,7 @@ looks.forEach((look) => {
|
||||
describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
|
||||
it(`without label`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }@\n`;
|
||||
flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
|
||||
@ -22,7 +22,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
|
||||
@ -34,7 +34,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
|
||||
@ -46,7 +46,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, { look, htmlLabels: true });
|
||||
});
|
||||
|
||||
@ -58,7 +58,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
imgSnapshotTest(flowchartCode, {
|
||||
look,
|
||||
htmlLabels: false,
|
||||
@ -74,7 +74,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
flowchartCode += ` style A fill:#f9f,stroke:#333,stroke-width:4px \n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -88,7 +88,7 @@ looks.forEach((look) => {
|
||||
if (pos) {
|
||||
flowchartCode += `, pos: '${pos}'`;
|
||||
}
|
||||
flowchartCode += ` }@\n`;
|
||||
flowchartCode += ` }\n`;
|
||||
flowchartCode += ` A:::customClazz\n`;
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
|
||||
@ -59,7 +59,7 @@ looks.forEach((look) => {
|
||||
it(`without label`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
newShapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape} }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -67,7 +67,7 @@ looks.forEach((look) => {
|
||||
it(`with label`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
newShapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -75,7 +75,7 @@ looks.forEach((look) => {
|
||||
it(`connect all shapes with each other`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
newShapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
|
||||
});
|
||||
for (let i = 0; i < newShapesSet.length; i++) {
|
||||
for (let j = i + 1; j < newShapesSet.length; j++) {
|
||||
@ -88,7 +88,7 @@ looks.forEach((look) => {
|
||||
it(`with very long label`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
newShapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -96,7 +96,7 @@ looks.forEach((look) => {
|
||||
it(`with markdown htmlLabels:true`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
newShapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -104,7 +104,7 @@ looks.forEach((look) => {
|
||||
it(`with markdown htmlLabels:false`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
newShapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, {
|
||||
look,
|
||||
@ -116,7 +116,7 @@ looks.forEach((look) => {
|
||||
it(`with styles`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
newShapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
|
||||
flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
@ -126,7 +126,7 @@ looks.forEach((look) => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
|
||||
newShapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
|
||||
flowchartCode += ` n${index}${index}:::customClazz\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
|
||||
@ -23,7 +23,7 @@ looks.forEach((look) => {
|
||||
it(`without label`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
shapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -31,7 +31,7 @@ looks.forEach((look) => {
|
||||
it(`with label`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
shapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -39,7 +39,7 @@ looks.forEach((look) => {
|
||||
it(`connect all shapes with each other`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
shapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
|
||||
});
|
||||
for (let i = 0; i < shapesSet.length; i++) {
|
||||
for (let j = i + 1; j < shapesSet.length; j++) {
|
||||
@ -52,7 +52,7 @@ looks.forEach((look) => {
|
||||
it(`with very long label`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
shapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -60,7 +60,7 @@ looks.forEach((look) => {
|
||||
it(`with markdown htmlLabels:true`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
shapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
});
|
||||
@ -68,7 +68,7 @@ looks.forEach((look) => {
|
||||
it(`with markdown htmlLabels:false`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
shapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, {
|
||||
look,
|
||||
@ -80,7 +80,7 @@ looks.forEach((look) => {
|
||||
it(`with styles`, () => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
shapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
|
||||
flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
@ -90,7 +90,7 @@ looks.forEach((look) => {
|
||||
let flowchartCode = `flowchart ${direction}\n`;
|
||||
flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
|
||||
shapesSet.forEach((newShape, index) => {
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
|
||||
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
|
||||
flowchartCode += ` n${index}${index}:::customClazz\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode, { look });
|
||||
|
||||
@ -252,40 +252,40 @@ config:
|
||||
---
|
||||
flowchart RL
|
||||
subgraph " "
|
||||
A5@{ shape: manual-file, label: "a label"}@
|
||||
B5@{ shape: manual-input, label: "a label" }@
|
||||
C5@{ shape: mul-doc, label: "a label" }@
|
||||
D5@{ shape: mul-proc, label: "a label" }@
|
||||
E5@{ shape: paper-tape, label: "a label" }@
|
||||
B3@{ shape: das, label: "a label" }@
|
||||
C3@{ shape: disk, label: "a label" }@
|
||||
D4@{ shape: lin-doc, label: "a label" }@
|
||||
E4@{ shape: loop-limit, label: "a label" }@
|
||||
A5@{ shape: manual-file, label: "a label"}
|
||||
B5@{ shape: manual-input, label: "a label" }
|
||||
C5@{ shape: mul-doc, label: "a label" }
|
||||
D5@{ shape: mul-proc, label: "a label" }
|
||||
E5@{ shape: paper-tape, label: "a label" }
|
||||
B3@{ shape: das, label: "a label" }
|
||||
C3@{ shape: disk, label: "a label" }
|
||||
D4@{ shape: lin-doc, label: "a label" }
|
||||
E4@{ shape: loop-limit, label: "a label" }
|
||||
end
|
||||
subgraph " "
|
||||
B6@{ shape: summary, label: "a label" }@
|
||||
C6@{ shape: tag-we-rect, label: "a label" }@
|
||||
D6@{ shape: tag-rect, label: "a label" }@
|
||||
A2@{ shape: fork}@
|
||||
B2@{ shape: hourglass }@
|
||||
C2@{ shape: comment, label: "I am a comment" }@
|
||||
D2@{ shape: bolt }@
|
||||
D3@{ shape: disp, label: "a label" }@
|
||||
C4@{ shape: junction, label: "a label" }@
|
||||
A4@{ shape: extract, label: "a label"}@
|
||||
B52[a fr]@{ shape: fr }@
|
||||
B6@{ shape: summary, label: "a label" }
|
||||
C6@{ shape: tag-we-rect, label: "a label" }
|
||||
D6@{ shape: tag-rect, label: "a label" }
|
||||
A2@{ shape: fork}
|
||||
B2@{ shape: hourglass }
|
||||
C2@{ shape: comment, label: "I am a comment" }
|
||||
D2@{ shape: bolt }
|
||||
D3@{ shape: disp, label: "a label" }
|
||||
C4@{ shape: junction, label: "a label" }
|
||||
A4@{ shape: extract, label: "a label"}
|
||||
B52[a fr]@{ shape: fr }
|
||||
end
|
||||
subgraph " "
|
||||
A1@{ shape: text, label: This is a textblock}@
|
||||
B1@{ shape: card, label: "a label" }@
|
||||
C1@{ shape: lined-proc, label: "a label" }@
|
||||
D1@{ shape: start, label: "a label" }@
|
||||
E1@{ shape: stop, label: "a label" }@
|
||||
E2@{ shape: doc, label: "a label" }@
|
||||
A6@{ shape: stored-data, label: "a label"}@
|
||||
A3@{ shape: delay, label: "a label" }@
|
||||
E3@{ shape: div-proc, label: "a label" }@
|
||||
B4[a label]@{ shape: win-pane }@
|
||||
A1@{ shape: text, label: This is a textblock}
|
||||
B1@{ shape: card, label: "a label" }
|
||||
C1@{ shape: lined-proc, label: "a label" }
|
||||
D1@{ shape: start, label: "a label" }
|
||||
E1@{ shape: stop, label: "a label" }
|
||||
E2@{ shape: doc, label: "a label" }
|
||||
A6@{ shape: stored-data, label: "a label"}
|
||||
A3@{ shape: delay, label: "a label" }
|
||||
E3@{ shape: div-proc, label: "a label" }
|
||||
B4[a label]@{ shape: win-pane }
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
@ -422,8 +422,10 @@ flowchart LR
|
||||
</pre>
|
||||
|
||||
<pre id="diagram4" class="mermaid">
|
||||
flowchart
|
||||
D@{ shape: circle, label: "circle" } & E
|
||||
flowchart TB
|
||||
A@{
|
||||
label: "aksljhf kasjdh"
|
||||
}
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
@ -63,8 +63,8 @@
|
||||
<body style="display: flex; gap: 2rem; flex-direction: row">
|
||||
<pre id="diagram4" class="mermaid">
|
||||
flowchart TD
|
||||
B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "t", h: 80 }@
|
||||
|
||||
B2@{ icon: "fa:bell", form: "square", pos: "t", h: 80 }
|
||||
|
||||
|
||||
W --> B2
|
||||
X --> B2
|
||||
@ -76,7 +76,7 @@
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart TB
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
|
||||
B2 --test--> C
|
||||
D --> B2 --> E
|
||||
style B2 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
@ -84,31 +84,31 @@
|
||||
>
|
||||
<pre id="diagram43" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }@
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
D --> B2 --> E
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }@
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram43" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }@
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram6" class="mermaid2">
|
||||
flowchart TB
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 }@ --> C
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram6" class="mermaid2">
|
||||
flowchart TB
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 }@ --> C
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
|
||||
D --> B2 --> E
|
||||
</pre
|
||||
>
|
||||
|
||||
@ -307,7 +307,7 @@ New Syntax for Shape Definition
|
||||
Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
|
||||
|
||||
```
|
||||
A@{ shape: rect }@
|
||||
A@{ shape: rect }
|
||||
```
|
||||
|
||||
This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
|
||||
@ -370,560 +370,560 @@ Here’s an example flowchart that utilizes some of the newly introduced shapes:
|
||||
|
||||
```mermaid-example
|
||||
flowchart RL
|
||||
A5@{ shape: manual-file, label: "File Handling"}@
|
||||
B5@{ shape: manual-input, label: "User Input"}@
|
||||
C5@{ shape: mul-doc, label: "Multiple Documents"}@
|
||||
D5@{ shape: mul-proc, label: "Process Automation"}@
|
||||
E5@{ shape: paper-tape, label: "Paper Records"}@
|
||||
A5@{ shape: manual-file, label: "File Handling"}
|
||||
B5@{ shape: manual-input, label: "User Input"}
|
||||
C5@{ shape: mul-doc, label: "Multiple Documents"}
|
||||
D5@{ shape: mul-proc, label: "Process Automation"}
|
||||
E5@{ shape: paper-tape, label: "Paper Records"}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart RL
|
||||
A5@{ shape: manual-file, label: "File Handling"}@
|
||||
B5@{ shape: manual-input, label: "User Input"}@
|
||||
C5@{ shape: mul-doc, label: "Multiple Documents"}@
|
||||
D5@{ shape: mul-proc, label: "Process Automation"}@
|
||||
E5@{ shape: paper-tape, label: "Paper Records"}@
|
||||
A5@{ shape: manual-file, label: "File Handling"}
|
||||
B5@{ shape: manual-input, label: "User Input"}
|
||||
C5@{ shape: mul-doc, label: "Multiple Documents"}
|
||||
D5@{ shape: mul-proc, label: "Process Automation"}
|
||||
E5@{ shape: paper-tape, label: "Paper Records"}
|
||||
```
|
||||
|
||||
### Process
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: rect, label: "This is a process" }@
|
||||
A@{ shape: rect, label: "This is a process" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: rect, label: "This is a process" }@
|
||||
A@{ shape: rect, label: "This is a process" }
|
||||
```
|
||||
|
||||
### Event
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: rounded, label: "This is an event" }@
|
||||
A@{ shape: rounded, label: "This is an event" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: rounded, label: "This is an event" }@
|
||||
A@{ shape: rounded, label: "This is an event" }
|
||||
```
|
||||
|
||||
### Terminal Point (Stadium)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: stadium, label: "Terminal point" }@
|
||||
A@{ shape: stadium, label: "Terminal point" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: stadium, label: "Terminal point" }@
|
||||
A@{ shape: stadium, label: "Terminal point" }
|
||||
```
|
||||
|
||||
### Subprocess
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: fr, label: "This is a subprocess" }@
|
||||
A@{ shape: fr, label: "This is a subprocess" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: fr, label: "This is a subprocess" }@
|
||||
A@{ shape: fr, label: "This is a subprocess" }
|
||||
```
|
||||
|
||||
### Database (Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: cyl, label: "Database" }@
|
||||
A@{ shape: cyl, label: "Database" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: cyl, label: "Database" }@
|
||||
A@{ shape: cyl, label: "Database" }
|
||||
```
|
||||
|
||||
### Start (Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: circle, label: "Start" }@
|
||||
A@{ shape: circle, label: "Start" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: circle, label: "Start" }@
|
||||
A@{ shape: circle, label: "Start" }
|
||||
```
|
||||
|
||||
### Odd
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: odd, label: "Odd shape" }@
|
||||
A@{ shape: odd, label: "Odd shape" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: odd, label: "Odd shape" }@
|
||||
A@{ shape: odd, label: "Odd shape" }
|
||||
```
|
||||
|
||||
### Decision (Diamond)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: diamond, label: "Decision" }@
|
||||
A@{ shape: diamond, label: "Decision" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: diamond, label: "Decision" }@
|
||||
A@{ shape: diamond, label: "Decision" }
|
||||
```
|
||||
|
||||
### Prepare Conditional (Hexagon)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: hex, label: "Prepare conditional" }@
|
||||
A@{ shape: hex, label: "Prepare conditional" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: hex, label: "Prepare conditional" }@
|
||||
A@{ shape: hex, label: "Prepare conditional" }
|
||||
```
|
||||
|
||||
### Data Input/Output (Lean Right)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: l-r, label: "Input/Output" }@
|
||||
A@{ shape: l-r, label: "Input/Output" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: l-r, label: "Input/Output" }@
|
||||
A@{ shape: l-r, label: "Input/Output" }
|
||||
```
|
||||
|
||||
### Data Input/Output (Lean Left)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: l-l, label: "Output/Input" }@
|
||||
A@{ shape: l-l, label: "Output/Input" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: l-l, label: "Output/Input" }@
|
||||
A@{ shape: l-l, label: "Output/Input" }
|
||||
```
|
||||
|
||||
### Priority Action (Trapezoid Base Bottom)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: trap-b, label: "Priority action" }@
|
||||
A@{ shape: trap-b, label: "Priority action" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: trap-b, label: "Priority action" }@
|
||||
A@{ shape: trap-b, label: "Priority action" }
|
||||
```
|
||||
|
||||
### Manual Operation (Trapezoid Base Top)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: trap-t, label: "Manual operation" }@
|
||||
A@{ shape: trap-t, label: "Manual operation" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: trap-t, label: "Manual operation" }@
|
||||
A@{ shape: trap-t, label: "Manual operation" }
|
||||
```
|
||||
|
||||
### Stop (Double Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: dc, label: "Stop" }@
|
||||
A@{ shape: dc, label: "Stop" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: dc, label: "Stop" }@
|
||||
A@{ shape: dc, label: "Stop" }
|
||||
```
|
||||
|
||||
### Text Block
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: text, label: "This is a text block" }@
|
||||
A@{ shape: text, label: "This is a text block" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: text, label: "This is a text block" }@
|
||||
A@{ shape: text, label: "This is a text block" }
|
||||
```
|
||||
|
||||
### Card (Notched Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: notched-rect, label: "Card" }@
|
||||
A@{ shape: notched-rect, label: "Card" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: notched-rect, label: "Card" }@
|
||||
A@{ shape: notched-rect, label: "Card" }
|
||||
```
|
||||
|
||||
### Lined/Shaded Process
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lined-rect, label: "Lined process" }@
|
||||
A@{ shape: lined-rect, label: "Lined process" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: lined-rect, label: "Lined process" }@
|
||||
A@{ shape: lined-rect, label: "Lined process" }
|
||||
```
|
||||
|
||||
### Start (Small Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: sm-circ, label: "Small start" }@
|
||||
A@{ shape: sm-circ, label: "Small start" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: sm-circ, label: "Small start" }@
|
||||
A@{ shape: sm-circ, label: "Small start" }
|
||||
```
|
||||
|
||||
### Stop (Framed Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: framed-circle, label: "Stop" }@
|
||||
A@{ shape: framed-circle, label: "Stop" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: framed-circle, label: "Stop" }@
|
||||
A@{ shape: framed-circle, label: "Stop" }
|
||||
```
|
||||
|
||||
### Fork/Join (Long Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: fork, label: "Fork or Join" }@
|
||||
A@{ shape: fork, label: "Fork or Join" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: fork, label: "Fork or Join" }@
|
||||
A@{ shape: fork, label: "Fork or Join" }
|
||||
```
|
||||
|
||||
### Collate (Hourglass)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: hourglass, label: "Collate" }@
|
||||
A@{ shape: hourglass, label: "Collate" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: hourglass, label: "Collate" }@
|
||||
A@{ shape: hourglass, label: "Collate" }
|
||||
```
|
||||
|
||||
### Comment (Curly Brace)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: comment, label: "Comment" }@
|
||||
A@{ shape: comment, label: "Comment" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: comment, label: "Comment" }@
|
||||
A@{ shape: comment, label: "Comment" }
|
||||
```
|
||||
|
||||
### Comment Right (Curly Brace Right)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: brace-r, label: "Comment" }@
|
||||
A@{ shape: brace-r, label: "Comment" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: brace-r, label: "Comment" }@
|
||||
A@{ shape: brace-r, label: "Comment" }
|
||||
```
|
||||
|
||||
### Comment with braces on both sides
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: braces, label: "Comment" }@
|
||||
A@{ shape: braces, label: "Comment" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: braces, label: "Comment" }@
|
||||
A@{ shape: braces, label: "Comment" }
|
||||
```
|
||||
|
||||
### Com Link (Lightning Bolt)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: bolt, label: "Communication link" }@
|
||||
A@{ shape: bolt, label: "Communication link" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: bolt, label: "Communication link" }@
|
||||
A@{ shape: bolt, label: "Communication link" }
|
||||
```
|
||||
|
||||
### Document (Wave-Edged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: we-rect, label: "Document" }@
|
||||
A@{ shape: we-rect, label: "Document" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: we-rect, label: "Document" }@
|
||||
A@{ shape: we-rect, label: "Document" }
|
||||
```
|
||||
|
||||
### Delay (Half-Rounded Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: delay, label: "Delay" }@
|
||||
A@{ shape: delay, label: "Delay" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: delay, label: "Delay" }@
|
||||
A@{ shape: delay, label: "Delay" }
|
||||
```
|
||||
|
||||
### Direct Access Storage (Tilted Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: t-cyl, label: "Direct access storage" }@
|
||||
A@{ shape: t-cyl, label: "Direct access storage" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: t-cyl, label: "Direct access storage" }@
|
||||
A@{ shape: t-cyl, label: "Direct access storage" }
|
||||
```
|
||||
|
||||
### Disk Storage (Lined Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: l-cyl, label: "Disk storage" }@
|
||||
A@{ shape: l-cyl, label: "Disk storage" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: l-cyl, label: "Disk storage" }@
|
||||
A@{ shape: l-cyl, label: "Disk storage" }
|
||||
```
|
||||
|
||||
### Display (Curved Trapezoid)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: cur-trap, label: "Display" }@
|
||||
A@{ shape: cur-trap, label: "Display" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: cur-trap, label: "Display" }@
|
||||
A@{ shape: cur-trap, label: "Display" }
|
||||
```
|
||||
|
||||
### Divided Process (Divided Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: div-rect, label: "Divided process" }@
|
||||
A@{ shape: div-rect, label: "Divided process" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: div-rect, label: "Divided process" }@
|
||||
A@{ shape: div-rect, label: "Divided process" }
|
||||
```
|
||||
|
||||
### Extract (Small Triangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: sm-tri, label: "Extract" }@
|
||||
A@{ shape: sm-tri, label: "Extract" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: sm-tri, label: "Extract" }@
|
||||
A@{ shape: sm-tri, label: "Extract" }
|
||||
```
|
||||
|
||||
### Internal Storage (Window Pane)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: win-pane, label: "Internal storage" }@
|
||||
A@{ shape: win-pane, label: "Internal storage" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: win-pane, label: "Internal storage" }@
|
||||
A@{ shape: win-pane, label: "Internal storage" }
|
||||
```
|
||||
|
||||
### Junction (Filled Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: fc, label: "Junction" }@
|
||||
A@{ shape: fc, label: "Junction" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: fc, label: "Junction" }@
|
||||
A@{ shape: fc, label: "Junction" }
|
||||
```
|
||||
|
||||
### Lined Document (Lined Wave-Edged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lin-we-rect, label: "Lined document" }@
|
||||
A@{ shape: lin-we-rect, label: "Lined document" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: lin-we-rect, label: "Lined document" }@
|
||||
A@{ shape: lin-we-rect, label: "Lined document" }
|
||||
```
|
||||
|
||||
### Loop Limit (Trapezoidal Pentagon)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: not-pent, label: "Loop limit" }@
|
||||
A@{ shape: not-pent, label: "Loop limit" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: not-pent, label: "Loop limit" }@
|
||||
A@{ shape: not-pent, label: "Loop limit" }
|
||||
```
|
||||
|
||||
### Manual File (Flipped Triangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: flip-tria, label: "Manual file" }@
|
||||
A@{ shape: flip-tria, label: "Manual file" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: flip-tria, label: "Manual file" }@
|
||||
A@{ shape: flip-tria, label: "Manual file" }
|
||||
```
|
||||
|
||||
### Manual Input (Sloped Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: sloped-rect, label: "Manual input" }@
|
||||
A@{ shape: sloped-rect, label: "Manual input" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: sloped-rect, label: "Manual input" }@
|
||||
A@{ shape: sloped-rect, label: "Manual input" }
|
||||
```
|
||||
|
||||
### Multi-Document (Multi-Wave-Edged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: mul-we-rect, label: "Multiple documents" }@
|
||||
A@{ shape: mul-we-rect, label: "Multiple documents" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: mul-we-rect, label: "Multiple documents" }@
|
||||
A@{ shape: mul-we-rect, label: "Multiple documents" }
|
||||
```
|
||||
|
||||
### Multi-Process (Multi-Rect)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: mul-rect, label: "Multiple processes" }@
|
||||
A@{ shape: mul-rect, label: "Multiple processes" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: mul-rect, label: "Multiple processes" }@
|
||||
A@{ shape: mul-rect, label: "Multiple processes" }
|
||||
```
|
||||
|
||||
### Paper Tape (Flag)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: flag, label: "Paper tape" }@
|
||||
A@{ shape: flag, label: "Paper tape" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: flag, label: "Paper tape" }@
|
||||
A@{ shape: flag, label: "Paper tape" }
|
||||
```
|
||||
|
||||
### Stored Data (Bow Tie Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: bt-rect, label: "Stored data" }@
|
||||
A@{ shape: bt-rect, label: "Stored data" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: bt-rect, label: "Stored data" }@
|
||||
A@{ shape: bt-rect, label: "Stored data" }
|
||||
```
|
||||
|
||||
### Summary (Crossed Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: cross-circle, label: "Summary" }@
|
||||
A@{ shape: cross-circle, label: "Summary" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: cross-circle, label: "Summary" }@
|
||||
A@{ shape: cross-circle, label: "Summary" }
|
||||
```
|
||||
|
||||
### Tagged Document (Tagged Wave-Edged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: tag-we-rect, label: "Tagged document" }@
|
||||
A@{ shape: tag-we-rect, label: "Tagged document" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: tag-we-rect, label: "Tagged document" }@
|
||||
A@{ shape: tag-we-rect, label: "Tagged document" }
|
||||
```
|
||||
|
||||
### Tagged Process (Tagged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: tag-rect, label: "Tagged process" }@
|
||||
A@{ shape: tag-rect, label: "Tagged process" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: tag-rect, label: "Tagged process" }@
|
||||
A@{ shape: tag-rect, label: "Tagged process" }
|
||||
```
|
||||
|
||||
## Links between nodes
|
||||
|
||||
@ -123,20 +123,15 @@ export const addVertex = function (
|
||||
if (shapeData !== undefined) {
|
||||
let yamlData;
|
||||
// detect if shapeData contains a newline character
|
||||
console.log('shapeData', shapeData);
|
||||
// console.log('shapeData', shapeData);
|
||||
if (!shapeData.includes('\n')) {
|
||||
// console.log('yamlData shapeData has no new lines', shapeData);
|
||||
yamlData = '{\n' + shapeData + '\n}';
|
||||
} else {
|
||||
// console.log('yamlData shapeData has new lines', shapeData);
|
||||
yamlData = shapeData + '\n';
|
||||
// Find the position of the last } and replace it with a newline
|
||||
const lastPos = yamlData.lastIndexOf('}');
|
||||
if (lastPos !== -1) {
|
||||
yamlData = yamlData.substring(0, lastPos) + '\n';
|
||||
}
|
||||
}
|
||||
console.log('yamlData', yamlData);
|
||||
// console.log('yamlData', yamlData);
|
||||
const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
|
||||
// console.log('yamlData doc', doc);
|
||||
if (doc?.shape) {
|
||||
|
||||
@ -92,6 +92,16 @@ describe('when parsing directions', function () {
|
||||
expect(data4Layout.nodes[0].label).toEqual('D');
|
||||
expect(data4Layout.nodes[1].label).toEqual('E');
|
||||
});
|
||||
it('should handle basic shape data statements with amp and edges 5, trailing space', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
D@{ shape: rounded } & E@{ shape: rounded } --> F{ shape: rounded } & G{ shape: rounded } `);
|
||||
|
||||
const data4Layout = flow.parser.yy.getData();
|
||||
expect(data4Layout.nodes.length).toBe(4);
|
||||
expect(data4Layout.nodes[0].shape).toEqual('rounded');
|
||||
expect(data4Layout.nodes[0].label).toEqual('D');
|
||||
expect(data4Layout.nodes[1].label).toEqual('E');
|
||||
});
|
||||
it('should no matter of there are no leading spaces', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
D@{shape: rounded}`);
|
||||
@ -138,7 +148,7 @@ describe('when parsing directions', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
A --> D@{
|
||||
shape: circle
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
|
||||
`);
|
||||
@ -157,11 +167,11 @@ describe('when parsing directions', function () {
|
||||
A[hello]
|
||||
B@{
|
||||
shape: circle
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
C[Hello]@{
|
||||
shape: circle
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
`);
|
||||
|
||||
@ -174,11 +184,11 @@ describe('when parsing directions', function () {
|
||||
expect(data4Layout.nodes[2].shape).toEqual('circle');
|
||||
expect(data4Layout.nodes[2].label).toEqual('Hello');
|
||||
});
|
||||
it.only('should use handle bracket end (}) character inside the shape data', function () {
|
||||
it('should use handle bracket end (}) character inside the shape data', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
A@{
|
||||
label: "This is }"
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
`);
|
||||
|
||||
@ -203,7 +213,7 @@ describe('when parsing directions', function () {
|
||||
label: |
|
||||
This is a
|
||||
multiline string
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
`);
|
||||
|
||||
@ -217,7 +227,7 @@ describe('when parsing directions', function () {
|
||||
A@{
|
||||
label: "This is a
|
||||
multiline string"
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
`);
|
||||
|
||||
@ -230,7 +240,7 @@ describe('when parsing directions', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
A@{
|
||||
label: "This is a string with }"
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
`);
|
||||
|
||||
@ -243,7 +253,7 @@ describe('when parsing directions', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
A@{
|
||||
label: "This is a string with @"
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
`);
|
||||
|
||||
@ -256,7 +266,7 @@ describe('when parsing directions', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
A@{
|
||||
label: "This is a string with}"
|
||||
icon: "clock"
|
||||
other: "clock"
|
||||
}
|
||||
`);
|
||||
|
||||
|
||||
@ -38,20 +38,28 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multilin
|
||||
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
|
||||
|
||||
|
||||
\@\{ { this.pushState("shapeData"); yytext=""; return 'SHAPE_DATA' }
|
||||
\@\{ {
|
||||
// console.log('=> shapeData', yytext);
|
||||
this.pushState("shapeData"); yytext=""; return 'SHAPE_DATA' }
|
||||
<shapeData>["] {
|
||||
// console.log('=> shapeDataStr', yytext);
|
||||
this.pushState("shapeDataStr");
|
||||
return 'SHAPE_DATA';
|
||||
}
|
||||
<shapeDataStr>["] { this.popState(); return 'SHAPE_DATA'}
|
||||
<shapeDataStr>["] {
|
||||
// console.log('shapeData <==', yytext);
|
||||
this.popState(); return 'SHAPE_DATA'}
|
||||
<shapeDataStr>[^\"]+ {
|
||||
// console.log('shapeData', yytext);
|
||||
const re = /\n\s*/g;
|
||||
yytext = yytext.replace(re,"<br/>");
|
||||
return 'SHAPE_DATA'}
|
||||
<shapeData>[^}]+ {
|
||||
<shapeData>[^}^"]+ {
|
||||
// console.log('shapeData', yytext);
|
||||
return 'SHAPE_DATA';
|
||||
}
|
||||
<shapeData>"}" {
|
||||
// console.log('<== root', yytext)
|
||||
this.popState();
|
||||
}
|
||||
|
||||
@ -405,9 +413,9 @@ vertexStatement: vertexStatement link node shapeData
|
||||
node: styledVertex
|
||||
{ /*console.warn('nod', $styledVertex);*/ $$ = [$styledVertex];}
|
||||
| node shapeData spaceList AMP spaceList styledVertex
|
||||
{ yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); console.warn('pip2', $node[0], $styledVertex, $$); }
|
||||
{ yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); /*console.warn('pip2', $node[0], $styledVertex, $$);*/ }
|
||||
| node spaceList AMP spaceList styledVertex
|
||||
{ $$ = $node.concat($styledVertex); console.warn('pip', $node[0], $styledVertex, $$); }
|
||||
{ $$ = $node.concat($styledVertex); /*console.warn('pip', $node[0], $styledVertex, $$);*/ }
|
||||
;
|
||||
|
||||
styledVertex: vertex
|
||||
|
||||
@ -203,7 +203,7 @@ New Syntax for Shape Definition
|
||||
Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
|
||||
|
||||
```
|
||||
A@{ shape: rect }@
|
||||
A@{ shape: rect }
|
||||
```
|
||||
|
||||
This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
|
||||
@ -266,326 +266,326 @@ Here’s an example flowchart that utilizes some of the newly introduced shapes:
|
||||
|
||||
```mermaid-example
|
||||
flowchart RL
|
||||
A5@{ shape: manual-file, label: "File Handling"}@
|
||||
B5@{ shape: manual-input, label: "User Input"}@
|
||||
C5@{ shape: mul-doc, label: "Multiple Documents"}@
|
||||
D5@{ shape: mul-proc, label: "Process Automation"}@
|
||||
E5@{ shape: paper-tape, label: "Paper Records"}@
|
||||
A5@{ shape: manual-file, label: "File Handling"}
|
||||
B5@{ shape: manual-input, label: "User Input"}
|
||||
C5@{ shape: mul-doc, label: "Multiple Documents"}
|
||||
D5@{ shape: mul-proc, label: "Process Automation"}
|
||||
E5@{ shape: paper-tape, label: "Paper Records"}
|
||||
```
|
||||
|
||||
### Process
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: rect, label: "This is a process" }@
|
||||
A@{ shape: rect, label: "This is a process" }
|
||||
```
|
||||
|
||||
### Event
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: rounded, label: "This is an event" }@
|
||||
A@{ shape: rounded, label: "This is an event" }
|
||||
```
|
||||
|
||||
### Terminal Point (Stadium)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: stadium, label: "Terminal point" }@
|
||||
A@{ shape: stadium, label: "Terminal point" }
|
||||
```
|
||||
|
||||
### Subprocess
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: fr, label: "This is a subprocess" }@
|
||||
A@{ shape: fr, label: "This is a subprocess" }
|
||||
```
|
||||
|
||||
### Database (Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: cyl, label: "Database" }@
|
||||
A@{ shape: cyl, label: "Database" }
|
||||
```
|
||||
|
||||
### Start (Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: circle, label: "Start" }@
|
||||
A@{ shape: circle, label: "Start" }
|
||||
```
|
||||
|
||||
### Odd
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: odd, label: "Odd shape" }@
|
||||
A@{ shape: odd, label: "Odd shape" }
|
||||
```
|
||||
|
||||
### Decision (Diamond)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: diamond, label: "Decision" }@
|
||||
A@{ shape: diamond, label: "Decision" }
|
||||
```
|
||||
|
||||
### Prepare Conditional (Hexagon)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: hex, label: "Prepare conditional" }@
|
||||
A@{ shape: hex, label: "Prepare conditional" }
|
||||
```
|
||||
|
||||
### Data Input/Output (Lean Right)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: l-r, label: "Input/Output" }@
|
||||
A@{ shape: l-r, label: "Input/Output" }
|
||||
```
|
||||
|
||||
### Data Input/Output (Lean Left)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: l-l, label: "Output/Input" }@
|
||||
A@{ shape: l-l, label: "Output/Input" }
|
||||
```
|
||||
|
||||
### Priority Action (Trapezoid Base Bottom)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: trap-b, label: "Priority action" }@
|
||||
A@{ shape: trap-b, label: "Priority action" }
|
||||
```
|
||||
|
||||
### Manual Operation (Trapezoid Base Top)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: trap-t, label: "Manual operation" }@
|
||||
A@{ shape: trap-t, label: "Manual operation" }
|
||||
```
|
||||
|
||||
### Stop (Double Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: dc, label: "Stop" }@
|
||||
A@{ shape: dc, label: "Stop" }
|
||||
```
|
||||
|
||||
### Text Block
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: text, label: "This is a text block" }@
|
||||
A@{ shape: text, label: "This is a text block" }
|
||||
```
|
||||
|
||||
### Card (Notched Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: notched-rect, label: "Card" }@
|
||||
A@{ shape: notched-rect, label: "Card" }
|
||||
```
|
||||
|
||||
### Lined/Shaded Process
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lined-rect, label: "Lined process" }@
|
||||
A@{ shape: lined-rect, label: "Lined process" }
|
||||
```
|
||||
|
||||
### Start (Small Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: sm-circ, label: "Small start" }@
|
||||
A@{ shape: sm-circ, label: "Small start" }
|
||||
```
|
||||
|
||||
### Stop (Framed Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: framed-circle, label: "Stop" }@
|
||||
A@{ shape: framed-circle, label: "Stop" }
|
||||
```
|
||||
|
||||
### Fork/Join (Long Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: fork, label: "Fork or Join" }@
|
||||
A@{ shape: fork, label: "Fork or Join" }
|
||||
```
|
||||
|
||||
### Collate (Hourglass)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: hourglass, label: "Collate" }@
|
||||
A@{ shape: hourglass, label: "Collate" }
|
||||
```
|
||||
|
||||
### Comment (Curly Brace)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: comment, label: "Comment" }@
|
||||
A@{ shape: comment, label: "Comment" }
|
||||
```
|
||||
|
||||
### Comment Right (Curly Brace Right)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: brace-r, label: "Comment" }@
|
||||
A@{ shape: brace-r, label: "Comment" }
|
||||
```
|
||||
|
||||
### Comment with braces on both sides
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: braces, label: "Comment" }@
|
||||
A@{ shape: braces, label: "Comment" }
|
||||
```
|
||||
|
||||
### Com Link (Lightning Bolt)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: bolt, label: "Communication link" }@
|
||||
A@{ shape: bolt, label: "Communication link" }
|
||||
```
|
||||
|
||||
### Document (Wave-Edged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: we-rect, label: "Document" }@
|
||||
A@{ shape: we-rect, label: "Document" }
|
||||
```
|
||||
|
||||
### Delay (Half-Rounded Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: delay, label: "Delay" }@
|
||||
A@{ shape: delay, label: "Delay" }
|
||||
```
|
||||
|
||||
### Direct Access Storage (Tilted Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: t-cyl, label: "Direct access storage" }@
|
||||
A@{ shape: t-cyl, label: "Direct access storage" }
|
||||
```
|
||||
|
||||
### Disk Storage (Lined Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: l-cyl, label: "Disk storage" }@
|
||||
A@{ shape: l-cyl, label: "Disk storage" }
|
||||
```
|
||||
|
||||
### Display (Curved Trapezoid)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: cur-trap, label: "Display" }@
|
||||
A@{ shape: cur-trap, label: "Display" }
|
||||
```
|
||||
|
||||
### Divided Process (Divided Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: div-rect, label: "Divided process" }@
|
||||
A@{ shape: div-rect, label: "Divided process" }
|
||||
```
|
||||
|
||||
### Extract (Small Triangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: sm-tri, label: "Extract" }@
|
||||
A@{ shape: sm-tri, label: "Extract" }
|
||||
```
|
||||
|
||||
### Internal Storage (Window Pane)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: win-pane, label: "Internal storage" }@
|
||||
A@{ shape: win-pane, label: "Internal storage" }
|
||||
```
|
||||
|
||||
### Junction (Filled Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: fc, label: "Junction" }@
|
||||
A@{ shape: fc, label: "Junction" }
|
||||
```
|
||||
|
||||
### Lined Document (Lined Wave-Edged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lin-we-rect, label: "Lined document" }@
|
||||
A@{ shape: lin-we-rect, label: "Lined document" }
|
||||
```
|
||||
|
||||
### Loop Limit (Trapezoidal Pentagon)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: not-pent, label: "Loop limit" }@
|
||||
A@{ shape: not-pent, label: "Loop limit" }
|
||||
```
|
||||
|
||||
### Manual File (Flipped Triangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: flip-tria, label: "Manual file" }@
|
||||
A@{ shape: flip-tria, label: "Manual file" }
|
||||
```
|
||||
|
||||
### Manual Input (Sloped Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: sloped-rect, label: "Manual input" }@
|
||||
A@{ shape: sloped-rect, label: "Manual input" }
|
||||
```
|
||||
|
||||
### Multi-Document (Multi-Wave-Edged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: mul-we-rect, label: "Multiple documents" }@
|
||||
A@{ shape: mul-we-rect, label: "Multiple documents" }
|
||||
```
|
||||
|
||||
### Multi-Process (Multi-Rect)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: mul-rect, label: "Multiple processes" }@
|
||||
A@{ shape: mul-rect, label: "Multiple processes" }
|
||||
```
|
||||
|
||||
### Paper Tape (Flag)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: flag, label: "Paper tape" }@
|
||||
A@{ shape: flag, label: "Paper tape" }
|
||||
```
|
||||
|
||||
### Stored Data (Bow Tie Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: bt-rect, label: "Stored data" }@
|
||||
A@{ shape: bt-rect, label: "Stored data" }
|
||||
```
|
||||
|
||||
### Summary (Crossed Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: cross-circle, label: "Summary" }@
|
||||
A@{ shape: cross-circle, label: "Summary" }
|
||||
```
|
||||
|
||||
### Tagged Document (Tagged Wave-Edged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: tag-we-rect, label: "Tagged document" }@
|
||||
A@{ shape: tag-we-rect, label: "Tagged document" }
|
||||
```
|
||||
|
||||
### Tagged Process (Tagged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: tag-rect, label: "Tagged process" }@
|
||||
A@{ shape: tag-rect, label: "Tagged process" }
|
||||
```
|
||||
|
||||
## Links between nodes
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user