Merge branch 'develop' into 4743-timeline-html-formatting

fix: update leftMargin value

.build/common.ts

@@ -33,4 +33,9 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
+  examples: {
+    name: 'mermaid-examples',
+    packageName: 'examples',
+    file: 'index.ts',
+  },
 } as const satisfies Record<string, PackageOptions>;

.changeset/gold-olives-rule.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add `getRegisteredDiagramsMetadata` to `mermaid`, which returns all the registered diagram IDs in mermaid

.changeset/ninety-adults-wink.md

@@ -0,0 +1,5 @@
+---
+'mermaid': major
+---
+
+Currently, HTML tags such as <em>, <strong>, <sup>, <a>, <ul>, and <li> are supported in Flowchart and Class diagram labels but not in Timeline diagrams. This change introduces support for basic HTML formatting in Timeline labels, enabling richer text formatting and better usability for multi-line content like descriptions, footnotes, and styled annotations

.changeset/platinum-olives-rule.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/examples': minor
+---
+
+feat: Add examples for diagrams in the `@mermaid-js/examples` package

.changeset/slimy-peaches-win.md

@@ -0,0 +1,7 @@
+---
+'@mermaid-js/examples': patch
+'mermaid': patch
+'@mermaid-js/parser': patch
+---
+
+chore: Move packet diagram out of beta

.changeset/wild-areas-lick.md

@@ -0,0 +1,7 @@
+---
+'mermaid': patch
+---
+
+fix(timeline): fix loading `leftMargin` from config
+
+The `timeline.leftMargin` config value should now correctly control the size of the left margin, instead of being ignored.

.github/workflows/pr-labeler.yml

@@ -29,3 +29,29 @@ jobs:
           disable-releaser: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Add "Sponsored by MermaidChart" label
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const prNumber = context.payload.pull_request.number;
+            const { data: commits } = await github.rest.pulls.listCommits({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: prNumber,
+            });
+
+            const isSponsored = commits.every(
+              (c) => c.commit.author.email?.endsWith('@mermaidchart.com')
+            );
+
+            if (isSponsored) {
+              console.log('PR is sponsored. Adding label.');
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                labels: ['Sponsored by MermaidChart'],
+              });
+            }

cypress/integration/rendering/packet.spec.ts

