From 0cbc000bfa1c0fdb4ef2822c2112317faba44005 Mon Sep 17 00:00:00 2001 From: Michael Vorburger Date: Thu, 3 Oct 2024 10:47:31 +0200 Subject: [PATCH 01/16] docs: Fix inconsistency in Block Diagram doc example --- packages/mermaid/src/docs/syntax/block.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index b281a8b19..5b8aa1c99 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/packages/mermaid/src/docs/syntax/block.md @@ -106,7 +106,7 @@ block-beta a["A label"] b:2 c:2 d ``` -In this example, the block labeled "A wide one" spans two columns, while blocks 'b', 'c', and 'd' are allocated their own columns. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size. +In this example, the block labeled "A labels" spans one column, while blocks 'b', 'c' span 2 columns, and 'd' is again allocated its own column. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size. ### Creating Composite Blocks From 719685b930136051b2b5b2cde97207e2ce4f0d7f Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 3 Oct 2024 08:54:12 +0000 Subject: [PATCH 02/16] [autofix.ci] apply automated fixes --- docs/syntax/block.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/syntax/block.md b/docs/syntax/block.md index d11d2285c..7048ef352 100644 --- a/docs/syntax/block.md +++ b/docs/syntax/block.md @@ -141,7 +141,7 @@ block-beta a["A label"] b:2 c:2 d ``` -In this example, the block labeled "A wide one" spans two columns, while blocks 'b', 'c', and 'd' are allocated their own columns. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size. +In this example, the block labeled "A labels" spans one column, while blocks 'b', 'c' span 2 columns, and 'd' is again allocated its own column. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size. ### Creating Composite Blocks From 09ecf76034de18edb83f25ff9fdb2c461296dab9 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Wed, 9 Oct 2024 15:34:12 +0530 Subject: [PATCH 03/16] Updated doc for image and icon shapes --- docs/syntax/flowchart.md | 60 +++++++++++++++++++ packages/mermaid/src/docs/syntax/flowchart.md | 50 ++++++++++++++++ 2 files changed, 110 insertions(+) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 8f8b54e21..ea1db9c03 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -926,6 +926,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](https://mermaid.js.org/syntax/architecture.html#icons). 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. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 86347bd80..1b8cfffc1 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -542,6 +542,56 @@ 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](https://mermaid.js.org/syntax/architecture.html#icons). 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 } +``` + +### 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" } +``` + +### 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. From 9f6f1e96e50b3589a73adfd37d5a1eb35579bba4 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Thu, 10 Oct 2024 13:11:54 +0530 Subject: [PATCH 04/16] Added new doc for registering icon pack in mermaid --- docs/config/icons.md | 55 +++++++++++++++++++ docs/syntax/architecture.md | 50 +---------------- docs/syntax/flowchart.md | 2 +- .../mermaid/src/docs/.vitepress/config.ts | 1 + packages/mermaid/src/docs/config/icons.md | 49 +++++++++++++++++ .../mermaid/src/docs/syntax/architecture.md | 50 +---------------- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 7 files changed, 109 insertions(+), 100 deletions(-) create mode 100644 docs/config/icons.md create mode 100644 packages/mermaid/src/docs/config/icons.md diff --git a/docs/config/icons.md b/docs/config/icons.md new file mode 100644 index 000000000..ef0812b50 --- /dev/null +++ b/docs/config/icons.md @@ -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/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, + }, +]); +``` diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index 12a7cf409..f24c5d607 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -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](https://mermaid.js.org/config/icons.html). 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. diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index ea1db9c03..dd7be9207 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -932,7 +932,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an ### 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](https://mermaid.js.org/syntax/architecture.html#icons). The syntax for defining an icon shape is as follows: +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](https://mermaid.js.org/config/icons.html). The syntax for defining an icon shape is as follows: ```mermaid-example flowchart TD diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 619de961d..23d8a21bb 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -180,6 +180,7 @@ function sidebarConfig() { { text: 'Accessibility', link: '/config/accessibility' }, { text: 'Mermaid CLI', link: '/config/mermaidCLI' }, { text: 'FAQ', link: '/config/faq' }, + { text: 'Registering icons', link: '/config/icons' }, ], }, ]; diff --git a/packages/mermaid/src/docs/config/icons.md b/packages/mermaid/src/docs/config/icons.md new file mode 100644 index 000000000..d5d296281 --- /dev/null +++ b/packages/mermaid/src/docs/config/icons.md @@ -0,0 +1,49 @@ +# 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/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, + }, +]); +``` diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index 476c60532..53da754c9 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -156,55 +156,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](https://mermaid.js.org/config/icons.html). 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. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 1b8cfffc1..b48b8fb4c 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -548,7 +548,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an ### 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](https://mermaid.js.org/syntax/architecture.html#icons). The syntax for defining an icon shape is as follows: +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](https://mermaid.js.org/config/icons.html). The syntax for defining an icon shape is as follows: ```mermaid-example flowchart TD From ca885027d4309f52af28d15402b662e3edfa2d83 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Thu, 10 Oct 2024 14:15:16 +0530 Subject: [PATCH 05/16] Moved position for icon config and added major version in icon docs --- docs/config/icons.md | 4 ++-- packages/mermaid/src/docs/.vitepress/config.ts | 2 +- packages/mermaid/src/docs/config/icons.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/config/icons.md b/docs/config/icons.md index ef0812b50..729afa1d5 100644 --- a/docs/config/icons.md +++ b/docs/config/icons.md @@ -17,7 +17,7 @@ mermaid.registerIconPacks([ { name: 'logos', loader: () => - fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), }, ]); ``` @@ -25,7 +25,7 @@ mermaid.registerIconPacks([ Using packages and a bundler: ```bash -npm install @iconify-json/logos +npm install @iconify-json/logos@1 ``` With lazy loading diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 23d8a21bb..4dec8231f 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -174,13 +174,13 @@ function sidebarConfig() { { text: 'API-Usage', link: '/config/usage' }, { text: 'Mermaid API Configuration', link: '/config/setup/README' }, { text: 'Mermaid Configuration Options', link: '/config/schema-docs/config' }, + { text: 'Registering icons', link: '/config/icons' }, { text: 'Directives', link: '/config/directives' }, { text: 'Theming', link: '/config/theming' }, { text: 'Math', link: '/config/math' }, { text: 'Accessibility', link: '/config/accessibility' }, { text: 'Mermaid CLI', link: '/config/mermaidCLI' }, { text: 'FAQ', link: '/config/faq' }, - { text: 'Registering icons', link: '/config/icons' }, ], }, ]; diff --git a/packages/mermaid/src/docs/config/icons.md b/packages/mermaid/src/docs/config/icons.md index d5d296281..db079f841 100644 --- a/packages/mermaid/src/docs/config/icons.md +++ b/packages/mermaid/src/docs/config/icons.md @@ -11,7 +11,7 @@ mermaid.registerIconPacks([ { name: 'logos', loader: () => - fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), }, ]); ``` @@ -19,7 +19,7 @@ mermaid.registerIconPacks([ Using packages and a bundler: ```bash -npm install @iconify-json/logos +npm install @iconify-json/logos@1 ``` With lazy loading From a4fd42214b489b40769b9da1364e2513f6c774ea Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Thu, 10 Oct 2024 15:17:26 +0530 Subject: [PATCH 06/16] Use relative URL in linking docs --- docs/syntax/architecture.md | 2 +- docs/syntax/flowchart.md | 2 +- packages/mermaid/src/docs/syntax/architecture.md | 2 +- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index f24c5d607..2ac8a1ed1 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -194,7 +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 [here](https://mermaid.js.org/config/icons.html). +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. diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index dd7be9207..3837e77de 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -932,7 +932,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an ### 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](https://mermaid.js.org/config/icons.html). The syntax for defining an icon shape is as follows: +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 diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index 53da754c9..2c4de5fd9 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -156,7 +156,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 [here](https://mermaid.js.org/config/icons.html). +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. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index b48b8fb4c..829b71c2d 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -548,7 +548,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an ### 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](https://mermaid.js.org/config/icons.html). The syntax for defining an icon shape is as follows: +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 From 4f97c8c70ea8b69aaf66b4723449c2bcad7ea220 Mon Sep 17 00:00:00 2001 From: "g.bremont-ext" Date: Thu, 10 Oct 2024 16:05:36 +0200 Subject: [PATCH 07/16] docs(architecture): update icon name for database in exemple --- docs/syntax/architecture.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index 2ac8a1ed1..f0f0e9ac7 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -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 From 2655be0badb38ae155c89862b528b987644623ab Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 10 Oct 2024 14:21:46 +0000 Subject: [PATCH 08/16] [autofix.ci] apply automated fixes --- docs/syntax/architecture.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index f0f0e9ac7..2ac8a1ed1 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -79,15 +79,15 @@ service {service id}({icon name})[{title}] (in {parent id})? Put together: ``` -service database1(database)[My Database] +service database(db)[Database] ``` -creates the service identified as `database1`, using the icon `database`, with the label `My Database`. +creates the service identified as `database`, using the icon `db`, with the label `Database`. If the service belongs to a group, it can be placed inside it through the optional `in` keyword ``` -service database1(database)[My Database] in private_api +service database(db)[Database] in private_api ``` ### Edges From 2c31a599af3c826f357027530a940fd1fb3fff93 Mon Sep 17 00:00:00 2001 From: "g.bremont-ext" Date: Thu, 10 Oct 2024 16:59:46 +0200 Subject: [PATCH 09/16] docs(architecture): use right icon for database in exemple --- docs/syntax/architecture.md | 6 +++--- packages/mermaid/src/docs/syntax/architecture.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index 2ac8a1ed1..f0f0e9ac7 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -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 diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index 2c4de5fd9..3fc5629f4 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -59,15 +59,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 From 7353be3b162b95fb433ec64472286c3999ce4e57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20H=C3=BCbelbauer?= Date: Fri, 11 Oct 2024 22:21:23 +0200 Subject: [PATCH 10/16] Remove extraneous period Other cells in the table do not end with one. --- packages/mermaid/src/docs/syntax/sequenceDiagram.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 16ce8d7e2..2357b9bf4 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -155,7 +155,7 @@ There are ten types of arrows currently supported: | `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) | | `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) | | `-x` | Solid line with a cross at the end | -| `--x` | Dotted line with a cross at the end. | +| `--x` | Dotted line with a cross at the end | | `-)` | Solid line with an open arrow at the end (async) | | `--)` | Dotted line with a open arrow at the end (async) | From c69ab34eace8c31394eda0bf9c6ec76bc9eb64d8 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 11 Oct 2024 20:27:05 +0000 Subject: [PATCH 11/16] [autofix.ci] apply automated fixes --- docs/syntax/sequenceDiagram.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 181693938..84240a0cd 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -220,7 +220,7 @@ There are ten types of arrows currently supported: | `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) | | `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) | | `-x` | Solid line with a cross at the end | -| `--x` | Dotted line with a cross at the end. | +| `--x` | Dotted line with a cross at the end | | `-)` | Solid line with an open arrow at the end (async) | | `--)` | Dotted line with a open arrow at the end (async) | From 4cce43f0a13d5124f9ca8c2c1da62ecda12e087f Mon Sep 17 00:00:00 2001 From: Yihui Xie Date: Tue, 15 Oct 2024 22:45:38 -0500 Subject: [PATCH 12/16] Bullet lists should not be code blocks --- packages/mermaid/src/docs/intro/syntax-reference.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/docs/intro/syntax-reference.md b/packages/mermaid/src/docs/intro/syntax-reference.md index 7d7fd5994..14c56370a 100644 --- a/packages/mermaid/src/docs/intro/syntax-reference.md +++ b/packages/mermaid/src/docs/intro/syntax-reference.md @@ -76,8 +76,8 @@ Mermaid offers a variety of styles or “looks” for your diagrams, allowing yo **Available Looks:** - • Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams. - • Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic. +- Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams. +- Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic. **How to Select a Look:** @@ -101,8 +101,8 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y #### Supported Layout Algorithms: - • Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams. - • ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support. +- Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams. +- ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support. #### How to Select a Layout Algorithm: From e1024838e87c6e701d6546332ba451029fc40fcb Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 16 Oct 2024 03:52:48 +0000 Subject: [PATCH 13/16] [autofix.ci] apply automated fixes --- docs/intro/syntax-reference.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/intro/syntax-reference.md b/docs/intro/syntax-reference.md index f736840e6..b671aa390 100644 --- a/docs/intro/syntax-reference.md +++ b/docs/intro/syntax-reference.md @@ -94,10 +94,8 @@ Mermaid offers a variety of styles or “looks” for your diagrams, allowing yo **Available Looks:** -``` -• Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams. -• Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic. -``` +- Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams. +- Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic. **How to Select a Look:** @@ -133,10 +131,8 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y #### Supported Layout Algorithms: -``` -• Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams. -• ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support. -``` +- Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams. +- ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support. #### How to Select a Layout Algorithm: From 8aa87c7091be66c79d7e9be19965e37e5573a923 Mon Sep 17 00:00:00 2001 From: eitsupi <50911393+eitsupi@users.noreply.github.com> Date: Wed, 16 Oct 2024 21:36:26 +0900 Subject: [PATCH 14/16] docs(integrations): fix listing order --- docs/ecosystem/integrations-community.md | 12 ++++++------ .../src/docs/ecosystem/integrations-community.md | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 9b6b3ccd9..30d255e02 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -203,12 +203,17 @@ Communication tools and platforms ### Document Generation +- [Astro](https://astro.build/) + - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/) - [Codedoc](https://codedoc.cc/) - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) - [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅ - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) +- [Jekyll](https://jekyllrb.com/) + - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) + - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) - [JSDoc](https://jsdoc.app/) - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid) - [Madness](https://madness.dannyb.co/) @@ -217,7 +222,7 @@ Communication tools and platforms - [MkDocs](https://www.mkdocs.org) - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin) - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/) - - [Quarto](https://quarto.org/) +- [Quarto](https://quarto.org/) ✅ - [rehype](https://github.com/rehypejs/rehype) - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid) - [remark](https://remark.js.org/) @@ -246,17 +251,12 @@ Communication tools and platforms ### Other -- [Astro](https://astro.build/) - - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/) - [Bisheng](https://www.npmjs.com/package/bisheng) - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) - [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki) - [Codemia: A tool to practice system design problems](https://codemia.io) ✅ - [ExDoc](https://github.com/elixir-lang/ex_doc) - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs) -- [Jekyll](https://jekyllrb.com/) - - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) - [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/) - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic) - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 13473660b..5ac9819c0 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -198,12 +198,17 @@ Communication tools and platforms ### Document Generation +- [Astro](https://astro.build/) + - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/) - [Codedoc](https://codedoc.cc/) - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) - [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅ - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) +- [Jekyll](https://jekyllrb.com/) + - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) + - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) - [JSDoc](https://jsdoc.app/) - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid) - [Madness](https://madness.dannyb.co/) @@ -212,7 +217,7 @@ Communication tools and platforms - [MkDocs](https://www.mkdocs.org) - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin) - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/) - - [Quarto](https://quarto.org/) +- [Quarto](https://quarto.org/) ✅ - [rehype](https://github.com/rehypejs/rehype) - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid) - [remark](https://remark.js.org/) @@ -241,17 +246,12 @@ Communication tools and platforms ### Other -- [Astro](https://astro.build/) - - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/) - [Bisheng](https://www.npmjs.com/package/bisheng) - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) - [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki) - [Codemia: A tool to practice system design problems](https://codemia.io) ✅ - [ExDoc](https://github.com/elixir-lang/ex_doc) - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs) -- [Jekyll](https://jekyllrb.com/) - - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) - [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/) - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic) - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server) From e54d10c706e1198f0d62200210d251d2cf24c203 Mon Sep 17 00:00:00 2001 From: Gabriel Silva Date: Thu, 17 Oct 2024 10:20:38 +0200 Subject: [PATCH 15/16] docs(ecosystem): Add Zed extension zed-mermaid to community integrations --- packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 13473660b..f24b77457 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -195,6 +195,8 @@ Communication tools and platforms - [Vim](https://www.vim.org) - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) - [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid) +- [Zed](https://zed.dev) + - [zed-mermaid](https://github.com/gabeidx/zed-mermaid) ### Document Generation From 33029c8bd22512ddcdd5df798a4f841940d04dca Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 17 Oct 2024 08:31:48 +0000 Subject: [PATCH 16/16] [autofix.ci] apply automated fixes --- docs/ecosystem/integrations-community.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 9b6b3ccd9..1b23dc9d1 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -200,6 +200,8 @@ Communication tools and platforms - [Vim](https://www.vim.org) - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) - [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid) +- [Zed](https://zed.dev) + - [zed-mermaid](https://github.com/gabeidx/zed-mermaid) ### Document Generation