style(arch): prettier formatting

.vite/jsonSchemaPlugin.ts

@@ -26,7 +26,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'c4',
   'sankey',
   'block',
-  'architecture'
+  'architecture',
 ] as const;
 
 /**

packages/mermaid/scripts/create-types-from-json-schema.mts

@@ -54,7 +54,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'gitGraph',
   'c4',
   'sankey',
-  'architecture'
+  'architecture',
 ];
 
 /**

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

@@ -21,7 +21,7 @@ import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
 import block from '../diagrams/block/blockDetector.js';
-import architecture from '../diagrams/architecture/architectureDetector.js'
+import architecture from '../diagrams/architecture/architectureDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 

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

@@ -1,5 +1,12 @@
-import type { ArchitectureFields, ArchitectureDB, ArchitectureService, ArchitectureGroup, ArchitectureDirection, ArchitectureLine } from "./architectureTypes.js";
+import type {
-import { isArchitectureDirection } from "./architectureTypes.js";
+  ArchitectureFields,
+  ArchitectureDB,
+  ArchitectureService,
+  ArchitectureGroup,
+  ArchitectureDirection,
+  ArchitectureLine,
+} from './architectureTypes.js';
+import { isArchitectureDirection } from './architectureTypes.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -11,9 +18,10 @@ import {
 } from '../common/commonDb.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
-import type { D3Element } from "../../mermaidAPI.js";
+import type { D3Element } from '../../mermaidAPI.js';
 
-export const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> = DEFAULT_CONFIG.architecture;
+export const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> =
+  DEFAULT_CONFIG.architecture;
 export const DEFAULT_ARCHITECTURE_DB: ArchitectureFields = {
   services: [],
   groups: [],
@@ -41,37 +49,46 @@ const clear = (): void => {
   commonClear();
 };
 
-const addService = function (id: string, opts: Omit<ArchitectureService, "id"> = {}) {
+const addService = function (id: string, opts: Omit<ArchitectureService, 'id'> = {}) {
-  const {icon, in: inside, title} = opts;
+  const { icon, in: inside, title } = opts;
   services.push({
     id,
     icon,
     title,
-    in: inside
+    in: inside,
   });
-}
+};
 const getServices = (): ArchitectureService[] => services;
 
-const addGroup = function (id: string, opts: Omit<ArchitectureGroup, "id"> = {}) {
+const addGroup = function (id: string, opts: Omit<ArchitectureGroup, 'id'> = {}) {
-  const {icon, in: inside, title} = opts;
+  const { icon, in: inside, title } = opts;
   groups.push({
     id,
     icon,
     title,
-    in: inside
+    in: inside,
   });
-}
+};
 const getGroups = (): ArchitectureGroup[] => groups;
 
+const addLine = function (
+  lhs_id: string,
+  lhs_dir: ArchitectureDirection,
+  rhs_id: string,
+  rhs_dir: ArchitectureDirection,
+  opts: Omit<ArchitectureLine, 'lhs_id' | 'lhs_dir' | 'rhs_id' | 'rhs_dir'> = {}
+) {
+  const { title, lhs_into, rhs_into } = opts;
 
-const addLine = function (lhs_id: string, lhs_dir: ArchitectureDirection, rhs_id: string, rhs_dir: ArchitectureDirection, opts: Omit<ArchitectureLine, "lhs_id" | "lhs_dir" | "rhs_id" | "rhs_dir"> = {}) {
-  const {title, lhs_into, rhs_into} = opts;
-  
   if (!isArchitectureDirection(lhs_dir)) {
-    throw new Error(`Invalid direction given for left hand side of line ${lhs_id}--${rhs_id}. Expected (L,R,T,B) got ${lhs_dir}`)
+    throw new Error(
+      `Invalid direction given for left hand side of line ${lhs_id}--${rhs_id}. Expected (L,R,T,B) got ${lhs_dir}`
+    );
   }
   if (!isArchitectureDirection(rhs_dir)) {
-    throw new Error(`Invalid direction given for right hand side of line ${lhs_id}--${rhs_id}. Expected (L,R,T,B) got ${rhs_dir}`)
+    throw new Error(
+      `Invalid direction given for right hand side of line ${lhs_id}--${rhs_id}. Expected (L,R,T,B) got ${rhs_dir}`
+    );
   }
 
   lines.push({
@@ -81,19 +98,16 @@ const addLine = function (lhs_id: string, lhs_dir: ArchitectureDirection, rhs_id
     rhs_dir,
     title,
     lhs_into,
-    rhs_into
+    rhs_into,
   });
-}
+};
 const getLines = (): ArchitectureLine[] => lines;
 
-
 const setElementForId = (id: string, element: D3Element) => {
   elements[id] = element;
 };
 const getElementById = (id: string) => elements[id];
 
-
-
 export const db: ArchitectureDB = {
   getConfig,
   clear,
@@ -103,7 +117,7 @@ export const db: ArchitectureDB = {
   getAccTitle,
   setAccDescription,
   getAccDescription,
-  
+
   addService,
   getServices,
   addGroup,
@@ -111,5 +125,5 @@ export const db: ArchitectureDB = {
   addLine,
   getLines,
   setElementForId,
-  getElementById
+  getElementById,
-};
+};

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

@@ -37,7 +37,7 @@ function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
         width: 80,
         height: 80,
       },
-      classes: 'node-service'
+      classes: 'node-service',
     });
   });
 }
@@ -60,16 +60,15 @@ function addGroups(groups: ArchitectureGroup[], cy: cytoscape.Core) {
         id: group.id,
         icon: group.icon,
         label: group.title,
-        parent: group.in
+        parent: group.in,
       },
-      classes: 'node-group'
+      classes: 'node-group',
     });
   });
 }
 
 function positionServices(db: ArchitectureDB, cy: cytoscape.Core) {
   cy.nodes().map((node, id) => {
-
     const data = node.data();
     if (data.type === 'group') return;
     data.x = node.position().x;
@@ -118,7 +117,7 @@ function layoutArchitecture(
           style: {
             //@ts-ignore
             'compound-sizing-wrt-labels': 'include',
-          }
+          },
         },
         {
           selector: 'node[label]',
@@ -126,23 +125,23 @@ function layoutArchitecture(
             'text-valign': 'bottom',
             'text-halign': 'center',
             'font-size': '16px',
-          }
+          },
         },
         {
           selector: '.node-service',
           style: {
-            'label': 'data(label)',
+            label: 'data(label)',
-            'width': 'data(width)',
+            width: 'data(width)',
-            'height': 'data(height)',
+            height: 'data(height)',
-          }
+          },
         },
         {
           selector: '.node-group',
           style: {
             //@ts-ignore
-            "padding": '30px'
+            padding: '30px',
-          }
+          },
-        }
+        },
       ],
     });
     // Remove element after layout
@@ -150,11 +149,11 @@ function layoutArchitecture(
 
     addGroups(groups, cy);
     addServices(services, cy);
-    addEdges(lines, cy);   
+    addEdges(lines, cy);
 
     /**
      * Merge alignment pairs together if they share a common node.
-     * 
+     *
      * Example: [["a", "b"], ["b", "c"], ["d", "e"]] -> [["a", "b", "c"], ["d", "e"]]
      */
     const mergeAlignments = (orig: string[][]): string[][] => {
@@ -195,7 +194,7 @@ function layoutArchitecture(
 
       console.log('End: ', newAlignments);
       return newAlignments;
-    }
+    };
 
     const horizontalAlignments = cy
       .edges()
