GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Updated docs for braces

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-09-05 11:44:12 +02:00
parent 9774c08336
commit adedb5f803
2 changed files with 135 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
docs/syntax/flowchart.md
View File

@ -316,51 +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` |
| **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` |
| **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` |
### Example Flowchart with New Shapes
@ -640,12 +642,36 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: brace, label: "Comment" }@
A@{ shape: comment, label: "Comment" }@
```
```mermaid
flowchart TD
A@{ shape: brace, label: "Comment" }@
A@{ shape: comment, label: "Comment" }@
```
### Comment Right (Curly Brace Right)
```mermaid-example
flowchart TD
A@{ shape: brace-r, label: "Comment" }@
```
```mermaid
flowchart TD
A@{ shape: brace-r, label: "Comment" }@
```
### Comment with braces on both sides
```mermaid-example
flowchart TD
A@{ shape: braces, label: "Comment" }@
```
```mermaid
flowchart TD
A@{ shape: braces, label: "Comment" }@
```
### Com Link (Lightning Bolt)

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

@ -212,51 +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` |
| **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` |
| **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` |
### Example Flowchart with New Shapes
@ -422,7 +424,21 @@ flowchart TD
```mermaid-example
flowchart TD
A@{ shape: brace, label: "Comment" }@
A@{ shape: comment, label: "Comment" }@
```
### Comment Right (Curly Brace Right)
```mermaid-example
flowchart TD
A@{ shape: brace-r, label: "Comment" }@
```
### Comment with braces on both sides
```mermaid-example
flowchart TD
A@{ shape: braces, label: "Comment" }@
```
### Com Link (Lightning Bolt)