mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-01 18:14:06 +01:00
Merge branch 'develop' into update-er-diagram
This commit is contained in:
Yari DeWalt
233
docs/adding-new-shape.md
Normal file
233
docs/adding-new-shape.md
Normal file
@@ -0,0 +1,233 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/adding-new-shape.md](../packages/mermaid/src/docs/adding-new-shape.md).
|
||||
|
||||
# Custom SVG Shapes Library
|
||||
|
||||
This library provides a collection of custom SVG shapes, utilities, and helpers for generating diagram components. The shapes are designed to be used within an SVG container and include a variety of common and complex shapes.
|
||||
|
||||
## Overview
|
||||
|
||||
## Shape Helpers and Utilities
|
||||
|
||||
Before starting with shape creation, it's essential to familiarize yourself with the utilities provided in the `utils.ts` file from `packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js`. These utilities are designed to assist with various aspects of SVG shape manipulation and ensure consistent and accurate rendering.
|
||||
|
||||
## Available Utilities
|
||||
|
||||
### 1. `labelHelper`
|
||||
|
||||
- **Purpose**: This function creates and inserts labels inside SVG shapes.
|
||||
- **Features**:
|
||||
- Handles both HTML labels and plain text.
|
||||
- Calculates the bounding box dimensions of the label.
|
||||
- Ensures proper positioning of labels within shapes.
|
||||
|
||||
### 2. `updateNodeBounds`
|
||||
|
||||
- **Purpose**: Updates the bounding box dimensions (width and height) of a node.
|
||||
- **Usage**:
|
||||
- Adjusts the size of the node to fit the content or shape.
|
||||
- Useful for ensuring that shapes resize appropriately based on their content.
|
||||
|
||||
### 3. `insertPolygonShape`
|
||||
|
||||
- **Purpose**: Inserts a polygon shape into an SVG container.
|
||||
- **Features**:
|
||||
- Handles the creation and insertion of complex polygonal shapes.
|
||||
- Configures the shape's appearance and positioning within the SVG container.
|
||||
|
||||
### 4. `getNodeClasses`
|
||||
|
||||
- **Purpose**: Returns the appropriate CSS classes for a node based on its configuration.
|
||||
- **Usage**:
|
||||
- Dynamically applies CSS classes to nodes for styling purposes.
|
||||
- Ensures that nodes adhere to the desired design and theme.
|
||||
|
||||
### 5. `createPathFromPoints`
|
||||
|
||||
- **Purpose**: Generates an SVG path string from an array of points.
|
||||
- **Usage**:
|
||||
- Converts a list of points into a smooth path.
|
||||
- Useful for creating custom shapes or paths within the SVG.
|
||||
|
||||
### 6. `generateFullSineWavePoints`
|
||||
|
||||
- **Purpose**: Generates points for a sine wave, useful for creating wavy-edged shapes.
|
||||
- **Usage**:
|
||||
- Facilitates the creation of shapes with wavy or sine-wave edges.
|
||||
- Can be used to add decorative or dynamic edges to shapes.
|
||||
|
||||
## Getting Started
|
||||
|
||||
To utilize these utilities, simply import them from the `utils.ts` file into your shape creation script. These helpers will streamline the process of building and customizing SVG shapes, ensuring consistent results across your projects.
|
||||
|
||||
```typescript
|
||||
import {
|
||||
labelHelper,
|
||||
updateNodeBounds,
|
||||
insertPolygonShape,
|
||||
getNodeClasses,
|
||||
createPathFromPoints,
|
||||
generateFullSineWavePoints,
|
||||
} from './utils.ts';
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
Here’s a basic example of how you might use some of these utilities:
|
||||
|
||||
```typescript
|
||||
import { labelHelper, insertPolygonShape } from './utils.ts';
|
||||
|
||||
const svgContainer = document.getElementById('svgContainer');
|
||||
|
||||
// Insert a polygon shape
|
||||
insertPolygonShape(svgContainer /* shape-specific parameters */);
|
||||
|
||||
// Create and insert a label inside the shape
|
||||
labelHelper(svgContainer /* label-specific parameters */);
|
||||
```
|
||||
|
||||
## Adding New Shapes
|
||||
|
||||
### 1. Create the Shape Function
|
||||
|
||||
To add a new shape:
|
||||
|
||||
- **Create the shape function**: Create a new file of name of the shape and export a function in the `shapes` directory that generates your shape. The file and function should follow the pattern used in existing shapes and return an SVG element.
|
||||
|
||||
- **Example**:
|
||||
|
||||
```typescript
|
||||
import { Node, RenderOptions } from '../../types.ts';
|
||||
|
||||
export const myNewShape = async (
|
||||
parent: SVGAElement,
|
||||
node: Node,
|
||||
renderOptions: RenderOptions
|
||||
) => {
|
||||
// Create your shape here
|
||||
const shape = parent.insert('g').attr('class', 'my-new-shape');
|
||||
// Add other elements or styles as needed
|
||||
return shape;
|
||||
};
|
||||
```
|
||||
|
||||
### 2. Register the Shape
|
||||
|
||||
- **Register the shape**: Add your shape to the `shapes` object in the [main shapes module](../rendering-util/rendering-elements/shapes.ts). This allows your shape to be recognized and used within the system.
|
||||
|
||||
- **Example**:
|
||||
|
||||
```typescript
|
||||
import { myNewShape } from './shapes/myNewShape';
|
||||
|
||||
const shapes = {
|
||||
...,
|
||||
{
|
||||
semanticName: 'My Shape',
|
||||
name: 'Shape Name',
|
||||
shortName: '<short-name>',
|
||||
description: '<Description for the shape>',
|
||||
aliases: ['<alias-one>', '<al-on>', '<alias-two>', '<al-two>'],
|
||||
handler: myNewShape,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
# Shape Intersection Algorithms
|
||||
|
||||
This contains algorithms and utilities for calculating intersection points for various shapes in SVG. Arrow intersection points are crucial for accurately determining where arrows connect with shapes. Ensuring precise intersection points enhances the clarity and accuracy of flowcharts and diagrams.
|
||||
|
||||
## Shape Intersection Functions
|
||||
|
||||
### 1. `Ellipse`
|
||||
|
||||
Calculates the intersection points for an ellipse.
|
||||
|
||||
**Usage**:
|
||||
|
||||
```javascript
|
||||
import intersectEllipse from './intersect-ellipse.js';
|
||||
|
||||
const intersection = intersectEllipse(node, rx, ry, point);
|
||||
```
|
||||
|
||||
- **Parameters**:
|
||||
- `node`: The SVG node element.
|
||||
- `rx`: The x-radius of the ellipse.
|
||||
- `ry`: The y-radius of the ellipse.
|
||||
- `point`: The point from which the intersection is calculated.
|
||||
|
||||
### 2. `intersectRect`
|
||||
|
||||
Calculates the intersection points for a rectangle.
|
||||
|
||||
**Usage**:
|
||||
|
||||
```javascript
|
||||
import intersectRect from './intersect-rect.js';
|
||||
|
||||
const intersection = intersectRect(node, point);
|
||||
```
|
||||
|
||||
- **Parameters**:
|
||||
- `node`: The SVG node element.
|
||||
- `point`: The point from which the intersection is calculated.
|
||||
|
||||
### 3. `intersectPolygon`
|
||||
|
||||
Calculates the intersection points for a polygon.
|
||||
|
||||
**Usage**:
|
||||
|
||||
```javascript
|
||||
import intersectPolygon from './intersect-polygon.js';
|
||||
|
||||
const intersection = intersectPolygon(node, polyPoints, point);
|
||||
```
|
||||
|
||||
- **Parameters**:
|
||||
- `node`: The SVG node element.
|
||||
- `polyPoints`: Array of points defining the polygon.
|
||||
- `point`: The point from which the intersection is calculated.
|
||||
|
||||
## Cypress Tests
|
||||
|
||||
To ensure the robustness of the flowchart shapes, there are implementation of comprehensive Cypress test cases in `newShapes.spec.ts` file. These tests cover various aspects such as:
|
||||
|
||||
- **Shapes**: Testing new shapes like `bowTieRect`, `waveRectangle`, `trapezoidalPentagon`, etc.
|
||||
- **Looks**: Verifying shapes under different visual styles (`classic` and `handDrawn`).
|
||||
- **Directions**: Ensuring correct rendering in all flow directions of arrows :
|
||||
- `TB` `(Top -> Bottom)`
|
||||
- `BT` `(Bottom -> Top)`
|
||||
- `LR` `(Left -> Right)`
|
||||
- `RL` `(Right -> Left)`
|
||||
- **Labels**: Testing shapes with different labels, including:
|
||||
- No labels
|
||||
- Short labels
|
||||
- Very long labels
|
||||
- Markdown with `htmlLabels:true` and `htmlLabels:false`
|
||||
- **Styles**: Applying custom styles to shapes and verifying correct rendering.
|
||||
- **Class Definitions**: Using `classDef` to apply custom classes and testing their impact.
|
||||
|
||||
### Running the Tests
|
||||
|
||||
To run the Cypress tests, follow these steps:
|
||||
|
||||
1. Ensure you have all dependencies installed by running:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
2. Start the Cypress test runner:
|
||||
|
||||
```bash
|
||||
cypress open --env updateSnapshots=true
|
||||
|
||||
```
|
||||
|
||||
3. Select the test suite from the Cypress interface to run all the flowchart shape tests.
|
||||
55
docs/config/icons.md
Normal file
55
docs/config/icons.md
Normal file
@@ -0,0 +1,55 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/icons.md](../../packages/mermaid/src/docs/config/icons.md).
|
||||
|
||||
# Registering icon pack in mermaid
|
||||
|
||||
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@1/icons.json').then((res) => res.json()),
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
Using packages and a bundler:
|
||||
|
||||
```bash
|
||||
npm install @iconify-json/logos@1
|
||||
```
|
||||
|
||||
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,
|
||||
},
|
||||
]);
|
||||
```
|
||||
@@ -127,7 +127,7 @@ Error.prepareStackTrace
|
||||
|
||||
#### Defined in
|
||||
|
||||
node_modules/.pnpm/@types+node\@20.16.2/node_modules/@types/node/globals.d.ts:28
|
||||
node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:98
|
||||
|
||||
---
|
||||
|
||||
@@ -141,7 +141,7 @@ Error.stackTraceLimit
|
||||
|
||||
#### Defined in
|
||||
|
||||
node_modules/.pnpm/@types+node\@20.16.2/node_modules/@types/node/globals.d.ts:30
|
||||
node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:100
|
||||
|
||||
## Methods
|
||||
|
||||
@@ -168,4 +168,4 @@ Error.captureStackTrace
|
||||
|
||||
#### Defined in
|
||||
|
||||
node_modules/.pnpm/@types+node\@20.16.2/node_modules/@types/node/globals.d.ts:21
|
||||
node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:91
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/types.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L117)
|
||||
[packages/mermaid/src/rendering-util/types.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L125)
|
||||
|
||||
---
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L116)
|
||||
[packages/mermaid/src/rendering-util/types.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L124)
|
||||
|
||||
---
|
||||
|
||||
@@ -40,4 +40,4 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L115)
|
||||
[packages/mermaid/src/rendering-util/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L123)
|
||||
|
||||
@@ -19,4 +19,4 @@ The `parseError` function will not be called.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/types.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L45)
|
||||
[packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56)
|
||||
|
||||
@@ -18,7 +18,7 @@ The config passed as YAML frontmatter or directives
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56)
|
||||
[packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
|
||||
|
||||
---
|
||||
|
||||
@@ -30,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/types.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L52)
|
||||
[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
|
||||
|
||||
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/types.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L79)
|
||||
[packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90)
|
||||
|
||||
---
|
||||
|
||||
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/types.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L69)
|
||||
[packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
|
||||
|
||||
---
|
||||
|
||||
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/types.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L65)
|
||||
[packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
|
||||
[packages/mermaid/src/defaultConfig.ts:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L267)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -64,7 +64,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
|
||||
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
|
||||
- [Mermerd](https://github.com/KarnerTh/mermerd)
|
||||
- [Slab](https://slab.com) ✅
|
||||
- [Swimm](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-) ✅
|
||||
- [Swimm](https://docs.swimm.io/features/diagrams-and-charts) ✅
|
||||
- [NotesHub](https://noteshub.app) ✅
|
||||
- [Notion](https://notion.so) ✅
|
||||
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
|
||||
|
||||
@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
||||
|
||||
<br />
|
||||
|
||||
<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
<a href="https://www.producthunt.com/posts/mermaid-whiteboard?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-whiteboard" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=486720&theme=light" alt="Mermaid Whiteboard - Drag & Drop your Nodes with Mermaid's new Whiteboard! | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
|
||||
## About
|
||||
|
||||
@@ -22,17 +22,20 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
||||
|
||||
- **Editor** - A web based editor for creating and editing Mermaid diagrams.
|
||||
|
||||
- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
|
||||
- **Mermaid AI** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
|
||||
|
||||
- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
|
||||
- **Whiteboard** - A virtual whiteboard for creating and editing Mermaid diagrams.
|
||||
|
||||
- **Plugins** - A plugin system for extending the functionality of Mermaid.
|
||||
|
||||
Official Mermaid Chart plugins:
|
||||
|
||||
- [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
|
||||
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
|
||||
- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
|
||||
- [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
|
||||
- [Google Docs](https://gsuite.google.com/marketplace/app/mermaidchart/947683068472)
|
||||
- [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
|
||||
|
||||
Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
|
||||
|
||||
@@ -6,6 +6,12 @@
|
||||
|
||||
# Blog
|
||||
|
||||
## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://www.mermaidchart.com/blog/posts/new-mermaid-flowchart-shapes/)
|
||||
|
||||
24 September 2024 · 5 mins
|
||||
|
||||
Discover 30 new shapes in Mermaid flowcharts, offering enhanced clarity, customization, and versatility for more dynamic and expressive visualizations.
|
||||
|
||||
## [Introducing Architecture Diagrams in Mermaid](https://www.mermaidchart.com/blog/posts/mermaid-supports-architecture-diagrams/)
|
||||
|
||||
2 September 2024 · 2 mins
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -211,6 +211,27 @@ block-beta
|
||||
|
||||
This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams.
|
||||
|
||||
**Merging Blocks Horizontally:**
|
||||
In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
|
||||
|
||||
```mermaid-example
|
||||
block-beta
|
||||
block
|
||||
columns 1
|
||||
a["A label"] b c d
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block-beta
|
||||
block
|
||||
columns 1
|
||||
a["A label"] b c d
|
||||
end
|
||||
```
|
||||
|
||||
In this example, the width of the merged block dynamically adjusts to the width of the largest child block.
|
||||
|
||||
With these advanced configuration options, Mermaid's block diagrams can be tailored to represent a wide array of complex systems and structures. The flexibility offered by these features enables users to create diagrams that are both informative and visually appealing. In the following sections, we will explore further capabilities, including different block shapes and linking options.
|
||||
|
||||
## 4. Block Varieties and Shapes
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -155,6 +155,9 @@ end
|
||||
box rgb(33,66,99)
|
||||
... actors ...
|
||||
end
|
||||
box rgba(33,66,99,0.5)
|
||||
... actors ...
|
||||
end
|
||||
```
|
||||
|
||||
> **Note**
|
||||
@@ -580,6 +583,12 @@ sequenceDiagram
|
||||
|
||||
It is possible to highlight flows by providing colored background rects. This is done by the notation
|
||||
|
||||
```
|
||||
rect COLOR
|
||||
... content ...
|
||||
end
|
||||
```
|
||||
|
||||
The colors are defined using rgb and rgba syntax.
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user