@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('packet structure', () => {
-  it('should render a simple packet diagram', () => {
+  it('should render a simple packet-beta diagram', () => {
     imgSnapshotTest(
       `packet-beta
   title Hello world
@@ -10,9 +10,18 @@ describe('packet structure', () => {
     );
   });
 
+  it('should render a simple packet diagram', () => {
+    imgSnapshotTest(
+      `packet
+  title Hello world
+  0-10: "hello"
+`
+    );
+  });
+
   it('should render a simple packet diagram without ranges', () => {
     imgSnapshotTest(
-      `packet-beta
+      `packet
   0: "h"
   1: "i"
 `
@@ -21,7 +30,7 @@ describe('packet structure', () => {
 
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
-      `packet-beta
+      `packet
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -52,7 +61,7 @@ describe('packet structure', () => {
         packet:
           showBits: false
       ---
-      packet-beta
+      packet
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"

cypress/integration/rendering/timeline.spec.ts

@@ -225,4 +225,18 @@ timeline
       {}
     );
   });
+  it('13: should render markdown htmlLabels', () => {
+    const timelineCode = `%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+    timeline
+    title Timeline of Industrial Revolution
+    section 17th-20th century
+        Industry 1.0 : Machinery, Water power, Steam <br>power
+        Industry 2.0 : Electricity, <strong>Internal combustion engine </strong>, Mass production
+        Industry 3.0 : Electronics, Computers, Automation
+    section 21st century
+        Industry 4.0 : Internet, Robotics, Internet of Things
+        Industry 5.0 : Artificial intelligence, Big data, 3D printing
+      `;
+    imgSnapshotTest(timelineCode);
+  });
 });

cypress/timings.json

@@ -2,219 +2,219 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5659
+      "duration": 5672
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2015
+      "duration": 1990
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3195
+      "duration": 3186
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1976
+      "duration": 1948
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 11149
+      "duration": 11938
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1910
+      "duration": 1932
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 26998
+      "duration": 27237
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3176
+      "duration": 3170
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 110
+      "duration": 104
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 16265
+      "duration": 17390
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5431
+      "duration": 5296
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 38025
+      "duration": 39004
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 36179
+      "duration": 37653
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 22386
+      "duration": 23278
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 35378
+      "duration": 36645
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 14967
+      "duration": 15418
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9140
+      "duration": 9684
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2652
+      "duration": 2570
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 82257
+      "duration": 84687
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 14138
+      "duration": 14819
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3718
+      "duration": 3371
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 39683
+      "duration": 39925
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 28676
+      "duration": 34694
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7080
+      "duration": 7137
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 23175
+      "duration": 24740
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 40846
+      "duration": 42077
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 29743
+      "duration": 30642
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 17352
+      "duration": 18085
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 48514
+      "duration": 50107
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 262422
+      "duration": 276279
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 54513
+      "duration": 56505
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3025
+      "duration": 3036
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 6994
+      "duration": 6889
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7346
+      "duration": 7353
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3642
+      "duration": 3580
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2464
+      "duration": 2508
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 10882
+      "duration": 10939
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 142092
+      "duration": 149102
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 109340
+      "duration": 113987
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4167
+      "duration": 4060
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 5736
+      "duration": 5715
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8628
+      "duration": 8945
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5311
+      "duration": 5337
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2619
+      "duration": 2643
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 50640
+      "duration": 52072
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6735
+      "duration": 6692
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 34777
+      "duration": 35721
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 24440
+      "duration": 26030
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 15476
+      "duration": 16333
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 27932
+      "duration": 29287
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8162
+      "duration": 8491
     },
     {
       "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 11763
+      "duration": 12291
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 19759
+      "duration": 20651
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3316
+      "duration": 3218
     }
   ]
 }

demos/er-multiline.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

demos/packet.html

@@ -17,7 +17,7 @@
 
     <div class="diagrams">
       <pre class="mermaid">
-      packet-beta
+      packet
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -44,7 +44,7 @@
         packet:
           showBits: false
       ---
-      packet-beta
+      packet
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -70,7 +70,7 @@
       config:
         theme: forest
       ---
-      packet-beta
+      packet
         title Forest theme
         0-15: "Source Port"
         16-31: "Destination Port"
@@ -97,7 +97,7 @@
       config:
         theme: dark
       ---
-      packet-beta
+      packet
         title Dark theme
         0-15: "Source Port"
         16-31: "Destination Port"

docs/community/new-diagram.md

@@ -111,3 +111,13 @@ const themes = {
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
+
+## Examples
+
+The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
+
+You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
+
+Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
+
+Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md

@@ -10,7 +10,7 @@
 
 # Interface: ExternalDiagramDefinition
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/me
 
 > **detector**: `DiagramDetector`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/m
 
 > **id**: `string`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/m
 
 > **loader**: `DiagramLoader`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)

docs/config/setup/mermaid/interfaces/Mermaid.md

@@ -10,7 +10,7 @@
 
 # Interface: Mermaid
 
-Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
+Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/
 
 > **contentLoaded**: () => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
+Defined in: [packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447)
 
 \##contentLoaded Callback function that is called when page is loaded. This functions fetches
 configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -34,7 +34,7 @@ page.
 
 > **detectType**: (`text`, `config`?) => `string`
 
-Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
+Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
 
 Detects the type of the graph text.
 
@@ -86,11 +86,28 @@ A graph definition key
 
 ---
 
+### getRegisteredDiagramsMetadata()
+
+> **getRegisteredDiagramsMetadata**: () => `Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
+
+Defined in: [packages/mermaid/src/mermaid.ts:451](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L451)
+
+Gets the metadata for all registered diagrams.
+Currently only the id is returned.
+
+#### Returns
+
+`Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
+
+An array of objects with the id of the diagram.
+
+---
+
 ### ~~init()~~
 
 > **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
 
 ## init
 
@@ -138,7 +155,7 @@ Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 > **initialize**: (`config`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
+Defined in: [packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446)
 
 Used to set configurations for mermaid.
 This function should be called before the run function.
@@ -161,7 +178,7 @@ Configuration object for mermaid.
 
 > **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
 
-Defined in: [packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
+Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
 **`Internal`**
 
@@ -175,7 +192,7 @@ Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [o
 
 > **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
+Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
 Parse the text and validate the syntax.
 
@@ -243,7 +260,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 > `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
+Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
 
 ---
 
@@ -251,7 +268,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/
 
 > **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
+Defined in: [packages/mermaid/src/mermaid.ts:445](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L445)
 
 Used to register external diagram types.
 
@@ -281,7 +298,7 @@ If opts.lazyLoad is false, the diagrams will be loaded immediately.
 
 > **registerIconPacks**: (`iconLoaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
+Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L450)
 
 #### Parameters
 
@@ -299,7 +316,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/
 
 > **registerLayoutLoaders**: (`loaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
+Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L444)
 
 #### Parameters
 
@@ -317,7 +334,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/
 
 > **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
+Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 
 #### Parameters
 
@@ -349,7 +366,7 @@ Deprecated for external use.
 
 > **run**: (`options`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
+Defined in: [packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443)
 
 ## run
 
@@ -393,7 +410,7 @@ Optional runtime configs
 
 > **setParseErrorHandler**: (`parseErrorHandler`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
+Defined in: [packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448)
 
 ## setParseErrorHandler Alternative to directly setting parseError using:
 
@@ -424,4 +441,4 @@ New parseError() callback.
 
 > **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
+Defined in: [packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)

docs/config/setup/mermaid/type-aliases/SVG.md

@@ -12,4 +12,4 @@
 
 > **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)

docs/config/setup/mermaid/type-aliases/SVGGroup.md

@@ -12,4 +12,4 @@
 
 > **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)

docs/config/setup/mermaid/variables/default.md

@@ -12,4 +12,4 @@
 
 > `const` **default**: [`Mermaid`](../interfaces/Mermaid.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
+Defined in: [packages/mermaid/src/mermaid.ts:454](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L454)

docs/syntax/packet.md

@@ -17,7 +17,7 @@ This diagram type is particularly useful for developers, network engineers, educ
 ## Syntax
 
 ```
-packet-beta
+packet
 start: "Block name" %% Single-bit block
 start-end: "Block name" %% Multi-bit blocks
 ... More Fields ...
@@ -28,7 +28,7 @@ start-end: "Block name" %% Multi-bit blocks
 Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
 
 ```
-packet-beta
+packet
 +1: "Block name" %% Single-bit block
 +8: "Block name" %% 8-bit block
 9-15: "Manually set start and end, it's fine to mix and match"
@@ -41,7 +41,7 @@ packet-beta
 ---
 title: "TCP Packet"
 ---
-packet-beta
+packet
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -65,7 +65,7 @@ packet-beta
 ---
 title: "TCP Packet"
 ---
-packet-beta
+packet
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -86,7 +86,7 @@ packet-beta
 ```
 
 ```mermaid-example
-packet-beta
+packet
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -96,7 +96,7 @@ title UDP Packet
 ```
 
 ```mermaid
-packet-beta
+packet
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -144,7 +144,7 @@ config:
     packet:
       startByteColor: red
 ---
-packet-beta
+packet
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"

package.json

@@ -83,12 +83,12 @@
     "@vitest/spy": "^3.0.6",
     "@vitest/ui": "^3.0.6",
     "ajv": "^8.17.1",
-    "chokidar": "3.6.0",
+    "chokidar": "4.0.3",
     "concurrently": "^9.1.2",
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cspell": "^8.6.1",
+    "cspell": "^9.1.3",
     "cypress": "^14.0.3",
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.14",
@@ -109,25 +109,25 @@
     "globals": "^16.0.0",
     "globby": "^14.0.2",
     "husky": "^9.1.7",
-    "jest": "^29.7.0",
+    "jest": "^30.0.4",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
     "jsdom": "^26.0.0",
     "langium-cli": "3.3.0",
-    "lint-staged": "^15.2.11",
+    "lint-staged": "^16.1.2",
     "markdown-table": "^3.0.4",
     "nyc": "^17.1.0",
     "path-browserify": "^1.0.1",
     "prettier": "^3.5.2",
     "prettier-plugin-jsdoc": "^1.3.2",
     "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^5.14.0",
+    "rollup-plugin-visualizer": "^6.0.3",
     "start-server-and-test": "^2.0.10",
     "tslib": "^2.8.1",
     "tsx": "^4.7.3",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.32.0",
-    "vite": "^6.1.1",
+    "vite": "^7.0.3",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.0.6"
   },

packages/examples/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@mermaid-js/examples",
+  "version": "0.0.1-beta.1",
+  "description": "Mermaid examples package",
+  "author": "Sidharth Vinod",
+  "type": "module",
+  "module": "./dist/mermaid-examples.core.mjs",
+  "types": "./dist/mermaid.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/mermaid-examples.core.mjs",
+      "default": "./dist/mermaid-examples.core.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "mermaid": "workspace:*"
+  },
+  "peerDependencies": {
+    "mermaid": "workspace:~"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/examples/src/example.spec.ts

@@ -0,0 +1,34 @@
+import mermaid from 'mermaid';
+import { diagramData } from './index.js';
+
+describe('examples', () => {
+  beforeAll(async () => {
+    // To trigger the diagram registration
+    await mermaid.registerExternalDiagrams([]);
+  });
+
+  it('should have examples for each diagrams', () => {
+    const skippedDiagrams = [
+      // These diagrams have no examples
+      'error',
+      'info',
+      '---',
+      // These diagrams have v2 versions, with examples
+      'class',
+      'graph',
+      'flowchart-elk',
+      'flowchart',
+      'state',
+    ];
+    const diagrams = mermaid
+      .getRegisteredDiagramsMetadata()
+      .filter((d) => !skippedDiagrams.includes(d.id));
+    expect(diagrams.length).toBeGreaterThan(0);
+    for (const diagram of diagrams) {
+      const data = diagramData.find((d) => d.id === diagram.id)!;
+      expect(data, `Example for ${diagram.id} is not defined`).toBeDefined();
+      expect(data.examples.length).toBeGreaterThan(0);
+      expect(data.examples.filter((e) => e.isDefault).length).toBe(1);
+    }
+  });
+});

packages/examples/src/examples/architecture.ts

@@ -0,0 +1,24 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'architecture',
+  name: 'Architecture Diagram',
+  description: 'Visualize system architecture and components',
+  examples: [
+    {
+      title: 'Basic System Architecture',
+      isDefault: true,
+      code: `architecture-beta
+    group api(cloud)[API]
+
+    service db(database)[Database] in api
+    service disk1(disk)[Storage] in api
+    service disk2(disk)[Storage] in api
+    service server(server)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/block.ts

@@ -0,0 +1,27 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'block',
+  name: 'Block Diagram',
+  description: 'Create block-based visualizations with beta styling',
+  examples: [
+    {
+      title: 'Basic Block Layout',
+      isDefault: true,
+      code: `block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/c4.ts

@@ -0,0 +1,47 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'c4',
+  name: 'C4 Diagram',
+  description:
+    'Visualize software architecture using the C4 model (Context, Container, Component, Code)',
+  examples: [
+    {
+      title: 'Internet Banking System Context',
+      isDefault: true,
+      code: `C4Context
+    title System Context diagram for Internet Banking System
+    Enterprise_Boundary(b0, "BankBoundary0") {
+        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")
+
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+        Enterprise_Boundary(b1, "BankBoundary") {
+            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+            System_Boundary(b2, "BankBoundary2") {
+                System(SystemA, "Banking System A")
+                System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+            }
+
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+            Boundary(b3, "BankBoundary3", "boundary") {
+                SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+                SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+            }
+        }
+    }
+
+    BiRel(customerA, SystemAA, "Uses")
+    BiRel(SystemAA, SystemE, "Uses")
+    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+    Rel(SystemC, customerA, "Sends e-mails to")`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/class.ts

@@ -0,0 +1,34 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'classDiagram',
+  name: 'Class Diagram',
+  description: 'Visualize class structures and relationships in object-oriented programming',
+  examples: [
+    {
+      title: 'Basic Class Inheritance',
+      isDefault: true,
+      code: `classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/er.ts

@@ -0,0 +1,36 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'er',
+  name: 'Entity Relationship Diagram',
+  description: 'Visualize database schemas and relationships between entities',
+  examples: [
+    {
+      title: 'Basic ER Schema',
+      isDefault: true,
+      code: `erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ ORDER_ITEM : contains
+    PRODUCT ||--o{ ORDER_ITEM : includes
+    CUSTOMER {
+        string id
+        string name
+        string email
+    }
+    ORDER {
+        string id
+        date orderDate
+        string status
+    }
+    PRODUCT {
+        string id
+        string name
+        float price
+    }
+    ORDER_ITEM {
+        int quantity
+        float price
+    }`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/flowchart.ts

@@ -0,0 +1,19 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'flowchart-v2',
+  name: 'Flowchart',
+  description: 'Visualize flowcharts and directed graphs',
+  examples: [
+    {
+      title: 'Basic Flowchart',
+      isDefault: true,
+      code: `flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/gantt.ts

@@ -0,0 +1,22 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'gantt',
+  name: 'Gantt Chart',
+  description: 'Visualize project schedules and timelines',
+  examples: [
+    {
+      title: 'Basic Project Timeline',
+      isDefault: true,
+      code: `gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/git.ts

@@ -0,0 +1,28 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'gitGraph',
+  name: 'Git Graph',
+  description: 'Visualize Git repository history and branch relationships',
+  examples: [
+    {
+      title: 'Basic Git Flow',
+      isDefault: true,
+      code: `gitGraph
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    branch feature
+    checkout feature
+    commit
+    commit
+    checkout main
+    merge feature`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/kanban.ts

@@ -0,0 +1,37 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'kanban',
+  name: 'Kanban Diagram',
+  description: 'Visualize work items in a Kanban board',
+  examples: [
+    {
+      title: 'Kanban Diagram',
+      isDefault: true,
+      code: `---
+config:
+  kanban:
+    ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
+---
+kanban
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [In progress]
+    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
+  id11[Done]
+    id5[define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: 2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
+`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/mindmap.ts

@@ -0,0 +1,32 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'mindmap',
+  name: 'Mindmap',
+  description: 'Visualize ideas and concepts in a tree-like structure',
+  examples: [
+    {
+      title: 'Basic Mindmap',
+      isDefault: true,
+      code: `mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid`,
+    },
+  ],
+} satisfies DiagramMetadata;
+
+// cspell:ignore Buzan

packages/examples/src/examples/packet.ts

@@ -0,0 +1,34 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'packet',
+  name: 'Packet Diagram',
+  description: 'Visualize packet data and network traffic',
+  examples: [
+    {
+      title: 'TCP Packet',
+      isDefault: true,
+      code: `---
+title: "TCP Packet"
+---
+packet
+0-15: "Source Port"
+16-31: "Destination Port"
+32-63: "Sequence Number"
+64-95: "Acknowledgment Number"
+96-99: "Data Offset"
+100-105: "Reserved"
+106: "URG"
+107: "ACK"
+108: "PSH"
+109: "RST"
+110: "SYN"
+111: "FIN"
+112-127: "Window"
+128-143: "Checksum"
+144-159: "Urgent Pointer"
+160-191: "(Options and Padding)"
+192-255: "Data (variable length)"`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/pie.ts

@@ -0,0 +1,17 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'pie',
+  name: 'Pie Chart',
+  description: 'Visualize data as proportional segments of a circle',
+  examples: [
+    {
+      title: 'Basic Pie Chart',
+      isDefault: true,
+      code: `pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/quadrant-chart.ts

@@ -0,0 +1,27 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'quadrantChart',
+  name: 'Quadrant Chart',
+  description: 'Visualize items in a 2x2 matrix based on two variables',
+  examples: [
+    {
+      title: 'Product Positioning',
+      isDefault: true,
+      code: `quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/radar.ts

@@ -0,0 +1,25 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'radar',
+  name: 'Radar Diagram',
+  description: 'Visualize data in a radial format',
+  examples: [
+    {
+      title: 'Student Grades',
+      isDefault: true,
+      code: `---
+title: "Grades"
+---
+radar-beta
+  axis m["Math"], s["Science"], e["English"]
+  axis h["History"], g["Geography"], a["Art"]
+  curve a["Alice"]{85, 90, 80, 70, 75, 90}
+  curve b["Bob"]{70, 75, 85, 80, 90, 85}
+
+  max 100
+  min 0
+`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/requirement.ts

@@ -0,0 +1,27 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'requirement',
+  name: 'Requirement Diagram',
+  description: 'Visualize system requirements and their relationships',
+  examples: [
+    {
+      title: 'Basic Requirements',
+      code: `requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req`,
+      isDefault: true,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/sankey.ts

@@ -0,0 +1,88 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'sankey',
+  name: 'Sankey Diagram',
+  description: 'Visualize flow quantities between different stages or processes',
+  examples: [
+    {
+      title: 'Energy Flow',
+      isDefault: true,
+      code: `---
+config:
+  sankey:
+    showValues: false
+---
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,NGas,40.719
+Gas reserves,NGas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+NGas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/sequence.ts

@@ -0,0 +1,18 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'sequence',
+  name: 'Sequence Diagram',
+  description: 'Visualize interactions between objects over time',
+  examples: [
+    {
+      title: 'Basic Sequence',
+      isDefault: true,
+      code: `sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/state.ts

@@ -0,0 +1,20 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'stateDiagram',
+  name: 'State Diagram',
+  description: 'Visualize the states and transitions of a system',
+  examples: [
+    {
+      title: 'Basic State Diagram',
+      code: `stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]`,
+      isDefault: true,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/timeline.ts

@@ -0,0 +1,20 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'timeline',
+  name: 'Timeline Diagram',
+  description: 'Visualize events and milestones in chronological order',
+  examples: [
+    {
+      title: 'Project Timeline',
+      isDefault: true,
+      code: `timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook
+         : Google
+    2005 : YouTube
+    2006 : Twitter`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/treemap.ts

@@ -0,0 +1,21 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'treemap',
+  name: 'Treemap',
+  description: 'Visualize hierarchical data as nested rectangles',
+  examples: [
+    {
+      title: 'Treemap',
+      isDefault: true,
+      code: `treemap-beta
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2"
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20
+    "Leaf 2.2": 25`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/user-journey.ts

@@ -0,0 +1,22 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'journey',
+  name: 'User Journey Diagram',
+  description: 'Visualize user interactions and experiences with a system',
+  examples: [
+    {
+      title: 'My Working Day',
+      isDefault: true,
+      code: `journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/xychart.ts

@@ -0,0 +1,19 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'xychart',
+  name: 'XY Chart',
+  description: 'Create scatter plots and line charts with customizable axes',
+  examples: [
+    {
+      title: 'Sales Revenue',
+      isDefault: true,
+      code: `xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/index.ts

@@ -0,0 +1,48 @@
+import type { DiagramMetadata } from './types.js';
+import flowChart from './examples/flowchart.js';
+import c4 from './examples/c4.js';
+import kanban from './examples/kanban.js';
+import classDiagram from './examples/class.js';
+import sequenceDiagram from './examples/sequence.js';
+import pieDiagram from './examples/pie.js';
+import userJourneyDiagram from './examples/user-journey.js';
+import mindmapDiagram from './examples/mindmap.js';
+import requirementDiagram from './examples/requirement.js';
+import radarDiagram from './examples/radar.js';
+import stateDiagram from './examples/state.js';
+import erDiagram from './examples/er.js';
+import gitDiagram from './examples/git.js';
+import architectureDiagram from './examples/architecture.js';
+import xychartDiagram from './examples/xychart.js';
+import sankeyDiagram from './examples/sankey.js';
+import ganttDiagram from './examples/gantt.js';
+import timelineDiagram from './examples/timeline.js';
+import quadrantChart from './examples/quadrant-chart.js';
+import packetDiagram from './examples/packet.js';
+import blockDiagram from './examples/block.js';
+import treemapDiagram from './examples/treemap.js';
+
+export const diagramData: DiagramMetadata[] = [
+  flowChart,
+  c4,
+  kanban,
+  classDiagram,
+  sequenceDiagram,
+  pieDiagram,
+  userJourneyDiagram,
+  mindmapDiagram,
+  requirementDiagram,
+  radarDiagram,
+  stateDiagram,
+  erDiagram,
+  gitDiagram,
+  architectureDiagram,
+  xychartDiagram,
+  sankeyDiagram,
+  ganttDiagram,
+  timelineDiagram,
+  quadrantChart,
+  packetDiagram,
+  blockDiagram,
+  treemapDiagram,
+];

packages/examples/src/types.ts

@@ -0,0 +1,12 @@
+export interface Example {
+  title: string;
+  code: string;
+  isDefault?: boolean;
+}
+
+export interface DiagramMetadata {
+  id: string;
+  name: string;
+  description: string;
+  examples: Example[];
+}

packages/examples/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "module": "Node16",
+    "moduleResolution": "Node16"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

packages/mermaid/package.json

@@ -82,7 +82,7 @@
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^15.0.7",
+    "marked": "^16.0.0",
     "roughjs": "^4.6.6",
     "stylis": "^4.3.6",
     "ts-dedent": "^2.2.0",
@@ -105,7 +105,7 @@
     "@types/stylis": "^4.2.7",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.17.1",
-    "chokidar": "3.6.0",
+    "chokidar": "4.0.3",
     "concurrently": "^9.1.2",
     "csstree-validator": "^4.0.1",
     "globby": "^14.0.2",

packages/mermaid/src/diagram-api/loadDiagram.ts

@@ -7,20 +7,21 @@ export const loadRegisteredDiagrams = async () => {
   // Load all lazy loaded diagrams in parallel
   const results = await Promise.allSettled(
     Object.entries(detectors).map(async ([key, { detector, loader }]) => {
-      if (loader) {
+      if (!loader) {
+        return;
+      }
+      try {
+        getDiagram(key);
+      } catch {
         try {
-          getDiagram(key);
-        } catch {
-          try {
-            // Register diagram if it is not already registered
-            const { diagram, id } = await loader();
-            registerDiagram(id, diagram, detector);
-          } catch (err) {
-            // Remove failed diagram from detectors
-            log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
-            delete detectors[key];
-            throw err;
-          }
+          // Register diagram if it is not already registered
+          const { diagram, id } = await loader();
+          registerDiagram(id, diagram, detector);
+        } catch (err) {
+          // Remove failed diagram from detectors
+          log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
+          delete detectors[key];
+          throw err;
         }
       }
     })

packages/mermaid/src/diagram-api/types.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type * as d3 from 'd3';
-import type { SetRequired } from 'type-fest';
+import type { SetOptional, SetRequired } from 'type-fest';
 import type { Diagram } from '../Diagram.js';
 import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js';
 
@@ -91,17 +91,13 @@ export interface DiagramDefinition {
   ) => void;
 }
 
-export interface DetectorRecord {
-  detector: DiagramDetector;
-  loader?: DiagramLoader;
-}
-
 export interface ExternalDiagramDefinition {
   id: string;
   detector: DiagramDetector;
   loader: DiagramLoader;
 }
 
+export type DetectorRecord = SetOptional<Omit<ExternalDiagramDefinition, 'id'>, 'loader'>;
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
 export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;
 

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -287,7 +287,7 @@ const setBlock = (block: Block) => {
   blockDatabase.set(block.id, block);
 };
 
-const getLogger = () => console;
+const getLogger = () => log;
 
 /**
  * Return all of the style classes

packages/mermaid/src/diagrams/packet/detector.ts

@@ -7,7 +7,7 @@ import type {
 const id = 'packet';
 
 const detector: DiagramDetector = (txt) => {
-  return /^\s*packet-beta/.test(txt);
+  return /^\s*packet(-beta)?/.test(txt);
 };
 
 const loader: DiagramLoader = async () => {

packages/mermaid/src/diagrams/packet/packet.spec.ts

@@ -15,8 +15,14 @@ describe('packet diagrams', () => {
     expect(getPacket()).toMatchInlineSnapshot('[]');
   });
 
+  it('should handle a packet definition', async () => {
+    const str = `packet`;
+    await expect(parser.parse(str)).resolves.not.toThrow();
+    expect(getPacket()).toMatchInlineSnapshot('[]');
+  });
+
   it('should handle diagram with data and title', async () => {
-    const str = `packet-beta
+    const str = `packet
     title Packet diagram
     accTitle: Packet accTitle
     accDescr: Packet accDescription
@@ -41,7 +47,7 @@ describe('packet diagrams', () => {
   });
 
   it('should handle single bits', async () => {
-    const str = `packet-beta
+    const str = `packet
     0-10: "test"
     11: "single"
     `;
@@ -67,7 +73,7 @@ describe('packet diagrams', () => {
   });
 
   it('should handle bit counts', async () => {
-    const str = `packet-beta
+    const str = `packet
     +8: "byte"
     +16: "word"
     `;
@@ -93,7 +99,7 @@ describe('packet diagrams', () => {
   });
 
   it('should handle bit counts with bit or bits', async () => {
-    const str = `packet-beta
+    const str = `packet
     +8: "byte"
     +16: "word"
     `;
@@ -119,7 +125,7 @@ describe('packet diagrams', () => {
   });
 
   it('should split into multiple rows', async () => {
-    const str = `packet-beta
+    const str = `packet
     0-10: "test"
     11-90: "multiple"
     `;
@@ -161,7 +167,7 @@ describe('packet diagrams', () => {
   });
 
   it('should split into multiple rows when cut at exact length', async () => {
-    const str = `packet-beta
+    const str = `packet
     0-16: "test"
     17-63: "multiple"
     `;
@@ -195,7 +201,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous', async () => {
-    const str = `packet-beta
+    const str = `packet
     0-16: "test"
     18-20: "error"
     `;
@@ -205,7 +211,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous with bit counts', async () => {
-    const str = `packet-beta
+    const str = `packet
     +16: "test"
     18-20: "error"
     `;
@@ -215,7 +221,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous for single packets', async () => {
-    const str = `packet-beta
+    const str = `packet
     0-16: "test"
     18: "error"
     `;
@@ -225,7 +231,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous for single packets with bit counts', async () => {
-    const str = `packet-beta
+    const str = `packet
     +16: "test"
     18: "error"
     `;
@@ -235,7 +241,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous for single packets - 2', async () => {
-    const str = `packet-beta
+    const str = `packet
     0-16: "test"
     17: "good"
     19: "error"
@@ -246,7 +252,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if end is less than start', async () => {
-    const str = `packet-beta
+    const str = `packet
     0-16: "test"
     25-20: "error"
     `;
@@ -256,7 +262,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if bit count is 0', async () => {
-    const str = `packet-beta
+    const str = `packet
     +0: "test"
     `;
     await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot(

packages/mermaid/src/diagrams/timeline/svgDraw.js

@@ -1,6 +1,91 @@
 import { arc as d3arc, select } from 'd3';
+import { createText } from '../../rendering-util/createText.js';
+import DOMPurify from 'dompurify';
+
 const MAX_SECTIONS = 12;
 
+/**
+ * Process HTML content in node descriptions
+ * @param {object} textElem - The SVG element to append text to
+ * @param {object} node - The node object containing description and dimensions
+ * @param {object} conf - Configuration object
+ * @param {boolean} isVirtual - Whether this is for virtual height calculation
+ */
+const processHtmlContent = async function (textElem, node, conf, isVirtual = false) {
+  // Create temporary text to get initial dimensions
+  const sanitizedHtml = DOMPurify.sanitize(node.descr, { ALLOWED_TAGS: [] });
+  const tempText = textElem
+    .append('text')
+    .text(sanitizedHtml)
+    .attr('dy', '1em')
+    .attr('alignment-baseline', 'middle')
+    .attr('dominant-baseline', 'middle')
+    .attr('text-anchor', 'middle')
+    .call(wrap, node.width);
+
+  if (!isVirtual) {
+    tempText.attr('visibility', 'hidden');
+  }
+
+  const bbox = tempText.node().getBBox();
+  tempText.remove();
+
+  // Create the actual HTML content
+  const textObj = await createText(
+    textElem,
+    node.descr,
+    {
+      useHtmlLabels: true,
+      width: node.width,
+      classes: 'timeline-node-label',
+      isNode: true,
+    },
+    conf
+  );
+
+  if (!isVirtual) {
+    select(textObj).attr('transform', 'translate(0, 0)');
+  }
+
+  // Process the foreign object
+  const foreignObject = textElem.select('foreignObject');
+  if (foreignObject.node()) {
+    foreignObject.attr('width', `${10 * node.width}px`).attr('height', `${10 * node.width}px`);
+
+    const div = foreignObject.select('div');
+    if (div.node()) {
+      div
+        .style('display', 'table-cell')
+        .style('white-space', 'nowrap')
+        .style('line-height', '1.5')
+        .style('max-width', node.width + 'px')
+        .style('text-align', 'center');
+
+      let divBBox = div.node().getBoundingClientRect();
+
+      if (divBBox.width === node.width) {
+        div
+          .style('display', 'table')
+          .style('white-space', 'break-spaces')
+          .style('width', node.width + 'px');
+
+        divBBox = div.node().getBoundingClientRect();
+      }
+
+      foreignObject.attr('width', node.width).attr('height', divBBox.height);
+
+      if (!isVirtual) {
+        foreignObject.attr('x', -node.width / 2).attr('y', 3);
+
+        div.style('width', node.width + 'px');
+      }
+      bbox.height = divBBox.height;
+    }
+  }
+
+  return bbox;
+};
+
 export const drawRect = function (elem, rectData) {
   const rectElem = elem.append('rect');
   rectElem.attr('x', rectData.x);
@@ -409,6 +494,9 @@ const _drawTextCandidateFunc = (function () {
       .style('display', 'table-cell')
       .style('text-align', 'center')
       .style('vertical-align', 'middle')
+      .style('word-wrap', 'break-word')
+      .style('overflow-wrap', 'break-word')
+      .style('white-space', 'normal')
       .text(content);
 
     byTspan(content, body, x, y, width, height, textAttrs, conf);
@@ -493,7 +581,7 @@ function wrap(text, width) {
   });
 }
 
-export const drawNode = function (elem, node, fullSection, conf) {
+export const drawNode = async function (elem, node, fullSection, conf) {
   const section = (fullSection % MAX_SECTIONS) - 1;
   const nodeElem = elem.append('g');
   node.section = section;
@@ -506,19 +594,28 @@ export const drawNode = function (elem, node, fullSection, conf) {
   // Create the wrapped text element
   const textElem = nodeElem.append('g');
 
-  const txt = textElem
-    .append('text')
-    .text(node.descr)
-    .attr('dy', '1em')
-    .attr('alignment-baseline', 'middle')
-    .attr('dominant-baseline', 'middle')
-    .attr('text-anchor', 'middle')
-    .call(wrap, node.width);
-  const bbox = txt.node().getBBox();
-  const fontSize = conf.fontSize?.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
-  node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
-  node.height = Math.max(node.height, node.maxHeight);
-  node.width = node.width + 2 * node.padding;
+  const hasHtml = /<[a-z][\S\s]*>/i.test(node.descr);
+
+  if (hasHtml) {
+    const bbox = await processHtmlContent(textElem, node, conf, false);
+    node.height = bbox.height + node.padding;
+    node.height = Math.max(node.height, node.maxHeight);
+    node.width = node.width + 2 * node.padding;
+  } else {
+    const txt = textElem
+      .append('text')
+      .text(node.descr)
+      .attr('dy', '1em')
+      .attr('alignment-baseline', 'middle')
+      .attr('dominant-baseline', 'middle')
+      .attr('text-anchor', 'middle')
+      .call(wrap, node.width);
+    const bbox = txt.node().getBBox();
+    const fontSize = conf.fontSize?.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
+    node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
+    node.height = Math.max(node.height, node.maxHeight);
+    node.width = node.width + 2 * node.padding;
+  }
 
   textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
 
@@ -528,17 +625,25 @@ export const drawNode = function (elem, node, fullSection, conf) {
   return node;
 };
 
-export const getVirtualNodeHeight = function (elem, node, conf) {
+export const getVirtualNodeHeight = async function (elem, node, conf) {
   const textElem = elem.append('g');
-  const txt = textElem
-    .append('text')
-    .text(node.descr)
-    .attr('dy', '1em')
-    .attr('alignment-baseline', 'middle')
-    .attr('dominant-baseline', 'middle')
-    .attr('text-anchor', 'middle')
-    .call(wrap, node.width);
-  const bbox = txt.node().getBBox();
+
+  const hasHtml = /<[a-z][\S\s]*>/i.test(node.descr);
+
+  let bbox;
+  if (hasHtml) {
+    bbox = await processHtmlContent(textElem, node, conf, true);
+  } else {
+    const txt = textElem
+      .append('text')
+      .text(node.descr)
+      .attr('dy', '1em')
+      .attr('alignment-baseline', 'middle')
+      .attr('dominant-baseline', 'middle')
+      .attr('text-anchor', 'middle')
+      .call(wrap, node.width);
+    bbox = txt.node().getBBox();
+  }
   const fontSize = conf.fontSize?.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
   textElem.remove();
   return bbox.height + fontSize * 1.1 * 0.5 + node.padding;

packages/mermaid/src/diagrams/timeline/timelineRenderer.ts

@@ -25,11 +25,10 @@ interface TimelineTask {
   score: number;
   events: string[];
 }
-export const draw = function (text: string, id: string, version: string, diagObj: Diagram) {
+export const draw = async function (text: string, id: string, version: string, diagObj: Diagram) {
   //1. Fetch the configuration
   const conf = getConfig();
-  // @ts-expect-error - wrong config?
-  const LEFT_MARGIN = conf.leftMargin ?? 50;
+  const LEFT_MARGIN = conf.timeline?.leftMargin ?? 50;
 
   log.debug('timeline', diagObj.db);
 
@@ -77,7 +76,7 @@ export const draw = function (text: string, id: string, version: string, diagObj
   let hasSections = true;
 
   //Calculate the max height of the sections
-  sections.forEach(function (section: string) {
+  for (const section of sections) {
     const sectionNode: Block<string, number> = {
       number: sectionNumber,
       descr: section,
@@ -86,10 +85,10 @@ export const draw = function (text: string, id: string, version: string, diagObj
       padding: 20,
       maxHeight: maxSectionHeight,
     };
-    const sectionHeight = svgDraw.getVirtualNodeHeight(svg, sectionNode, conf);
+    const sectionHeight = await svgDraw.getVirtualNodeHeight(svg, sectionNode, conf);
     log.debug('sectionHeight before draw', sectionHeight);
     maxSectionHeight = Math.max(maxSectionHeight, sectionHeight + 20);
-  });
+  }
 
   //tasks length and maxEventCount
   let maxEventCount = 0;
@@ -107,7 +106,7 @@ export const draw = function (text: string, id: string, version: string, diagObj
       padding: 20,
       maxHeight: maxTaskHeight,
     };
-    const taskHeight = svgDraw.getVirtualNodeHeight(svg, taskNode, conf);
+    const taskHeight = await svgDraw.getVirtualNodeHeight(svg, taskNode, conf);
     log.debug('taskHeight before draw', taskHeight);
     maxTaskHeight = Math.max(maxTaskHeight, taskHeight + 20);
 
@@ -124,9 +123,8 @@ export const draw = function (text: string, id: string, version: string, diagObj
         padding: 20,
         maxHeight: 50,
       };
-      maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
+      maxEventLineLengthTemp += await svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
     }
-    // Add spacing between events (10px per event except the last one)
     if (task.events.length > 0) {
       maxEventLineLengthTemp += (task.events.length - 1) * 10;
     }
@@ -137,7 +135,7 @@ export const draw = function (text: string, id: string, version: string, diagObj
   log.debug('maxTaskHeight before draw', maxTaskHeight);
 
   if (sections && sections.length > 0) {
-    sections.forEach((section) => {
+    for (const section of sections) {
       //filter task where tasks.section == section
       const tasksForSection = tasks.filter((task) => task.section === section);
 
@@ -151,7 +149,7 @@ export const draw = function (text: string, id: string, version: string, diagObj
       };
       log.debug('sectionNode', sectionNode);
       const sectionNodeWrapper = svg.append('g');
-      const node = svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
+      const node = await svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
       log.debug('sectionNode output', node);
 
       sectionNodeWrapper.attr('transform', `translate(${masterX}, ${sectionBeginY})`);
@@ -160,7 +158,7 @@ export const draw = function (text: string, id: string, version: string, diagObj
 
       //draw tasks for this section
       if (tasksForSection.length > 0) {
-        drawTasks(
+        await drawTasks(
           svg,
           tasksForSection,
           sectionNumber,
@@ -179,11 +177,11 @@ export const draw = function (text: string, id: string, version: string, diagObj
 
       masterY = sectionBeginY;
       sectionNumber++;
-    });
+    }
   } else {
     //draw tasks
     hasSections = false;
-    drawTasks(
+    await drawTasks(
       svg,
       tasks,
       sectionNumber,
@@ -237,7 +235,7 @@ export const draw = function (text: string, id: string, version: string, diagObj
   // addSVGAccessibilityFields(diagObj.db, diagram, id);
 };
 
-export const drawTasks = function (
+export const drawTasks = async function (
   diagram: Selection<SVGElement, unknown, null, undefined>,
   tasks: TimelineTask[],
   sectionColor: number,
@@ -266,7 +264,7 @@ export const drawTasks = function (
     // create task wrapper
 
     const taskWrapper = diagram.append('g').attr('class', 'taskWrapper');
-    const node = svgDraw.drawNode(taskWrapper, taskNode, sectionColor, conf);
+    const node = await svgDraw.drawNode(taskWrapper, taskNode, sectionColor, conf);
     const taskHeight = node.height;
     //log task height
     log.debug('taskHeight after draw', taskHeight);
@@ -283,7 +281,7 @@ export const drawTasks = function (
       //add margin to task
       masterY += 100;
       lineLength =
-        lineLength + drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf);
+        lineLength + (await drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf));
       masterY -= 100;
 
       lineWrapper
@@ -308,7 +306,7 @@ export const drawTasks = function (
   masterY = masterY - 10;
 };
 
-export const drawEvents = function (
+export const drawEvents = async function (
   diagram: Selection<SVGElement, unknown, null, undefined>,
   events: string[],
   sectionColor: number,
@@ -335,7 +333,7 @@ export const drawEvents = function (
     log.debug('eventNode', eventNode);
     // create event wrapper
     const eventWrapper = diagram.append('g').attr('class', 'eventWrapper');
-    const node = svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf);
+    const node = await svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf);
     const eventHeight = node.height;
     maxEventHeight = maxEventHeight + eventHeight;
     eventWrapper.attr('transform', `translate(${masterX}, ${masterY})`);

packages/mermaid/src/docs/community/new-diagram.md

@@ -106,3 +106,13 @@ const themes = {
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
+
+## Examples
+
+The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
+
+You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
+
+Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
+
+Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

packages/mermaid/src/docs/package.json

@@ -27,7 +27,7 @@
     "@iconify-json/carbon": "^1.1.37",
     "@unocss/reset": "^66.0.0",
     "@vite-pwa/vitepress": "^1.0.0",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^6.0.0",
     "fast-glob": "^3.3.3",
     "https-localhost": "^4.7.1",
     "pathe": "^2.0.3",

packages/mermaid/src/docs/syntax/packet.md

@@ -11,7 +11,7 @@ This diagram type is particularly useful for developers, network engineers, educ
 ## Syntax
 
 ```
-packet-beta
+packet
 start: "Block name" %% Single-bit block
 start-end: "Block name" %% Multi-bit blocks
 ... More Fields ...
@@ -22,7 +22,7 @@ start-end: "Block name" %% Multi-bit blocks
 Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
 
 ```
-packet-beta
+packet
 +1: "Block name" %% Single-bit block
 +8: "Block name" %% 8-bit block
 9-15: "Manually set start and end, it's fine to mix and match"
@@ -35,7 +35,7 @@ packet-beta
 ---
 title: "TCP Packet"
 ---
-packet-beta
+packet
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -56,7 +56,7 @@ packet-beta
 ```
 
 ```mermaid-example
-packet-beta
+packet
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -104,7 +104,7 @@ config:
     packet:
       startByteColor: red
 ---
-packet-beta
+packet
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"

packages/mermaid/src/mermaid.ts

@@ -5,7 +5,7 @@
 import { registerIconPacks } from './rendering-util/icons.js';
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
-import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
+import { detectType, detectors, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
 import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';
@@ -415,6 +415,17 @@ const render: typeof mermaidAPI.render = (id, text, container) => {
   });
 };
 
+/**
+ * Gets the metadata for all registered diagrams.
+ * Currently only the id is returned.
+ * @returns An array of objects with the id of the diagram.
+ */
+const getRegisteredDiagramsMetadata = (): Pick<ExternalDiagramDefinition, 'id'>[] => {
+  return Object.keys(detectors).map((id) => ({
+    id,
+  }));
+};
+
 export interface Mermaid {
   startOnLoad: boolean;
   parseError?: ParseErrorFunction;
@@ -437,6 +448,7 @@ export interface Mermaid {
   setParseErrorHandler: typeof setParseErrorHandler;
   detectType: typeof detectType;
   registerIconPacks: typeof registerIconPacks;
+  getRegisteredDiagramsMetadata: typeof getRegisteredDiagramsMetadata;
 }
 
 const mermaid: Mermaid = {
@@ -454,6 +466,7 @@ const mermaid: Mermaid = {
   setParseErrorHandler,
   detectType,
   registerIconPacks,
+  getRegisteredDiagramsMetadata,
 };
 
 export default mermaid;

packages/mermaid/src/mermaidAPI.spec.ts

@@ -794,6 +794,7 @@ graph TD;A--x|text including URL space|B;`)
       { textDiagramType: 'gantt', expectedType: 'gantt' },
       { textDiagramType: 'journey', expectedType: 'journey' },
       { textDiagramType: 'pie', expectedType: 'pie' },
+      { textDiagramType: 'packet', expectedType: 'packet' },
       { textDiagramType: 'packet-beta', expectedType: 'packet' },
       { textDiagramType: 'xychart-beta', expectedType: 'xychart' },
       { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },

packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts

@@ -17,7 +17,7 @@ export async function note<T extends SVGGraphicsElement>(
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
   const totalWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
   const totalHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
   const x = -totalWidth / 2;
@@ -50,6 +50,11 @@ export async function note<T extends SVGGraphicsElement>(
     rect.selectAll('path').attr('style', nodeStyles);
   }
 
+  label.attr(
+    'transform',
+    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})`
+  );
+
   updateNodeBounds(node, rect);
 
   node.intersect = function (point) {

packages/parser/src/language/packet/packet.langium

@@ -3,7 +3,7 @@ import "../common/common";
 
 entry Packet:
   NEWLINE*
-  "packet-beta"
+  ("packet"| "packet-beta")
   (
     TitleAndAccessibilities
     | blocks+=PacketBlock

packages/parser/src/language/packet/tokenBuilder.ts

@@ -2,6 +2,6 @@ import { AbstractMermaidTokenBuilder } from '../common/index.js';
 
 export class PacketTokenBuilder extends AbstractMermaidTokenBuilder {
   public constructor() {
-    super(['packet-beta']);
+    super(['packet']);
   }
 }

packages/parser/tests/packet.test.ts

@@ -11,6 +11,12 @@ describe('packet', () => {
     `
     \tpacket-beta
     `,
+    `packet`,
+    `  packet  `,
+    `\tpacket\t`,
+    `
+    \tpacket
+    `,
   ])('should handle regular packet', (context: string) => {
     const result = parse(context);
     expectNoErrorsOrAlternatives(result);

packages/parser/tests/test-util.ts

@@ -32,15 +32,10 @@ const consoleMock = vi.spyOn(console, 'log').mockImplementation(() => undefined)
  * @param result - the result `parse` function.
  */
 export function expectNoErrorsOrAlternatives(result: ParseResult) {
-  if (result.lexerErrors.length > 0) {
-    // console.debug(result.lexerErrors);
-  }
-  if (result.parserErrors.length > 0) {
-    // console.debug(result.parserErrors);
-  }
-  expect(result.lexerErrors).toHaveLength(0);
-  expect(result.parserErrors).toHaveLength(0);
-
+  expect.soft(result.lexerErrors).toHaveLength(0);
+  expect.soft(result.parserErrors).toHaveLength(0);
+  // To see what the error is, in the logs.
+  expect(result.lexerErrors[0]).toBeUndefined();
   expect(consoleMock).not.toHaveBeenCalled();
   consoleMock.mockReset();
 }