mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-18 11:44:07 +01:00
Merge branch 'develop' into knsv/5342-kanban
This commit is contained in:
Knut Sveidqvist
@@ -316,53 +316,54 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A
|
||||
|
||||
Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
|
||||
|
||||
| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
|
||||
| ------------------------------------- | ---------------------- | -------------- | ------------------------------ | -------------------------------------------------------------- |
|
||||
| **Process** | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` |
|
||||
| **Event** | Rounded Rectangle | `rounded` | Represents an event | `event` |
|
||||
| **Terminal Point** | Stadium | `stadium` | Terminal point | `terminal`, `pill` |
|
||||
| **Subprocess** | Framed Rectangle | `fr-rect` | Subprocess | `subprocess`,`subproc`, `framed-rectangle`, `subroutine` |
|
||||
| **Database** | Cylinder | `cyl` | Database storage | `db`, `database`, `cylinder` |
|
||||
| **Start** | Circle | `circle` | Starting point | `circ` |
|
||||
| **Odd** | Odd | `odd` | Odd shape | |
|
||||
| **Decision** | Diamond | `diam` | Decision-making step | `decision`, `diamond` |
|
||||
| **Prepare Conditional** | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` |
|
||||
| **Data Input/Output** | Lean Right | `lean-r` | Represents input or output | `lean-right`, `in-out` |
|
||||
| **Data Input/Output** | Lean Left | `lean-l` | Represents output or input | `lean-left`, `out-in` |
|
||||
| **Priority Action** | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid-bottom` |
|
||||
| **Manual Operation** | Trapezoid Base Top | `trap-t` | Represents a manual task | `manual`, `trapezoid-top` |
|
||||
| **Stop** | Double Circle | `dbl-circ` | Represents a stop point | `double-circle` |
|
||||
| **Text Block** | Text Block | `text` | Text block | - |
|
||||
| **Card** | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` |
|
||||
| **Lined/Shaded Process** | Lined Rectangle | `lin-rect` | Lined process shape | `lined-rectangle`,`lined-process`, `lin-proc`,`shaded-process` |
|
||||
| **Start** | Small Circle | `sm-circ` | Small starting point | `start`, `small-circle` |
|
||||
| **Stop** | Framed Circle | `fr-circ` | Stop point | `stop`, `framed-circle` |
|
||||
| **Fork/Join** | Filled Rectangle | `fork` | Fork or join in process flow | `join` |
|
||||
| **Collate** | Hourglass | `hourglass` | Represents a collate operation | `hourglass` |
|
||||
| **Comment** | Curly Brace | `brace` | Adds a comment | `comment`, `brace-l` |
|
||||
| **Comment Right** | Curly Brace | `brace-r` | Adds a comment | - |
|
||||
| **Comment with braces on both sides** | Curly Braces | `braces` | Adds a comment | - |
|
||||
| **Com Link** | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
|
||||
| **Document** | Document | `doc` | Represents a document | `doc`, `document` |
|
||||
| **Delay** | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rectangle` |
|
||||
| **Direct Access Storage** | Horizontal Cylinder | `h-cyl` | Direct access storage | `das`, `horizontal-cylinder` |
|
||||
| **Disk Storage** | Lined Cylinder | `lin-cyl` | Disk storage | `disk`, `lined-cylinder` |
|
||||
| **Display** | Curved Trapezoid | `curv-trap` | Represents a display | `curved-trapezoid`, `display` |
|
||||
| **Divided Process** | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-rectangle`, `divided-process` |
|
||||
| **Extract** | Triangle | `tri` | Extraction process | `extract`, `triangle` |
|
||||
| **Internal Storage** | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` |
|
||||
| **Junction** | Filled Circle | `f-circ` | Junction point | `junction`, `filled-circle` |
|
||||
| **Lined Document** | Lined Document | `lin-doc` | Lined document | `lined-document` |
|
||||
| **Loop Limit** | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` |
|
||||
| **Manual File** | Flipped Triangle | `flip-tri` | Manual file operation | `manual-file`, `flipped-triangle` |
|
||||
| **Manual Input** | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` |
|
||||
| **Multi-Document** | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` |
|
||||
| **Multi-Process** | Stacked Rectangle | `st-rect` | Multiple processes | `procs`, `processes`, `stacked-rectangle` |
|
||||
| **Paper Tape** | Flag | `flag` | Paper tape | `paper-tape` |
|
||||
| **Stored Data** | Bow Tie Rectangle | `bow-rect` | Stored data | `stored-data`, `bow-tie-rectangle` |
|
||||
| **Summary** | Crossed Circle | `cross-circ` | Summary | `summary`, `crossed-circle` |
|
||||
| **Tagged Document** | Tagged Document | `tag-doc` | Tagged document | `tag-doc`, `tagged-document` |
|
||||
| **Tagged Process** | Tagged Rectangle | `tag-rect` | Tagged process | `tagged-rectangle`,`tag-proc`, `tagged-process` |
|
||||
| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
|
||||
| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
|
||||
| Card | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` |
|
||||
| Collate | Hourglass | `hourglass` | Represents a collate operation | `collate`, `hourglass` |
|
||||
| Com Link | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
|
||||
| Comment | Curly Brace | `brace` | Adds a comment | `brace-l`, `comment` |
|
||||
| Comment Right | Curly Brace | `brace-r` | Adds a comment | |
|
||||
| Comment with braces on both sides | Curly Braces | `braces` | Adds a comment | |
|
||||
| Data Input/Output | Lean Right | `lean-r` | Represents input or output | `in-out`, `lean-right` |
|
||||
| Data Input/Output | Lean Left | `lean-l` | Represents output or input | `lean-left`, `out-in` |
|
||||
| Database | Cylinder | `cyl` | Database storage | `cylinder`, `database`, `db` |
|
||||
| Decision | Diamond | `diam` | Decision-making step | `decision`, `diamond`, `question` |
|
||||
| Delay | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rectangle` |
|
||||
| Direct Access Storage | Horizontal Cylinder | `h-cyl` | Direct access storage | `das`, `horizontal-cylinder` |
|
||||
| Disk Storage | Lined Cylinder | `lin-cyl` | Disk storage | `disk`, `lined-cylinder` |
|
||||
| Display | Curved Trapezoid | `curv-trap` | Represents a display | `curved-trapezoid`, `display` |
|
||||
| Divided Process | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-process`, `divided-rectangle` |
|
||||
| Document | Document | `doc` | Represents a document | `doc`, `document` |
|
||||
| Event | Rounded Rectangle | `rounded` | Represents an event | `event` |
|
||||
| Extract | Triangle | `tri` | Extraction process | `extract`, `triangle` |
|
||||
| Fork/Join | Filled Rectangle | `fork` | Fork or join in process flow | `join` |
|
||||
| Internal Storage | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` |
|
||||
| Junction | Filled Circle | `f-circ` | Junction point | `filled-circle`, `junction` |
|
||||
| Kanban Item | Kanban Item | `kanbanItem` | Item on a kanban board | `kanban-item` |
|
||||
| Lined Document | Lined Document | `lin-doc` | Lined document | `lined-document` |
|
||||
| Lined/Shaded Process | Lined Rectangle | `lin-rect` | Lined process shape | `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` |
|
||||
| Loop Limit | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` |
|
||||
| Manual File | Flipped Triangle | `flip-tri` | Manual file operation | `flipped-triangle`, `manual-file` |
|
||||
| Manual Input | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` |
|
||||
| Manual Operation | Trapezoid Base Top | `trap-t` | Represents a manual task | `inv-trapezoid`, `manual`, `trapezoid-top` |
|
||||
| Multi-Document | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` |
|
||||
| Multi-Process | Stacked Rectangle | `st-rect` | Multiple processes | `processes`, `procs`, `stacked-rectangle` |
|
||||
| Odd | Odd | `odd` | Odd shape | |
|
||||
| Paper Tape | Flag | `flag` | Paper tape | `paper-tape` |
|
||||
| Prepare Conditional | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` |
|
||||
| Priority Action | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid`, `trapezoid-bottom` |
|
||||
| Process | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` |
|
||||
| Start | Circle | `circle` | Starting point | `circ` |
|
||||
| Start | Small Circle | `sm-circ` | Small starting point | `small-circle`, `start` |
|
||||
| Stop | Double Circle | `dbl-circ` | Represents a stop point | `double-circle` |
|
||||
| Stop | Framed Circle | `fr-circ` | Stop point | `framed-circle`, `stop` |
|
||||
| Stored Data | Bow Tie Rectangle | `bow-rect` | Stored data | `bow-tie-rectangle`, `stored-data` |
|
||||
| Subprocess | Framed Rectangle | `fr-rect` | Subprocess | `framed-rectangle`, `subproc`, `subprocess`, `subroutine` |
|
||||
| Summary | Crossed Circle | `cross-circ` | Summary | `crossed-circle`, `summary` |
|
||||
| Tagged Document | Tagged Document | `tag-doc` | Tagged document | `tag-doc`, `tagged-document` |
|
||||
| Tagged Process | Tagged Rectangle | `tag-rect` | Tagged process | `tag-proc`, `tagged-process`, `tagged-rectangle` |
|
||||
| Terminal Point | Stadium | `stadium` | Terminal point | `pill`, `terminal` |
|
||||
| Text Block | Text Block | `text` | Text block | |
|
||||
|
||||
### Example Flowchart with New Shapes
|
||||
|
||||
@@ -926,6 +927,66 @@ flowchart TD
|
||||
A@{ shape: tag-rect, label: "Tagged process" }
|
||||
```
|
||||
|
||||
## Special shapes in Mermaid Flowcharts (v11.3.0+)
|
||||
|
||||
Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** and **image**. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity.
|
||||
|
||||
### Icon Shape
|
||||
|
||||
You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](../config/icons.md). The syntax for defining an icon shape is as follows:
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
- **icon**: The name of the icon from the registered icon pack.
|
||||
- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:
|
||||
- `square`
|
||||
- `circle`
|
||||
- `rounded`
|
||||
- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.
|
||||
- **pos**: The position of the label. If not defined label will default to bottom of icon. Possible values are:
|
||||
- `t`
|
||||
- `b`
|
||||
- **h**: The height of the icon. If not defined this will default to 48 which is minimum.
|
||||
|
||||
### Image Shape
|
||||
|
||||
You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
- **img**: The URL of the image to be displayed.
|
||||
- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed.
|
||||
- **pos**: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are:
|
||||
- `t`
|
||||
- `b`
|
||||
- **w**: The width of the image. If not defined, this will default to the natural width of the image.
|
||||
- **h**: The height of the image. If not defined, this will default to the natural height of the image.
|
||||
- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are:
|
||||
- `on`
|
||||
- `off`
|
||||
|
||||
These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging.
|
||||
|
||||
## Links between nodes
|
||||
|
||||
Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
|
||||
|
||||
Reference in New Issue
Block a user