Merge branch 'develop' into update-requirement-diagram

2025-10-28 09:24:10 +01:00 · 2025-01-28 08:21:27 -08:00
parent d0768cbc37 8dd0e7a794
commit baf3adf1c0
20 changed files with 2417 additions and 790 deletions
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -26,6 +26,7 @@ dompurify
 elkjs
 fcose
 fontawesome
+Forgejo
 Foswiki
 Gitea
 graphlib
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -42,4 +42,4 @@ jobs:
        working-directory: ./packages/mermaid
        run: pnpm run docs:build

-      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c # main
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -132,7 +132,7 @@ jobs:
          browser: chrome
          # Disable recording if we don't have an API key
          # e.g. if this action was run from a fork
-          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }}
        env:
          # Only set Argos environment variables if the visual test comment trigger is present
          ARGOS_TOKEN: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.ARGOS_TOKEN || '' }}
--- a/.github/workflows/scorecard.yml
+++ b/.github/workflows/scorecard.yml
@@ -26,7 +26,7 @@ jobs:
          results_format: sarif
          publish_results: true
      - name: Upload artifact
-        uses: actions/upload-artifact@97a0fba1372883ab732affbe8f94b823f91727db # v3.pre.node20
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
        with:
          name: SARIF file
          path: results.sarif
--- a/README.md
+++ b/README.md
@@ -95,6 +95,10 @@ In our release process we rely heavily on visual regression tests using [applito

 <!-- </Main description> -->

+## Mermaid AI Bot
+
+[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
+
 ## Examples

 **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**
@@ -435,7 +439,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_

 ---

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -358,7 +358,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在

 > _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
-> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
+> _感谢越来越多的 [贡献者们](https://github.com/mermaid-js/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_

 ---

--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -132,3 +132,10 @@ export const verifyScreenshot = (name: string): void => {
    cy.matchImageSnapshot(name);
  }
 };
+
+export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
+  expect(value).to.be.within(
+    expected * (1 - deltaPercent / 100),
+    expected * (1 + deltaPercent / 100)
+  );
+};
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';

 describe('Flowchart ELK', () => {
  it('1-elk: should render a simple flowchart', () => {
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
      const style = svg.attr('style');
      expect(style).to.match(/^max-width: [\d.]+px;$/);
      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
+      verifyNumber(maxWidthValue, 380);
    });
  });
  it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
      const width = parseFloat(svg.attr('width'));
      // use within because the absolute value can be slightly different depending on the environment ±5%
      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
+      verifyNumber(width, 380);
      expect(svg).to.not.have.attr('style');
    });
  });
@@ -692,7 +692,7 @@ A --> B
      {}
    );
    cy.get('svg').should((svg) => {
-      const edges = svg.querySelectorAll('.edges > path');
+      const edges = svg[0].querySelectorAll('.edges > path');
      edges.forEach((edge) => {
        expect(edge).to.have.class('flowchart-link');
      });
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
          { flowchart: { titleTopMargin: 0 } }
        );
      });
