chore(arch): merged with develop

.github/workflows/autofix.yml

@@ -0,0 +1,41 @@
+name: autofix.ci # needed to securely identify the workflow
+
+on:
+  pull_request:
+permissions:
+  contents: read
+
+jobs:
+  autofix:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+      - name: Fix Linting
+        shell: bash
+        run: pnpm -w run lint:fix
+
+      - name: Sync `./src/config.type.ts` with `./src/schemas/config.schema.yaml`
+        shell: bash
+        run: pnpm run --filter mermaid types:build-config
+
+      - name: Build Docs
+        working-directory: ./packages/mermaid
+        run: pnpm run docs:build
+
+      - uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a

.github/workflows/lint.yml

@@ -82,15 +82,3 @@ jobs:
         working-directory: ./packages/mermaid
         continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
-
-      - name: Rebuild Docs
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
-        working-directory: ./packages/mermaid
-        run: pnpm run docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
-        with:
-          message: 'Update docs'
-          add: 'docs/*'

cypress/integration/rendering/architecture.spec.ts

@@ -1,9 +1,9 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('architecture diagram', () => {
-    it('should render a simple architecture diagram with groups', () => {
-        imgSnapshotTest(
-            `architecture
+  it('should render a simple architecture diagram with groups', () => {
+    imgSnapshotTest(
+      `architecture
                 group api(cloud)[API]
 
                 service db(database)[Database] in api
@@ -17,11 +17,11 @@ describe('architecture diagram', () => {
                 disk2 T--B db
                 server T--B gateway
             `
-        );
-    });
-    it('should render an architecture diagram with groups within groups', () => {
-        imgSnapshotTest(
-            `architecture
+    );
+  });
+  it('should render an architecture diagram with groups within groups', () => {
+    imgSnapshotTest(
+      `architecture
                 group api[API]
                 group public[Public API] in api
                 group private[Private API] in api
@@ -37,18 +37,18 @@ describe('architecture diagram', () => {
                 serv2 L--R db
                 serv1 L--R gateway
             `
-        );
-    });
-    it('should render an architecture diagram with the fallback icon', () => {
-        imgSnapshotTest(
-            `architecture
+    );
+  });
+  it('should render an architecture diagram with the fallback icon', () => {
+    imgSnapshotTest(
+      `architecture
                 service unknown(iconnamedoesntexist)[Unknown Icon]
             `
-        );
-    });
-    it('should render an architecture diagram with split directioning', () => {
-        imgSnapshotTest(
-            `architecture
+    );
+  });
+  it('should render an architecture diagram with split directioning', () => {
+    imgSnapshotTest(
+      `architecture
                 service db(database)[Database]
                 service s3(disk)[Storage]
                 service serv1(server)[Server 1]
@@ -60,11 +60,11 @@ describe('architecture diagram', () => {
                 serv2 L--B s3
                 serv1 T--B disk
             `
-        );
-    });
-    it('should render an architecture diagram with directional arrows', () => {
-        imgSnapshotTest(
-            `architecture
+    );
+  });
+  it('should render an architecture diagram with directional arrows', () => {
+    imgSnapshotTest(
+      `architecture
                 service servC(server)[Server 1]
                 service servL(server)[Server 2]
                 service servR(server)[Server 3]
@@ -81,11 +81,11 @@ describe('architecture diagram', () => {
                 servR (T--R) servT
                 servR (B--R) servB
             `
-        );
-    });
-    it('should render an architecture diagram with group edges', () => {
-        imgSnapshotTest(
-            `architecture
+    );
+  });
+  it('should render an architecture diagram with group edges', () => {
+    imgSnapshotTest(
+      `architecture
                 group left_group(cloud)[Left]
                 group right_group(cloud)[Right]
                 group top_group(cloud)[Top]
@@ -103,11 +103,11 @@ describe('architecture diagram', () => {
                 top_disk{group} (B--T) center_disk{group}
                 bottom_disk{group} (T--B) center_disk{group}
             `
-        );
-    });
-    it('should render an architecture diagram with edge labels', () => {
-        imgSnapshotTest(
-            `architecture
+    );
+  });
+  it('should render an architecture diagram with edge labels', () => {
+    imgSnapshotTest(
+      `architecture
                 service servC(server)[Server 1]
                 service servL(server)[Server 2]
                 service servR(server)[Server 3]
@@ -124,11 +124,11 @@ describe('architecture diagram', () => {
                 servR T-[Label]-R servT
                 servR B-[Label]-R servB
             `
-        );
-    });
-    it('should render an architecture diagram with simple junction edges', () => {
-        imgSnapshotTest(
-            `architecture
+    );
+  });
+  it('should render an architecture diagram with simple junction edges', () => {
+    imgSnapshotTest(
+      `architecture
                 service left_disk(disk)[Disk]
                 service top_disk(disk)[Disk]
                 service bottom_disk(disk)[Disk]
@@ -144,11 +144,11 @@ describe('architecture diagram', () => {
                 top_gateway B--T juncR
                 bottom_gateway T--B juncR
             `
-        );
-    });
-    it('should render an architecture diagram with complex junction edges', () => {
-        imgSnapshotTest(
-            `architecture
+    );
+  });
+  it('should render an architecture diagram with complex junction edges', () => {
+    imgSnapshotTest(
+      `architecture
                 group left
                 group right
                 service left_disk(disk)[Disk] in left
@@ -169,6 +169,6 @@ describe('architecture diagram', () => {
         
                 juncC{group} R--L) juncR{group}
             `
-        );
-    });
-});
+    );
+  });
+});

docs/ecosystem/integrations-community.md

@@ -208,6 +208,7 @@ Communication tools and platforms
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
+- [Madness](https://madness.dannyb.co/)
 - [mdBook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [MkDocs](https://www.mkdocs.org)

docs/syntax/packet.md

@@ -12,7 +12,7 @@ A packet diagram is a visual representation used to illustrate the structure and
 
 ## Usage
 
-This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
+This diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
 
 ## Syntax
 

packages/mermaid/package.json

@@ -82,7 +82,7 @@
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "mdast-util-from-markdown": "^2.0.0",
+    "marked": "^13.0.2",
     "stylis": "^4.3.1",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.1"
@@ -140,4 +140,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

@@ -102,7 +102,8 @@ function addGroups(groups: ArchitectureGroup[], cy: cytoscape.Core) {
 
 function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) {
   edges.forEach((parsedEdge) => {
-    const { lhsId, rhsId, lhsInto, lhsGroup, rhsInto, lhsDir, rhsDir, rhsGroup, title } = parsedEdge;
+    const { lhsId, rhsId, lhsInto, lhsGroup, rhsInto, lhsDir, rhsDir, rhsGroup, title } =
+      parsedEdge;
     const edgeType = isArchitectureDirectionXY(parsedEdge.lhsDir, parsedEdge.rhsDir)
       ? 'segments'
       : 'straight';

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -203,6 +203,7 @@ Communication tools and platforms
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
+- [Madness](https://madness.dannyb.co/)
 - [mdBook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [MkDocs](https://www.mkdocs.org)

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

@@ -6,7 +6,7 @@ A packet diagram is a visual representation used to illustrate the structure and
 
 ## Usage
 
-This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
+This diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
 
 ## Syntax
 

packages/mermaid/src/rendering-util/createText.ts

@@ -153,7 +153,7 @@ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
   wrappedLine.forEach((word, index) => {
     const innerTspan = tspan
       .append('tspan')
-      .attr('font-style', word.type === 'emphasis' ? 'italic' : 'normal')
+      .attr('font-style', word.type === 'em' ? 'italic' : 'normal')
       .attr('class', 'text-inner-tspan')
       .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
     if (index === 0) {

packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-irregular-whitespace */
 import { markdownToLines, markdownToHTML } from './handle-markdown-text.js';
 import { test, expect } from 'vitest';
 
@@ -37,9 +36,9 @@ Here is a line *with an italic* section`;
       { content: 'is', type: 'normal' },
       { content: 'a', type: 'normal' },
       { content: 'line', type: 'normal' },
-      { content: 'with', type: 'emphasis' },
-      { content: 'an', type: 'emphasis' },
-      { content: 'italic', type: 'emphasis' },
+      { content: 'with', type: 'em' },
+      { content: 'an', type: 'em' },
+      { content: 'italic', type: 'em' },
       { content: 'section', type: 'normal' },
     ],
   ];
@@ -143,7 +142,7 @@ test('markdownToLines - Only italic formatting', () => {
       { content: 'This', type: 'normal' },
       { content: 'is', type: 'normal' },
       { content: 'an', type: 'normal' },
-      { content: 'italic', type: 'emphasis' },
+      { content: 'italic', type: 'em' },
       { content: 'test', type: 'normal' },
     ],
   ];
@@ -156,7 +155,7 @@ it('markdownToLines - Mixed formatting', () => {
   let input = `*Italic* and **bold** formatting`;
   let expected = [
     [
-      { content: 'Italic', type: 'emphasis' },
+      { content: 'Italic', type: 'em' },
       { content: 'and', type: 'normal' },
       { content: 'bold', type: 'strong' },
       { content: 'formatting', type: 'normal' },
@@ -167,9 +166,9 @@ it('markdownToLines - Mixed formatting', () => {
   input = `*Italic with space* and **bold ws** formatting`;
   expected = [
     [
-      { content: 'Italic', type: 'emphasis' },
-      { content: 'with', type: 'emphasis' },
-      { content: 'space', type: 'emphasis' },
+      { content: 'Italic', type: 'em' },
+      { content: 'with', type: 'em' },
+      { content: 'space', type: 'em' },
       { content: 'and', type: 'normal' },
       { content: 'bold', type: 'strong' },
       { content: 'ws', type: 'strong' },
@@ -191,9 +190,9 @@ Word!`;
       { content: 'the', type: 'strong' },
       { content: 'hog...', type: 'normal' },
       { content: 'a', type: 'normal' },
-      { content: 'very', type: 'emphasis' },
-      { content: 'long', type: 'emphasis' },
-      { content: 'text', type: 'emphasis' },
+      { content: 'very', type: 'em' },
+      { content: 'long', type: 'em' },
+      { content: 'text', type: 'em' },
       { content: 'about', type: 'normal' },
       { content: 'it', type: 'normal' },
     ],
@@ -215,13 +214,13 @@ test('markdownToLines - No auto wrapping', () => {
     [
       [
         {
-          "content": "Hello, how do",
+          "content": "Hello, how do",
           "type": "normal",
         },
       ],
       [
         {
-          "content": "you do?",
+          "content": "you do?",
           "type": "normal",
         },
       ],
@@ -298,3 +297,13 @@ test('markdownToHTML - no auto wrapping', () => {
     )
   ).toMatchInlineSnapshot('"<p>Hello,&nbsp;how&nbsp;do<br/>you&nbsp;do?</p>"');
 });
+
+test('markdownToHTML - auto wrapping', () => {
+  expect(
+    markdownToHTML(
+      `Hello, how do
+  you do?`,
+      { markdownAutoWrap: true }
+    )
+  ).toMatchInlineSnapshot('"<p>Hello, how do<br/>you do?</p>"');
+});