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

Updated shape aliases

Browse Source
This commit is contained in:
Ashish Jain
2024-09-13 12:58:28 +02:00
parent 9f2f3bd780
commit 61af74609a
8 changed files with 478 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.cspell/code-terms.txt
View File

@@ -26,6 +26,7 @@ concat
controlx
controly
CSSCLASS
curv
CYLINDEREND
CYLINDERSTART
DAGA

2
.cspell/mermaid-terms.txt
View File

@@ -5,6 +5,7 @@ bmatrix
braintree
catmull
compositTitleSize
curv
doublecircle
elems
gantt
@@ -24,6 +25,7 @@ multigraph
nodesep
NOTEGROUP
Pinterest
procs
rankdir
ranksep
rect

68
cypress/integration/rendering/flowchart-shape-alias.spec.ts
View File

@@ -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 = [

27
cypress/integration/rendering/newShapes.spec.ts
View File

@@ -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;

208
docs/syntax/flowchart.md
View File

@@ -316,53 +316,53 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A
Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
| ------------------------------------- | --------------------------- | --------------- | ------------------------------ | ------------------------------------------- |
| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` |
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
| **Terminal Point** | Stadium | `stadium` | Terminal point | `term`, `pill` |
| **Subprocess** | Framed Rectangle | `fr` | Subprocess | `subproc`, `framed-rectangle`, `subroutine` |
| **Database** | Cylinder | `cyl` | Database storage | `db`, `cylinder` |
| **Start** | Circle | `circle` | Starting point | |
| **Odd** | Odd | `odd` | Odd shape | |
| **Decision** | Diamond | `diam` | Decision-making step | `decision`, `diamond` |
| **Prepare Conditional** | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` |
| **Data Input/Output** | Lean Right | `l-r` | Represents input or output | `lean-right`, `in-out` |
| **Data Input/Output** | Lean Left | `l-l` | Represents output or input | `lean-left`, `out-in` |
| **Priority Action** | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid-bottom`, `trapezoid` |
| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top`, `inv-trapezoid` |
| **Stop** | Double Circle | `dc` | Represents a stop point | `double-circle` |
| **Text Block** | Text Block | `text` | Text block | - |
| **Card** | Notched Rectangle | `notched-rect` | Represents a card | `card`, `notch-rect`, `notched-rect` |
| **Lined/Shaded Process** | Lined Rectangle | `lined-rect` | Lined process shape | `lined-proc`, `shaded-proc` |
| **Start** | Small Circle | `sm-circ` | Small starting point | `start`, `small-circle` |
| **Stop** | Framed Circle | `framed-circle` | Stop point | `stop`, `framed-circle` |
| **Fork/Join** | Long Rectangle | `fork` | Fork or join in process flow | `join`, `long-rect` |
| **Collate** | Hourglass | `hourglass` | Represents a collate operation | - |
| **Comment** | Curly Brace | `brace` | Adds a comment | `comment`, `brace-l` |
| **Comment Right** | Curly Brace | `brace-r` | Adds a comment | - |
| **Comment with braces on both sides** | Curly Braces | `braces` | Adds a comment | - |
| **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
| **Document** | Wave-Edged Rectangle | `we-rect` | Represents a document | `doc`, `wave-edge-rect` |
| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rect` |
| **Direct Access Storage** | Tilted Cylinder | `t-cyl` | Direct access storage | `das`, `tilted-cylinder` |
| **Disk Storage** | Lined Cylinder | `l-cyl` | Disk storage | `disk`, `lined-cylinder` |
| **Display** | Curved Trapezoid | `cur-trap` | Represents a display | `disp`, `curved-trapezoid`, `display` |
| **Divided Process** | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-rectangle` |
| **Extract** | Small Triangle | `sm-tri` | Extraction process | `extract`, `small-triangle` |
| **Internal Storage** | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` |
| **Junction** | Filled Circle | `fc` | Junction point | `junction`, `filled-circle` |
| **Lined Document** | Lined Wave-Edged Rectangle | `lin-we-rect` | Lined document | `lin-doc`, `lined-wave-edged-rect` |
| **Loop Limit** | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` |
| **Manual File** | Flipped Triangle | `flip-tri` | Manual file operation | `manual-file`, `flipped-triangle` |
| **Manual Input** | Sloped Rectangle | `sloped-rect` | Manual input step | `manual-input`, `sloped-rectangle` |
| **Multi-Document** | Multi-Wave-Edged Rectangle | `mul-we-rect` | Multiple documents | `mul-doc`, `multi-wave-edged-rectangle` |
| **Multi-Process** | Multi-Rect | `mul-rect` | Multiple processes | `mul-proc`, `multi-rect` |
| **Paper Tape** | Flag | `flag` | Paper tape | `paper-tape` |
| **Stored Data** | Bow Tie Rectangle | `bt-rect` | Stored data | `stored-data`, `bow-tie-rect` |
| **Summary** | Crossed Circle | `cross-circle` | Summary | `summary`, `crossed-circle` |
| **Tagged Document** | Tagged Wave-Edged Rectangle | `tag-we-rect` | Tagged document | `tag-doc`, `tagged-wave-edged-rectangle` |
| **Tagged Process** | Tagged Rectangle | `tag-rect` | Tagged process | `tag-proc`, `tagged-rect` |
| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
| ------------------------------------- | ---------------------- | -------------- | ------------------------------ | ----------------------------------------------------------- |
| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` |
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
| **Terminal Point** | Stadium | `stadium` | Terminal point | `terminal`, `pill` |
| **Subprocess** | Framed Rectangle | `fr-rect` | Subprocess | `subprocess`,`subproc`, `framed-rectangle`, `subroutine` |
| **Database** | Cylinder | `cyl` | Database storage | `db`, `database`, `cylinder` |
| **Start** | Circle | `circle` | Starting point | `circ` |
| **Odd** | Odd | `odd` | Odd shape | |
| **Decision** | Diamond | `diam` | Decision-making step | `decision`, `diamond` |
| **Prepare Conditional** | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` |
| **Data Input/Output** | Lean Right | `lean-r` | Represents input or output | `lean-right`, `in-out` |
| **Data Input/Output** | Lean Left | `lean-l` | Represents output or input | `lean-left`, `out-in` |
| **Priority Action** | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid-bottom` |
| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top` |
| **Stop** | Double Circle | `dbl-circ` | Represents a stop point | `double-circle` |
| **Text Block** | Text Block | `text` | Text block | - |
| **Card** | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` |
| **Lined/Shaded Process** | Lined Rectangle | `lin-rect` | Lined process shape | `lined-rectangle`,`lined-proc`, `lin-proc`,`shaded-process` |
| **Start** | Small Circle | `sm-circ` | Small starting point | `start`, `small-circle` |
| **Stop** | Framed Circle | `fr-circ` | Stop point | `stop`, `framed-circle` |
| **Fork/Join** | Filled Rectangle | `fork` | Fork or join in process flow | `join` |
| **Collate** | Hourglass | `hourglass` | Represents a collate operation | `hourglass` |
| **Comment** | Curly Brace | `brace` | Adds a comment | `comment`, `brace-l` |
| **Comment Right** | Curly Brace | `brace-r` | Adds a comment | - |
| **Comment with braces on both sides** | Curly Braces | `braces` | Adds a comment | - |
| **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
| **Document** | Document | `doc` | Represents a document | `doc`, `document` |
| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rectangle` |
| **Direct Access Storage** | Horizontal Cylinder | `h-cyl` | Direct access storage | `das`, `horizontal-cylinder` |
| **Disk Storage** | Lined Cylinder | `lin-cyl` | Disk storage | `disk`, `lined-cylinder` |
| **Display** | Curved Trapezoid | `curv-trap` | Represents a display | `curved-trapezoid`, `display` |
| **Divided Process** | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-rectangle`, `divided-process` |
| **Extract** | Triangle | `tri` | Extraction process | `extract`, `triangle` |
| **Internal Storage** | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` |
| **Junction** | Filled Circle | `f-circ` | Junction point | `junction`, `filled-circle` |
| **Lined Document** | Lined Document | `lin-doc` | Lined document | `lined-document` |
| **Loop Limit** | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` |
| **Manual File** | Flipped Triangle | `flip-tri` | Manual file operation | `manual-file`, `flipped-triangle` |
| **Manual Input** | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` |
| **Multi-Document** | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` |
| **Multi-Process** | Stacked Rectangle | `st-rect` | Multiple processes | `procs`, `processes`, `stacked-rect` |
| **Paper Tape** | Flag | `flag` | Paper tape | `paper-tape` |
| **Stored Data** | Bow Tie Rectangle | `bow-rect` | Stored data | `stored-data`, `bow-tie-rectangle` |
| **Summary** | Crossed Circle | `cross-circ` | Summary | `summary`, `crossed-circle` |
| **Tagged Document** | Tagged Document | `tag-doc` | Tagged document | `tag-doc`, `tagged-document` |
| **Tagged Process** | Tagged Rectangle | `tag-rect` | Tagged process | `tagged-rectangle`,`tag-proc`, `tagged-process` |
### Example Flowchart with New Shapes
@@ -370,20 +370,20 @@ 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"}
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ 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"}
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
```
### Process
@@ -498,24 +498,24 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: l-r, label: "Input/Output" }
A@{ shape: lean-r, label: "Input/Output" }
```
```mermaid
flowchart TD
A@{ shape: l-r, label: "Input/Output" }
A@{ shape: lean-r, label: "Input/Output" }
```
### Data Input/Output (Lean Left)
```mermaid-example
flowchart TD
A@{ shape: l-l, label: "Output/Input" }
A@{ shape: lean-l, label: "Output/Input" }
```
```mermaid
flowchart TD
A@{ shape: l-l, label: "Output/Input" }
A@{ shape: lean-l, label: "Output/Input" }
```
### Priority Action (Trapezoid Base Bottom)
@@ -546,12 +546,12 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: dc, label: "Stop" }
A@{ shape: dbl-circ, label: "Stop" }
```
```mermaid
flowchart TD
A@{ shape: dc, label: "Stop" }
A@{ shape: dbl-circ, label: "Stop" }
```
### Text Block
@@ -570,24 +570,24 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: notched-rect, label: "Card" }
A@{ shape: notch-rect, label: "Card" }
```
```mermaid
flowchart TD
A@{ shape: notched-rect, label: "Card" }
A@{ shape: notch-rect, label: "Card" }
```
### Lined/Shaded Process
```mermaid-example
flowchart TD
A@{ shape: lined-rect, label: "Lined process" }
A@{ shape: lin-rect, label: "Lined process" }
```
```mermaid
flowchart TD
A@{ shape: lined-rect, label: "Lined process" }
A@{ shape: lin-rect, label: "Lined process" }
```
### Start (Small Circle)
@@ -686,16 +686,16 @@ flowchart TD
A@{ shape: bolt, label: "Communication link" }
```
### Document (Wave-Edged Rectangle)
### Document
```mermaid-example
flowchart TD
A@{ shape: we-rect, label: "Document" }
A@{ shape: doc, label: "Document" }
```
```mermaid
flowchart TD
A@{ shape: we-rect, label: "Document" }
A@{ shape: doc, label: "Document" }
```
### Delay (Half-Rounded Rectangle)
@@ -710,40 +710,40 @@ flowchart TD
A@{ shape: delay, label: "Delay" }
```
### Direct Access Storage (Tilted Cylinder)
### Direct Access Storage (Horizontal Cylinder)
```mermaid-example
flowchart TD
A@{ shape: t-cyl, label: "Direct access storage" }
A@{ shape: das, label: "Direct access storage" }
```
```mermaid
flowchart TD
A@{ shape: t-cyl, label: "Direct access storage" }
A@{ shape: das, label: "Direct access storage" }
```
### Disk Storage (Lined Cylinder)
```mermaid-example
flowchart TD
A@{ shape: l-cyl, label: "Disk storage" }
A@{ shape: lin-cyl, label: "Disk storage" }
```
```mermaid
flowchart TD
A@{ shape: l-cyl, label: "Disk storage" }
A@{ shape: lin-cyl, label: "Disk storage" }
```
### Display (Curved Trapezoid)
```mermaid-example
flowchart TD
A@{ shape: cur-trap, label: "Display" }
A@{ shape: curv-trap, label: "Display" }
```
```mermaid
flowchart TD
A@{ shape: cur-trap, label: "Display" }
A@{ shape: curv-trap, label: "Display" }
```
### Divided Process (Divided Rectangle)
@@ -762,12 +762,12 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: sm-tri, label: "Extract" }
A@{ shape: tri, label: "Extract" }
```
```mermaid
flowchart TD
A@{ shape: sm-tri, label: "Extract" }
A@{ shape: tri, label: "Extract" }
```
### Internal Storage (Window Pane)
@@ -786,84 +786,84 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: fc, label: "Junction" }
A@{ shape: f-circ, label: "Junction" }
```
```mermaid
flowchart TD
A@{ shape: fc, label: "Junction" }
A@{ shape: f-circ, label: "Junction" }
```
### Lined Document (Lined Wave-Edged Rectangle)
### Lined Document
```mermaid-example
flowchart TD
A@{ shape: lin-we-rect, label: "Lined document" }
A@{ shape: lin-doc, label: "Lined document" }
```
```mermaid
flowchart TD
A@{ shape: lin-we-rect, label: "Lined document" }
A@{ shape: lin-doc, label: "Lined document" }
```
### Loop Limit (Trapezoidal Pentagon)
### Loop Limit (Notched Pentagon)
```mermaid-example
flowchart TD
A@{ shape: not-pent, label: "Loop limit" }
A@{ shape: notch-pent, label: "Loop limit" }
```
```mermaid
flowchart TD
A@{ shape: not-pent, label: "Loop limit" }
A@{ shape: notch-pent, label: "Loop limit" }
```
### Manual File (Flipped Triangle)
```mermaid-example
flowchart TD
A@{ shape: flip-tria, label: "Manual file" }
A@{ shape: flip-tri, label: "Manual file" }
```
```mermaid
flowchart TD
A@{ shape: flip-tria, label: "Manual file" }
A@{ shape: flip-tri, label: "Manual file" }
```
### Manual Input (Sloped Rectangle)
```mermaid-example
flowchart TD
A@{ shape: sloped-rect, label: "Manual input" }
A@{ shape: sl-rect, label: "Manual input" }
```
```mermaid
flowchart TD
A@{ shape: sloped-rect, label: "Manual input" }
A@{ shape: sl-rect, label: "Manual input" }
```
### Multi-Document (Multi-Wave-Edged Rectangle)
### Multi-Document (Stacked Document)
```mermaid-example
flowchart TD
A@{ shape: mul-we-rect, label: "Multiple documents" }
A@{ shape: docs, label: "Multiple documents" }
```
```mermaid
flowchart TD
A@{ shape: mul-we-rect, label: "Multiple documents" }
A@{ shape: docs, label: "Multiple documents" }
```
### Multi-Process (Multi-Rect)
### Multi-Process (Stacked Rectangle)
```mermaid-example
flowchart TD
A@{ shape: mul-rect, label: "Multiple processes" }
A@{ shape: processes, label: "Multiple processes" }
```
```mermaid
flowchart TD
A@{ shape: mul-rect, label: "Multiple processes" }
A@{ shape: processes, label: "Multiple processes" }
```
### Paper Tape (Flag)
@@ -882,36 +882,36 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: bt-rect, label: "Stored data" }
A@{ shape: bow-rect, label: "Stored data" }
```
```mermaid
flowchart TD
A@{ shape: bt-rect, label: "Stored data" }
A@{ shape: bow-rect, label: "Stored data" }
```
### Summary (Crossed Circle)
```mermaid-example
flowchart TD
A@{ shape: cross-circle, label: "Summary" }
A@{ shape: cross-circ, label: "Summary" }
```
```mermaid
flowchart TD
A@{ shape: cross-circle, label: "Summary" }
A@{ shape: cross-circ, label: "Summary" }
```
### Tagged Document (Tagged Wave-Edged Rectangle)
### Tagged Document
```mermaid-example
flowchart TD
A@{ shape: tag-we-rect, label: "Tagged document" }
A@{ shape: tag-doc, label: "Tagged document" }
```
```mermaid
flowchart TD
A@{ shape: tag-we-rect, label: "Tagged document" }
A@{ shape: tag-doc, label: "Tagged document" }
```
### Tagged Process (Tagged Rectangle)

