diff --git a/cypress/integration/rendering/flowchart-shape-alias.spec.ts b/cypress/integration/rendering/flowchart-shape-alias.spec.ts new file mode 100644 index 000000000..3e6d9092d --- /dev/null +++ b/cypress/integration/rendering/flowchart-shape-alias.spec.ts @@ -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); + }); + }); +}); diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts index 4e382f829..906a04da3 100644 --- a/cypress/integration/rendering/newShapes.spec.ts +++ b/cypress/integration/rendering/newShapes.spec.ts @@ -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) => { diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 3ea1580a2..b511c7cb4 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -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 diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index b979958dd..046c53e65 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -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 diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index c6b66a07f..7d7baeca4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -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, }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js new file mode 100644 index 000000000..2a0e7664c --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js @@ -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']); + }); +});