diff --git a/.eslintrc.json b/.eslintrc.json index b8053795e..d83222f3a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,26 +16,17 @@ "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", - "plugin:jsdoc/recommended", "plugin:json/recommended", "plugin:markdown/recommended", + "plugin:@cspell/recommended", "prettier" ], - "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"], + "plugins": ["@typescript-eslint", "no-only-tests", "html", "jest", "jsdoc", "json", "@cspell"], "rules": { + "curly": "error", "no-console": "error", "no-prototype-builtins": "off", "no-unused-vars": "off", - "jsdoc/check-indentation": "off", - "jsdoc/check-alignment": "off", - "jsdoc/check-line-alignment": "off", - "jsdoc/multiline-blocks": "off", - "jsdoc/newline-after-description": "off", - "jsdoc/tag-lines": "off", - "jsdoc/require-param-description": "off", - "jsdoc/require-param-type": "off", - "jsdoc/require-returns": "off", - "jsdoc/require-returns-description": "off", "cypress/no-async-tests": "off", "@typescript-eslint/ban-ts-comment": [ "error", @@ -48,7 +39,21 @@ } ], "json/*": ["error", "allowComments"], - "no-empty": ["error", { "allowEmptyCatch": true }] + "@cspell/spellchecker": [ + "error", + { + "checkIdentifiers": false, + "checkStrings": false, + "checkStringTemplates": false + } + ], + "no-empty": [ + "error", + { + "allowEmptyCatch": true + } + ], + "no-only-tests/no-only-tests": "error" }, "overrides": [ { @@ -57,6 +62,29 @@ "no-console": "off" } }, + { + "files": ["*.{js,jsx,mjs,cjs}"], + "extends": ["plugin:jsdoc/recommended"], + "rules": { + "jsdoc/check-indentation": "off", + "jsdoc/check-alignment": "off", + "jsdoc/check-line-alignment": "off", + "jsdoc/multiline-blocks": "off", + "jsdoc/newline-after-description": "off", + "jsdoc/tag-lines": "off", + "jsdoc/require-param-description": "off", + "jsdoc/require-param-type": "off", + "jsdoc/require-returns": "off", + "jsdoc/require-returns-description": "off" + } + }, + { + "files": ["*.{ts,tsx}"], + "plugins": ["tsdoc"], + "rules": { + "tsdoc/syntax": "error" + } + }, { "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"], "rules": { diff --git a/.github/dependabot.yml b/.github/dependabot.yml deleted file mode 100644 index 5add84f22..000000000 --- a/.github/dependabot.yml +++ /dev/null @@ -1,18 +0,0 @@ -version: 2 -updates: - - package-ecosystem: npm - open-pull-requests-limit: 10 - directory: / - target-branch: develop - versioning-strategy: increase - schedule: - interval: weekly - day: monday - time: '07:00' - - package-ecosystem: github-actions - directory: / - target-branch: develop - schedule: - interval: weekly - day: monday - time: '07:00' diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 1e08a5c16..a7ad03a7a 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -16,9 +16,9 @@ jobs: name: 'Docs: Spellcheck' runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 name: Check out the code - - uses: actions/setup-node@v1 + - uses: actions/setup-node@v3 name: Setup node with: node-version: '16' diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..f87a04434 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +auto-install-peers=true \ No newline at end of file diff --git a/.vite/server.ts b/.vite/server.ts index c62b6236a..334398dd8 100644 --- a/.vite/server.ts +++ b/.vite/server.ts @@ -1,7 +1,15 @@ -import express from 'express'; +import express, { NextFunction, Request, Response } from 'express'; import { createServer as createViteServer } from 'vite'; // import { getBuildConfig } from './build'; +const cors = (req: Request, res: Response, next: NextFunction) => { + res.header('Access-Control-Allow-Origin', '*'); + res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); + res.header('Access-Control-Allow-Headers', 'Content-Type'); + + next(); +}; + async function createServer() { const app = express(); @@ -12,6 +20,7 @@ async function createServer() { appType: 'custom', // don't include Vite's default HTML handling middlewares }); + app.use(cors); app.use(express.static('./packages/mermaid/dist')); app.use(express.static('./packages/mermaid-example-diagram/dist')); app.use(express.static('./packages/mermaid-mindmap/dist')); diff --git a/README.md b/README.md index 90ae1ad4c..6d5d26463 100644 --- a/README.md +++ b/README.md @@ -164,6 +164,7 @@ Class01 <|-- AveryLongClass : Cool Class09 --> C2 : Where am I? Class09 --* C3 Class09 --|> Class07 +note "I love this diagram!\nDo you love it?" Class07 : equals() Class07 : Object[] elementData Class01 : size() @@ -174,6 +175,7 @@ class Class10 { int id size() } +note for Class10 "Cool class\nI said it's very cool class!" ``` ### State diagram [docs - live editor] diff --git a/cSpell.json b/cSpell.json index 5abf6e283..b9040b664 100644 --- a/cSpell.json +++ b/cSpell.json @@ -13,7 +13,8 @@ "sandboxed", "Sveidqvist", "verdana", - "Visio" + "Visio", + "mermiad" ], "ignoreWords": [ "Adamiecki", @@ -38,7 +39,31 @@ "Podlite", "redmine", "sphinxcontrib", - "Tuleap" + "Tuleap", + "dagre", + "vitepress", + "docsify", + "colour", + "graphlib", + "acyclicer", + "ranksep", + "descr", + "substate", + "Ashish", + "bbox", + "techn", + "cytoscape", + "Lucida", + "Bilkent", + "cpettitt", + "antiscript", + "ts-nocheck", + "setupGraphViewbox", + "flatmap", + "Kaufmann", + "viewports", + "edgechromium", + "statediagram" ], "patterns": [ { diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js index bee9a59f0..bc5282e11 100644 --- a/cypress/helpers/util.js +++ b/cypress/helpers/util.js @@ -45,7 +45,6 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => options.fontSize = '16px'; } const useAppli = Cypress.env('useAppli'); - //const useAppli = false; cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); @@ -59,7 +58,9 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => const url = mermaidUrl(graphStr, options, api); cy.visit(url); - if (validation) cy.get('svg').should(validation); + if (validation) { + cy.get('svg').should(validation); + } cy.get('svg'); // Default name to test title @@ -107,7 +108,9 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => { } cy.visit(url); - if (validation) cy.get('svg').should(validation); + if (validation) { + cy.get('svg').should(validation); + } cy.get('body'); // Default name to test title diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js index d6a83eb8b..462fe869c 100644 --- a/cypress/integration/rendering/appli.spec.js +++ b/cypress/integration/rendering/appli.spec.js @@ -21,7 +21,7 @@ describe('Git Graph diagram', () => { // // Call Open on eyes to initialize a test session // cy.eyesOpen({ // appName: 'Demo App', - // testName: 'Ultrafast grid demo', + // testName: 'UltraFast grid demo', // }); // // check the login page with fluent api, see more info here diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index d285a9237..e36693a65 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -478,4 +478,22 @@ describe('Class diagram V2', () => { ); cy.get('svg'); }); + + it('18: should render a simple class diagram with notes', () => { + imgSnapshotTest( + ` + classDiagram-v2 + note "I love this diagram!\nDo you love it?" + class Class10 { + <> + int id + size() + } + note for Class10 "Cool class\nI said it's very cool class!" + + `, + { logLevel: 1, flowchart: { htmlLabels: false } } + ); + cy.get('svg'); + }); }); diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 8cf410d05..16601652d 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -407,4 +407,21 @@ describe('Class diagram', () => { // // expect(svg).to.not.have.attr('style'); // }); // }); + + it('19: should render a simple class diagram with notes', () => { + imgSnapshotTest( + ` + classDiagram + note "I love this diagram!\nDo you love it?" + class Class10 { + <> + int id + size() + } + note for Class10 "Cool class\nI said it's very cool class!" + `, + { logLevel: 1 } + ); + cy.get('svg'); + }); }); diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 0f9084e7c..057b36dc1 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -167,7 +167,7 @@ describe('Entity Relationship Diagram', () => { cy.get('svg'); }); - it.only('should render entities with generic and array attributes', () => { + it('should render entities with generic and array attributes', () => { renderGraph( ` erDiagram @@ -255,4 +255,22 @@ describe('Entity Relationship Diagram', () => { ); cy.get('svg'); }); + + it('should render entities with aliases', () => { + renderGraph( + ` + erDiagram + T1 one or zero to one or more T2 : test + T2 one or many optionally to zero or one T3 : test + T3 zero or more to zero or many T4 : test + T4 many(0) to many(1) T5 : test + T5 many optionally to one T6 : test + T6 only one optionally to only one T1 : test + T4 0+ to 1+ T6 : test + T1 1 to 1 T3 : test + `, + { logLevel: 1 } + ); + cy.get('svg'); + }); }); diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 506ac51ae..f30f993fa 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -56,50 +56,40 @@
Security check
-classDiagram
-        direction LR
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
+flowchart TD
+    A --> B
+    B --> C
+    A --> C
     
-
+    
 mindmap
-  root
-    A
-    B
-    C
-    D
-    E
-    A2
-    B2
-    C2
-    D2
-    E2
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand
child 6)) - ::icon(mdi mdi-fire) - gc7((grand
grand
child 8)) + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + ::icon(fa fa-book) + British popular psychology author Tony Buzan + Research + ::icon(fa fa-book) + On effectivness
and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid
-
-      example-diagram
+    
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
     