@@ -223,7 +222,7 @@ function layoutArchitecture(
       nodeDimensionsIncludeLabels: true,
       alignmentConstraint: {
         horizontal: mergeAlignments(horizontalAlignments),
-        vertical: mergeAlignments(verticalAlignments)
+        vertical: mergeAlignments(verticalAlignments),
       },
       relativePlacementConstraint: cy.edges().map((edge) => {
         const sourceDir = edge.data('sourceDir') as ArchitectureDirection;
@@ -231,19 +230,20 @@ function layoutArchitecture(
         const sourceId = edge.data('source') as string;
         const targetId = edge.data('target') as string;
 
-        if (
+        if (isArchitectureDirectionX(sourceDir) && isArchitectureDirectionX(targetDir)) {
-          isArchitectureDirectionX(sourceDir) &&
+          return {
-          isArchitectureDirectionX(targetDir)
+            left: sourceDir === 'R' ? sourceId : targetId,
-        ) {
+            right: sourceDir === 'L' ? sourceId : targetId,
-          return { left: sourceDir === 'R' ? sourceId : targetId, right: sourceDir === 'L' ? sourceId : targetId, gap: 180 }
+            gap: 180,
-        } else if (
+          };
-          isArchitectureDirectionY(sourceDir) &&
+        } else if (isArchitectureDirectionY(sourceDir) && isArchitectureDirectionY(targetDir)) {
-          isArchitectureDirectionY(targetDir)
+          return {
-        ) {
+            top: sourceDir === 'B' ? sourceId : targetId,
-          return { top: sourceDir === 'B' ? sourceId : targetId, bottom: sourceDir === 'T' ? sourceId : targetId, gap: 180 }
+            bottom: sourceDir === 'T' ? sourceId : targetId,
+            gap: 180,
+          };
         }
         // TODO: fallback case + RB, TL, etc
-
       }),
     } as FcoseLayoutOptions).run();
     cy.ready((e) => {
@@ -289,8 +289,6 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
     conf.architecture?.padding ?? defaultConfig.architecture.padding,
     conf.architecture?.useMaxWidth ?? defaultConfig.architecture.useMaxWidth
   );
-
-
 };
 
 export const renderer = { draw };

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

@@ -2,65 +2,75 @@ import type { DiagramDB } from '../../diagram-api/types.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import type { D3Element } from '../../mermaidAPI.js';
 
-export type ArchitectureDirection = 'L' | 'R' | 'T' | 'B'
+export type ArchitectureDirection = 'L' | 'R' | 'T' | 'B';
-export const isArchitectureDirection = function(x: unknown): x is ArchitectureDirection {
+export const isArchitectureDirection = function (x: unknown): x is ArchitectureDirection {
-    const temp = x as ArchitectureDirection;
+  const temp = x as ArchitectureDirection;
-    return (temp === 'L' || temp === 'R' || temp === 'T' || temp === 'B')
+  return temp === 'L' || temp === 'R' || temp === 'T' || temp === 'B';
-}
+};
-export const isArchitectureDirectionX = function(x: ArchitectureDirection): x is Extract<ArchitectureDirection, 'L' | 'R'> {
+export const isArchitectureDirectionX = function (
-    const temp = x as Extract<ArchitectureDirection, 'L' | 'R'>
+  x: ArchitectureDirection
-    return (temp === 'L' || temp === 'R')
+): x is Extract<ArchitectureDirection, 'L' | 'R'> {
-}
+  const temp = x as Extract<ArchitectureDirection, 'L' | 'R'>;
-export const isArchitectureDirectionY = function(x: ArchitectureDirection): x is Extract<ArchitectureDirection, 'T' | 'B'> {
+  return temp === 'L' || temp === 'R';
-    const temp = x as Extract<ArchitectureDirection, 'T' | 'B'>
+};
-    return (temp === 'T' || temp === 'B')
+export const isArchitectureDirectionY = function (
-}
+  x: ArchitectureDirection
+): x is Extract<ArchitectureDirection, 'T' | 'B'> {
+  const temp = x as Extract<ArchitectureDirection, 'T' | 'B'>;
+  return temp === 'T' || temp === 'B';
+};
 
 export interface ArchitectureStyleOptions {
-    fontFamily: string;
+  fontFamily: string;
 }
 
 export interface ArchitectureService {
-    id: string;
+  id: string;
-    icon?: string;
+  icon?: string;
-    title?: string;
+  title?: string;
-    in?: string;
+  in?: string;
-    width?: number;
+  width?: number;
-    height?: number;
+  height?: number;
 }
 
 export interface ArchitectureGroup {
-    id: string;
+  id: string;
-    icon?: string;
+  icon?: string;
-    title?: string;
+  title?: string;
-    in?: string;
+  in?: string;
 }
 
 export interface ArchitectureLine {
-    lhs_id: string;
+  lhs_id: string;
-    lhs_dir: ArchitectureDirection;
+  lhs_dir: ArchitectureDirection;
-    title?: string;
+  title?: string;
-    rhs_id: string;
+  rhs_id: string;
-    rhs_dir: ArchitectureDirection;
+  rhs_dir: ArchitectureDirection;
-    lhs_into?: boolean;
+  lhs_into?: boolean;
-    rhs_into?: boolean;
+  rhs_into?: boolean;
 }
 
 export interface ArchitectureDB extends DiagramDB {
-    addService: (id: string, opts: Omit<ArchitectureService, "id">)  => void
+  addService: (id: string, opts: Omit<ArchitectureService, 'id'>) => void;
-    getServices: () => ArchitectureService[]
+  getServices: () => ArchitectureService[];
-    addGroup: (id: string, opts: Omit<ArchitectureGroup, "id">)  => void
+  addGroup: (id: string, opts: Omit<ArchitectureGroup, 'id'>) => void;
-    getGroups: () => ArchitectureGroup[]
+  getGroups: () => ArchitectureGroup[];
-    addLine: (lhs_id: string, lhs_dir: ArchitectureDirection, rhs_id: string, rhs_dir: ArchitectureDirection, opts: Omit<ArchitectureLine, "lhs_id" | "lhs_dir" | "rhs_id" | "rhs_dir">)  => void
+  addLine: (
-    getLines: () => ArchitectureLine[]
+    lhs_id: string,
-    setElementForId:  (id: string, element: D3Element) => void;
+    lhs_dir: ArchitectureDirection,
-    getElementById: (id: string) => D3Element;
+    rhs_id: string,
+    rhs_dir: ArchitectureDirection,
+    opts: Omit<ArchitectureLine, 'lhs_id' | 'lhs_dir' | 'rhs_id' | 'rhs_dir'>
+  ) => void;
+  getLines: () => ArchitectureLine[];
+  setElementForId: (id: string, element: D3Element) => void;
+  getElementById: (id: string) => D3Element;
 }
 
 export interface ArchitectureFields {
-    services: ArchitectureService[],
+  services: ArchitectureService[];
-    groups: ArchitectureGroup[],
+  groups: ArchitectureGroup[];
-    lines: ArchitectureLine[],
+  lines: ArchitectureLine[];
-    cnt: number,
+  cnt: number;
-    config: ArchitectureDiagramConfig
+  config: ArchitectureDiagramConfig;
-}
+}

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