158
packages/mermaid/src/docs/syntax/flowchart.md
View File

@@ -212,53 +212,53 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A
Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
| ------------------------------------- | --------------------------- | --------------- | ------------------------------ | ------------------------------------------- |
| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` |
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
| **Terminal Point** | Stadium | `stadium` | Terminal point | `term`, `pill` |
| **Subprocess** | Framed Rectangle | `fr` | Subprocess | `subproc`, `framed-rectangle`, `subroutine` |
| **Database** | Cylinder | `cyl` | Database storage | `db`, `cylinder` |
| **Start** | Circle | `circle` | Starting point | |
| **Odd** | Odd | `odd` | Odd shape | |
| **Decision** | Diamond | `diam` | Decision-making step | `decision`, `diamond` |
| **Prepare Conditional** | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` |
| **Data Input/Output** | Lean Right | `l-r` | Represents input or output | `lean-right`, `in-out` |
| **Data Input/Output** | Lean Left | `l-l` | Represents output or input | `lean-left`, `out-in` |
| **Priority Action** | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid-bottom`, `trapezoid` |
| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top`, `inv-trapezoid` |
| **Stop** | Double Circle | `dc` | Represents a stop point | `double-circle` |
| **Text Block** | Text Block | `text` | Text block | - |
| **Card** | Notched Rectangle | `notched-rect` | Represents a card | `card`, `notch-rect`, `notched-rect` |
| **Lined/Shaded Process** | Lined Rectangle | `lined-rect` | Lined process shape | `lined-proc`, `shaded-proc` |
| **Start** | Small Circle | `sm-circ` | Small starting point | `start`, `small-circle` |
| **Stop** | Framed Circle | `framed-circle` | Stop point | `stop`, `framed-circle` |
| **Fork/Join** | Long Rectangle | `fork` | Fork or join in process flow | `join`, `long-rect` |
| **Collate** | Hourglass | `hourglass` | Represents a collate operation | - |
| **Comment** | Curly Brace | `brace` | Adds a comment | `comment`, `brace-l` |
| **Comment Right** | Curly Brace | `brace-r` | Adds a comment | - |
| **Comment with braces on both sides** | Curly Braces | `braces` | Adds a comment | - |
| **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
| **Document** | Wave-Edged Rectangle | `we-rect` | Represents a document | `doc`, `wave-edge-rect` |
| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rect` |
| **Direct Access Storage** | Tilted Cylinder | `t-cyl` | Direct access storage | `das`, `tilted-cylinder` |
| **Disk Storage** | Lined Cylinder | `l-cyl` | Disk storage | `disk`, `lined-cylinder` |
| **Display** | Curved Trapezoid | `cur-trap` | Represents a display | `disp`, `curved-trapezoid`, `display` |
| **Divided Process** | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-rectangle` |
| **Extract** | Small Triangle | `sm-tri` | Extraction process | `extract`, `small-triangle` |
| **Internal Storage** | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` |
| **Junction** | Filled Circle | `fc` | Junction point | `junction`, `filled-circle` |
| **Lined Document** | Lined Wave-Edged Rectangle | `lin-we-rect` | Lined document | `lin-doc`, `lined-wave-edged-rect` |
| **Loop Limit** | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` |
| **Manual File** | Flipped Triangle | `flip-tri` | Manual file operation | `manual-file`, `flipped-triangle` |
| **Manual Input** | Sloped Rectangle | `sloped-rect` | Manual input step | `manual-input`, `sloped-rectangle` |
| **Multi-Document** | Multi-Wave-Edged Rectangle | `mul-we-rect` | Multiple documents | `mul-doc`, `multi-wave-edged-rectangle` |
| **Multi-Process** | Multi-Rect | `mul-rect` | Multiple processes | `mul-proc`, `multi-rect` |
| **Paper Tape** | Flag | `flag` | Paper tape | `paper-tape` |
| **Stored Data** | Bow Tie Rectangle | `bt-rect` | Stored data | `stored-data`, `bow-tie-rect` |
| **Summary** | Crossed Circle | `cross-circle` | Summary | `summary`, `crossed-circle` |
| **Tagged Document** | Tagged Wave-Edged Rectangle | `tag-we-rect` | Tagged document | `tag-doc`, `tagged-wave-edged-rectangle` |
| **Tagged Process** | Tagged Rectangle | `tag-rect` | Tagged process | `tag-proc`, `tagged-rect` |
| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
| ------------------------------------- | ---------------------- | -------------- | ------------------------------ | ----------------------------------------------------------- |
| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` |
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
| **Terminal Point** | Stadium | `stadium` | Terminal point | `terminal`, `pill` |
| **Subprocess** | Framed Rectangle | `fr-rect` | Subprocess | `subprocess`,`subproc`, `framed-rectangle`, `subroutine` |
| **Database** | Cylinder | `cyl` | Database storage | `db`, `database`, `cylinder` |
| **Start** | Circle | `circle` | Starting point | `circ` |
| **Odd** | Odd | `odd` | Odd shape | |
| **Decision** | Diamond | `diam` | Decision-making step | `decision`, `diamond` |
| **Prepare Conditional** | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` |
| **Data Input/Output** | Lean Right | `lean-r` | Represents input or output | `lean-right`, `in-out` |
| **Data Input/Output** | Lean Left | `lean-l` | Represents output or input | `lean-left`, `out-in` |
| **Priority Action** | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid-bottom` |
| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top` |
| **Stop** | Double Circle | `dbl-circ` | Represents a stop point | `double-circle` |
| **Text Block** | Text Block | `text` | Text block | - |
| **Card** | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` |
| **Lined/Shaded Process** | Lined Rectangle | `lin-rect` | Lined process shape | `lined-rectangle`,`lined-proc`, `lin-proc`,`shaded-process` |
| **Start** | Small Circle | `sm-circ` | Small starting point | `start`, `small-circle` |
| **Stop** | Framed Circle | `fr-circ` | Stop point | `stop`, `framed-circle` |
| **Fork/Join** | Filled Rectangle | `fork` | Fork or join in process flow | `join` |
| **Collate** | Hourglass | `hourglass` | Represents a collate operation | `hourglass` |
| **Comment** | Curly Brace | `brace` | Adds a comment | `comment`, `brace-l` |
| **Comment Right** | Curly Brace | `brace-r` | Adds a comment | - |
| **Comment with braces on both sides** | Curly Braces | `braces` | Adds a comment | - |
| **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
| **Document** | Document | `doc` | Represents a document | `doc`, `document` |
| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rectangle` |
| **Direct Access Storage** | Horizontal Cylinder | `h-cyl` | Direct access storage | `das`, `horizontal-cylinder` |
| **Disk Storage** | Lined Cylinder | `lin-cyl` | Disk storage | `disk`, `lined-cylinder` |
| **Display** | Curved Trapezoid | `curv-trap` | Represents a display | `curved-trapezoid`, `display` |
| **Divided Process** | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-rectangle`, `divided-process` |
| **Extract** | Triangle | `tri` | Extraction process | `extract`, `triangle` |
| **Internal Storage** | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` |
| **Junction** | Filled Circle | `f-circ` | Junction point | `junction`, `filled-circle` |
| **Lined Document** | Lined Document | `lin-doc` | Lined document | `lined-document` |
| **Loop Limit** | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` |
| **Manual File** | Flipped Triangle | `flip-tri` | Manual file operation | `manual-file`, `flipped-triangle` |
| **Manual Input** | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` |
| **Multi-Document** | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` |
| **Multi-Process** | Stacked Rectangle | `st-rect` | Multiple processes | `procs`, `processes`, `stacked-rect` |
| **Paper Tape** | Flag | `flag` | Paper tape | `paper-tape` |
| **Stored Data** | Bow Tie Rectangle | `bow-rect` | Stored data | `stored-data`, `bow-tie-rectangle` |
| **Summary** | Crossed Circle | `cross-circ` | Summary | `summary`, `crossed-circle` |
| **Tagged Document** | Tagged Document | `tag-doc` | Tagged document | `tag-doc`, `tagged-document` |
| **Tagged Process** | Tagged Rectangle | `tag-rect` | Tagged process | `tagged-rectangle`,`tag-proc`, `tagged-process` |
### Example Flowchart with New Shapes
@@ -266,11 +266,11 @@ 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"}
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
```
### Process
@@ -340,14 +340,14 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: l-r, label: "Input/Output" }
A@{ shape: lean-r, label: "Input/Output" }
```
### Data Input/Output (Lean Left)
```mermaid-example
flowchart TD
A@{ shape: l-l, label: "Output/Input" }
A@{ shape: lean-l, label: "Output/Input" }
```
### Priority Action (Trapezoid Base Bottom)
@@ -368,7 +368,7 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: dc, label: "Stop" }
A@{ shape: dbl-circ, label: "Stop" }
```
### Text Block
@@ -382,14 +382,14 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: notched-rect, label: "Card" }
A@{ shape: notch-rect, label: "Card" }
```
### Lined/Shaded Process
```mermaid-example
flowchart TD
A@{ shape: lined-rect, label: "Lined process" }
A@{ shape: lin-rect, label: "Lined process" }
```
### Start (Small Circle)
@@ -448,11 +448,11 @@ flowchart TD
A@{ shape: bolt, label: "Communication link" }
```
### Document (Wave-Edged Rectangle)
### Document
```mermaid-example
flowchart TD
A@{ shape: we-rect, label: "Document" }
A@{ shape: doc, label: "Document" }
```
### Delay (Half-Rounded Rectangle)
@@ -462,25 +462,25 @@ flowchart TD
A@{ shape: delay, label: "Delay" }
```
### Direct Access Storage (Tilted Cylinder)
### Direct Access Storage (Horizontal Cylinder)
```mermaid-example
flowchart TD
A@{ shape: t-cyl, label: "Direct access storage" }
A@{ shape: das, label: "Direct access storage" }
```
### Disk Storage (Lined Cylinder)
```mermaid-example
flowchart TD
A@{ shape: l-cyl, label: "Disk storage" }
A@{ shape: lin-cyl, label: "Disk storage" }
```
### Display (Curved Trapezoid)
```mermaid-example
flowchart TD
A@{ shape: cur-trap, label: "Display" }
A@{ shape: curv-trap, label: "Display" }
```
### Divided Process (Divided Rectangle)
@@ -494,7 +494,7 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: sm-tri, label: "Extract" }
A@{ shape: tri, label: "Extract" }
```
### Internal Storage (Window Pane)
@@ -508,49 +508,49 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: fc, label: "Junction" }
A@{ shape: f-circ, label: "Junction" }
```
### Lined Document (Lined Wave-Edged Rectangle)
### Lined Document
```mermaid-example
flowchart TD
A@{ shape: lin-we-rect, label: "Lined document" }
A@{ shape: lin-doc, label: "Lined document" }
```
### Loop Limit (Trapezoidal Pentagon)
### Loop Limit (Notched Pentagon)
```mermaid-example
flowchart TD
A@{ shape: not-pent, label: "Loop limit" }
A@{ shape: notch-pent, label: "Loop limit" }
```
### Manual File (Flipped Triangle)
```mermaid-example
flowchart TD
A@{ shape: flip-tria, label: "Manual file" }
A@{ shape: flip-tri, label: "Manual file" }
```
### Manual Input (Sloped Rectangle)
```mermaid-example
flowchart TD
A@{ shape: sloped-rect, label: "Manual input" }
A@{ shape: sl-rect, label: "Manual input" }
```
### Multi-Document (Multi-Wave-Edged Rectangle)
### Multi-Document (Stacked Document)
```mermaid-example
flowchart TD
A@{ shape: mul-we-rect, label: "Multiple documents" }
A@{ shape: docs, label: "Multiple documents" }
```
### Multi-Process (Multi-Rect)
### Multi-Process (Stacked Rectangle)
```mermaid-example
flowchart TD
A@{ shape: mul-rect, label: "Multiple processes" }
A@{ shape: processes, label: "Multiple processes" }
```
### Paper Tape (Flag)
@@ -564,21 +564,21 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: bt-rect, label: "Stored data" }
A@{ shape: bow-rect, label: "Stored data" }
```
### Summary (Crossed Circle)
```mermaid-example
flowchart TD
A@{ shape: cross-circle, label: "Summary" }
A@{ shape: cross-circ, label: "Summary" }
```
### Tagged Document (Tagged Wave-Edged Rectangle)
### Tagged Document
```mermaid-example
flowchart TD
A@{ shape: tag-we-rect, label: "Tagged document" }
A@{ shape: tag-doc, label: "Tagged document" }
```
### Tagged Process (Tagged Rectangle)

