mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-18 23:09:49 +02:00
Merge branch 'develop' into patch-2
This commit is contained in:
Alois Klink
@@ -79,15 +79,15 @@ service {service id}({icon name})[{title}] (in {parent id})?
|
||||
Put together:
|
||||
|
||||
```
|
||||
service database(db)[Database]
|
||||
service database1(database)[My Database]
|
||||
```
|
||||
|
||||
creates the service identified as `database`, using the icon `db`, with the label `Database`.
|
||||
creates the service identified as `database1`, using the icon `database`, with the label `My Database`.
|
||||
|
||||
If the service belongs to a group, it can be placed inside it through the optional `in` keyword
|
||||
|
||||
```
|
||||
service database(db)[Database] in private_api
|
||||
service database1(database)[My Database] in private_api
|
||||
```
|
||||
|
||||
### Edges
|
||||
@@ -194,55 +194,7 @@ architecture-beta
|
||||
## Icons
|
||||
|
||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below.
|
||||
|
||||
The icon packs available can be found at [icones.js.org](https://icones.js.org/).
|
||||
We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.
|
||||
|
||||
Using JSON file directly from CDN:
|
||||
|
||||
```js
|
||||
import mermaid from 'CDN/mermaid.esm.mjs';
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
Using packages and a bundler:
|
||||
|
||||
```bash
|
||||
npm install @iconify-json/logos
|
||||
```
|
||||
|
||||
With lazy loading
|
||||
|
||||
```js
|
||||
import mermaid from 'mermaid';
|
||||
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () => import('@iconify-json/logos').then((module) => module.icons),
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
Without lazy loading
|
||||
|
||||
```js
|
||||
import mermaid from 'mermaid';
|
||||
import { icons } from '@iconify-json/logos';
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: icons.prefix, // To use the prefix defined in the icon pack
|
||||
icons,
|
||||
},
|
||||
]);
|
||||
```
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](../config/icons.md).
|
||||
|
||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||
|
||||
|
||||
@@ -298,6 +298,694 @@ flowchart TD
|
||||
id1(((This is the text in the circle)))
|
||||
```
|
||||
|
||||
## Expanded Node Shapes in Mermaid Flowcharts (v11.3.0+)
|
||||
|
||||
Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.
|
||||
|
||||
New Syntax for Shape Definition
|
||||
|
||||
Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
|
||||
|
||||
```
|
||||
A@{ shape: rect }
|
||||
```
|
||||
|
||||
This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
|
||||
|
||||
### Complete List of New Shapes
|
||||
|
||||
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** |
|
||||
| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
|
||||
| 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` |
|
||||
| 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
|
||||
|
||||
Here’s an example flowchart that utilizes some of the newly introduced shapes:
|
||||
|
||||
```mermaid-example
|
||||
flowchart RL
|
||||
A@{ shape: manual-file, label: "File Handling"}
|
||||
B@{ shape: manual-input, label: "User Input"}
|
||||
C@{ shape: docs, label: "Multiple Documents"}
|
||||
D@{ shape: procs, label: "Process Automation"}
|
||||
E@{ shape: paper-tape, label: "Paper Records"}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart RL
|
||||
A@{ shape: manual-file, label: "File Handling"}
|
||||
B@{ shape: manual-input, label: "User Input"}
|
||||
C@{ shape: docs, label: "Multiple Documents"}
|
||||
D@{ shape: procs, label: "Process Automation"}
|
||||
E@{ shape: paper-tape, label: "Paper Records"}
|
||||
```
|
||||
|
||||
### Process
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: rect, label: "This is a process" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: rect, label: "This is a process" }
|
||||
```
|
||||
|
||||
### Event
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: rounded, label: "This is an event" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: rounded, label: "This is an event" }
|
||||
```
|
||||
|
||||
### Terminal Point (Stadium)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: stadium, label: "Terminal point" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: stadium, label: "Terminal point" }
|
||||
```
|
||||
|
||||
### Subprocess
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: subproc, label: "This is a subprocess" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: subproc, label: "This is a subprocess" }
|
||||
```
|
||||
|
||||
### Database (Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: cyl, label: "Database" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: cyl, label: "Database" }
|
||||
```
|
||||
|
||||
### Start (Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: circle, label: "Start" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: circle, label: "Start" }
|
||||
```
|
||||
|
||||
### Odd
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: odd, label: "Odd shape" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: odd, label: "Odd shape" }
|
||||
```
|
||||
|
||||
### Decision (Diamond)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: diamond, label: "Decision" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: diamond, label: "Decision" }
|
||||
```
|
||||
|
||||
### Prepare Conditional (Hexagon)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: hex, label: "Prepare conditional" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: hex, label: "Prepare conditional" }
|
||||
```
|
||||
|
||||
### Data Input/Output (Lean Right)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lean-r, label: "Input/Output" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: lean-r, label: "Input/Output" }
|
||||
```
|
||||
|
||||
### Data Input/Output (Lean Left)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lean-l, label: "Output/Input" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: lean-l, label: "Output/Input" }
|
||||
```
|
||||
|
||||
### Priority Action (Trapezoid Base Bottom)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: trap-b, label: "Priority action" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: trap-b, label: "Priority action" }
|
||||
```
|
||||
|
||||
### Manual Operation (Trapezoid Base Top)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: trap-t, label: "Manual operation" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: trap-t, label: "Manual operation" }
|
||||
```
|
||||
|
||||
### Stop (Double Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: dbl-circ, label: "Stop" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: dbl-circ, label: "Stop" }
|
||||
```
|
||||
|
||||
### Text Block
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: text, label: "This is a text block" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: text, label: "This is a text block" }
|
||||
```
|
||||
|
||||
### Card (Notched Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: notch-rect, label: "Card" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: notch-rect, label: "Card" }
|
||||
```
|
||||
|
||||
### Lined/Shaded Process
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lin-rect, label: "Lined process" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: lin-rect, label: "Lined process" }
|
||||
```
|
||||
|
||||
### Start (Small Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: sm-circ, label: "Small start" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: sm-circ, label: "Small start" }
|
||||
```
|
||||
|
||||
### Stop (Framed Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: framed-circle, label: "Stop" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: framed-circle, label: "Stop" }
|
||||
```
|
||||
|
||||
### Fork/Join (Long Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: fork, label: "Fork or Join" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: fork, label: "Fork or Join" }
|
||||
```
|
||||
|
||||
### Collate (Hourglass)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: hourglass, label: "Collate" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: hourglass, label: "Collate" }
|
||||
```
|
||||
|
||||
### Comment (Curly Brace)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: comment, label: "Comment" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
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)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: bolt, label: "Communication link" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: bolt, label: "Communication link" }
|
||||
```
|
||||
|
||||
### Document
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: doc, label: "Document" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: doc, label: "Document" }
|
||||
```
|
||||
|
||||
### Delay (Half-Rounded Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: delay, label: "Delay" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: delay, label: "Delay" }
|
||||
```
|
||||
|
||||
### Direct Access Storage (Horizontal Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: das, label: "Direct access storage" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: das, label: "Direct access storage" }
|
||||
```
|
||||
|
||||
### Disk Storage (Lined Cylinder)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lin-cyl, label: "Disk storage" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: lin-cyl, label: "Disk storage" }
|
||||
```
|
||||
|
||||
### Display (Curved Trapezoid)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: curv-trap, label: "Display" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: curv-trap, label: "Display" }
|
||||
```
|
||||
|
||||
### Divided Process (Divided Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: div-rect, label: "Divided process" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: div-rect, label: "Divided process" }
|
||||
```
|
||||
|
||||
### Extract (Small Triangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: tri, label: "Extract" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: tri, label: "Extract" }
|
||||
```
|
||||
|
||||
### Internal Storage (Window Pane)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: win-pane, label: "Internal storage" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: win-pane, label: "Internal storage" }
|
||||
```
|
||||
|
||||
### Junction (Filled Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: f-circ, label: "Junction" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: f-circ, label: "Junction" }
|
||||
```
|
||||
|
||||
### Lined Document
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: lin-doc, label: "Lined document" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: lin-doc, label: "Lined document" }
|
||||
```
|
||||
|
||||
### Loop Limit (Notched Pentagon)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: notch-pent, label: "Loop limit" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: notch-pent, label: "Loop limit" }
|
||||
```
|
||||
|
||||
### Manual File (Flipped Triangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: flip-tri, label: "Manual file" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: flip-tri, label: "Manual file" }
|
||||
```
|
||||
|
||||
### Manual Input (Sloped Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: sl-rect, label: "Manual input" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: sl-rect, label: "Manual input" }
|
||||
```
|
||||
|
||||
### Multi-Document (Stacked Document)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: docs, label: "Multiple documents" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: docs, label: "Multiple documents" }
|
||||
```
|
||||
|
||||
### Multi-Process (Stacked Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: processes, label: "Multiple processes" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: processes, label: "Multiple processes" }
|
||||
```
|
||||
|
||||
### Paper Tape (Flag)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: flag, label: "Paper tape" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: flag, label: "Paper tape" }
|
||||
```
|
||||
|
||||
### Stored Data (Bow Tie Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: bow-rect, label: "Stored data" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: bow-rect, label: "Stored data" }
|
||||
```
|
||||
|
||||
### Summary (Crossed Circle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: cross-circ, label: "Summary" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: cross-circ, label: "Summary" }
|
||||
```
|
||||
|
||||
### Tagged Document
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: tag-doc, label: "Tagged document" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A@{ shape: tag-doc, label: "Tagged document" }
|
||||
```
|
||||
|
||||
### Tagged Process (Tagged Rectangle)
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
A@{ shape: tag-rect, label: "Tagged process" }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
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