@@ -113,16 +103,21 @@ mindmap // console.error('Mermaid error: ', err); }; mermaid.initialize({ - theme: 'forest', + theme: 'base', startOnLoad: true, logLevel: 0, - // basePath: './packages/', - // themeVariables: { darkMode: true }, + flowchart: { + useMaxWidth: false, + htmlLabels: true, + }, + gantt: { + useMaxWidth: false, + }, + useMaxWidth: false, lazyLoadedDiagrams: [ './mermaid-mindmap-detector.esm.mjs', './mermaid-example-diagram-detector.esm.mjs', ], - // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'], }); function callback() { alert('It worked'); @@ -131,6 +126,10 @@ mindmap console.error('In parse error:'); console.error(err); }; + // mermaid.test1('first_slow', 1200).then((r) => console.info(r)); + // mermaid.test1('second_fast', 200).then((r) => console.info(r)); + // mermaid.test1('third_fast', 200).then((r) => console.info(r)); + // mermaid.test1('forth_slow', 1200).then((r) => console.info(r)); diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index f0426dc09..1333d7ec0 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -120,7 +120,9 @@ const contentLoadedApi = function () { (svgCode, bindFunctions) => { div.innerHTML = svgCode; - if (bindFunctions) bindFunctions(div); + if (bindFunctions) { + bindFunctions(div); + } }, div ); diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html index fed0e4289..b2f67cd93 100644 --- a/cypress/platform/xss21.html +++ b/cypress/platform/xss21.html @@ -94,7 +94,7 @@ } // var diagram = ` graph TD - // A --> B["<a href='javasc`; + // A --> B["<a href='javascript`; // diagram += `ript#colon;xssAttack()'>AAA</a>"]`; let diagram = ` graph TD A --> B[" - - - + + + @@ -57,6 +80,7 @@ let parser = new DOMParser(); let currentCodeExample = 0; let colorize = []; + let num = 0; function colorizeEverything(html) { initEditor(monaco); @@ -127,8 +151,9 @@ hook.afterEach(function (html, next) { next(html); (async () => { - while (!window.hasOwnProperty('monaco')) + while (!window.hasOwnProperty('monaco')) { await new Promise((resolve) => setTimeout(resolve, 1000)); + } colorizeEverything(html).then( (newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML) @@ -146,7 +171,9 @@ startOnLoad: false, themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }', }; - if (isDarkMode) conf.theme = 'dark'; + if (isDarkMode) { + conf.theme = 'dark'; + } mermaid.initialize(conf);
+ * ```html + * + * ``` * * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). * A description of each option follows below. - * - * @name Configuration */ const config: Partial = { /** @@ -30,8 +38,16 @@ const config: Partial = { * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | * - * **Notes:** To disable any pre-defined mermaid theme, use "null".
 "theme": "forest",
-   * "themeCSS": ".node rect { fill: red; }" 
+ * **Notes:** To disable any pre-defined mermaid theme, use "null". + * + * @example + * + * ```js + * { + * "theme": "forest", + * "themeCSS": ".node rect { fill: red; }" + * } + * ``` */ theme: 'default', themeVariables: theme['default'].getThemeVariables(), @@ -119,11 +135,11 @@ const config: Partial = { /** * This option controls if the generated ids of nodes in the SVG are generated randomly or based * on a seed. If set to false, the IDs are generated based on the current date and thus are not - * deterministic. This is the default behaviour. + * deterministic. This is the default behavior. * * **Notes**: * - * This matters if your files are checked into sourcecontrol e.g. git and should not change unless + * This matters if your files are checked into source control e.g. git and should not change unless * content is changed. * * Default value: false @@ -633,9 +649,9 @@ const config: Partial = { numberSectionStyles: 4, /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | --------------------------- | ---- | -------- | ---------------- | - * | axisFormat | Datetime format of the axis | 3 | Required | Date in yy-mm-dd | + * | Parameter | Description | Type | Required | Values | + * | ---------- | ---------------------------- | ---- | -------- | ---------------- | + * | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd | * * **Notes:** * @@ -1168,7 +1184,7 @@ const config: Partial = { * | --------------- | ----------- | ------- | -------- | ------------------ | * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value | * - * **Notes:** How many boundarys to place in each row. + * **Notes:** How many boundaries to place in each row. * * Default value: 2 */ @@ -1833,8 +1849,12 @@ const config: Partial = { fontSize: 16, }; -if (config.class) config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; -if (config.gitGraph) config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; +if (config.class) { + config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; +} +if (config.gitGraph) { + config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; +} const keyify = (obj: any, prefix = ''): string[] => Object.keys(obj).reduce((res: string[], el): string[] => { diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts index 9536fded2..1c1abc51c 100644 --- a/packages/mermaid/src/diagram-api/detectType.ts +++ b/packages/mermaid/src/diagram-api/detectType.ts @@ -9,10 +9,13 @@ const anyComment = /\s*%%.*\n/gm; const detectors: Record = {}; /** - * @function detectType Detects the type of the graph text. Takes into consideration the possible - * existence of an %%init directive + * Detects the type of the graph text. * - * ```mermaid + * Takes into consideration the possible existence of an `%%init` directive + * + * @param text - The text defining the graph. For example: + * + * ```mermaid * %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%% * graph LR * a-->b @@ -23,13 +26,9 @@ const detectors: Record = {}; * f-->g * g-->h * ``` - * @param {string} text The text defining the graph - * @param {{ - * class: { defaultRenderer: string } | undefined; - * state: { defaultRenderer: string } | undefined; - * flowchart: { defaultRenderer: string } | undefined; - * }} [config] - * @returns {string} A graph definition key + * + * @param config - The mermaid config. + * @returns A graph definition key */ export const detectType = function (text: string, config?: MermaidConfig): string { text = text.replace(directive, '').replace(anyComment, '\n'); diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index 2bc8091ec..50efd76de 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -7,9 +7,9 @@ import { addStylesForDiagram } from '../styles'; import { DiagramDefinition, DiagramDetector } from './types'; /* - Packaging and exposing resources for externa diagrams so that they can import - diagramAPI and have access to selct parts of mermaid common code reqiored to - create diagrams worling like the internal diagrams. + Packaging and exposing resources for external diagrams so that they can import + diagramAPI and have access to select parts of mermaid common code required to + create diagrams working like the internal diagrams. */ export const log = _log; export const setLogLevel = _setLogLevel; diff --git a/packages/mermaid/src/diagrams/c4/c4Db.js b/packages/mermaid/src/diagrams/c4/c4Db.js index 79028a0c5..d337b15c0 100644 --- a/packages/mermaid/src/diagrams/c4/c4Db.js +++ b/packages/mermaid/src/diagrams/c4/c4Db.js @@ -49,8 +49,9 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag to === null || label === undefined || label === null - ) + ) { return; + } let rel = {}; const old = rels.find((rel) => rel.from === from && rel.to === to); @@ -111,7 +112,9 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag //type, alias, label, ?descr, ?sprite, ?tags, $link export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, sprite, tags, link) { // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let personOrSystem = {}; const old = c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias); @@ -166,7 +169,9 @@ export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, spr //type, alias, label, ?techn, ?descr ?sprite, ?tags, $link export const addContainer = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) { // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let container = {}; const old = c4ShapeArray.find((container) => container.alias === alias); @@ -232,7 +237,9 @@ export const addContainer = function (typeC4Shape, alias, label, techn, descr, s //type, alias, label, ?techn, ?descr ?sprite, ?tags, $link export const addComponent = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) { // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let component = {}; const old = c4ShapeArray.find((component) => component.alias === alias); @@ -300,7 +307,9 @@ export const addPersonOrSystemBoundary = function (alias, label, type, tags, lin // if (parentBoundary === null) return; // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let boundary = {}; const old = boundarys.find((boundary) => boundary.alias === alias); @@ -354,7 +363,9 @@ export const addContainerBoundary = function (alias, label, type, tags, link) { // if (parentBoundary === null) return; // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let boundary = {}; const old = boundarys.find((boundary) => boundary.alias === alias); @@ -417,7 +428,9 @@ export const addDeploymentNode = function ( // if (parentBoundary === null) return; // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let boundary = {}; const old = boundarys.find((boundary) => boundary.alias === alias); @@ -646,8 +659,12 @@ export const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4Bo c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam); } - if (c4ShapeInRowValue >= 1) c4ShapeInRow = c4ShapeInRowValue; - if (c4BoundaryInRowValue >= 1) c4BoundaryInRow = c4BoundaryInRowValue; + if (c4ShapeInRowValue >= 1) { + c4ShapeInRow = c4ShapeInRowValue; + } + if (c4BoundaryInRowValue >= 1) { + c4BoundaryInRow = c4BoundaryInRowValue; + } }; export const getC4ShapeInRow = function () { @@ -665,11 +682,13 @@ export const getParentBoundaryParse = function () { }; export const getC4ShapeArray = function (parentBoundary) { - if (parentBoundary === undefined || parentBoundary === null) return c4ShapeArray; - else + if (parentBoundary === undefined || parentBoundary === null) { + return c4ShapeArray; + } else { return c4ShapeArray.filter((personOrSystem) => { return personOrSystem.parentBoundary === parentBoundary; }); + } }; export const getC4Shape = function (alias) { return c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias); @@ -679,8 +698,11 @@ export const getC4ShapeKeys = function (parentBoundary) { }; export const getBoundarys = function (parentBoundary) { - if (parentBoundary === undefined || parentBoundary === null) return boundarys; - else return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary); + if (parentBoundary === undefined || parentBoundary === null) { + return boundarys; + } else { + return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary); + } }; export const getRels = function () { diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js index dceca2887..a9072346a 100644 --- a/packages/mermaid/src/diagrams/c4/c4Renderer.js +++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js @@ -414,7 +414,9 @@ export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) { let relTextWrap = rel.wrap && conf.wrap; let relConf = messageFont(conf); let diagramType = diagObj.db.getC4Type(); - if (diagramType === 'C4Dynamic') rel.label.text = i + ': ' + rel.label.text; + if (diagramType === 'C4Dynamic') { + rel.label.text = i + ': ' + rel.label.text; + } let textLimitWidth = calculateTextWidth(rel.label.text, relConf); calcC4ShapeTextWH('label', rel, relTextWrap, relConf, textLimitWidth); @@ -441,20 +443,26 @@ export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) { * @param diagram * @param parentBoundaryAlias * @param parentBounds - * @param currentBoundarys + * @param currentBoundaries * @param diagObj */ -function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys, diagObj) { +function drawInsideBoundary( + diagram, + parentBoundaryAlias, + parentBounds, + currentBoundaries, + diagObj +) { let currentBounds = new Bounds(diagObj); - // Calculate the width limit of the boundar. label/type 的长度, + // Calculate the width limit of the boundary. label/type 的长度, currentBounds.data.widthLimit = - parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundarys.length); + parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundaries.length); // Math.min( // conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2, - // parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length) + // parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundaries.length) // ); - for (let i = 0; i < currentBoundarys.length; i++) { - let currentBoundary = currentBoundarys[i]; + for (let i = 0; i < currentBoundaries.length; i++) { + let currentBoundary = currentBoundaries[i]; let Y = 0; currentBoundary.image = { width: 0, height: 0, Y: 0 }; if (currentBoundary.sprite) { @@ -508,13 +516,13 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB } if (i == 0 || i % c4BoundaryInRow === 0) { - // Calculate the drawing start point of the currentBoundarys. + // Calculate the drawing start point of the currentBoundaries. let _x = parentBounds.data.startx + conf.diagramMarginX; let _y = parentBounds.data.stopy + conf.diagramMarginY + Y; currentBounds.setData(_x, _x, _y, _y); } else { - // Calculate the drawing start point of the currentBoundarys. + // Calculate the drawing start point of the currentBoundaries. let _x = currentBounds.data.stopx !== currentBounds.data.startx ? currentBounds.data.stopx + conf.diagramMarginX @@ -540,8 +548,6 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB if (nextCurrentBoundarys.length > 0) { // draw boundary inside currentBoundary - // bounds.init(); - // parentBoundaryWidthLimit = bounds.data.stopx - bounds.startx; drawInsideBoundary( diagram, parentBoundaryAlias, @@ -551,7 +557,9 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB ); } // draw boundary - if (currentBoundary.alias !== 'global') drawBoundary(diagram, currentBoundary, currentBounds); + if (currentBoundary.alias !== 'global') { + drawBoundary(diagram, currentBoundary, currentBounds); + } parentBounds.data.stopy = Math.max( currentBounds.data.stopy + conf.c4ShapeMargin, parentBounds.data.stopy @@ -576,7 +584,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB export const draw = function (_text, id, _version, diagObj) { conf = configApi.getConfig().c4; const securityLevel = configApi.getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -616,10 +624,10 @@ export const draw = function (_text, id, _version, diagObj) { globalBoundaryMaxY = conf.diagramMarginY; const title = diagObj.db.getTitle(); - let currentBoundarys = diagObj.db.getBoundarys(''); + let currentBoundaries = diagObj.db.getBoundarys(''); // switch (c4type) { // case 'C4Context': - drawInsideBoundary(diagram, '', screenBounds, currentBoundarys, diagObj); + drawInsideBoundary(diagram, '', screenBounds, currentBoundaries, diagObj); // break; // } diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js index 5666d9f84..437a24bcb 100644 --- a/packages/mermaid/src/diagrams/c4/svgDraw.js +++ b/packages/mermaid/src/diagrams/c4/svgDraw.js @@ -13,7 +13,9 @@ export const drawRect = function (elem, rectData) { rectElem.attr('ry', rectData.ry); if (rectData.attrs !== 'undefined' && rectData.attrs !== null) { - for (let attrKey in rectData.attrs) rectElem.attr(attrKey, rectData.attrs[attrKey]); + for (let attrKey in rectData.attrs) { + rectElem.attr(attrKey, rectData.attrs[attrKey]); + } } if (rectData.class !== 'undefined') { @@ -231,9 +233,12 @@ export const drawRels = (elem, rels, conf) => { line.attr('stroke-width', '1'); line.attr('stroke', strokeColor); line.style('fill', 'none'); - if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)'); - if (rel.type === 'birel' || rel.type === 'rel_b') + if (rel.type !== 'rel_b') { + line.attr('marker-end', 'url(' + url + '#arrowhead)'); + } + if (rel.type === 'birel' || rel.type === 'rel_b') { line.attr('marker-start', 'url(' + url + '#arrowend)'); + } i = -1; } else { let line = relsElem.append('path'); @@ -256,9 +261,12 @@ export const drawRels = (elem, rels, conf) => { .replaceAll('stopx', rel.endPoint.x) .replaceAll('stopy', rel.endPoint.y) ); - if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)'); - if (rel.type === 'birel' || rel.type === 'rel_b') + if (rel.type !== 'rel_b') { + line.attr('marker-end', 'url(' + url + '#arrowhead)'); + } + if (rel.type === 'birel' || rel.type === 'rel_b') { line.attr('marker-start', 'url(' + url + '#arrowend)'); + } } let messageConf = conf.messageFont(); @@ -314,7 +322,9 @@ const drawBoundary = function (elem, boundary, conf) { let fontColor = boundary.fontColor ? boundary.fontColor : 'black'; let attrsValue = { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' }; - if (boundary.nodeType) attrsValue = { 'stroke-width': 1.0 }; + if (boundary.nodeType) { + attrsValue = { 'stroke-width': 1.0 }; + } let rectData = { x: boundary.x, y: boundary.y, diff --git a/packages/mermaid/src/diagrams/class/classDb.js b/packages/mermaid/src/diagrams/class/classDb.js index 223bfe067..83ef6072b 100644 --- a/packages/mermaid/src/diagrams/class/classDb.js +++ b/packages/mermaid/src/diagrams/class/classDb.js @@ -16,6 +16,7 @@ const MERMAID_DOM_ID_PREFIX = 'classid-'; let relations = []; let classes = {}; +let notes = []; let classCounter = 0; let funs = []; @@ -49,7 +50,9 @@ const splitClassNameAndType = function (id) { export const addClass = function (id) { let classId = splitClassNameAndType(id); // Only add class if not exists - if (typeof classes[classId.className] !== 'undefined') return; + if (typeof classes[classId.className] !== 'undefined') { + return; + } classes[classId.className] = { id: classId.className, @@ -82,6 +85,7 @@ export const lookUpDomId = function (id) { export const clear = function () { relations = []; classes = {}; + notes = []; funs = []; funs.push(setupToolTips); commonClear(); @@ -98,6 +102,10 @@ export const getRelations = function () { return relations; }; +export const getNotes = function () { + return notes; +}; + export const addRelation = function (relation) { log.debug('Adding relation: ' + JSON.stringify(relation)); addClass(relation.id1); @@ -168,6 +176,15 @@ export const addMembers = function (className, members) { } }; +export const addNote = function (text, className) { + const note = { + id: `note${notes.length}`, + class: className, + text: text, + }; + notes.push(note); +}; + export const cleanupLabel = function (label) { if (label.substring(0, 1) === ':') { return common.sanitizeText(label.substr(1).trim(), configApi.getConfig()); @@ -185,7 +202,9 @@ export const cleanupLabel = function (label) { export const setCssClass = function (ids, className) { ids.split(',').forEach(function (_id) { let id = _id; - if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; + if (_id[0].match(/\d/)) { + id = MERMAID_DOM_ID_PREFIX + id; + } if (typeof classes[id] !== 'undefined') { classes[id].cssClasses.push(className); } @@ -220,7 +239,9 @@ export const setLink = function (ids, linkStr, target) { const config = configApi.getConfig(); ids.split(',').forEach(function (_id) { let id = _id; - if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; + if (_id[0].match(/\d/)) { + id = MERMAID_DOM_ID_PREFIX + id; + } if (typeof classes[id] !== 'undefined') { classes[id].link = utils.formatUrl(linkStr, config); if (config.securityLevel === 'sandbox') { @@ -369,7 +390,9 @@ export default { clear, getClass, getClasses, + getNotes, addAnnotation, + addNote, getRelations, addRelation, getDirection, diff --git a/packages/mermaid/src/diagrams/class/classDetector-V2.ts b/packages/mermaid/src/diagrams/class/classDetector-V2.ts index d65caf9a8..7100f6c66 100644 --- a/packages/mermaid/src/diagrams/class/classDetector-V2.ts +++ b/packages/mermaid/src/diagrams/class/classDetector-V2.ts @@ -1,9 +1,13 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const classDetectorV2: DiagramDetector = (txt, config) => { - // If we have confgured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram - if (txt.match(/^\s*classDiagram/) !== null && config?.class?.defaultRenderer === 'dagre-wrapper') + // If we have configured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram + if ( + txt.match(/^\s*classDiagram/) !== null && + config?.class?.defaultRenderer === 'dagre-wrapper' + ) { return true; + } // We have not opted to use the new renderer so we should return true if we detect a class diagram return txt.match(/^\s*classDiagram-v2/) !== null; }; diff --git a/packages/mermaid/src/diagrams/class/classDetector.ts b/packages/mermaid/src/diagrams/class/classDetector.ts index ef6389a60..c3833ed28 100644 --- a/packages/mermaid/src/diagrams/class/classDetector.ts +++ b/packages/mermaid/src/diagrams/class/classDetector.ts @@ -1,8 +1,10 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const classDetector: DiagramDetector = (txt, config) => { - // If we have confgured to use dagre-wrapper then we should never return true in this function - if (config?.class?.defaultRenderer === 'dagre-wrapper') return false; + // If we have configured to use dagre-wrapper then we should never return true in this function + if (config?.class?.defaultRenderer === 'dagre-wrapper') { + return false; + } // We have not opted to use the new renderer so we should return true if we detect a class diagram return txt.match(/^\s*classDiagram/) !== null; }; diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.js b/packages/mermaid/src/diagrams/class/classDiagram.spec.js index 3f47701e6..04a8e9bf3 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.js +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.js @@ -529,6 +529,16 @@ foo() parser.parse(str); }); + + it('should handle "note for"', function () { + const str = 'classDiagram\n' + 'Class11 <|.. Class12\n' + 'note for Class11 "test"\n'; + parser.parse(str); + }); + + it('should handle "note"', function () { + const str = 'classDiagram\n' + 'note "test"\n'; + parser.parse(str); + }); }); describe('when fetching data from a classDiagram graph it', function () { diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.js b/packages/mermaid/src/diagrams/class/classRenderer-v2.js index 20722e6d0..fbc2e4833 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.js +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.js @@ -64,6 +64,7 @@ export const addClasses = function (classes, g, _id, diagObj) { // if (evaluate(getConfig().flowchart.htmlLabels)) { // const node = { // label: vertexText.replace( + // eslint-disable-next-line @cspell/spellchecker // /fa[lrsb]?:fa-[\w-]+/g, // s => `` // ) @@ -133,6 +134,99 @@ export const addClasses = function (classes, g, _id, diagObj) { }); }; +/** + * Function that adds the additional vertices (notes) found during parsing to the graph to be rendered. + * + * @param {{text: string; class: string; placement: number}[]} notes + * Object containing the additional vertices (notes). + * @param {SVGGElement} g The graph that is to be drawn. + * @param {number} startEdgeId starting index for note edge + * @param classes + */ +export const addNotes = function (notes, g, startEdgeId, classes) { + log.info(notes); + + // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition + notes.forEach(function (note, i) { + const vertex = note; + + /** + * Variable for storing the classes for the vertex + * + * @type {string} + */ + let cssNoteStr = ''; + + const styles = { labelStyle: '', style: '' }; + + // Use vertex id as text in the box if no text is provided by the graph definition + let vertexText = vertex.text; + + let radious = 0; + let _shape = 'note'; + // Add the node + g.setNode(vertex.id, { + labelStyle: styles.labelStyle, + shape: _shape, + labelText: sanitizeText(vertexText), + noteData: vertex, + rx: radious, + ry: radious, + class: cssNoteStr, + style: styles.style, + id: vertex.id, + domId: vertex.id, + tooltip: '', + type: 'note', + padding: getConfig().flowchart.padding, + }); + + log.info('setNode', { + labelStyle: styles.labelStyle, + shape: _shape, + labelText: vertexText, + rx: radious, + ry: radious, + style: styles.style, + id: vertex.id, + type: 'note', + padding: getConfig().flowchart.padding, + }); + + if (!vertex.class || !(vertex.class in classes)) { + return; + } + const edgeId = startEdgeId + i; + const edgeData = {}; + //Set relationship style and line type + edgeData.classes = 'relation'; + edgeData.pattern = 'dotted'; + + edgeData.id = `edgeNote${edgeId}`; + // Set link type for rendering + edgeData.arrowhead = 'none'; + + log.info(`Note edge: ${JSON.stringify(edgeData)}, ${JSON.stringify(vertex)}`); + //Set edge extra labels + edgeData.startLabelRight = ''; + edgeData.endLabelLeft = ''; + + //Set relation arrow types + edgeData.arrowTypeStart = 'none'; + edgeData.arrowTypeEnd = 'none'; + let style = 'fill:none'; + let labelStyle = ''; + + edgeData.style = style; + edgeData.labelStyle = labelStyle; + + edgeData.curve = interpolateToCurve(conf.curve, curveLinear); + + // Add the edge to the graph + g.setEdge(vertex.id, vertex.class, edgeData, edgeId); + }); +}; + /** * Add edges to graph based on parsed graph definition * @@ -304,10 +398,12 @@ export const draw = function (text, id, _version, diagObj) { // Fetch the vertices/nodes and edges/links from the parsed graph definition const classes = diagObj.db.getClasses(); const relations = diagObj.db.getRelations(); + const notes = diagObj.db.getNotes(); log.info(relations); addClasses(classes, g, id, diagObj); addRelations(relations, g); + addNotes(notes, g, relations.length + 1, classes); // Add custom shapes // flowChartShapes.addToRenderV2(addShape); diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js index c1236afea..23b586192 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer.js +++ b/packages/mermaid/src/diagrams/class/classRenderer.js @@ -148,7 +148,7 @@ export const draw = function (text, id, _version, diagObj) { log.info('Rendering diagram ' + text); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -208,12 +208,42 @@ export const draw = function (text, id, _version, diagObj) { ); }); + const notes = diagObj.db.getNotes(); + notes.forEach(function (note) { + log.debug(`Adding note: ${JSON.stringify(note)}`); + const node = svgDraw.drawNote(diagram, note, conf, diagObj); + idCache[node.id] = node; + + // Add nodes to the graph. The first argument is the node id. The second is + // metadata about the node. In this case we're going to add labels to each of + // our nodes. + g.setNode(node.id, node); + if (note.class && note.class in classes) { + g.setEdge( + note.id, + getGraphId(note.class), + { + relation: { + id1: note.id, + id2: note.class, + relation: { + type1: 'none', + type2: 'none', + lineType: 10, + }, + }, + }, + 'DEFAULT' + ); + } + }); + dagre.layout(g); g.nodes().forEach(function (v) { if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') { log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v))); root - .select('#' + diagObj.db.lookUpDomId(v)) + .select('#' + (diagObj.db.lookUpDomId(v) || v)) .attr( 'transform', 'translate(' + diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index ba0e69fba..157e3d7d8 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -56,6 +56,8 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili "callback" return 'CALLBACK'; "link" return 'LINK'; "click" return 'CLICK'; +"note for" return 'NOTE_FOR'; +"note" return 'NOTE'; "<<" return 'ANNOTATION_START'; ">>" return 'ANNOTATION_END'; [~] this.begin("generic"); @@ -263,6 +265,7 @@ statement | annotationStatement | clickStatement | cssClassStatement + | noteStatement | directive | direction | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); } @@ -300,6 +303,11 @@ relationStatement | className STR relation STR className { $$ = {id1:$1, id2:$5, relation:$3, relationTitle1:$2, relationTitle2:$4} } ; +noteStatement + : NOTE_FOR className noteText { yy.addNote($3, $2); } + | NOTE noteText { yy.addNote($2); } + ; + relation : relationType lineType relationType { $$={type1:$1,type2:$3,lineType:$2}; } | lineType relationType { $$={type1:'none',type2:$2,lineType:$1}; } @@ -351,4 +359,6 @@ alphaNumToken : UNICODE_TEXT | NUM | ALPHA; classLiteralName : BQUOTE_STR; +noteText : STR; + %% diff --git a/packages/mermaid/src/diagrams/class/styles.js b/packages/mermaid/src/diagrams/class/styles.js index 9e7665c58..bb5580492 100644 --- a/packages/mermaid/src/diagrams/class/styles.js +++ b/packages/mermaid/src/diagrams/class/styles.js @@ -80,6 +80,10 @@ g.classGroup line { stroke-dasharray: 3; } +.dotted-line{ + stroke-dasharray: 1 2; +} + #compositionStart, .composition { fill: ${options.lineColor} !important; stroke: ${options.lineColor} !important; diff --git a/packages/mermaid/src/diagrams/class/svgDraw.js b/packages/mermaid/src/diagrams/class/svgDraw.js index 9a4dc761e..35f793460 100644 --- a/packages/mermaid/src/diagrams/class/svgDraw.js +++ b/packages/mermaid/src/diagrams/class/svgDraw.js @@ -9,13 +9,13 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) { switch (type) { case diagObj.db.relationType.AGGREGATION: return 'aggregation'; - case diagObj.db.EXTENSION: + case diagObj.db.relationType.EXTENSION: return 'extension'; - case diagObj.db.COMPOSITION: + case diagObj.db.relationType.COMPOSITION: return 'composition'; - case diagObj.db.DEPENDENCY: + case diagObj.db.relationType.DEPENDENCY: return 'dependency'; - case diagObj.db.LOLLIPOP: + case diagObj.db.relationType.LOLLIPOP: return 'lollipop'; } }; @@ -55,6 +55,9 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) { if (relation.relation.lineType == 1) { svgPath.attr('class', 'relation dashed-line'); } + if (relation.relation.lineType == 10) { + svgPath.attr('class', 'relation dotted-line'); + } if (relation.relation.type1 !== 'none') { svgPath.attr( 'marker-start', @@ -190,7 +193,9 @@ export const drawClass = function (elem, classDef, conf, diagObj) { let isFirst = true; classDef.annotations.forEach(function (member) { const titleText2 = title.append('tspan').text('«' + member + '»'); - if (!isFirst) titleText2.attr('dy', conf.textHeight); + if (!isFirst) { + titleText2.attr('dy', conf.textHeight); + } isFirst = false; }); @@ -203,7 +208,9 @@ export const drawClass = function (elem, classDef, conf, diagObj) { const classTitle = title.append('tspan').text(classTitleString).attr('class', 'title'); // If class has annotations the title needs to have an offset of the text height - if (!isFirst) classTitle.attr('dy', conf.textHeight); + if (!isFirst) { + classTitle.attr('dy', conf.textHeight); + } const titleHeight = title.node().getBBox().height; @@ -284,6 +291,69 @@ export const drawClass = function (elem, classDef, conf, diagObj) { return classInfo; }; +/** + * Renders a note diagram + * + * @param {SVGSVGElement} elem The element to draw it into + * @param {{id: string; text: string; class: string;}} note + * @param conf + * @param diagObj + * @todo Add more information in the JSDOC here + */ +export const drawNote = function (elem, note, conf, diagObj) { + log.debug('Rendering note ', note, conf); + + const id = note.id; + const noteInfo = { + id: id, + text: note.text, + width: 0, + height: 0, + }; + + // add class group + const g = elem.append('g').attr('id', id).attr('class', 'classGroup'); + + // add text + let text = g + .append('text') + .attr('y', conf.textHeight + conf.padding) + .attr('x', 0); + + const lines = JSON.parse(`"${note.text}"`).split('\n'); + + lines.forEach(function (line) { + log.debug(`Adding line: ${line}`); + text.append('tspan').text(line).attr('class', 'title').attr('dy', conf.textHeight); + }); + + const noteBox = g.node().getBBox(); + + const rect = g + .insert('rect', ':first-child') + .attr('x', 0) + .attr('y', 0) + .attr('width', noteBox.width + 2 * conf.padding) + .attr( + 'height', + noteBox.height + lines.length * conf.textHeight + conf.padding + 0.5 * conf.dividerMargin + ); + + const rectWidth = rect.node().getBBox().width; + + // Center title + // We subtract the width of each text element from the class box width and divide it by 2 + text.node().childNodes.forEach(function (x) { + x.setAttribute('x', (rectWidth - x.getBBox().width) / 2); + }); + + noteInfo.width = rectWidth; + noteInfo.height = + noteBox.height + lines.length * conf.textHeight + conf.padding + 0.5 * conf.dividerMargin; + + return noteInfo; +}; + export const parseMember = function (text) { const fieldRegEx = /^(\+|-|~|#)?(\w+)(~\w+~|\[\])?\s+(\w+) *(\*|\$)?$/; const methodRegEx = /^([+|\-|~|#])?(\w+) *\( *(.*)\) *(\*|\$)? *(\w*[~|[\]]*\s*\w*~?)$/; @@ -347,7 +417,7 @@ const buildMethodDisplay = function (parsedText) { }; const buildLegacyDisplay = function (text) { - // if for some reason we dont have any match, use old format to parse text + // if for some reason we don't have any match, use old format to parse text let displayText = ''; let cssStyle = ''; let memberText = ''; @@ -435,5 +505,6 @@ const parseClassifier = function (classifier) { export default { drawClass, drawEdge, + drawNote, parseMember, }; diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 9f6ae2cdb..782915cc1 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -4,11 +4,13 @@ import { MermaidConfig } from '../../config.type'; /** * Gets the rows of lines in a string * - * @param {string | undefined} s The string to check the lines for - * @returns {string[]} The rows in that string + * @param s - The string to check the lines for + * @returns The rows in that string */ export const getRows = (s?: string): string[] => { - if (!s) return ['']; + if (!s) { + return ['']; + } const str = breakToPlaceholder(s).replace(/\\n/g, '#br#'); return str.split('#br#'); }; @@ -16,8 +18,8 @@ export const getRows = (s?: string): string[] => { /** * Removes script tags from a text * - * @param {string} txt The text to sanitize - * @returns {string} The safer text + * @param txt - The text to sanitize + * @returns The safer text */ export const removeScript = (txt: string): string => { return DOMPurify.sanitize(txt); @@ -39,7 +41,9 @@ const sanitizeMore = (text: string, config: MermaidConfig) => { }; export const sanitizeText = (text: string, config: MermaidConfig): string => { - if (!text) return text; + if (!text) { + return text; + } if (config.dompurifyConfig) { text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString(); } else { @@ -52,7 +56,9 @@ export const sanitizeTextOrArray = ( a: string | string[] | string[][], config: MermaidConfig ): string | string[] => { - if (typeof a === 'string') return sanitizeText(a, config); + if (typeof a === 'string') { + return sanitizeText(a, config); + } // TODO: Refactor to avoid flat. return a.flat().map((x: string) => sanitizeText(x, config)); }; @@ -60,10 +66,10 @@ export const sanitizeTextOrArray = ( export const lineBreakRegex = //gi; /** - * Whether or not a text has any linebreaks + * Whether or not a text has any line breaks * - * @param {string} text The text to test - * @returns {boolean} Whether or not the text has breaks + * @param text - The text to test + * @returns Whether or not the text has breaks */ export const hasBreaks = (text: string): boolean => { return lineBreakRegex.test(text); @@ -72,18 +78,18 @@ export const hasBreaks = (text: string): boolean => { /** * Splits on
tags * - * @param {string} text Text to split - * @returns {string[]} List of lines as strings + * @param text - Text to split + * @returns List of lines as strings */ export const splitBreaks = (text: string): string[] => { return text.split(lineBreakRegex); }; /** - * Converts placeholders to linebreaks in HTML + * Converts placeholders to line breaks in HTML * - * @param {string} s HTML with placeholders - * @returns {string} HTML with breaks instead of placeholders + * @param s - HTML with placeholders + * @returns HTML with breaks instead of placeholders */ const placeholderToBreak = (s: string): string => { return s.replace(/#br#/g, '
'); @@ -92,8 +98,8 @@ const placeholderToBreak = (s: string): string => { /** * Opposite of `placeholderToBreak`, converts breaks to placeholders * - * @param {string} s HTML string - * @returns {string} String with placeholders + * @param s - HTML string + * @returns String with placeholders */ const breakToPlaceholder = (s: string): string => { return s.replace(lineBreakRegex, '#br#'); @@ -102,8 +108,8 @@ const breakToPlaceholder = (s: string): string => { /** * Gets the current URL * - * @param {boolean} useAbsolute Whether to return the absolute URL or not - * @returns {string} The current URL + * @param useAbsolute - Whether to return the absolute URL or not + * @returns The current URL */ const getUrl = (useAbsolute: boolean): string => { let url = ''; @@ -124,8 +130,8 @@ const getUrl = (useAbsolute: boolean): string => { /** * Converts a string/boolean into a boolean * - * @param {string | boolean} val String or boolean to convert - * @returns {boolean} The result from the input + * @param val - String or boolean to convert + * @returns The result from the input */ export const evaluate = (val?: string | boolean): boolean => val === false || ['false', 'null', '0'].includes(String(val).trim().toLowerCase()) ? false : true; @@ -133,12 +139,15 @@ export const evaluate = (val?: string | boolean): boolean => /** * Makes generics in typescript syntax * - * @example Array of array of strings in typescript syntax - * // returns "Array>" - * parseGenericTypes('Array~Array~string~~'); + * @example + * Array of array of strings in typescript syntax * - * @param {string} text The text to convert - * @returns {string} The converted string + * ```js + * // returns "Array>" + * parseGenericTypes('Array~Array~string~~'); + * ``` + * @param text - The text to convert + * @returns The converted string */ export const parseGenericTypes = function (text: string): string { let cleanedText = text; diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index a6277f27d..a4d5c8bd1 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -357,7 +357,7 @@ const drawEntities = function (svgNode, entities, graph) { const rectNode = groupNode .insert('rect', '#' + textId) .attr('class', 'er entityBox') - .attr('fill', conf.fill) + .style('fill', conf.fill) .attr('fill-opacity', '100%') .attr('stroke', conf.stroke) .attr('x', 0) @@ -644,7 +644,7 @@ export const draw = function (text, id, _version, diagObj) { // inserted - this represents the insertion point for relationship paths const firstEntity = drawEntities(svg, diagObj.db.getEntities(), g); - // TODO: externalise the addition of entities to the graph - it's a bit 'buried' in the above + // TODO: externalize the addition of entities to the graph - it's a bit 'buried' in the above // Add all the relationships to the graph const relationships = addRelationships(diagObj.db.getRelationships(), g); diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison index 6294599b5..f0411fd72 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison @@ -36,15 +36,32 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [\n]+ /* nothing */ "}" { this.popState(); return 'BLOCK_STOP'; } . return yytext[0]; + +"one or zero" return 'ZERO_OR_ONE'; +"one or more" return 'ONE_OR_MORE'; +"one or many" return 'ONE_OR_MORE'; +"1+" return 'ONE_OR_MORE'; \|o return 'ZERO_OR_ONE'; +"zero or one" return 'ZERO_OR_ONE'; +"zero or more" return 'ZERO_OR_MORE'; +"zero or many" return 'ZERO_OR_MORE'; +"0+" return 'ZERO_OR_MORE'; \}o return 'ZERO_OR_MORE'; +"many(0)" return 'ZERO_OR_MORE'; +"many(1)" return 'ONE_OR_MORE'; +"many" return 'ZERO_OR_MORE'; \}\| return 'ONE_OR_MORE'; +"one" return 'ONLY_ONE'; +"only one" return 'ONLY_ONE'; +"1" return 'ONLY_ONE'; \|\| return 'ONLY_ONE'; o\| return 'ZERO_OR_ONE'; o\{ return 'ZERO_OR_MORE'; \|\{ return 'ONE_OR_MORE'; \.\. return 'NON_IDENTIFYING'; \-\- return 'IDENTIFYING'; +"to" return 'IDENTIFYING'; +"optionally to" return 'NON_IDENTIFYING'; \.\- return 'NON_IDENTIFYING'; \-\. return 'NON_IDENTIFYING'; [A-Za-z][A-Za-z0-9\-_]* return 'ALPHANUM'; diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js index 1d891ffea..eb738fe4b 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js @@ -532,18 +532,100 @@ describe('when parsing ER diagram it...', function () { expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONE_OR_MORE); }); + it('should handle zero-or-one-to-zero-or-more relationships (aliases "one or zero" and "zero or many")', function () { + erDiagram.parser.parse('erDiagram\nA one or zero to many B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_ONE); + }); + + it('should handle one-or-more-to-zero-or-one relationships (aliases "one or many" and "zero or one")', function () { + erDiagram.parser.parse('erDiagram\nA one or many optionally to zero or one B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_ONE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONE_OR_MORE); + }); + + it('should handle zero-or-more-to-zero-or-more relationships (aliases "zero or more" and "zero or many")', function () { + erDiagram.parser.parse('erDiagram\nA zero or more to zero or many B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE); + }); + + it('should handle zero-or-more-to-one-or-more relationships (aliases "many(0)" and "many(1)")', function () { + erDiagram.parser.parse('erDiagram\nA many(0) to many(1) B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONE_OR_MORE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE); + }); + + it('should handle zero-or-more-to-only-one relationships (aliases "many(0)" and "many(1)")', function () { + erDiagram.parser.parse('erDiagram\nA many optionally to one B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONLY_ONE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE); + }); + + it('should handle only-one-to-only-one relationships (aliases "only one" and "1+")', function () { + erDiagram.parser.parse('erDiagram\nA only one optionally to 1+ B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONE_OR_MORE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONLY_ONE); + }); + + it('should handle zero-or-more-to-only-one relationships (aliases "0+" and "1")', function () { + erDiagram.parser.parse('erDiagram\nA 0+ optionally to 1 B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONLY_ONE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE); + }); + it('should represent identifying relationships properly', function () { erDiagram.parser.parse('erDiagram\nHOUSE ||--|{ ROOM : contains'); const rels = erDb.getRelationships(); expect(rels[0].relSpec.relType).toBe(erDb.Identification.IDENTIFYING); }); + it('should represent identifying relationships properly (alias "to")', function () { + erDiagram.parser.parse('erDiagram\nHOUSE one to one ROOM : contains'); + const rels = erDb.getRelationships(); + expect(rels[0].relSpec.relType).toBe(erDb.Identification.IDENTIFYING); + }); + it('should represent non-identifying relationships properly', function () { erDiagram.parser.parse('erDiagram\n PERSON ||..o{ POSSESSION : owns'); const rels = erDb.getRelationships(); expect(rels[0].relSpec.relType).toBe(erDb.Identification.NON_IDENTIFYING); }); + it('should represent non-identifying relationships properly (alias "optionally to")', function () { + erDiagram.parser.parse('erDiagram\n PERSON many optionally to many POSSESSION : owns'); + const rels = erDb.getRelationships(); + expect(rels[0].relSpec.relType).toBe(erDb.Identification.NON_IDENTIFYING); + }); + it('should not accept a syntax error', function () { const doc = 'erDiagram\nA xxx B : has'; expect(() => { diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts index df9ce2c6e..b4e267684 100644 --- a/packages/mermaid/src/diagrams/error/errorRenderer.ts +++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts @@ -8,7 +8,7 @@ let conf = {}; /** * Merges the value of `conf` with the passed `cnf` * - * @param {object} cnf Config to merge + * @param cnf - Config to merge */ export const setConf = function (cnf: any) { conf = { ...conf, ...cnf }; @@ -17,11 +17,11 @@ export const setConf = function (cnf: any) { /** * Draws a an info picture in the tag with id: id based on the graph definition in text. * - * @param text - * @param {string} id The text for the error - * @param {string} mermaidVersion The version + * @param _text - Mermaid graph definition. + * @param id - The text for the error + * @param mermaidVersion - The version */ -export const draw = (text: string, id: string, mermaidVersion: string) => { +export const draw = (_text: string, id: string, mermaidVersion: string) => { try { log.debug('Renering svg for syntax error\n'); diff --git a/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js b/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js index 083c52a03..b66bfe730 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js +++ b/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js @@ -279,11 +279,15 @@ function cylinder(parent, bbox, node) { (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry)) ) { // ellipsis equation: x*x / a*a + y*y / b*b = 1 - // solve for y to get adjustion value for pos.y + // solve for y to get adjusted value for pos.y let y = ry * ry * (1 - (x * x) / (rx * rx)); - if (y != 0) y = Math.sqrt(y); + if (y != 0) { + y = Math.sqrt(y); + } y = ry - y; - if (point.y - node.y > 0) y = -y; + if (point.y - node.y > 0) { + y = -y; + } pos.y += y; } diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 5aa203225..e91ab2fef 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -119,7 +119,11 @@ export const addVertex = function (_id, text, type, style, classes, dir, props = if (typeof dir !== 'undefined') { vertices[id].dir = dir; } - vertices[id].props = props; + if (typeof vertices[id].props === 'undefined') { + vertices[id].props = props; + } else if (typeof props !== 'undefined') { + Object.assign(vertices[id].props, props); + } }; /** @@ -699,7 +703,9 @@ const destructLink = (_str, _startStr) => { startInfo.type = info.type; } else { // x-- xyz --> - not supported - if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' }; + if (startInfo.type !== info.type) { + return { type: 'INVALID', stroke: 'INVALID' }; + } startInfo.type = 'double_' + startInfo.type; } diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts index c2ec736c7..c88a63fa6 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts @@ -1,8 +1,9 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const flowDetectorV2: DiagramDetector = (txt, config) => { - // If we have confgured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram - if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null) + // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram + if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null) { return true; + } return txt.match(/^\s*flowchart/) !== null; }; diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts index 740d12847..02ef63f99 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts @@ -1,8 +1,10 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const flowDetector: DiagramDetector = (txt, config) => { - // If we have confired to only use new flow charts this function shohuld always return false + // If we have conferred to only use new flow charts this function should always return false // as in not signalling true for a legacy flowchart - if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') return false; + if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') { + return false; + } return txt.match(/^\s*graph/) !== null; }; diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js index a56184f11..6b741fc12 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js @@ -2,11 +2,7 @@ import flowDb from '../flowDb'; import flow from './flow'; import filter from 'lodash/filter'; import { setConfig } from '../../../config'; -// import DOMPurify from 'dompurify'; -// const domPurify = DOMPurify.createDOMPurify(window); - -// const clean = DOMPurify.sanitize(dirty); setConfig({ securityLevel: 'strict', }); diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 9183cc766..99c93ea04 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -153,7 +153,9 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) { }; const checkTaskDates = function (task, dateFormat, excludes, includes) { - if (!excludes.length || task.manualEndTime) return; + if (!excludes.length || task.manualEndTime) { + return; + } let startTime = moment(task.startTime, dateFormat, true); startTime.add(1, 'd'); let endTime = moment(task.endTime, dateFormat, true); @@ -229,7 +231,7 @@ const getStartDate = function (prevTime, dateFormat, str) { * Parse a string as a moment duration. * * The string have to be compound by a value and a shorthand duration unit. For example `5d` - * representes 5 days. + * represents 5 days. * * Shorthand unit supported are: * diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 3b12bc191..c9f6836a5 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -27,7 +27,7 @@ export const draw = function (text, id, version, diagObj) { // parser.parse(text); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -427,7 +427,9 @@ export const draw = function (text, id, version, diagObj) { ); const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0); const dateFormat = diagObj.db.getDateFormat(); - if (!minTime || !maxTime) return; + if (!minTime || !maxTime) { + return; + } const excludeRanges = []; let range = null; @@ -552,7 +554,9 @@ export const draw = function (text, id, version, diagObj) { const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan'); tspan.setAttribute('alignment-baseline', 'central'); tspan.setAttribute('x', '10'); - if (j > 0) tspan.setAttribute('dy', '1em'); + if (j > 0) { + tspan.setAttribute('dy', '1em'); + } tspan.textContent = rows[j]; svgLabel.appendChild(tspan); } @@ -610,7 +614,7 @@ export const draw = function (text, id, version, diagObj) { } /** - * From this stackexchange question: + * From this stack exchange question: * http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript * * @param arr @@ -629,7 +633,7 @@ export const draw = function (text, id, version, diagObj) { } /** - * From this stackexchange question: + * From this stack exchange question: * http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array * * @param arr diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js index 9e5675249..9a1401cad 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js @@ -65,17 +65,6 @@ describe('when parsing a gantt diagram it', function () { expect(parserFnConstructor(str)).not.toThrow(); }); - /** - * Beslutsflöde inligt nedan. Obs bla bla bla - * - * graph TD - * A[Hard pledge] -- text on link -->B(Round edge) - * B --> C{to do or not to do} - * C -->|Too| D[Result one] - * C -->|Doo| E[Result two] - * - * Params bapa - a unique bapap - */ it('should handle a task definition', function () { const str = 'gantt\n' + diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index 41130c780..496e578b7 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -39,6 +39,7 @@ export const parseDirective = function (statement, context, type) { // * @param currentCommit // * @param otherCommit // */ +// eslint-disable-next-line @cspell/spellchecker // function isfastforwardable(currentCommit, otherCommit) { // log.debug('Entering isfastforwardable:', currentCommit.id, otherCommit.id); // let cnt = 0; @@ -384,21 +385,23 @@ export const checkout = function (branch) { /** * @param arr * @param key - * @param newval + * @param newVal */ -function upsert(arr, key, newval) { +function upsert(arr, key, newVal) { const index = arr.indexOf(key); if (index === -1) { - arr.push(newval); + arr.push(newVal); } else { - arr.splice(index, 1, newval); + arr.splice(index, 1, newVal); } } /** @param commitArr */ function prettyPrintCommitHistory(commitArr) { const commit = commitArr.reduce((out, commit) => { - if (out.seq > commit.seq) return out; + if (out.seq > commit.seq) { + return out; + } return commit; }, commitArr[0]); let line = ''; @@ -411,7 +414,9 @@ function prettyPrintCommitHistory(commitArr) { }); const label = [line, commit.id, commit.seq]; for (let branch in branches) { - if (branches[branch] === commit.id) label.push(branch); + if (branches[branch] === commit.id) { + label.push(branch); + } } log.debug(label.join(' ')); if (commit.parents && commit.parents.length == 2) { @@ -451,7 +456,9 @@ export const clear = function () { export const getBranchesAsObjArray = function () { const branchesArray = Object.values(branchesConfig) .map((branchConfig, i) => { - if (branchConfig.order !== null) return branchConfig; + if (branchConfig.order !== null) { + return branchConfig; + } return { ...branchConfig, order: parseFloat(`0.${i}`, 10), diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js index eefaf5ad8..bfb0ea71c 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js @@ -218,18 +218,18 @@ function cloneNode(svg, selector) { /** * @param svg - * @param commitid + * @param commitId * @param branches * @param direction */ -function renderCommitHistory(svg, commitid, branches, direction) { +function renderCommitHistory(svg, commitId, branches, direction) { let commit; const numCommits = Object.keys(allCommitsDict).length; - if (typeof commitid === 'string') { + if (typeof commitId === 'string') { do { - commit = allCommitsDict[commitid]; + commit = allCommitsDict[commitId]; logger.debug('in renderCommitHistory', commit.id, commit.seq); - if (svg.select('#node-' + commitid).size() > 0) { + if (svg.select('#node-' + commitId).size() > 0) { return; } svg @@ -291,15 +291,15 @@ function renderCommitHistory(svg, commitid, branches, direction) { .attr('class', 'commit-msg') .text(', ' + commit.message); } - commitid = commit.parent; - } while (commitid && allCommitsDict[commitid]); + commitId = commit.parent; + } while (commitId && allCommitsDict[commitId]); } - if (Array.isArray(commitid)) { - logger.debug('found merge commmit', commitid); - renderCommitHistory(svg, commitid[0], branches, direction); + if (Array.isArray(commitId)) { + logger.debug('found merge commmit', commitId); + renderCommitHistory(svg, commitId[0], branches, direction); branchNum++; - renderCommitHistory(svg, commitid[1], branches, direction); + renderCommitHistory(svg, commitId[1], branches, direction); branchNum--; } } @@ -357,7 +357,9 @@ export const draw = function (txt, id, ver) { branchNum++; } svg.attr('height', function () { - if (direction === 'BT') return Object.keys(allCommitsDict).length * config.nodeSpacing; + if (direction === 'BT') { + return Object.keys(allCommitsDict).length * config.nodeSpacing; + } return (branches.length + 1) * config.branchOffset; }); } catch (e) { diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index e15e43ac3..71698a500 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -496,7 +496,7 @@ const drawBranches = (svg, branches) => { export const draw = function (txt, id, ver, diagObj) { clear(); const conf = getConfig(); - const gitGraphConfig = getConfig().gitGraph; + const gitGraphConfig = conf.gitGraph; // try { log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver); @@ -523,7 +523,12 @@ export const draw = function (txt, id, ver, diagObj) { drawCommits(diagram, allCommitsDict, true); // Setup the view box and size of the svg element - setupGraphViewbox(undefined, diagram, gitGraphConfig.diagramPadding, conf.useMaxWidth); + setupGraphViewbox( + undefined, + diagram, + gitGraphConfig.diagramPadding, + gitGraphConfig.useMaxWidth ?? conf.useMaxWidth + ); }; export default { diff --git a/packages/mermaid/src/diagrams/git/layout.js b/packages/mermaid/src/diagrams/git/layout.js index 5714c2b96..dd8f23843 100644 --- a/packages/mermaid/src/diagrams/git/layout.js +++ b/packages/mermaid/src/diagrams/git/layout.js @@ -1,6 +1,6 @@ import { getConfig } from '../../config'; -export default (dir, _branches, _commits) => { +export default (dir, _branches) => { const config = getConfig().gitGraph; const branches = []; const commits = []; diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.js b/packages/mermaid/src/diagrams/info/infoRenderer.js index b50178481..1caa7222c 100644 --- a/packages/mermaid/src/diagrams/info/infoRenderer.js +++ b/packages/mermaid/src/diagrams/info/infoRenderer.js @@ -9,16 +9,15 @@ import { getConfig } from '../../config'; * @param {any} text * @param {any} id * @param {any} version - * @param diagObj */ -export const draw = (text, id, version, diagObj) => { +export const draw = (text, id, version) => { try { // const parser = infoParser.parser; // parser.yy = db; log.debug('Rendering info diagram\n' + text); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js index f8e21bc9d..6cbb99fa3 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.js +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js @@ -21,7 +21,7 @@ export const draw = (txt, id, _version, diagObj) => { log.debug('Rendering info diagram\n' + txt); const securityLevel = configApi.getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -94,10 +94,22 @@ export const draw = (txt, id, _version, diagObj) => { var color = scaleOrdinal().range(myGeneratedColors); // Compute the position of each group on the pie: - var pie = d3pie().value(function (d) { - return d[1]; + var pieData = Object.entries(data).map(function (el, idx) { + return { + order: idx, + name: el[0], + value: el[1], + }; }); - var dataReady = pie(Object.entries(data)); + var pie = d3pie() + .value(function (d) { + return d.value; + }) + .sort(function (a, b) { + // Sort slices in clockwise direction + return a.order - b.order; + }); + var dataReady = pie(pieData); // Shape helper to build arcs: var arcGenerator = arc().innerRadius(0).outerRadius(radius); @@ -110,7 +122,7 @@ export const draw = (txt, id, _version, diagObj) => { .append('path') .attr('d', arcGenerator) .attr('fill', function (d) { - return color(d.data[0]); + return color(d.data.name); }) .attr('class', 'pieCircle'); @@ -122,7 +134,7 @@ export const draw = (txt, id, _version, diagObj) => { .enter() .append('text') .text(function (d) { - return ((d.data[1] / sum) * 100).toFixed(0) + '%'; + return ((d.data.value / sum) * 100).toFixed(0) + '%'; }) .attr('transform', function (d) { return 'translate(' + arcGenerator.centroid(d) + ')'; @@ -166,9 +178,9 @@ export const draw = (txt, id, _version, diagObj) => { .attr('y', legendRectSize - legendSpacing) .text(function (d) { if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) { - return d.data[0] + ' [' + d.data[1] + ']'; + return d.data.name + ' [' + d.data.value + ']'; } else { - return d.data[0]; + return d.data.name; } }); } catch (e) { diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js index d10c43066..79d67e76e 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js +++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js @@ -311,7 +311,7 @@ export const draw = (text, id, _version, diagObj) => { diagObj.parser.parse(text); const securityLevel = conf.securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 6c863e204..ba9d0549b 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -26,7 +26,9 @@ export const parseDirective = function (statement, context, type) { export const addActor = function (id, name, description, type) { // Don't allow description nulling const old = actors[id]; - if (old && name === old.name && description == null) return; + if (old && name === old.name && description == null) { + return; + } // Don't allow null descriptions, either if (description == null || description.text == null) { diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index 5aebd1e3a..9422a5f37 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js @@ -130,7 +130,7 @@ Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!`; mermaidAPI.parse(str); - diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility autonumbers + diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers expect(diagram.db.showSequenceNumbers()).toBe(false); }); it('should show sequence numbers when autonumber is enabled', function () { @@ -142,7 +142,7 @@ Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!`; mermaidAPI.parse(str); - diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility autonumbers + diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers expect(diagram.db.showSequenceNumbers()).toBe(true); }); it('should handle a sequenceDiagram definition with a title:', function () { @@ -1871,7 +1871,7 @@ Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!`; mermaidAPI.parse(str1, diagram); - diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility autonumbers + diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers expect(diagram.db.showSequenceNumbers()).toBe(true); const str2 = ` diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index 19352ca72..fa943d658 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -10,6 +10,7 @@ import assignWithDepth from '../../assignWithDepth'; import utils from '../../utils'; import { configureSvgSize } from '../../setupGraphViewbox'; import addSVGAccessibilityFields from '../../accessibility'; +import Diagram from '../../Diagram'; let conf = {}; @@ -100,8 +101,8 @@ export const bounds = { // eslint-disable-next-line @typescript-eslint/no-this-alias const _self = this; let cnt = 0; - /** @param {any} type */ - function updateFn(type) { + /** @param type - Either `activation` or `undefined` */ + function updateFn(type?: 'activation') { return function updateItemBounds(item) { cnt++; // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems @@ -200,15 +201,25 @@ export const bounds = { }, }; +/** Options for drawing a note in {@link drawNote} */ +interface NoteModel { + /** x axis start position */ + startx: number; + /** y axis position */ + starty: number; + /** the message to be shown */ + message: string; + /** Set this with a custom width to override the default configured width. */ + width: number; +} + /** * Draws an note in the diagram with the attached line * - * @param {any} elem - The diagram to draw to. - * @param {{ x: number; y: number; message: string; width: number }} noteModel - Startx: x axis - * start position, verticalPos: y axis position, messsage: the message to be shown, width: Set - * this with a custom width to override the default configured width. + * @param elem - The diagram to draw to. + * @param noteModel - Note model options. */ -const drawNote = function (elem, noteModel) { +const drawNote = function (elem: any, noteModel: NoteModel) { bounds.bumpVerticalPos(conf.boxMargin); noteModel.height = conf.boxMargin; noteModel.starty = bounds.getVerticalPos(); @@ -278,11 +289,11 @@ const actorFont = (cnf) => { * message so it can be drawn later. We do not draw the message at this point so the arrowhead can * be on top of the activation box. * - * @param {any} diagram - The parent of the message element - * @param {any} msgModel - The model containing fields describing a message - * @returns {number} LineStarty - The Y coordinate at which the message line starts + * @param _diagram - The parent of the message element. + * @param msgModel - The model containing fields describing a message + * @returns `lineStartY` - The Y coordinate at which the message line starts */ -const boundMessage = function (diagram, msgModel) { +function boundMessage(_diagram, msgModel): number { bounds.bumpVerticalPos(10); const { startx, stopx, message } = msgModel; const lines = common.splitBreaks(message).length; @@ -292,15 +303,15 @@ const boundMessage = function (diagram, msgModel) { bounds.bumpVerticalPos(lineHeight); - let lineStarty; + let lineStartY; let totalOffset = textDims.height - 10; const textWidth = textDims.width; if (startx === stopx) { - lineStarty = bounds.getVerticalPos() + totalOffset; + lineStartY = bounds.getVerticalPos() + totalOffset; if (!conf.rightAngles) { totalOffset += conf.boxMargin; - lineStarty = bounds.getVerticalPos() + totalOffset; + lineStartY = bounds.getVerticalPos() + totalOffset; } totalOffset += 30; const dx = Math.max(textWidth / 2, conf.width / 2); @@ -312,26 +323,26 @@ const boundMessage = function (diagram, msgModel) { ); } else { totalOffset += conf.boxMargin; - lineStarty = bounds.getVerticalPos() + totalOffset; - bounds.insert(startx, lineStarty - 10, stopx, lineStarty); + lineStartY = bounds.getVerticalPos() + totalOffset; + bounds.insert(startx, lineStartY - 10, stopx, lineStartY); } bounds.bumpVerticalPos(totalOffset); msgModel.height += totalOffset; msgModel.stopy = msgModel.starty + msgModel.height; bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy); - return lineStarty; -}; + return lineStartY; +} /** * Draws a message. Note that the bounds have previously been updated by boundMessage. * - * @param {any} diagram - The parent of the message element - * @param {any} msgModel - The model containing fields describing a message - * @param {number} lineStarty - The Y coordinate at which the message line starts - * @param diagObj + * @param diagram - The parent of the message element + * @param msgModel - The model containing fields describing a message + * @param lineStartY - The Y coordinate at which the message line starts + * @param diagObj - The diagram object. */ -const drawMessage = function (diagram, msgModel, lineStarty, diagObj) { +const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Diagram) { const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel; const textDims = utils.calculateTextDimensions(message, messageFont(conf)); const textObj = svgDraw.getTextObj(); @@ -360,8 +371,8 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) { .append('path') .attr( 'd', - `M ${startx},${lineStarty} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${ - lineStarty + 25 + `M ${startx},${lineStartY} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${ + lineStartY + 25 } H ${startx}` ); } else { @@ -372,27 +383,27 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) { 'M ' + startx + ',' + - lineStarty + + lineStartY + ' C ' + (startx + 60) + ',' + - (lineStarty - 10) + + (lineStartY - 10) + ' ' + (startx + 60) + ',' + - (lineStarty + 30) + + (lineStartY + 30) + ' ' + startx + ',' + - (lineStarty + 20) + (lineStartY + 20) ); } } else { line = diagram.append('line'); line.attr('x1', startx); - line.attr('y1', lineStarty); + line.attr('y1', lineStartY); line.attr('x2', stopx); - line.attr('y2', lineStarty); + line.attr('y2', lineStartY); } // Make an SVG Container // Draw the line @@ -440,7 +451,7 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) { diagram .append('text') .attr('x', startx) - .attr('y', lineStarty + 4) + .attr('y', lineStartY + 4) .attr('font-family', 'sans-serif') .attr('font-size', '12px') .attr('text-anchor', 'middle') @@ -554,13 +565,6 @@ const activationBounds = function (actor, actors) { return [left, right]; }; -/** - * @param {any} loopWidths - * @param {any} msg - * @param {any} preMargin - * @param {any} postMargin - * @param {any} addLoopFn - */ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoopFn) { bounds.bumpVerticalPos(preMargin); let heightAdjust = postMargin; @@ -584,15 +588,15 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop /** * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text. * - * @param {any} _text The text of the diagram - * @param {any} id The id of the diagram which will be used as a DOM element id¨ - * @param {any} _version Mermaid version from package.json - * @param {any} diagObj A stanard diagram containing the db and the text and type etc of the diagram + * @param _text - The text of the diagram + * @param id - The id of the diagram which will be used as a DOM element id¨ + * @param _version - Mermaid version from package.json + * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram */ -export const draw = function (_text, id, _version, diagObj) { +export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) { const { securityLevel, sequence } = configApi.getConfig(); conf = sequence; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -632,10 +636,10 @@ export const draw = function (_text, id, _version, diagObj) { svgDraw.insertSequenceNumber(diagram); /** - * @param {any} msg - * @param {any} verticalPos + * @param msg - The message to draw. + * @param verticalPos - The vertical position of the message. */ - function activeEnd(msg, verticalPos) { + function activeEnd(msg: any, verticalPos: number) { const activationData = bounds.endActivation(msg); if (activationData.starty + 18 > verticalPos) { activationData.starty = verticalPos - 6; @@ -762,8 +766,11 @@ export const draw = function (_text, id, _version, diagObj) { case diagObj.db.LINETYPE.AUTONUMBER: sequenceIndex = msg.message.start || sequenceIndex; sequenceIndexStep = msg.message.step || sequenceIndexStep; - if (msg.message.visible) diagObj.db.enableSequenceNumbers(); - else diagObj.db.disableSequenceNumbers(); + if (msg.message.visible) { + diagObj.db.enableSequenceNumbers(); + } else { + diagObj.db.disableSequenceNumbers(); + } break; case diagObj.db.LINETYPE.CRITICAL_START: adjustLoopHeightForWrap( @@ -811,8 +818,8 @@ export const draw = function (_text, id, _version, diagObj) { msgModel.starty = bounds.getVerticalPos(); msgModel.sequenceIndex = sequenceIndex; msgModel.sequenceVisible = diagObj.db.showSequenceNumbers(); - const lineStarty = boundMessage(diagram, msgModel); - messagesToDraw.push({ messageModel: msgModel, lineStarty: lineStarty }); + const lineStartY = boundMessage(diagram, msgModel); + messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY }); bounds.models.addMessage(msgModel); } catch (e) { log.error('error while drawing message', e); @@ -836,7 +843,7 @@ export const draw = function (_text, id, _version, diagObj) { } }); - messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStarty, diagObj)); + messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj)); if (conf.mirrorActors) { // Draw actors below diagram @@ -907,12 +914,16 @@ export const draw = function (_text, id, _version, diagObj) { * It will enumerate each given message, and will determine its text width, in relation to the actor * it originates from, and destined to. * - * @param {any} actors - The actors map - * @param {Array} messages - A list of message objects to iterate - * @param diagObj - * @returns {any} + * @param actors - The actors map + * @param messages - A list of message objects to iterate + * @param diagObj - The diagram object. + * @returns The max message width of each actor. */ -const getMaxMessageWidthPerActor = function (actors, messages, diagObj) { +function getMaxMessageWidthPerActor( + actors: { [id: string]: any }, + messages: any[], + diagObj: Diagram +): { [id: string]: number } { const maxMessageWidthPerActor = {}; messages.forEach(function (msg) { @@ -1005,7 +1016,7 @@ const getMaxMessageWidthPerActor = function (actors, messages, diagObj) { log.debug('maxMessageWidthPerActor:', maxMessageWidthPerActor); return maxMessageWidthPerActor; -}; +} const getRequiredPopupWidth = function (actor) { let requiredPopupWidth = 0; @@ -1022,15 +1033,19 @@ const getRequiredPopupWidth = function (actor) { }; /** - * This will calculate the optimal margin for each given actor, for a given actor->messageWidth map. + * This will calculate the optimal margin for each given actor, + * for a given actor → messageWidth map. * * An actor's margin is determined by the width of the actor, the width of the largest message that * originates from it, and the configured conf.actorMargin. * - * @param {any} actors - The actors map to calculate margins for - * @param {any} actorToMessageWidth - A map of actor key -> max message width it holds + * @param actors - The actors map to calculate margins for + * @param actorToMessageWidth - A map of actor key → max message width it holds */ -const calculateActorMargins = function (actors, actorToMessageWidth) { +function calculateActorMargins( + actors: { [id: string]: any }, + actorToMessageWidth: ReturnType +) { let maxHeight = 0; Object.keys(actors).forEach((prop) => { const actor = actors[prop]; @@ -1071,7 +1086,7 @@ const calculateActorMargins = function (actors, actorToMessageWidth) { } return Math.max(maxHeight, conf.height); -}; +} const buildNoteModel = function (msg, actors, diagObj) { const startx = actors[msg.from].x; diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index fd70871e0..0dc437721 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -31,7 +31,9 @@ const addPopupInteraction = (id, actorCnt) => { addFunction(() => { const arr = document.querySelectorAll(id); // This will be the case when running in sandboxed mode - if (arr.length === 0) return; + if (arr.length === 0) { + return; + } arr[0].addEventListener('mouseover', function () { popupMenuUpFunc('actor' + actorCnt + '_popup'); }); @@ -322,7 +324,9 @@ export const drawLabel = function (elem, txtObject) { let actorCnt = -1; export const fixLifeLineHeights = (diagram, bounds) => { - if (!diagram.selectAll) return; + if (!diagram.selectAll) { + return; + } diagram .selectAll('.actor-line') .attr('class', '200') @@ -509,7 +513,7 @@ export const anchorElement = function (elem) { * * @param {any} elem - Element to append activation rect. * @param {any} bounds - Activation box bounds. - * @param {any} verticalPos - Precise y cooridnate of bottom activation box edge. + * @param {any} verticalPos - Precise y coordinate of bottom activation box edge. * @param {any} conf - Sequence diagram config object. * @param {any} actorActivations - Number of activations on the actor. */ @@ -527,10 +531,10 @@ export const drawActivation = function (elem, bounds, verticalPos, conf, actorAc /** * Draws a loop in the diagram * - * @param {any} elem - Elemenet to append the loop to. + * @param {any} elem - Element to append the loop to. * @param {any} loopModel - LoopModel of the given loop. * @param {any} labelText - Text within the loop. - * @param {any} conf - Diagrom configuration + * @param {any} conf - Diagram configuration * @returns {any} */ export const drawLoop = function (elem, loopModel, labelText, conf) { diff --git a/packages/mermaid/src/diagrams/state/parser/state-style.spec.js b/packages/mermaid/src/diagrams/state/parser/state-style.spec.js index 0d95cd117..3c734ff7d 100644 --- a/packages/mermaid/src/diagrams/state/parser/state-style.spec.js +++ b/packages/mermaid/src/diagrams/state/parser/state-style.spec.js @@ -36,7 +36,7 @@ describe('ClassDefs and classes when parsing a State diagram', () => { expect(styleClasses['exampleClass'].styles[2]).toEqual('font-style:italic'); }); - // need to look at what the lexer is doing. see the work on the chevotrain parser + // need to look at what the lexer is doing it('an attribute can have a dot in the style', function () { stateDiagram.parser.parse( 'stateDiagram-v2\n classDef exampleStyleClass background:#bbb,border:1.5px solid red;' diff --git a/packages/mermaid/src/diagrams/state/shapes.js b/packages/mermaid/src/diagrams/state/shapes.js index e2286bb51..aa99ff862 100644 --- a/packages/mermaid/src/diagrams/state/shapes.js +++ b/packages/mermaid/src/diagrams/state/shapes.js @@ -137,7 +137,7 @@ export const drawDescrState = (g, stateDef) => { /** Adds the creates a box around the existing content and adds a panel for the id on top of the content. */ /** - * Function that creates an title row and a frame around a substate for a composit state diagram. + * Function that creates an title row and a frame around a substate for a composite state diagram. * The function returns a new d3 svg object with updated width and height properties; * * @param {any} g The d3 svg object for the substate to framed @@ -178,7 +178,7 @@ export const addTitleAndBox = (g, stateDef, altBkg) => { // descrLine.attr('x2', graphBox.width + getConfig().state.padding); if (stateDef.doc) { - // cnsole.warn( + // console.warn( // stateDef.id, // 'orgX: ', // orgX, @@ -217,7 +217,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => { .attr('rx', '0'); title.attr('x', startX + pad); - if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad); + if (titleWidth <= orgWidth) { + title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad); + } // Title background g.insert('rect', ':first-child') @@ -379,14 +381,27 @@ export const drawState = function (elem, stateDef) { const g = elem.append('g').attr('id', id).attr('class', 'stateGroup'); - if (stateDef.type === 'start') drawStartState(g); - if (stateDef.type === 'end') drawEndState(g); - if (stateDef.type === 'fork' || stateDef.type === 'join') drawForkJoinState(g, stateDef); - if (stateDef.type === 'note') drawNote(stateDef.note.text, g); - if (stateDef.type === 'divider') drawDivider(g); - if (stateDef.type === 'default' && stateDef.descriptions.length === 0) + if (stateDef.type === 'start') { + drawStartState(g); + } + if (stateDef.type === 'end') { + drawEndState(g); + } + if (stateDef.type === 'fork' || stateDef.type === 'join') { + drawForkJoinState(g, stateDef); + } + if (stateDef.type === 'note') { + drawNote(stateDef.note.text, g); + } + if (stateDef.type === 'divider') { + drawDivider(g); + } + if (stateDef.type === 'default' && stateDef.descriptions.length === 0) { drawSimpleState(g, stateDef); - if (stateDef.type === 'default' && stateDef.descriptions.length > 0) drawDescrState(g, stateDef); + } + if (stateDef.type === 'default' && stateDef.descriptions.length > 0) { + drawDescrState(g, stateDef); + } const stateBox = g.node().getBBox(); stateInfo.width = stateBox.width + 2 * getConfig().state.padding; diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index 5cc5ebc08..d0877847c 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -228,7 +228,9 @@ export const addState = function ( if (descr) { log.info('Setting state description', id, descr); - if (typeof descr === 'string') addDescription(id, descr.trim()); + if (typeof descr === 'string') { + addDescription(id, descr.trim()); + } if (typeof descr === 'object') { descr.forEach((des) => addDescription(id, des.trim())); @@ -437,7 +439,7 @@ const getDividerId = () => { /** * Called when the parser comes across a (style) class definition - * @example classDef someclass fill:#f96; + * @example classDef my-style fill:#f96; * * @param {string} id - the id of this (style) class * @param {string} styleAttributes - the string with 1 or more style attributes (each separated by a comma) diff --git a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts index 7fd9633c6..9e59c4a04 100644 --- a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts +++ b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts @@ -1,8 +1,11 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const stateDetectorV2: DiagramDetector = (text, config) => { - if (text.match(/^\s*stateDiagram-v2/) !== null) return true; - if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper') + if (text.match(/^\s*stateDiagram-v2/) !== null) { return true; + } + if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper') { + return true; + } return false; }; diff --git a/packages/mermaid/src/diagrams/state/stateDetector.ts b/packages/mermaid/src/diagrams/state/stateDetector.ts index 614f327c2..85338c6df 100644 --- a/packages/mermaid/src/diagrams/state/stateDetector.ts +++ b/packages/mermaid/src/diagrams/state/stateDetector.ts @@ -1,8 +1,10 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const stateDetector: DiagramDetector = (txt, config) => { - // If we have confired to only use new state diagrams this function should always return false + // If we have confirmed to only use new state diagrams this function should always return false // as in not signalling true for a legacy state diagram - if (config?.state?.defaultRenderer === 'dagre-wrapper') return false; + if (config?.state?.defaultRenderer === 'dagre-wrapper') { + return false; + } return txt.match(/^\s*stateDiagram/) !== null; }; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js index c4c1cb7f0..1011fb6b1 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js @@ -89,7 +89,9 @@ export const setConf = function (cnf) { */ export const getClasses = function (text, diagramObj) { log.trace('Extracting classes'); - if (diagramClasses.length > 0) return diagramClasses; // we have already extracted the classes + if (diagramClasses.length > 0) { + return diagramClasses; // we have already extracted the classes + } diagramObj.db.clear(); try { @@ -113,11 +115,14 @@ export const getClasses = function (text, diagramObj) { * @returns {string} */ function getClassesFromDbInfo(dbInfoItem) { - if (typeof dbInfoItem === 'undefined' || dbInfoItem === null) return ''; - else { + if (typeof dbInfoItem === 'undefined' || dbInfoItem === null) { + return ''; + } else { if (dbInfoItem.classes) { return dbInfoItem.classes.join(' '); - } else return ''; + } else { + return ''; + } } } @@ -151,9 +156,15 @@ const setupNode = (g, parent, parsedItem, diagramDb, altFlag) => { if (itemId !== 'root') { let shape = SHAPE_STATE; - if (parsedItem.start === true) shape = SHAPE_START; - if (parsedItem.start === false) shape = SHAPE_END; - if (parsedItem.type !== DEFAULT_STATE_TYPE) shape = parsedItem.type; + if (parsedItem.start === true) { + shape = SHAPE_START; + } + if (parsedItem.start === false) { + shape = SHAPE_END; + } + if (parsedItem.type !== DEFAULT_STATE_TYPE) { + shape = parsedItem.type; + } // Add the node to our list (nodeDb) if (!nodeDb[itemId]) { @@ -382,7 +393,9 @@ export const draw = function (text, id, _version, diag) { nodeDb = {}; // Fetch the default direction, use TD if none was found let dir = diag.db.getDirection(); - if (typeof dir === 'undefined') dir = DEFAULT_DIAGRAM_DIRECTION; + if (typeof dir === 'undefined') { + dir = DEFAULT_DIAGRAM_DIRECTION; + } const { securityLevel, state: conf } = getConfig(); const nodeSpacing = conf.nodeSpacing || 50; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js index 75368c557..73717a645 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer.js @@ -47,7 +47,7 @@ const insertMarkers = function (elem) { export const draw = function (text, id, _version, diagObj) { conf = getConfig().state; const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -120,7 +120,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = } // Set an object for the graph label - if (parentId) + if (parentId) { graph.setGraph({ rankdir: 'LR', multigraph: true, @@ -133,7 +133,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = // ranksep: 5, // nodesep: 1 }); - else { + } else { graph.setGraph({ rankdir: 'TB', multigraph: true, @@ -268,7 +268,9 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = let pWidth = 0; let pShift = 0; if (parent) { - if (parent.parentElement) pWidth = parent.parentElement.getBBox().width; + if (parent.parentElement) { + pWidth = parent.parentElement.getBBox().width; + } pShift = parseInt(parent.getAttribute('data-x-shift'), 10); if (Number.isNaN(pShift)) { pShift = 0; diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index e3ebb839c..3880a243a 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -15,7 +15,7 @@ export const setConf = function (cnf) { const actors = {}; -/** @param {any} diagram */ +/** @param diagram - The diagram to draw to. */ function drawActorLegend(diagram) { const conf = getConfig().journey; // Draw the actors @@ -54,7 +54,7 @@ export const draw = function (text, id, version, diagObj) { diagObj.parser.parse(text + '\n'); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -74,7 +74,9 @@ export const draw = function (text, id, version, diagObj) { const title = diagObj.db.getDiagramTitle(); const actorNames = diagObj.db.getActors(); - for (const member in actors) delete actors[member]; + for (const member in actors) { + delete actors[member]; + } let actorPos = 0; actorNames.forEach((actorName) => { actors[actorName] = { @@ -155,8 +157,8 @@ export const bounds = { // eslint-disable-next-line @typescript-eslint/no-this-alias const _self = this; let cnt = 0; - /** @param {any} type */ - function updateFn(type) { + /** @param type - Set to `activation` if activation */ + function updateFn(type?: 'activation') { return function updateItemBounds(item) { cnt++; // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems @@ -261,7 +263,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) { // Draw the box with the attached line svgDraw.drawTask(diagram, task, conf); - bounds.insert(task.x, task.y, task.x + task.width + conf.taskMargin, 300 + 5 * 30); // stopy is the length of the descenders. + bounds.insert(task.x, task.y, task.x + task.width + conf.taskMargin, 300 + 5 * 30); // stopY is the length of the descenders. } }; diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js index f655b9c3a..a8c59a939 100644 --- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js +++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js @@ -218,7 +218,7 @@ export const drawSection = function (elem, section, conf) { let taskCount = -1; /** - * Draws an actor in the diagram with the attaced line + * Draws an actor in the diagram with the attached line * * @param {any} elem The HTML element * @param {any} task The task to render diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index f618165a3..d7d5f23cd 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -35,7 +35,7 @@ import { exec } from 'child_process'; import { globby } from 'globby'; import { JSDOM } from 'jsdom'; import type { Code, Root } from 'mdast'; -import { join, dirname } from 'path'; +import { posix, dirname } from 'path'; import prettier from 'prettier'; import { remark } from 'remark'; // @ts-ignore No typescript declaration file @@ -210,30 +210,28 @@ const transformHtml = (filename: string) => { copyTransformedContents(filename, !verifyOnly, formattedHTML); }; +const getFilesFromGlobs = async (globs: string[]): Promise => { + return await globby(globs, { dot: true }); +}; + /** Main method (entry point) */ (async () => { if (verifyOnly) { console.log('Verifying that all files are in sync with the source files'); } - const sourceDirGlob = join('.', SOURCE_DOCS_DIR, '**'); - const includeFilesStartingWithDot = true; + const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); + const action = verifyOnly ? 'Verifying' : 'Transforming'; - console.log('Transforming markdown files...'); - const mdFiles = await globby([join(sourceDirGlob, '*.md')], { - dot: includeFilesStartingWithDot, - }); + const mdFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.md')]); + console.log(`${action} ${mdFiles.length} markdown files...`); mdFiles.forEach(transformMarkdown); - console.log('Transforming html files...'); - const htmlFiles = await globby([join(sourceDirGlob, '*.html')], { - dot: includeFilesStartingWithDot, - }); + const htmlFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.html')]); + console.log(`${action} ${htmlFiles.length} html files...`); htmlFiles.forEach(transformHtml); - console.log('Transforming all other files...'); - const otherFiles = await globby([sourceDirGlob, '!**/*.md', '!**/*.html'], { - dot: includeFilesStartingWithDot, - }); + const otherFiles = await getFilesFromGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']); + console.log(`${action} ${otherFiles.length} other files...`); otherFiles.forEach((file: string) => { copyTransformedContents(file, !verifyOnly); // no transformation }); @@ -244,7 +242,7 @@ const transformHtml = (filename: string) => { process.exit(1); } if (git) { - console.log('Adding changes in ${FINAL_DOCS_DIR} folder to git'); + console.log(`Adding changes in ${FINAL_DOCS_DIR} folder to git`); exec('git add docs'); } } diff --git a/packages/mermaid/src/docs/classDiagram.md b/packages/mermaid/src/docs/classDiagram.md index 362e90bc6..3ca564e55 100644 --- a/packages/mermaid/src/docs/classDiagram.md +++ b/packages/mermaid/src/docs/classDiagram.md @@ -9,7 +9,9 @@ Mermaid can render class diagrams. ```mermaid-example classDiagram + note "From Duck till Zebra" Animal <|-- Duck + note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age @@ -375,6 +377,10 @@ click className href "url" "tooltip" - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.) - note: callback function will be called with the nodeId as parameter. +## Notes + +It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"` + ### Examples _URL Link:_ diff --git a/packages/mermaid/src/docs/entityRelationshipDiagram.md b/packages/mermaid/src/docs/entityRelationshipDiagram.md index 341c9147c..e52b0df4c 100644 --- a/packages/mermaid/src/docs/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/entityRelationshipDiagram.md @@ -85,10 +85,34 @@ Cardinality is a property that describes how many elements of another entity can | `}o` | `o{` | Zero or more (no upper limit) | | `}\|` | `\|{` | One or more (no upper limit) | +**Aliases** + +| Value (left) | Value (right) | Alias for | +| :----------: | :-----------: | ------------ | +| one or zero | one or zero | Zero or one | +| zero or one | zero or one | Zero or one | +| one or more | one or more | One or more | +| one or many | one or many | One or more | +| many(1) | many(1) | One or more | +| 1+ | 1+ | One or more | +| zero or more | zero or more | Zero or more | +| zero or many | zero or many | Zero or more | +| many(0) | many(1) | Zero or more | +| 0+ | 0+ | Zero or more | +| only one | only one | Exactly one | +| 1 | 1 | Exactly one | + ### Identification Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line: +**Aliases** + +| Value | Alias for | +| :-----------: | :---------------: | +| to | _identifying_ | +| optionally to | _non-identifying_ | + ```mmd erDiagram CAR ||--o{ NAMED-DRIVER : allows @@ -155,6 +179,7 @@ erDiagram string lastName int age } + MANUFACTURER only one to zero or more CAR ``` ### Other Things diff --git a/packages/mermaid/src/docs/flowchart.md b/packages/mermaid/src/docs/flowchart.md index 3560334af..16979137e 100644 --- a/packages/mermaid/src/docs/flowchart.md +++ b/packages/mermaid/src/docs/flowchart.md @@ -198,8 +198,8 @@ flowchart LR ### Dotted link ```mermaid-example -flowchart LR; - A-.->B; +flowchart LR + A-.->B ``` ### Dotted link with text @@ -587,7 +587,7 @@ A shorter form of adding a class is to attach the classname to the node using th ```mermaid-example flowchart LR A:::someclass --> B - classDef someclass fill:#f96; + classDef someclass fill:#f96 ``` ### Css classes @@ -610,7 +610,7 @@ below: **Example definition** ```mermaid-example -flowchart LR; +flowchart LR A-->B[AAABBB] B-->D class A cssClass @@ -634,7 +634,7 @@ The icons are accessed via the syntax fa:#icon class name#. flowchart TD B["fab:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); + B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) ``` diff --git a/packages/mermaid/src/docs/index.html b/packages/mermaid/src/docs/index.html index 2d6e1c714..b27d9aca8 100644 --- a/packages/mermaid/src/docs/index.html +++ b/packages/mermaid/src/docs/index.html @@ -15,6 +15,14 @@ name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> + + + + + - - - + + + @@ -57,6 +80,7 @@ let parser = new DOMParser(); let currentCodeExample = 0; let colorize = []; + let num = 0; function colorizeEverything(html) { initEditor(monaco); @@ -127,8 +151,9 @@ hook.afterEach(function (html, next) { next(html); (async () => { - while (!window.hasOwnProperty('monaco')) + while (!window.hasOwnProperty('monaco')) { await new Promise((resolve) => setTimeout(resolve, 1000)); + } colorizeEverything(html).then( (newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML) @@ -146,7 +171,9 @@ startOnLoad: false, themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }', }; - if (isDarkMode) conf.theme = 'dark'; + if (isDarkMode) { + conf.theme = 'dark'; + } mermaid.initialize(conf);