@@ -1,6 +1,9 @@
 import type { D3Element } from '../../mermaidAPI.js';
 import { createText } from '../../rendering-util/createText.js';
-import type { ArchitectureDB, ArchitectureGroup, ArchitectureService } from './architectureTypes.js';
+import type {
+  ArchitectureDB,
+  ArchitectureService,
+} from './architectureTypes.js';
 import type { MermaidConfig } from '../../config.type.js';
 import type cytoscape from 'cytoscape';
 import { log } from '../../logger.js';
@@ -30,25 +33,27 @@ declare module 'cytoscape' {
         y1: number;
         y2: number;
       };
-      children: cytoscape.NodeSingular[]
+      children: cytoscape.NodeSingular[];
     };
-    data: () => {
+    data: () =>
-      type: 'service',
+      | {
-      id: string,
+          type: 'service';
-      icon?: string,
+          id: string;
-      label?: string,
+          icon?: string;
-      parent?: string,
+          label?: string;
-      width: number,
+          parent?: string;
-      height: number,
+          width: number;
-      [key: string]: any
+          height: number;
-    } | {
+          [key: string]: any;
-      type: 'group',
+        }
-      id: string,
+      | {
-      icon?: string,
+          type: 'group';
-      label?: string,
+          id: string;
-      parent?: string,
+          icon?: string;
-      [key: string]: any
+          label?: string;
-    }
+          parent?: string;
+          [key: string]: any;
+        };
   }
 }
 
