marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-04 04:44:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added more tests, updated documentation, kebab-case changes

Browse Source
This commit is contained in:
Ashish Jain
2024-09-09 14:59:03 +02:00
parent 41cf1262b2
commit e111965411
6 changed files with 511 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
cypress/integration/rendering/flowchart-shape-alias.spec.ts Normal file
View 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);
});
});
});

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

@@ -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) => {

94
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` |
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
| **Terminal Point** | Stadium | `stadium` | Terminal point | `term`, `pill` |
| **Subprocess** | Framed Rectangle | `fr` | Subprocess | `subproc`, `framed-rectangle` |
| **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` |
| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top` |
| **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` |
| **Lined/Shaded Process** | Lined Rectangle | `lined-rect` | Lined process shape | `lined-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` |
| **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 | `not-pent` | Loop limit step | `loop-limit`, `notched-pentagon` |
| **Manual File** | Flipped Triangle | `flip-tria` | 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 | `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` |
### Example Flowchart with New Shapes

94
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` |
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
| **Terminal Point** | Stadium | `stadium` | Terminal point | `term`, `pill` |
| **Subprocess** | Framed Rectangle | `fr` | Subprocess | `subproc`, `framed-rectangle` |
| **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` |
| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top` |
| **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` |
| **Lined/Shaded Process** | Lined Rectangle | `lined-rect` | Lined process shape | `lined-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` |
| **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 | `not-pent` | Loop limit step | `loop-limit`, `notched-pentagon` |
| **Manual File** | Flipped Triangle | `flip-tria` | 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 | `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` |
### Example Flowchart with New Shapes

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

@@ -53,7 +53,7 @@ import { curlyBraceRight } from './shapes/curlyBraceRight.js';
import { curlyBraces } from './shapes/curlyBraces.js';
//Use these names as the left side to render shapes.
const shapes = {
export const shapes = {
// States
state,
stateStart,
@@ -77,19 +77,15 @@ const shapes = {
stadium,
pill: stadium,
term: stadium,
windowPane,
'window-pane': windowPane,
'win-pane': windowPane,
'internal-storage': windowPane,
dividedRectangle,
'divided-rectangle': dividedRectangle,
'div-rect': dividedRectangle,
'div-proc': dividedRectangle,
taggedRect,
'tagged-rect': taggedRect,
'tag-rect': taggedRect,
'tag-proc': taggedRect,
multiRect,
'multi-rect': multiRect,
'mul-rect': multiRect,
'mul-proc': multiRect,
@@ -104,46 +100,41 @@ const shapes = {
cylinder,
cyl: cylinder,
db: cylinder,
tiltedCylinder,
'tilted-cylinder': tiltedCylinder,
't-cyl': tiltedCylinder,
das: tiltedCylinder,
linedCylinder,
'lined-cylinder': linedCylinder,
'l-cyl': linedCylinder,
disk: linedCylinder,
// Circles
circle,
doublecircle,
'double-circle': doublecircle,
dc: doublecircle,
crossedCircle,
'crossed-circle': crossedCircle,
'cross-circle': crossedCircle,
summary: crossedCircle,
filledCircle,
'filled-circle': filledCircle,
fc: filledCircle,
junction: filledCircle,
shadedProcess,
'lined-proc': shadedProcess,
'lined-rect': shadedProcess,
'shaded-proc': shadedProcess,
// Trapezoids
trapezoid,
trapezoidBaseBottom: trapezoid,
'trapezoid-bottom': trapezoid,
'trap-b': trapezoid,
priority: trapezoid,
inv_trapezoid,
'inv-trapezoid': inv_trapezoid,
'trapezoid-top': inv_trapezoid,
'trap-t': inv_trapezoid,
manual: inv_trapezoid,
curvedTrapezoid,
'curved-trapezoid': curvedTrapezoid,
'cur-trap': curvedTrapezoid,
disp: curvedTrapezoid,
display: curvedTrapezoid,
// Hexagons & Misc Geometric
hexagon,
@@ -153,49 +144,40 @@ const shapes = {
'small-triangle': triangle,
'sm-tri': triangle,
extract: triangle,
flippedTriangle,
'flipped-triangle': flippedTriangle,
'flip-tria': flippedTriangle,
'flip-tri': flippedTriangle,
'manual-file': flippedTriangle,
trapezoidalPentagon,
'notched-pentagon': trapezoidalPentagon,
'not-pent': trapezoidalPentagon,
'notch-pent': trapezoidalPentagon,
'loop-limit': trapezoidalPentagon,
//wave Edged Rectangles
waveRectangle,
'wave-rectangle': waveRectangle,
'w-rect': waveRectangle,
flag: waveRectangle,
'paper-tape': waveRectangle,
waveEdgedRectangle,
'wave-edge-rect': waveEdgedRectangle,
'wave-edged-rectangle': waveEdgedRectangle,
'wave-rect': waveEdgedRectangle,
'we-rect': waveEdgedRectangle,
doc: waveEdgedRectangle,
multiWaveEdgedRectangle,
'multi-wave-edged-rectangle': multiWaveEdgedRectangle,
'mul-we-rect': multiWaveEdgedRectangle,
'mul-doc': multiWaveEdgedRectangle,
linedWaveEdgedRect,
'lined-wave-edged-rect': linedWaveEdgedRect,
'lin-we-rect': linedWaveEdgedRect,
'lin-doc': linedWaveEdgedRect,
taggedWaveEdgedRectangle,
'tagged-wave-edged-rectangle': taggedWaveEdgedRectangle,
'tag-we-rect': taggedWaveEdgedRectangle,
'tag-doc': taggedWaveEdgedRectangle,
// Custom Rectangles
bowTieRect,
'bow-tie-rect': bowTieRect,
'bt-rect': bowTieRect,
'stored-data': bowTieRect,
slopedRect,
'sloped-rectangle': slopedRect,
'sloped-rect': slopedRect,
'manual-input': slopedRect,
halfRoundedRectangle,
'half-rounded-rect': halfRoundedRectangle,
delay: halfRoundedRectangle,
card,
@@ -220,17 +202,17 @@ const shapes = {
text,
anchor,
diamond: question,
lightningBolt,
diam: question,
decision: question,
'lightning-bolt': lightningBolt,
bolt: lightningBolt,
'com-link': lightningBolt,
curlyBraceLeft,
'brace-l': curlyBraceLeft,
brace: curlyBraceLeft,
comment: curlyBraceLeft,
hourglass,
odd: rect_left_inv_arrow,
labelRect,
curlyBraceRight,
'brace-r': curlyBraceRight,
braces: curlyBraces,
};

241
packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js Normal file
View File

@@ -0,0 +1,241 @@
import exp from 'constants';
import { shapes } from './nodes.js';
describe('Test Alias for shapes', function () {
// for each shape in docs/syntax/flowchart.md, along with its semantic name, short name, and alias name, add a test case
// Process | rect | proc | rectangle
it('should support alias for rectangle shape ', function () {
expect(shapes.process).toBe(shapes.rect);
expect(shapes.proc).toBe(shapes.rect);
expect(shapes.rectangle).toBe(shapes.rect);
});
// event | rounded
it('should support alias for rounded shape ', function () {
expect(shapes.event).toBe(shapes.rounded);
});
// stadium | pill | term
it('should support alias for stadium shape ', function () {
expect(shapes.pill).toBe(shapes.stadium);
expect(shapes.term).toBe(shapes.stadium);
});
// fr | 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);
});
// cyl | db | cylinder
it('should support alias for cylinder shape ', function () {
expect(shapes.db).toBe(shapes.cylinder);
expect(shapes.cyl).toBe(shapes.cylinder);
});
// diam | decision | diamond
it('should support alias for diamond shape ', function () {
expect(shapes.diam).toBe(shapes.decision);
expect(shapes.diamond).toBe(shapes.decision);
});
// hex | hexagon | prepare
it('should support alias for hexagon shape ', function () {
expect(shapes.hex).toBe(shapes.hexagon);
expect(shapes.prepare).toBe(shapes.hexagon);
});
// 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['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['out-in']).toBe(shapes['lean-left']);
});
// trap-b | trapezoid-bottom | priority | trapezoid
it('should support alias for trapezoid shape ', function () {
expect(shapes['trapezoid-bottom']).toBe(shapes['trap-b']);
expect(shapes.priority).toBe(shapes['trap-b']);
expect(shapes.trapezoid).toBe(shapes['trap-b']);
});
// trap-t | trapezoid-top | manual | inv-trapezoid
it('should support alias for inv_trapezoid shape ', function () {
expect(shapes['trapezoid-top']).toBe(shapes['trap-t']);
expect(shapes.manual).toBe(shapes['trap-t']);
expect(shapes['inv-trapezoid']).toBe(shapes['trap-t']);
});
// dc | double-circle
it('should support alias for doublecircle shape ', function () {
expect(shapes['double-circle']).toBe(shapes.dc);
});
// notched-rect | 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']);
});
// lined-rect | lined-proc | shaded-proc
it('should support alias for shadedProcess shape ', function () {
expect(shapes['lined-proc']).toBe(shapes['lined-rect']);
expect(shapes['shaded-proc']).toBe(shapes['lined-rect']);
});
// sm-circ | small-circle | start
it('should support alias for smallCircle shape ', function () {
expect(shapes['small-circle']).toBe(shapes['sm-circ']);
expect(shapes.start).toBe(shapes['sm-circ']);
});
// framed-circle | stop
it('should support alias for framed circle shape ', function () {
expect(shapes.stop).toBe(shapes['framed-circle']);
});
// fork | join | long-rect
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
it('should support alias for brace shape ', function () {
expect(shapes.comment).toBe(shapes.brace);
expect(shapes['brace-l']).toBe(shapes.brace);
});
// bolt | com-link | lightning-bolt
it('should support alias for bolt shape ', function () {
expect(shapes['com-link']).toBe(shapes.bolt);
expect(shapes['lightning-bolt']).toBe(shapes.bolt);
});
// we-rect | doc | wave-edge-rect | wave-edged-rectangle
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']);
});
// delay | half-rounded-rect
it('should support alias for halfRoundedRectangle shape ', function () {
expect(shapes.delay).toBe(shapes['half-rounded-rect']);
});
// 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']);
});
// l-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']);
});
// cur-trap | disp | 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']);
});
// div-rect | div-proc | divided-rectangle
it('should support alias for dividedRectangle shape ', function () {
expect(shapes['div-proc']).toBe(shapes['div-rect']);
expect(shapes['divided-rectangle']).toBe(shapes['div-rect']);
});
// 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']);
});
// win-pane | internal-storage | window-pane
it('should support alias for windowPane shape ', function () {
expect(shapes['internal-storage']).toBe(shapes['win-pane']);
expect(shapes['window-pane']).toBe(shapes['win-pane']);
});
// 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);
});
//lin-we-rect | lin-doc | lined-wave-edged-rect
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']);
});
// notch-pent | loop-limit | notched-pentagon
it('should support alias for notchedPentagon shape ', function () {
expect(shapes['loop-limit']).toBe(shapes['notch-pent']);
expect(shapes['notched-pentagon']).toBe(shapes['notch-pent']);
});
// flip-tri | manual-file | flipped-triangle
it('should support alias for flippedTriangle shape ', function () {
expect(shapes['manual-file']).toBe(shapes['flip-tri']);
expect(shapes['flipped-triangle']).toBe(shapes['flip-tri']);
});
//sloped-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']);
});
// mul-we-rect | mul-doc | multi-wave-edged-rectangle
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']);
});
// mul-rect | mul-proc | multi-rect
it('should support alias for multiRect shape ', function () {
expect(shapes['mul-proc']).toBe(shapes['mul-rect']);
expect(shapes['multi-rect']).toBe(shapes['mul-rect']);
});
// flag | paper-tape
it('should support alias for paperTape shape ', function () {
expect(shapes['paper-tape']).toBe(shapes.flag);
});
// bt-rect| stored-data | bow-tie-rect
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']);
});
// cross-circle | 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']);
});
// 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-rect | tag-proc | tagged-rect
it('should support alias for taggedRect shape ', function () {
expect(shapes['tag-proc']).toBe(shapes['tag-rect']);
expect(shapes['tagged-rect']).toBe(shapes['tag-rect']);
});
});