297
packages/mermaid/src/rendering-util/rendering-elements/nodes.js
View File

@@ -61,161 +61,236 @@ export const shapes = {
// States
state,
stateStart,
'small-circle': stateStart,
'sm-circ': stateStart,
start: stateStart,
stateEnd,
'framed-circle': stateEnd,
stop: stateEnd,
forkJoin,
choice,
note,
// Rectangles
rectWithTitle,
roundedRect,
rounded: roundedRect,
event: roundedRect,
squareRect,
// Rectangle with alias: 'process', 'rect', 'proc', 'rectangle'
rectangle: squareRect,
rect: squareRect,
process: squareRect,
proc: squareRect,
// Rounded Rectangle with alias: 'event', 'rounded'
rounded: roundedRect,
event: roundedRect,
// Stadium with alias: 'terminal','pill', 'stadium'
stadium,
pill: stadium,
term: stadium,
'window-pane': windowPane,
'win-pane': windowPane,
'internal-storage': windowPane,
'divided-rectangle': dividedRectangle,
'div-rect': dividedRectangle,
'div-proc': dividedRectangle,
'tagged-rect': taggedRect,
'tag-rect': taggedRect,
'tag-proc': taggedRect,
'multi-rect': multiRect,
'mul-rect': multiRect,
'mul-proc': multiRect,
terminal: stadium,
// Subroutine
// Subprocess with alias: 'fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'
subroutine,
'framed-rectangle': subroutine,
fr: subroutine,
'fr-rect': subroutine,
subprocess: subroutine,
subproc: subroutine,
// Cylinders
// Cylinder with alias: 'db', 'database', 'cylinder', 'cyl'
cylinder,
cyl: cylinder,
db: cylinder,
'tilted-cylinder': tiltedCylinder,
't-cyl': tiltedCylinder,
das: tiltedCylinder,
'lined-cylinder': linedCylinder,
'l-cyl': linedCylinder,
disk: linedCylinder,
cyl: cylinder,
database: cylinder,
// Circles
circle,
'double-circle': doublecircle,
dc: doublecircle,
'crossed-circle': crossedCircle,
'cross-circle': crossedCircle,
summary: crossedCircle,
'filled-circle': filledCircle,
fc: filledCircle,
junction: filledCircle,
'lined-proc': shadedProcess,
'lined-rect': shadedProcess,
'shaded-proc': shadedProcess,
// Diamond with alias: 'diam', 'decision', 'diamond'
question,
diam: question,
diamond: question,
decision: question,
// Trapezoids
trapezoid,
'trapezoid-bottom': trapezoid,
// Hexagon with alias: 'hex', 'hexagon', 'prepare'
hexagon,
hex: hexagon,
prepare: hexagon,
// Lean Right with alias: 'lean-r', 'lean-right', 'in-out'
lean_right, // used in old syntax for flowchart
'lean-r': lean_right,
'lean-right': lean_right,
'in-out': lean_right,
// Lean Left with alias: 'lean-l', 'lean-left', 'out-in'
lean_left, // used in old syntax for flowchart
'lean-l': lean_left,
'lean-left': lean_left,
'out-in': lean_left,
// Trapezoid with alias: 'trap-b', 'trapezoid-bottom', 'priority'
trapezoid, // used in old syntax for flowchart
'trap-b': trapezoid,
'trapezoid-bottom': trapezoid,
priority: trapezoid,
inv_trapezoid,
// Inverted Trapezoid with alias: 'inv-trapezoid', 'trapezoid-top', 'trap-t', 'manual'
inv_trapezoid, // used in old syntax for flowchart
'inv-trapezoid': inv_trapezoid,
'trapezoid-top': inv_trapezoid,
'trap-t': inv_trapezoid,
manual: inv_trapezoid,
// Double Circle with alias: 'dbl-circ', 'double-circle'
doublecircle, // used in old syntax for flowchart
'dbl-circ': doublecircle,
'double-circle': doublecircle,
// circle with alias: 'circ', 'circle'
circle,
circ: circle,
// Rect Left Inv Arrow with alias: 'odd', 'rect-left-inv-arrow'
rect_left_inv_arrow,
odd: rect_left_inv_arrow,
// Notched Rectangle with alias: 'notched-rectangle', 'notch-rect', 'card'
card,
'notched-rectangle': card,
'notch-rect': card,
// Lined rectangle with alias: 'lin-rect', 'lined-rectangle', 'lin-proc', lined-process', 'shaded-process'
'lined-rectangle': shadedProcess,
'lin-rect': shadedProcess,
'lin-proc': shadedProcess,
'lined-process': shadedProcess,
'shaded-process': shadedProcess,
// Small circle with alias: 'sm-circ', 'small-circle', 'start'
'small-circle': stateStart,
'sm-circ': stateStart,
start: stateStart,
// framed circle with alias: 'stop', 'framed-circle', 'fr-circ'
stop: stateEnd,
'framed-circle': stateEnd,
'fr-circ': stateEnd,
// fork with alias: 'join', 'fork'
join: forkJoin,
fork: forkJoin,
// comment with alias: 'comment', 'brace-l'
comment: curlyBraceLeft,
'brace-l': curlyBraceLeft,
// lightening bolt with alias: 'bolt', 'com-link', 'lightning-bolt'
bolt: lightningBolt,
'com-link': lightningBolt,
'lightning-bolt': lightningBolt,
// document with alias: 'doc', 'document'
doc: waveEdgedRectangle,
document: waveEdgedRectangle,
// delay with alias: 'delay', 'half-rounded-rectangle'
delay: halfRoundedRectangle,
'half-rounded-rectangle': halfRoundedRectangle,
// horizontal cylinder with alias: 'h-cyl', 'das', 'horizontal-cylinder'
'horizontal-cylinder': tiltedCylinder,
'h-cyl': tiltedCylinder,
das: tiltedCylinder,
// lined cylinder with alias: 'lin-cyl', 'lined-cylinder', 'disk'
'lined-cylinder': linedCylinder,
'lin-cyl': linedCylinder,
disk: linedCylinder,
// curved trapezoid with alias: 'curv-trap', 'curved-trapezoid', 'display'
'curved-trapezoid': curvedTrapezoid,
'cur-trap': curvedTrapezoid,
disp: curvedTrapezoid,
'curv-trap': curvedTrapezoid,
display: curvedTrapezoid,
// Hexagons & Misc Geometric
hexagon,
hex: hexagon,
prepare: hexagon,
// divided rectangle with alias: 'div-rect', 'divided-rectangle', 'div-proc', 'divided-process'
'divided-rectangle': dividedRectangle,
'div-rect': dividedRectangle,
'div-proc': dividedRectangle,
'divided-process': dividedRectangle,
// triangle with alias: 'tri', 'triangle', 'extract'
triangle,
'small-triangle': triangle,
'sm-tri': triangle,
tri: triangle,
extract: triangle,
'flipped-triangle': flippedTriangle,
'flip-tri': flippedTriangle,
'manual-file': flippedTriangle,
// window pane with alias: 'window-pane', 'win-pane', 'internal-storage'
'window-pane': windowPane,
'win-pane': windowPane,
'internal-storage': windowPane,
// filled circle with alias: 'f-circ', 'filled-circle', 'junction'
'f-circ': filledCircle,
junction: filledCircle,
'filled-circle': filledCircle,
// lined document with alias: 'lin-doc', 'lined-document'
'lin-doc': linedWaveEdgedRect,
'lined-document': linedWaveEdgedRect,
// notched pentagon with alias: 'notch-pent', 'notched-pentagon', 'loop-limit'
'notched-pentagon': trapezoidalPentagon,
'notch-pent': trapezoidalPentagon,
'loop-limit': trapezoidalPentagon,
//wave Edged Rectangles
'wave-rectangle': waveRectangle,
'w-rect': waveRectangle,
// flipped triangle with alias: 'flip-tri', 'flipped-triangle', 'manual-file'
'flipped-triangle': flippedTriangle,
'flip-tri': flippedTriangle,
'manual-file': flippedTriangle,
// sloped rectangle with alias: 'sl-rect', 'sloped-rectangle', 'manual-input'
'sloped-rectangle': slopedRect,
'sl-rect': slopedRect,
'manual-input': slopedRect,
// documents with alias: 'docs', 'documents', 'st-doc', 'stacked-document'
docs: multiWaveEdgedRectangle,
documents: multiWaveEdgedRectangle,
'st-doc': multiWaveEdgedRectangle,
'stacked-document': multiWaveEdgedRectangle,
// 'processes' with alias: 'procs', 'processes', 'st-rect', 'stacked-rectangle'
processes: multiRect,
procs: multiRect,
'stacked-rectangle': multiRect,
'st-rect': multiRect,
// flag with alias: 'flag', 'paper-tape'
flag: waveRectangle,
'paper-tape': waveRectangle,
'wave-edge-rect': waveEdgedRectangle,
'wave-edged-rectangle': waveEdgedRectangle,
'wave-rect': waveEdgedRectangle,
'we-rect': waveEdgedRectangle,
doc: waveEdgedRectangle,
'multi-wave-edged-rectangle': multiWaveEdgedRectangle,
'mul-we-rect': multiWaveEdgedRectangle,
'mul-doc': multiWaveEdgedRectangle,
'lined-wave-edged-rect': linedWaveEdgedRect,
'lin-we-rect': linedWaveEdgedRect,
'lin-doc': linedWaveEdgedRect,
'tagged-wave-edged-rectangle': taggedWaveEdgedRectangle,
'tag-we-rect': taggedWaveEdgedRectangle,
'tag-doc': taggedWaveEdgedRectangle,
// Custom Rectangles
'bow-tie-rect': bowTieRect,
'bt-rect': bowTieRect,
// bow tie rectangle with alias: 'bow-rect', 'bow-tie-rectangle', 'stored-data'
'bow-tie-rectangle': bowTieRect,
'bow-rect': bowTieRect,
'stored-data': bowTieRect,
'sloped-rectangle': slopedRect,
'sloped-rect': slopedRect,
'manual-input': slopedRect,
'half-rounded-rect': halfRoundedRectangle,
delay: halfRoundedRectangle,
card,
'notched-rect': card,
'notch-rect': card,
'lean-right': lean_right,
lean_right: lean_right,
'l-r': lean_right,
'in-out': lean_right,
'lean-left': lean_left,
lean_left: lean_left,
'l-l': lean_left,
'out-in': lean_left,
// Miscellaneous
forkJoin,
'long-rect': forkJoin,
fork: forkJoin,
join: forkJoin,
choice,
note,
// crossed circle with alias: 'cross-circ', 'crossed-circle', 'summary'
'crossed-circle': crossedCircle,
'cross-circ': crossedCircle,
summary: crossedCircle,
// tagged document with alias: 'tag-doc', 'tagged-document'
'tag-doc': taggedWaveEdgedRectangle,
'tagged-document': taggedWaveEdgedRectangle,
// tagged rectangle with alias: 'tag-rect', 'tagged-rectangle', 'tag-proc', 'tagged-process'
'tag-rect': taggedRect,
'tagged-rectangle': taggedRect,
'tag-proc': taggedRect,
'tagged-process': taggedRect,
// hourglass with alias: 'hourglass', 'collate'
hourglass,
collate: hourglass,
text,
anchor,
diamond: question,
diam: question,
decision: question,
'lightning-bolt': lightningBolt,
bolt: lightningBolt,
'com-link': lightningBolt,
'brace-l': curlyBraceLeft,
brace: curlyBraceLeft,
comment: curlyBraceLeft,
hourglass,
odd: rect_left_inv_arrow,
labelRect,
'brace-r': curlyBraceRight,
braces: curlyBraces,

114
packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js
View File

@@ -18,14 +18,14 @@ describe('Test Alias for shapes', function () {
// stadium | pill | term
it('should support alias for stadium shape ', function () {
expect(shapes.pill).toBe(shapes.stadium);
expect(shapes.term).toBe(shapes.stadium);
expect(shapes.terminal).toBe(shapes.stadium);
});
// fr | subproc | framed-rectangle | subroutine
// fr-rect | subproc | framed-rectangle | subroutine
it('should support alias for subroutine shape ', function () {
expect(shapes['framed-rectangle']).toBe(shapes.fr);
expect(shapes.subproc).toBe(shapes.fr);
expect(shapes.subroutine).toBe(shapes.fr);
expect(shapes['framed-rectangle']).toBe(shapes['fr-rect']);
expect(shapes.subproc).toBe(shapes['fr-rect']);
expect(shapes.subroutine).toBe(shapes['fr-rect']);
});
// cyl | db | cylinder
@@ -48,13 +48,13 @@ describe('Test Alias for shapes', function () {
// l-r | lean-right | in-out
it('should support alias for lean-right shape ', function () {
expect(shapes['l-r']).toBe(shapes['lean-right']);
expect(shapes['lean-r']).toBe(shapes['lean-right']);
expect(shapes['in-out']).toBe(shapes['lean-right']);
});
// l-l | lean-left | out-in
it('should support alias for lean-left shape ', function () {
expect(shapes['l-l']).toBe(shapes['lean-left']);
expect(shapes['lean-l']).toBe(shapes['lean-left']);
expect(shapes['out-in']).toBe(shapes['lean-left']);
});
@@ -72,15 +72,15 @@ describe('Test Alias for shapes', function () {
expect(shapes['inv-trapezoid']).toBe(shapes['trap-t']);
});
// dc | double-circle
// dbl-circ| double-circle
it('should support alias for doublecircle shape ', function () {
expect(shapes['double-circle']).toBe(shapes.dc);
expect(shapes['double-circle']).toBe(shapes['dbl-circ']);
});
// notched-rect | card | notch-rect
// notched-rectangle | card | notch-rect
it('should support alias for notched-rectangle shape ', function () {
expect(shapes.card).toBe(shapes['notched-rect']);
expect(shapes['notch-rect']).toBe(shapes['notched-rect']);
expect(shapes.card).toBe(shapes['notched-rectangle']);
expect(shapes['notch-rect']).toBe(shapes['notched-rectangle']);
});
// lined-rect | lined-proc | shaded-proc
@@ -100,10 +100,9 @@ describe('Test Alias for shapes', function () {
expect(shapes.stop).toBe(shapes['framed-circle']);
});
// fork | join | long-rect
// fork | join
it('should support alias for fork shape ', function () {
expect(shapes.join).toBe(shapes.fork);
expect(shapes['long-rect']).toBe(shapes.fork);
});
// brace | comment | brace-l
@@ -118,35 +117,32 @@ describe('Test Alias for shapes', function () {
expect(shapes['lightning-bolt']).toBe(shapes.bolt);
});
// we-rect | doc | wave-edge-rect | wave-edged-rectangle
// document | doc
it('should support alias for waveEdgedRectangle shape ', function () {
expect(shapes.doc).toBe(shapes['we-rect']);
expect(shapes['wave-edge-rect']).toBe(shapes['we-rect']);
expect(shapes['wave-edged-rectangle']).toBe(shapes['we-rect']);
expect(shapes.doc).toBe(shapes.document);
});
// delay | half-rounded-rect
// delay | half-rounded-rectangle
it('should support alias for halfRoundedRectangle shape ', function () {
expect(shapes.delay).toBe(shapes['half-rounded-rect']);
expect(shapes.delay).toBe(shapes['half-rounded-rectangle']);
});
// t-cyl | das | titled-cylinder
it('should support alias for tilted-cylinder shape ', function () {
expect(shapes.das).toBe(shapes['t-cyl']);
expect(shapes['tilted-cylinder']).toBe(shapes['t-cyl']);
// h-cyl | das | horizontal-cylinder
it('should support alias for horizontal-cylinder shape ', function () {
expect(shapes.das).toBe(shapes['h-cyl']);
expect(shapes['horizontal-cylinder']).toBe(shapes['h-cyl']);
});
// l-cyl | disk | lined-cylinder
// lin-cyl | disk | lined-cylinder
it('should support alias for linedCylinder shape ', function () {
expect(shapes.disk).toBe(shapes['l-cyl']);
expect(shapes['lined-cylinder']).toBe(shapes['l-cyl']);
expect(shapes.disk).toBe(shapes['lin-cyl']);
expect(shapes['lined-cylinder']).toBe(shapes['lin-cyl']);
});
// cur-trap | disp | display | curved-trapezoid
// curv-trap | display | curved-trapezoid
it('should support alias for curvedTrapezoid shape ', function () {
expect(shapes.disp).toBe(shapes['cur-trap']);
expect(shapes['curved-trapezoid']).toBe(shapes['cur-trap']);
expect(shapes.display).toBe(shapes['cur-trap']);
expect(shapes.display).toBe(shapes['curv-trap']);
expect(shapes['curved-trapezoid']).toBe(shapes['curv-trap']);
});
// div-rect | div-proc | divided-rectangle
@@ -157,9 +153,8 @@ describe('Test Alias for shapes', function () {
// sm-tri | extract | small-triangle | triangle
it('should support alias for smallTriangle shape ', function () {
expect(shapes.extract).toBe(shapes['sm-tri']);
expect(shapes['small-triangle']).toBe(shapes['sm-tri']);
expect(shapes.triangle).toBe(shapes['sm-tri']);
expect(shapes.extract).toBe(shapes.tri);
expect(shapes.triangle).toBe(shapes.tri);
});
// win-pane | internal-storage | window-pane
@@ -170,14 +165,13 @@ describe('Test Alias for shapes', function () {
// fc | junction | filled-circle
it('should support alias for filledCircle shape ', function () {
expect(shapes.junction).toBe(shapes.fc);
expect(shapes['filled-circle']).toBe(shapes.fc);
expect(shapes.junction).toBe(shapes['f-circ']);
expect(shapes['filled-circle']).toBe(shapes['f-circ']);
});
//lin-we-rect | lin-doc | lined-wave-edged-rect
// | lin-doc | lined-document
it('should support alias for linedWaveEdgedRectangle shape ', function () {
expect(shapes['lin-doc']).toBe(shapes['lin-we-rect']);
expect(shapes['lined-wave-edged-rect']).toBe(shapes['lin-we-rect']);
expect(shapes['lin-doc']).toBe(shapes['lined-document']);
});
// notch-pent | loop-limit | notched-pentagon
@@ -192,22 +186,22 @@ describe('Test Alias for shapes', function () {
expect(shapes['flipped-triangle']).toBe(shapes['flip-tri']);
});
//sloped-rect | manual-input | sloped-rectangle
//sl-rect | manual-input | sloped-rectangle
it('should support alias for slopedRectangle shape ', function () {
expect(shapes['manual-input']).toBe(shapes['sloped-rect']);
expect(shapes['sloped-rectangle']).toBe(shapes['sloped-rect']);
expect(shapes['manual-input']).toBe(shapes['sl-rect']);
expect(shapes['sloped-rectangle']).toBe(shapes['sl-rect']);
});
// mul-we-rect | mul-doc | multi-wave-edged-rectangle
// docs | documents | st-doc | stacked-document
it('should support alias for multiWaveEdgedRectangle shape ', function () {
expect(shapes['mul-doc']).toBe(shapes['mul-we-rect']);
expect(shapes['multi-wave-edged-rectangle']).toBe(shapes['mul-we-rect']);
expect(shapes.docs).toBe(shapes.documents);
expect(shapes['st-doc']).toBe(shapes['stacked-document']);
});
// mul-rect | mul-proc | multi-rect
// procs | processes | st-rect | stacked-rectangle
it('should support alias for multiRect shape ', function () {
expect(shapes['mul-proc']).toBe(shapes['mul-rect']);
expect(shapes['multi-rect']).toBe(shapes['mul-rect']);
expect(shapes.procs).toBe(shapes.processes);
expect(shapes['st-rect']).toBe(shapes['stacked-rectangle']);
});
// flag | paper-tape
@@ -215,27 +209,27 @@ describe('Test Alias for shapes', function () {
expect(shapes['paper-tape']).toBe(shapes.flag);
});
// bt-rect| stored-data | bow-tie-rect
// bow-rect| stored-data | bow-tie-rectangle
it('should support alias for bowTieRect shape ', function () {
expect(shapes['stored-data']).toBe(shapes['bt-rect']);
expect(shapes['bow-tie-rect']).toBe(shapes['bt-rect']);
expect(shapes['stored-data']).toBe(shapes['bow-rect']);
expect(shapes['bow-tie-rectangle']).toBe(shapes['bow-rect']);
});
// cross-circle | summary | crossed-circle
// cross-circ | summary | crossed-circle
it('should support alias for crossedCircle shape ', function () {
expect(shapes.summary).toBe(shapes['cross-circle']);
expect(shapes['crossed-circle']).toBe(shapes['cross-circle']);
expect(shapes.summary).toBe(shapes['cross-circ']);
expect(shapes['crossed-circle']).toBe(shapes['cross-circ']);
});
// tag-we-rect | tag-doc | tagged-wave-edged-rectangle
it('should support alias for taggedWaveEdgedRectangle shape ', function () {
expect(shapes['tag-doc']).toBe(shapes['tag-we-rect']);
expect(shapes['tagged-wave-edged-rectangle']).toBe(shapes['tag-we-rect']);
// tag-doc| tag-document
it('should support alias for taggedDocument shape ', function () {
expect(shapes['tag-doc']).toBe(shapes['tagged-document']);
});
// tag-rect | tag-proc | tagged-rect
// tag-rect | tag-proc | tagged-rectangle | tagged-process
it('should support alias for taggedRect shape ', function () {
expect(shapes['tag-proc']).toBe(shapes['tag-rect']);
expect(shapes['tagged-rect']).toBe(shapes['tag-rect']);
expect(shapes['tagged-rectangle']).toBe(shapes['tag-rect']);
expect(shapes['tagged-process']).toBe(shapes['tag-rect']);
});
});