@@ -65,20 +70,18 @@ export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
           'd',
           `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
         )
-        .attr('class', 'edge')
+        .attr('class', 'edge');
     }
-  })
+  });
-}
+};
 
-export const drawGroups = function (
+export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
-  groupsEl: D3Element,
-  cy: cytoscape.Core
-) {
   cy.nodes().map((node, id) => {
     const data = node.data();
     if (data.type === 'group') {
       const { h, w, x1, x2, y1, y2 } = node.boundingBox();
-      let bkgElem = groupsEl.append('rect')
+      let bkgElem = groupsEl
+        .append('rect')
         .attr('x', x1 + 40)
         .attr('y', y1 + 40)
         .attr('width', w)
@@ -97,13 +100,10 @@ export const drawGroups = function (
         .attr('dominant-baseline', 'start')
         .attr('text-anchor', 'start');
 
-      textElem.attr(
+      textElem.attr('transform', 'translate(' + (x1 + 44) + ', ' + (y1 + 42) + ')');
-        'transform',
-        'translate(' + (x1 + 44) + ', ' + (y1 + 42) + ')'
-      );
     }
-  })
+  });
-}
+};
 
 export const drawService = function (
   db: ArchitectureDB,
@@ -131,21 +131,20 @@ export const drawService = function (
       // TODO: dynamic size
       'translate(' + 80 / 2 + ', ' + 80 + ')'
     );
-
   }
 
   let bkgElem = serviceElem.append('g');
   if (service.icon) {
     if (!isIconNameInUse(service.icon)) {
-      throw new Error(`Invalid SVG Icon name: "${service.icon}"`)
+      throw new Error(`Invalid SVG Icon name: "${service.icon}"`);
     }
     bkgElem = getIcon(service.icon)?.(bkgElem);
   } else {
-    bkgElem.append('path').attr('class', 'node-bkg').attr('id', 'node-' + service.id).attr(
+    bkgElem
-      'd',
+      .append('path')
-      `M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${80 - 2 * 0
+      .attr('class', 'node-bkg')
-      } q5,0 5,5 v${80 - 0} H0 Z`
+      .attr('id', 'node-' + service.id)
-    );
+      .attr('d', `M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${80 - 2 * 0} q5,0 5,5 v${80 - 0} H0 Z`);
   }
 
   serviceElem.attr('class', 'architecture-service');

packages/mermaid/src/schemas/config.schema.yaml

@@ -858,7 +858,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
 
   ArchitectureDiagramConfig:
     title: Architecture Diagram Config
-    allOf: [{ $ref: '#/$defs/BaseDiagramConfig'}]
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
     description: The object containing configurations specific for architecture diagrams
     type: object
     unevaluatedProperties: false