marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-24 18:56:58 +02:00
Code Issues Packages 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
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/syntax/flowchart.md
View File

@@ -317,7 +317,7 @@ 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: 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** | | **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
| ------------------------- | --------------------------- | --------------- | ------------------------------ | ---------------------------------------- | | ------------------------------------- | --------------------------- | --------------- | ------------------------------ | ---------------------------------------- |
| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process` | | **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process` |
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` | | **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
| **Terminal Point** | Stadium | `stadium` | Terminal point | `term`, `pill` | | **Terminal Point** | Stadium | `stadium` | Terminal point | `term`, `pill` |
@@ -339,7 +339,9 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
| **Stop** | Framed Circle | `framed-circle` | Stop point | `stop`, `framed-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` | | **Fork/Join** | Long Rectangle | `fork` | Fork or join in process flow | `join`, `long-rect` |
| **Collate** | Hourglass | `hourglass` | Represents a collate operation | - | | **Collate** | Hourglass | `hourglass` | Represents a collate operation | - |
| **Comment** | Curly Brace | `brace` | Adds a comment | `comment` | | **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` | | **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
| **Document** | Wave-Edged Rectangle | `we-rect` | Represents a document | `doc`, `wave-edge-rect` | | **Document** | Wave-Edged Rectangle | `we-rect` | Represents a document | `doc`, `wave-edge-rect` |
| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rect` | | **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rect` |
@@ -640,12 +642,36 @@ flowchart TD
```mermaid-example ```mermaid-example
flowchart TD flowchart TD
A@{ shape: brace, label: "Comment" }@ A@{ shape: comment, label: "Comment" }@
``` ```
```mermaid ```mermaid
flowchart TD 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) ### Com Link (Lightning Bolt)

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

@@ -213,7 +213,7 @@ 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: 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** | | **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
| ------------------------- | --------------------------- | --------------- | ------------------------------ | ---------------------------------------- | | ------------------------------------- | --------------------------- | --------------- | ------------------------------ | ---------------------------------------- |
| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process` | | **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process` |
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` | | **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
| **Terminal Point** | Stadium | `stadium` | Terminal point | `term`, `pill` | | **Terminal Point** | Stadium | `stadium` | Terminal point | `term`, `pill` |
@@ -235,7 +235,9 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
| **Stop** | Framed Circle | `framed-circle` | Stop point | `stop`, `framed-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` | | **Fork/Join** | Long Rectangle | `fork` | Fork or join in process flow | `join`, `long-rect` |
| **Collate** | Hourglass | `hourglass` | Represents a collate operation | - | | **Collate** | Hourglass | `hourglass` | Represents a collate operation | - |
| **Comment** | Curly Brace | `brace` | Adds a comment | `comment` | | **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` | | **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
| **Document** | Wave-Edged Rectangle | `we-rect` | Represents a document | `doc`, `wave-edge-rect` | | **Document** | Wave-Edged Rectangle | `we-rect` | Represents a document | `doc`, `wave-edge-rect` |
| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rect` | | **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rect` |
@@ -422,7 +424,21 @@ flowchart TD
```mermaid-example ```mermaid-example
flowchart TD 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) ### Com Link (Lightning Bolt)