-      it('Wrapping long text with a new line', () => {
+      it.skip('Wrapping long text with a new line', () => {
        imgSnapshotTest(
          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
@@ -841,7 +841,7 @@ end
          { flowchart: { titleTopMargin: 0 } }
        );
      });
-      it('Sub graphs and markdown strings', () => {
+      it('Sub graphs', () => {
        imgSnapshotTest(
          `---
 config:
--- a/docs/config/faq.md
+++ b/docs/config/faq.md
@@ -6,12 +6,12 @@

 # Frequently Asked Questions

-1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
+1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217)
 2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
-3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
-4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
-5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
-6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
-7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
-8. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
+3. [How to fix tooltip misplacement issue?](https://github.com/mermaid-js/mermaid/issues/542#issuecomment-3343564621)
+4. [How to specify gantt diagram xAxis format?](https://github.com/mermaid-js/mermaid/issues/269#issuecomment-373229136)
+5. [How to bind an event?](https://github.com/mermaid-js/mermaid/issues/372)
+6. [How to add newline in the text?](https://github.com/mermaid-js/mermaid/issues/384#issuecomment-281339381)
+7. [How to have special characters in link text?](https://github.com/mermaid-js/mermaid/issues/407#issuecomment-329944735)
+8. [How to change Flowchart curve style?](https://github.com/mermaid-js/mermaid/issues/580#issuecomment-373929046)
 9. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -44,6 +44,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
 - [Doctave](https://www.doctave.com/) ✅
  - [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid) ✅
+- [Forgejo](https://forgejo.org/) ✅
 - [GitBook](https://gitbook.com)
  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
@@ -99,8 +100,7 @@ Blogging frameworks and platforms
 - [Nextra](https://nextra.site/)
  - [Mermaid](https://nextra.site/docs/guide/mermaid)
 - [WordPress](https://wordpress.org)
-  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
-  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
+  - [MerPRess](https://wordpress.org/plugins/merpress/)

 ### CMS/ECM

--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -49,7 +49,7 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo

 🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)

-> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
+> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/mermaid-js/mermaid/issues/866).

 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**

@@ -453,7 +453,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_

 ---

--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1792,8 +1792,7 @@ graph LR
 ```

 For a full list of available curves, including an explanation of custom curves, refer to
-the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
-[d3-shape](https://github.com/d3/d3-shape/) project.
+the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.

 ### Styling a node

--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -18,7 +18,7 @@ timeline
    2002 : LinkedIn
    2004 : Facebook
         : Google
-    2005 : Youtube
+    2005 : YouTube
    2006 : Twitter
 ```

@@ -28,7 +28,7 @@ timeline
    2002 : LinkedIn
    2004 : Facebook
         : Google
-    2005 : Youtube
+    2005 : YouTube
    2006 : Twitter
 ```

@@ -67,7 +67,7 @@ timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
-    2005 : Youtube
+    2005 : YouTube
    2006 : Twitter
 ```

@@ -76,7 +76,7 @@ timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
-    2005 : Youtube
+    2005 : YouTube
    2006 : Twitter
 ```

@@ -198,7 +198,7 @@ However, if there is no section defined, then we have two possibilities:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter

 ```
@@ -208,7 +208,7 @@ However, if there is no section defined, then we have two possibilities:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter

 ```
@@ -239,7 +239,7 @@ let us look at same example, where we have disabled the multiColor option.
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter

 ```
@@ -250,7 +250,7 @@ let us look at same example, where we have disabled the multiColor option.
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter

 ```
@@ -278,7 +278,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -296,7 +296,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -329,7 +329,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -342,7 +342,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -357,7 +357,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -370,7 +370,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -385,7 +385,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -398,7 +398,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -413,7 +413,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -426,7 +426,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -441,7 +441,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -454,7 +454,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
--- a/packages/mermaid/src/diagrams/user-journey/styles.js
+++ b/packages/mermaid/src/diagrams/user-journey/styles.js
@@ -13,6 +13,7 @@ const getStyles = (options) =>

  .legend {
    fill: ${options.textColor};
+    font-family: ${options.fontFamily};
  }

  .label text {
--- a/packages/mermaid/src/docs/config/faq.md
+++ b/packages/mermaid/src/docs/config/faq.md
@@ -1,11 +1,11 @@
 # Frequently Asked Questions

-1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
+1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217)
 1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
-1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
-1. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
-1. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
-1. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
-1. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
-1. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
+1. [How to fix tooltip misplacement issue?](https://github.com/mermaid-js/mermaid/issues/542#issuecomment-3343564621)
+1. [How to specify gantt diagram xAxis format?](https://github.com/mermaid-js/mermaid/issues/269#issuecomment-373229136)
+1. [How to bind an event?](https://github.com/mermaid-js/mermaid/issues/372)
+1. [How to add newline in the text?](https://github.com/mermaid-js/mermaid/issues/384#issuecomment-281339381)
+1. [How to have special characters in link text?](https://github.com/mermaid-js/mermaid/issues/407#issuecomment-329944735)
+1. [How to change Flowchart curve style?](https://github.com/mermaid-js/mermaid/issues/580#issuecomment-373929046)
 1. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -39,6 +39,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
 - [Doctave](https://www.doctave.com/) ✅
  - [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid) ✅
+- [Forgejo](https://forgejo.org/) ✅
 - [GitBook](https://gitbook.com)
  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
@@ -94,8 +95,7 @@ Blogging frameworks and platforms
 - [Nextra](https://nextra.site/)
  - [Mermaid](https://nextra.site/docs/guide/mermaid)
 - [WordPress](https://wordpress.org)
-  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
-  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
+  - [MerPRess](https://wordpress.org/plugins/merpress/)

 ### CMS/ECM

--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -44,7 +44,7 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo

 🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)

-> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
+> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/mermaid-js/mermaid/issues/866).

 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**

@@ -208,7 +208,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_

 ---

--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -1135,8 +1135,7 @@ graph LR
 ```

 For a full list of available curves, including an explanation of custom curves, refer to
-the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
-[d3-shape](https://github.com/d3/d3-shape/) project.
+the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.

 ### Styling a node

--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -12,7 +12,7 @@ timeline
    2002 : LinkedIn
    2004 : Facebook
         : Google
-    2005 : Youtube
+    2005 : YouTube
    2006 : Twitter
 ```

@@ -51,7 +51,7 @@ timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
-    2005 : Youtube
+    2005 : YouTube
    2006 : Twitter
 ```

@@ -134,7 +134,7 @@ However, if there is no section defined, then we have two possibilities:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter

 ```
@@ -165,7 +165,7 @@ let us look at same example, where we have disabled the multiColor option.
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter

 ```
@@ -193,7 +193,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -226,7 +226,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -241,7 +241,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -256,7 +256,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -271,7 +271,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -286,7 +286,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml