Merge branch 'develop' into update-class-diagram

.build/common.ts

@@ -1,3 +1,9 @@
+export interface PackageOptions {
+  name: string;
+  packageName: string;
+  file: string;
+}
+
 /**
  * Shared common options for both ESBuild and Vite
  */
@@ -27,4 +33,4 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-} as const;
+} as const satisfies Record<string, PackageOptions>;

.changeset/chilly-hotels-mix.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Jagged edge fix for icon shape

.changeset/heavy-cats-mate.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Icon color fix for colored icons.

.esbuild/build.ts

@@ -8,7 +8,10 @@ import { defaultOptions, getBuildConfig } from './util.js';
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
+  const commonOptions: MermaidBuildOptions = {
+    ...defaultOptions,
+    options: packageOptions[entryName],
+  } as const;
   const buildConfigs: MermaidBuildOptions[] = [
     // package.mjs
     { ...commonOptions },
@@ -40,7 +43,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .find((file) => !file.includes('chunks') && file.endsWith('js'))
+        .find((file) => !file.includes('chunks') && file.endsWith('js'))!
         .replace('dist/', '');
       // Upload metafile into https://esbuild.github.io/analyze/
       await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));

.esbuild/server.ts

@@ -9,13 +9,18 @@ import { generateLangium } from '../.build/generateLangium.js';
 import { defaultOptions, getBuildConfig } from './util.js';
 
 const configs = Object.values(packageOptions).map(({ packageName }) =>
-  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
+  getBuildConfig({
+    ...defaultOptions,
+    minify: false,
+    core: false,
+    options: packageOptions[packageName],
+  })
 );
 const mermaidIIFEConfig = getBuildConfig({
   ...defaultOptions,
   minify: false,
   core: false,
-  entryName: 'mermaid',
+  options: packageOptions.mermaid,
   format: 'iife',
 });
 configs.push(mermaidIIFEConfig);

.esbuild/util.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'url';
 import type { BuildOptions } from 'esbuild';
 import { readFileSync } from 'fs';
 import jsonSchemaPlugin from './jsonSchemaPlugin.js';
-import { packageOptions } from '../.build/common.js';
+import type { PackageOptions } from '../.build/common.js';
 import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -13,10 +13,10 @@ export interface MermaidBuildOptions extends BuildOptions {
   core: boolean;
   metafile: boolean;
   format: 'esm' | 'iife';
-  entryName: keyof typeof packageOptions;
+  options: PackageOptions;
 }
 
-export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
+export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = {
   minify: false,
   metafile: false,
   core: false,
@@ -52,9 +52,14 @@ const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOpt
 };
 
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
-  const { core, entryName, metafile, format, minify } = options;
+  const {
+    core,
+    metafile,
+    format,
+    minify,
+    options: { name, file, packageName },
+  } = options;
   const external: string[] = ['require', 'fs', 'path'];
-  const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
   const output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),

cypress/integration/rendering/iconShape.spec.ts

@@ -124,3 +124,20 @@ describe('Test iconShape with different h', () => {
     imgSnapshotTest(flowchartCode);
   });
 });
+
+describe('Test colored iconShape', () => {
+  it('with no styles', () => {
+    let flowchartCode = `flowchart TB\n`;
+    const icon = 'fluent-emoji:tropical-fish';
+    flowchartCode += `  nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
+    imgSnapshotTest(flowchartCode);
+  });
+
+  it('with styles', () => {
+    let flowchartCode = `flowchart TB\n`;
+    const icon = 'fluent-emoji:tropical-fish';
+    flowchartCode += `  nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
+    flowchartCode += `  style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
+    imgSnapshotTest(flowchartCode);
+  });
+});

cypress/platform/viewer.js

@@ -61,11 +61,48 @@ const contentLoaded = async function () {
       width: 512,
       height: 512,
     };
+    /* MIT License
+
+    Copyright (c) Microsoft Corporation.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE */
+    const staticAwsLogoIconPack = {
+      prefix: 'fluent-emoji',
+      icons: {
+        'tropical-fish': {
+          width: 32,
+          height: 32,
+          body: '<g fill="none"><circle cx="3.055" cy="19.945" r="1.055" fill="url(#f2515id0)" /><circle cx="3.055" cy="19.945" r="1.055" fill="url(#f2515id1)" /><circle cx="3.055" cy="17.945" r="1.055" fill="url(#f2515id2)" /><path fill="url(#f2515idj)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id3)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id4)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515idk)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id5)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id6)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id7)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515idl)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515id8)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515id9)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515ida)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515idb)" /><path fill="url(#f2515idc)" d="M6.7 10.05a10.8 10.8 0 0 1 3.988 8.388c0 3.417-1.586 6.464-4.06 8.445A11.47 11.47 0 0 1 3 18.5a11.47 11.47 0 0 1 3.7-8.45" /><g filter="url(#f2515idp)"><path fill="#4d82fd" d="M17.61 21.717v-5.873a.7.7 0 0 0-1.174-.516l-2.998 2.753a1 1 0 0 0 .01 1.483l2.995 2.675a.7.7 0 0 0 1.166-.522" /></g><path fill="url(#f2515idm)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><path fill="url(#f2515idn)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><path fill="url(#f2515idd)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515ide)" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515idf)" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515ido)" /><path fill="url(#f2515idg)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><path fill="url(#f2515idh)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><path fill="url(#f2515idi)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><defs><radialGradient id="f2515id0" cx="0" cy="0" r="1" gradientTransform="matrix(1.3125 -.53906 .83075 2.02268 2 20.484)" gradientUnits="userSpaceOnUse"><stop stop-color="#6d5a93" /><stop offset="1" stop-color="#5f498c" /></radialGradient><radialGradient id="f2515id1" cx="0" cy="0" r="1" gradientTransform="rotate(98.219 -6.59 10.698)scale(.71042 .794)" gradientUnits="userSpaceOnUse"><stop stop-color="#442e79" /><stop offset="1" stop-color="#442e79" stop-opacity="0" /></radialGradient><radialGradient id="f2515id2" cx="0" cy="0" r="1" gradientTransform="matrix(1.625 0 0 2.50428 1.875 17.945)" gradientUnits="userSpaceOnUse"><stop stop-color="#6d5a93" /><stop offset="1" stop-color="#5f498c" /></radialGradient><radialGradient id="f2515id3" cx="0" cy="0" r="1" gradientTransform="matrix(8.0625 -3.625 5.13835 11.4284 17.188 31.625)" gradientUnits="userSpaceOnUse"><stop stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></radialGradient><radialGradient id="f2515id4" cx="0" cy="0" r="1" gradientTransform="rotate(46.65 -12.942 36.264)scale(5.37182 7.61442)" gradientUnits="userSpaceOnUse"><stop stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></radialGradient><radialGradient id="f2515id5" cx="0" cy="0" r="1" gradientTransform="matrix(16.7498 18.68764 -12.28497 11.01107 9.25 10.625)" gradientUnits="userSpaceOnUse"><stop offset=".943" stop-color="#ff835d" stop-opacity="0" /><stop offset="1" stop-color="#ff835d" /></radialGradient><radialGradient id="f2515id6" cx="0" cy="0" r="1" gradientTransform="rotate(143.673 11.127 8.392)scale(3.95643 5.87059)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe65e" /><stop offset=".654" stop-color="#ffe65e" stop-opacity="0" /></radialGradient><radialGradient id="f2515id7" cx="0" cy="0" r="1" gradientTransform="matrix(0 -6.0625 11.8125 0 27.125 14.938)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe65e" /><stop offset="1" stop-color="#ffe65e" stop-opacity="0" /></radialGradient><radialGradient id="f2515id8" cx="0" cy="0" r="1" gradientTransform="matrix(-10.49993 18.125 -19.41091 -11.24487 22.813 9.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#76cdff" /><stop offset="1" stop-color="#5181ff" /></radialGradient><radialGradient id="f2515id9" cx="0" cy="0" r="1" gradientTransform="matrix(0 23.0625 -17.9752 0 14.5 9.063)" gradientUnits="userSpaceOnUse"><stop offset=".786" stop-color="#5a67ff" stop-opacity="0" /><stop offset=".929" stop-color="#5a67ff" /></radialGradient><radialGradient id="f2515ida" cx="0" cy="0" r="1" gradientTransform="matrix(-3.6875 0 0 -6.17092 28.5 18.813)" gradientUnits="userSpaceOnUse"><stop offset=".017" stop-color="#5a67ff" /><stop offset="1" stop-color="#5a67ff" stop-opacity="0" /></radialGradient><radialGradient id="f2515idb" cx="0" cy="0" r="1" gradientTransform="matrix(2.37499 2.81251 -7.52137 6.35133 7.875 8.125)" gradientUnits="userSpaceOnUse"><stop stop-color="#65afe3" /><stop offset="1" stop-color="#65afe3" stop-opacity="0" /></radialGradient><radialGradient id="f2515idc" cx="0" cy="0" r="1" gradientTransform="matrix(23.875 0 0 34.7797 .625 18.467)" gradientUnits="userSpaceOnUse"><stop offset=".065" stop-color="#80739f" /><stop offset=".262" stop-color="#6f53a3" /></radialGradient><radialGradient id="f2515idd" cx="0" cy="0" r="1" gradientTransform="matrix(0 4.5 -.71873 0 18 15.844)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd65c" /><stop offset="1" stop-color="#ffd65c" stop-opacity="0" /></radialGradient><radialGradient id="f2515ide" cx="0" cy="0" r="1" gradientTransform="matrix(-.40625 .5625 -.5015 -.3622 7.57 16.23)" gradientUnits="userSpaceOnUse"><stop offset=".006" stop-color="#433437" /><stop offset="1" stop-color="#3b2838" /></radialGradient><radialGradient id="f2515idf" cx="0" cy="0" r="1" gradientTransform="rotate(137.643 .653 9.607)scale(.35946 .31624)" gradientUnits="userSpaceOnUse"><stop stop-color="#5c5051" /><stop offset="1" stop-color="#5c5051" stop-opacity="0" /></radialGradient><radialGradient id="f2515idg" cx="0" cy="0" r="1" gradientTransform="matrix(-4.375 0 0 -8.85937 30.375 18.89)" gradientUnits="userSpaceOnUse"><stop offset=".329" stop-color="#ffc256" /><stop offset="1" stop-color="#ff8646" /></radialGradient><radialGradient id="f2515idh" cx="0" cy="0" r="1" gradientTransform="matrix(0 4.59375 -1.28023 0 30.063 17.094)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd661" /><stop offset="1" stop-color="#ffd661" stop-opacity="0" /></radialGradient><radialGradient id="f2515idi" cx="0" cy="0" r="1" gradientTransform="matrix(-5.375 0 0 -5.125 31.188 18.89)" gradientUnits="userSpaceOnUse"><stop offset=".892" stop-color="#f37539" stop-opacity="0" /><stop offset="1" stop-color="#f37539" /></radialGradient><linearGradient id="f2515idj" x1="30.813" x2="20.5" y1="17.375" y2="17.375" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe359" /><stop offset="1" stop-color="#ffbe3e" /></linearGradient><linearGradient id="f2515idk" x1="26" x2="26" y1="30.656" y2="29.438" gradientUnits="userSpaceOnUse"><stop offset=".118" stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></linearGradient><linearGradient id="f2515idl" x1="19.094" x2="19.219" y1="6.313" y2="7.625" gradientUnits="userSpaceOnUse"><stop stop-color="#ffb941" /><stop offset="1" stop-color="#ffb941" stop-opacity="0" /></linearGradient><linearGradient id="f2515idm" x1="18" x2="13.813" y1="17.875" y2="17.875" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd65c" /><stop offset="1" stop-color="#ff8c42" /></linearGradient><linearGradient id="f2515idn" x1="15.752" x2="14.281" y1="19.594" y2="20.625" gradientUnits="userSpaceOnUse"><stop stop-color="#ff8c42" stop-opacity="0" /><stop offset="1" stop-color="#ff8c42" /></linearGradient><linearGradient id="f2515ido" x1="7.324" x2="6.98" y1="15.998" y2="15.779" gradientUnits="userSpaceOnUse"><stop stop-color="#5c5051" stop-opacity="0" /><stop offset="1" stop-color="#5c5051" /></linearGradient><filter id="f2515idp" width="5.995" height="8.777" x="12.364" y="14.392" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feGaussianBlur result="effect1_foregroundBlur_28327_5989" stdDeviation=".375" /></filter></defs></g>',
+        },
+      },
+      width: 256,
+      height: 256,
+    };
     mermaid.registerIconPacks([
       {
         name: 'fa',
         loader: () => staticBellIconPack,
       },
+      {
+        name: 'fluent-emoji',
+        loader: () => staticAwsLogoIconPack,
+      },
     ]);
     await mermaid.run();
   }

docs/adding-new-shape.md

@@ -101,7 +101,7 @@ To add a new shape:
 - **Example**:
 
   ```typescript
-  import { Node, RenderOptions } from '../../types.d.ts';
+  import { Node, RenderOptions } from '../../types.ts';
 
   export const myNewShape = async (
     parent: SVGAElement,
@@ -117,7 +117,7 @@ To add a new shape:
 
 ### 2. Register the Shape
 
-- **Register the shape**: Add your shape to the `shapes` object in the main shapes module. This allows your shape to be recognized and used within the system.
+- **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**:
 
@@ -126,9 +126,14 @@ To add a new shape:
 
   const shapes = {
     ...,
-    'my-new-shape': myNewShape,
-    // Shortened alias (if any).
-    'm-nsh': myNewShape
+    {
+      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,
+    },
   };
   ```
 

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@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,
+  },
+]);
+```

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
@@ -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.