mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 06:19:24 +02:00
Merge branch 'knsv/new-shapes' of https://github.com/mermaid-js/mermaid into saurabh/image-shape
This commit is contained in:
saurabhg772244
134
cypress/integration/rendering/flowchart-shape-alias.spec.ts
Normal file
134
cypress/integration/rendering/flowchart-shape-alias.spec.ts
Normal file
@@ -0,0 +1,134 @@
|
||||
import { imgSnapshotTest } from '../../helpers/util.ts';
|
||||
|
||||
const aliasSet1 = ['process', 'rect', 'proc', 'rectangle'] as const;
|
||||
|
||||
const aliasSet2 = ['event', 'rounded'] as const;
|
||||
|
||||
const aliasSet3 = ['stadium', 'pill', 'term'] as const;
|
||||
|
||||
const aliasSet4 = ['fr', 'subproc', 'framed-rectangle', 'subroutine'] as const;
|
||||
|
||||
const aliasSet5 = ['db', '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 aliasSet9 = ['l-l', 'lean-left', 'out-in'] as const;
|
||||
|
||||
const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority', 'trapezoid'] as const;
|
||||
|
||||
const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual', 'inv-trapezoid'] as const;
|
||||
|
||||
const aliasSet12 = ['dc', 'double-circle'] as const;
|
||||
|
||||
const aliasSet13 = ['notched-rect', 'card', 'notch-rect'] as const;
|
||||
|
||||
const aliasSet14 = ['lined-rect', 'lined-proc', 'shaded-proc'] as const;
|
||||
|
||||
const aliasSet15 = ['sm-circ', 'small-circle', 'start'] as const;
|
||||
|
||||
const aliasSet16 = ['framed-circle', 'stop'] as const;
|
||||
|
||||
const aliasSet17 = ['fork', 'join', 'long-rect'] as const;
|
||||
|
||||
const aliasSet18 = ['brace', '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 aliasSet21 = ['delay', 'half-rounded-rect'] as const;
|
||||
|
||||
const aliasSet22 = ['t-cyl', 'das', 'tilted-cylinder'] as const;
|
||||
|
||||
const aliasSet23 = ['l-cyl', 'disk', 'lined-cylinder'] as const;
|
||||
|
||||
const aliasSet24 = ['cur-trap', 'disp', 'display', 'curved-trapezoid'] as const;
|
||||
|
||||
const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle'] as const;
|
||||
|
||||
const aliasSet26 = ['sm-tri', 'extract', 'small-triangle', 'triangle'] as const;
|
||||
|
||||
const aliasSet27 = ['win-pane', 'internal-storage', 'window-pane'] as const;
|
||||
|
||||
const aliasSet28 = ['fc', 'junction', 'filled-circle'] as const;
|
||||
|
||||
const aliasSet29 = ['lin-we-rect', 'lin-doc', 'lined-wave-edged-rect'] 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 aliasSet33 = ['mul-we-rect', 'mul-doc', 'multi-wave-edged-rectangle'] as const;
|
||||
|
||||
const aliasSet34 = ['mul-rect', 'mul-proc', 'multi-rect'] as const;
|
||||
|
||||
const aliasSet35 = ['flag', 'paper-tape'] as const;
|
||||
|
||||
const aliasSet36 = ['bt-rect', 'stored-data', 'bow-tie-rect'] as const;
|
||||
|
||||
const aliasSet37 = ['cross-circle', 'summary', 'crossed-circle'] as const;
|
||||
|
||||
const aliasSet38 = ['tag-we-rect', 'tag-doc', 'tagged-wave-edged-rectangle'] as const;
|
||||
|
||||
const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rect'] as const;
|
||||
|
||||
// Aggregate all alias sets into a single array
|
||||
const aliasSets = [
|
||||
aliasSet1,
|
||||
aliasSet2,
|
||||
aliasSet3,
|
||||
aliasSet4,
|
||||
aliasSet5,
|
||||
aliasSet6,
|
||||
aliasSet7,
|
||||
aliasSet8,
|
||||
aliasSet9,
|
||||
aliasSet10,
|
||||
aliasSet11,
|
||||
aliasSet12,
|
||||
aliasSet13,
|
||||
aliasSet14,
|
||||
aliasSet15,
|
||||
aliasSet16,
|
||||
aliasSet17,
|
||||
aliasSet18,
|
||||
aliasSet19,
|
||||
aliasSet20,
|
||||
aliasSet21,
|
||||
aliasSet22,
|
||||
aliasSet23,
|
||||
aliasSet24,
|
||||
aliasSet25,
|
||||
aliasSet26,
|
||||
aliasSet27,
|
||||
aliasSet28,
|
||||
aliasSet29,
|
||||
aliasSet30,
|
||||
aliasSet31,
|
||||
aliasSet32,
|
||||
aliasSet33,
|
||||
aliasSet34,
|
||||
aliasSet35,
|
||||
aliasSet36,
|
||||
aliasSet37,
|
||||
aliasSet38,
|
||||
aliasSet39,
|
||||
] as const;
|
||||
|
||||
aliasSets.forEach((aliasSet) => {
|
||||
describe(`Test ${aliasSet.join(',')} `, () => {
|
||||
it(`All ${aliasSet.join(',')} should render same shape`, () => {
|
||||
let flowchartCode = `flowchart \n`;
|
||||
aliasSet.forEach((alias, index) => {
|
||||
flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }@\n`;
|
||||
});
|
||||
imgSnapshotTest(flowchartCode);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -4,45 +4,53 @@ const looks = ['classic'] as const;
|
||||
const directions = ['TB'] as const;
|
||||
const newShapesSet1 = [
|
||||
'triangle',
|
||||
'slopedRect',
|
||||
'tiltedCylinder',
|
||||
'flippedTriangle',
|
||||
'sloped-rect',
|
||||
'tilted-cylinder',
|
||||
'flipped-triangle',
|
||||
'hourglass',
|
||||
] as const;
|
||||
const newShapesSet2 = [
|
||||
'taggedRect',
|
||||
'multiRect',
|
||||
'lightningBolt',
|
||||
'filledCircle',
|
||||
'windowPane',
|
||||
'tagged-rect',
|
||||
'multi-rect',
|
||||
'lightning-bolt',
|
||||
'filled-circle',
|
||||
'window-pane',
|
||||
] as const;
|
||||
|
||||
const newShapesSet3 = [
|
||||
'curvedTrapezoid',
|
||||
'bowTieRect',
|
||||
'waveEdgedRectangle',
|
||||
'dividedRectangle',
|
||||
'crossedCircle',
|
||||
'curved-trapezoid',
|
||||
'bow-tie-rect',
|
||||
'wave-edge-rect',
|
||||
'divided-rectangle',
|
||||
'crossed-circle',
|
||||
] as const;
|
||||
|
||||
const newShapesSet4 = [
|
||||
'waveRectangle',
|
||||
'trapezoidalPentagon',
|
||||
'linedCylinder',
|
||||
'multiWaveEdgedRectangle',
|
||||
'halfRoundedRectangle',
|
||||
'wave-rectangle',
|
||||
'notched-pentagon',
|
||||
'lined-cylinder',
|
||||
'multi-wave-edged-rectangle',
|
||||
'half-rounded-rect',
|
||||
] as const;
|
||||
|
||||
const newShapesSet5 = [
|
||||
'linedWaveEdgedRect',
|
||||
'taggedWaveEdgedRectangle',
|
||||
'curlyBraceLeft',
|
||||
'curvedTrapezoid',
|
||||
'waveRectangle',
|
||||
'lined-wave-edged-rect',
|
||||
'tagged-wave-edged-rectangle',
|
||||
'brace-l',
|
||||
'curved-trapezoid',
|
||||
'wave-rectangle',
|
||||
] as const;
|
||||
|
||||
const newShapesSet6 = ['brace-r', 'braces'] as const;
|
||||
// Aggregate all shape sets into a single array
|
||||
const newShapesSets = [newShapesSet2] as const;
|
||||
const newShapesSets = [
|
||||
newShapesSet1,
|
||||
newShapesSet2,
|
||||
newShapesSet3,
|
||||
newShapesSet4,
|
||||
newShapesSet5,
|
||||
newShapesSet6,
|
||||
];
|
||||
|
||||
looks.forEach((look) => {
|
||||
directions.forEach((direction) => {
|
||||
|
||||
@@ -83,7 +83,8 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
<div class="flex">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
title: hello2
|
||||
config:
|
||||
@@ -242,7 +243,183 @@ stateDiagram-v2
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
look: neo
|
||||
---
|
||||
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" }@
|
||||
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 }@
|
||||
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 }@
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
title: hello2
|
||||
config:
|
||||
look: handDrawn
|
||||
elk:
|
||||
<!-- nodePlacementStrategy: SIMPLE -->
|
||||
---
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
flowchart TD
|
||||
|
||||
A([Start]) -->|go to booking page| B("select
|
||||
ISBS booking no")
|
||||
A --> QQ{cancel booking}
|
||||
A --> RR{no show}
|
||||
A --> SS{change booking}
|
||||
B -->C(wmpay_request_payment.request_type= 'partial',
|
||||
wmpay_request_payment.status= 'paid',
|
||||
pos_booking.booking_status= ‘partial’ and 'full_deposit')
|
||||
style C text-align:left
|
||||
C -->D{manage booking}
|
||||
|
||||
D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
|
||||
E -->F{กดปุ่ม 'cancel' หรือไม่}
|
||||
F -->|Yes|G[ระบบบันทึกค่าใหม่
|
||||
และไม่สามารถแก้ไขข้อมูลได้]
|
||||
F -->|No|H[กดปุ่ม 'close']
|
||||
H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
|
||||
G -->|ระบบส่งข้อมูล|I[(POS_database)]
|
||||
I -->|pos_booking.booking_status='cancel'|Z([End])
|
||||
|
||||
|
||||
D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
|
||||
J -->K{กดปุ่ม 'noshow' หรือไม่}
|
||||
K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
|
||||
Product_id: 439,
|
||||
ItemName: no show]
|
||||
style L text-align:left
|
||||
|
||||
K -->|No|O[กดปุ่ม 'close']
|
||||
O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
|
||||
L -->M[ระบบบันทึกค่าใหม่]
|
||||
M -->|ระบบส่งข้อมูล|N[(POS_database)]
|
||||
N -->|pos_booking.booking_status=‘noshow’|Z
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
title: hello2
|
||||
config:
|
||||
look: handDrawn
|
||||
layout: dagre
|
||||
elk:
|
||||
nodePlacementStrategy: BRANDES_KOEPF
|
||||
---
|
||||
flowchart
|
||||
A --> A
|
||||
subgraph A
|
||||
B --> B
|
||||
subgraph B
|
||||
C
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
look: handdrawn
|
||||
flowchart:
|
||||
htmlLabels: true
|
||||
---
|
||||
flowchart
|
||||
A[I am a long text, where do I go??? handdrawn - true]
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart
|
||||
A[I am a long text, where do I go??? classic - false]
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: true
|
||||
---
|
||||
flowchart
|
||||
A[I am a long text, where do I go??? classic - true]
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
<pre id="diagram2" class="mermaid2">
|
||||
flowchart LR
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram3" class="mermaid2">
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef ash color:red
|
||||
class C ash
|
||||
style C stroke:#00f, fill:black
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
stateDiagram
|
||||
A:::foo
|
||||
B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
style C stroke:#00f, fill:black, color:white
|
||||
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
Reference in New Issue
Block a user