mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-03 22:29:38 +02:00
Merge branch 'neo-new-shapes' of github.com:Mermaid-Chart/alana-mermaid into neo-new-shapes
This commit is contained in:
Knut Sveidqvist
@@ -4,79 +4,87 @@ const aliasSet1 = ['process', 'rect', 'proc', 'rectangle'] as const;
|
||||
|
||||
const aliasSet2 = ['event', 'rounded'] as const;
|
||||
|
||||
const aliasSet3 = ['stadium', 'pill', 'term'] as const;
|
||||
const aliasSet3 = ['stadium', 'pill', 'terminal'] as const;
|
||||
|
||||
const aliasSet4 = ['fr', 'subproc', 'framed-rectangle', 'subroutine'] as const;
|
||||
const aliasSet4 = ['fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'] as const;
|
||||
|
||||
const aliasSet5 = ['db', 'cylinder', 'cyl'] as const;
|
||||
const aliasSet5 = ['db', 'database', 'cylinder', 'cyl'] as const;
|
||||
|
||||
const aliasSet6 = ['diam', 'decision', 'diamond'] as const;
|
||||
|
||||
const aliasSet7 = ['hex', 'hexagon', 'prepare'] as const;
|
||||
|
||||
const aliasSet8 = ['l-r', 'lean-right', 'in-out'] as const;
|
||||
const aliasSet8 = ['lean-r', 'lean-right', 'in-out'] as const;
|
||||
|
||||
const aliasSet9 = ['l-l', 'lean-left', 'out-in'] as const;
|
||||
const aliasSet9 = ['lean-l', 'lean-left', 'out-in'] as const;
|
||||
|
||||
const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority', 'trapezoid'] as const;
|
||||
const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority'] as const;
|
||||
|
||||
const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual', 'inv-trapezoid'] as const;
|
||||
const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual'] as const;
|
||||
|
||||
const aliasSet12 = ['dc', 'double-circle'] as const;
|
||||
const aliasSet12 = ['dbl-circ', 'double-circle'] as const;
|
||||
|
||||
const aliasSet13 = ['notched-rect', 'card', 'notch-rect'] as const;
|
||||
const aliasSet13 = ['notched-rectangle', 'card', 'notch-rect'] as const;
|
||||
|
||||
const aliasSet14 = ['lined-rect', 'lined-proc', 'shaded-proc'] as const;
|
||||
const aliasSet14 = [
|
||||
'lin-rect',
|
||||
'lined-rectangle',
|
||||
'lin-proc',
|
||||
'lined-process',
|
||||
'shaded-process',
|
||||
] as const;
|
||||
|
||||
const aliasSet15 = ['sm-circ', 'small-circle', 'start'] as const;
|
||||
|
||||
const aliasSet16 = ['framed-circle', 'stop'] as const;
|
||||
const aliasSet16 = ['fr-circ', 'framed-circle', 'stop'] as const;
|
||||
|
||||
const aliasSet17 = ['fork', 'join', 'long-rect'] as const;
|
||||
|
||||
const aliasSet18 = ['brace', 'comment', 'brace-l'] as const;
|
||||
const aliasSet17 = ['fork', 'join'] as const;
|
||||
// brace-r', 'braces'
|
||||
const aliasSet18 = ['comment', 'brace-l'] as const;
|
||||
|
||||
const aliasSet19 = ['bolt', 'com-link', 'lightning-bolt'] as const;
|
||||
|
||||
const aliasSet20 = ['we-rect', 'doc', 'wave-edge-rect', 'wave-edged-rectangle'] as const;
|
||||
const aliasSet20 = ['doc', 'document'] as const;
|
||||
|
||||
const aliasSet21 = ['delay', 'half-rounded-rect'] as const;
|
||||
const aliasSet21 = ['delay', 'half-rounded-rectangle'] as const;
|
||||
|
||||
const aliasSet22 = ['t-cyl', 'das', 'tilted-cylinder'] as const;
|
||||
const aliasSet22 = ['h-cyl', 'das', 'horizontal-cylinder'] as const;
|
||||
|
||||
const aliasSet23 = ['l-cyl', 'disk', 'lined-cylinder'] as const;
|
||||
const aliasSet23 = ['lin-cyl', 'disk', 'lined-cylinder'] as const;
|
||||
|
||||
const aliasSet24 = ['cur-trap', 'disp', 'display', 'curved-trapezoid'] as const;
|
||||
const aliasSet24 = ['curv-trap', 'display', 'curved-trapezoid'] as const;
|
||||
|
||||
const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle'] as const;
|
||||
const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle', 'divided-process'] as const;
|
||||
|
||||
const aliasSet26 = ['sm-tri', 'extract', 'small-triangle', 'triangle'] as const;
|
||||
const aliasSet26 = ['extract', 'tri', 'triangle'] as const;
|
||||
|
||||
const aliasSet27 = ['win-pane', 'internal-storage', 'window-pane'] as const;
|
||||
|
||||
const aliasSet28 = ['fc', 'junction', 'filled-circle'] as const;
|
||||
const aliasSet28 = ['f-circ', 'junction', 'filled-circle'] as const;
|
||||
|
||||
const aliasSet29 = ['lin-we-rect', 'lin-doc', 'lined-wave-edged-rect'] as const;
|
||||
const aliasSet29 = ['lin-doc', 'lined-document'] as const;
|
||||
|
||||
const aliasSet30 = ['notch-pent', 'loop-limit', 'notched-pentagon'] as const;
|
||||
|
||||
const aliasSet31 = ['flip-tri', 'manual-file', 'flipped-triangle'] as const;
|
||||
|
||||
const aliasSet32 = ['sloped-rect', 'manual-input', 'sloped-rectangle'] as const;
|
||||
const aliasSet32 = ['sl-rect', 'manual-input', 'sloped-rectangle'] as const;
|
||||
|
||||
const aliasSet33 = ['mul-we-rect', 'mul-doc', 'multi-wave-edged-rectangle'] as const;
|
||||
const aliasSet33 = ['docs', 'documents', 'st-doc', 'stacked-document'] as const;
|
||||
|
||||
const aliasSet34 = ['mul-rect', 'mul-proc', 'multi-rect'] as const;
|
||||
const aliasSet34 = ['procs', 'processes', 'st-rect', 'stacked-rectangle'] as const;
|
||||
|
||||
const aliasSet35 = ['flag', 'paper-tape'] as const;
|
||||
|
||||
const aliasSet36 = ['bt-rect', 'stored-data', 'bow-tie-rect'] as const;
|
||||
const aliasSet36 = ['bow-rect', 'stored-data', 'bow-tie-rectangle'] as const;
|
||||
|
||||
const aliasSet37 = ['cross-circle', 'summary', 'crossed-circle'] as const;
|
||||
const aliasSet37 = ['cross-circ', 'summary', 'crossed-circle'] as const;
|
||||
|
||||
const aliasSet38 = ['tag-we-rect', 'tag-doc', 'tagged-wave-edged-rectangle'] as const;
|
||||
const aliasSet38 = ['tag-doc', 'tagged-document'] as const;
|
||||
|
||||
const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rect'] as const;
|
||||
const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rectangle', 'tagged-process'] as const;
|
||||
|
||||
const aliasSet40 = ['collate', 'hourglass'] as const;
|
||||
|
||||
// Aggregate all alias sets into a single array
|
||||
const aliasSets = [
|
||||
@@ -126,7 +134,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 });
|
||||
});
|
||||
|
||||
@@ -4,14 +4,14 @@ const looks = ['classic'] as const;
|
||||
const directions = ['TB'] as const;
|
||||
const newShapesSet1 = [
|
||||
'triangle',
|
||||
'sloped-rect',
|
||||
'tilted-cylinder',
|
||||
'sloped-rectangle',
|
||||
'horizontal-cylinder',
|
||||
'flipped-triangle',
|
||||
'hourglass',
|
||||
] as const;
|
||||
const newShapesSet2 = [
|
||||
'tagged-rect',
|
||||
'multi-rect',
|
||||
'tagged-rectangle',
|
||||
'documents',
|
||||
'lightning-bolt',
|
||||
'filled-circle',
|
||||
'window-pane',
|
||||
@@ -19,26 +19,27 @@ const newShapesSet2 = [
|
||||
|
||||
const newShapesSet3 = [
|
||||
'curved-trapezoid',
|
||||
'bow-tie-rect',
|
||||
'wave-edge-rect',
|
||||
'bow-rect',
|
||||
'tagged-document',
|
||||
'divided-rectangle',
|
||||
'crossed-circle',
|
||||
] as const;
|
||||
|
||||
const newShapesSet4 = [
|
||||
'wave-rectangle',
|
||||
'document',
|
||||
'notched-pentagon',
|
||||
'lined-cylinder',
|
||||
'multi-wave-edged-rectangle',
|
||||
'half-rounded-rect',
|
||||
'stacked-document',
|
||||
'half-rounded-rectangle',
|
||||
] as const;
|
||||
|
||||
const newShapesSet5 = [
|
||||
'lined-wave-edged-rect',
|
||||
'tagged-wave-edged-rectangle',
|
||||
'lined-document',
|
||||
'tagged-document',
|
||||
'brace-l',
|
||||
'curved-trapezoid',
|
||||
'wave-rectangle',
|
||||
'comment',
|
||||
'braces',
|
||||
'brace-r',
|
||||
] as const;
|
||||
|
||||
const newShapesSet6 = ['brace-r', 'braces'] as const;
|
||||
@@ -59,7 +60,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 +68,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 +76,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 +89,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 +97,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 +105,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 +117,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 +127,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 });
|
||||
|
||||
@@ -254,40 +254,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">
|
||||
@@ -461,6 +461,12 @@ flowchart TB
|
||||
>
|
||||
</div>
|
||||
|
||||
<pre id="diagram4" class="mermaid">
|
||||
flowchart TB
|
||||
A@{
|
||||
label: "aksljhf kasjdh"
|
||||
}
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
|
||||
Reference in New Issue
Block a user