marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-17 03:04:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

merge MERMAID/develop

Browse Source
This commit is contained in:
Ashley Engelund (weedySeaDragon @ github)
2022-11-09 07:45:22 -08:00
parent 607fe88d43 0d8f09cec5
commit 750029f557
16 changed files with 681 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.lintstagedrc.json
View File

@@ -1,3 +1,4 @@
{ {
"!(docs/**/*)*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"] "!(docs/**/*)*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
"cSpell.json": ["ts-node-esm scripts/fixCSpell.ts"]
} }

8
README.md
View File

@@ -43,12 +43,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
<br/> <br/>
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/> Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
[Tutorials](./docs/Tutorials.md) has video tutorials. [Tutorials](./docs/config/Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md). Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md). You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md). For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md) 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)

2
applitools.config.js
View File

@@ -15,5 +15,5 @@ module.exports = defineConfig({
// { deviceName: 'Pixel 2', screenOrientation: 'portrait' }, // { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
], ],
// set batch name to the configuration // set batch name to the configuration
batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`, // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
}); });

163
cSpell.json
View File

@@ -2,94 +2,86 @@
"version": "0.2", "version": "0.2",
"language": "en", "language": "en",
"words": [ "words": [
"blockquotes", "acyclicer",
"customizability", "adamiecki",
"Gantt", "alois",
"jison", "antiscript",
"mermaid",
"mindmap",
"Mindmaps",
"mitigations",
"sandboxed",
"shiki",
"verdana",
"Visio"
],
"ignoreWords": [
"Alois",
"Klink",
"knsv",
"Knut",
"Matthieu",
"Sidharth",
"Sveidqvist",
"Vinod",
"Faber",
"Orlandoni",
"Klemm",
"Mindaugas",
"Laganeckas",
"Cuzon",
"Yash",
"Adamiecki",
"applitools", "applitools",
"Asciidoctor", "asciidoctor",
"Astah", "ashish",
"Bisheng", "astah",
"bbox",
"bilkent",
"bisheng",
"brolin",
"codedoc", "codedoc",
"Docsy", "colour",
"Doku", "cpettitt",
"Gitea", "customizability",
"Gitgraph", "cuzon",
"Grav", "cytoscape",
"Inkdrop", "dagre",
"Jaoude", "descr",
"docsify",
"docsy",
"doku",
"dompurify",
"edgechromium",
"faber",
"flatmap",
"gantt",
"gitea",
"gitgraph",
"graphlib",
"grav",
"greywolf",
"inkdrop",
"jaoude",
"jison",
"kaufmann",
"klemm",
"klink",
"knsv",
"knut",
"laganeckas",
"lucida",
"matthieu",
"mdbook", "mdbook",
"mermerd", "mermerd",
"mindaugas",
"mindmap",
"mindmaps",
"mitigations",
"mkdocs", "mkdocs",
"orlandoni",
"phpbb", "phpbb",
"Plantuml", "plantuml",
"Playfair's", "playfair",
"Podlite", "podlite",
"redmine",
"sphinxcontrib",
"Tuleap",
"dagre",
"vitepress",
"docsify",
"colour",
"graphlib",
"acyclicer",
"ranksep", "ranksep",
"descr", "redmine",
"substate", "sandboxed",
"Ashish", "setupgraphviewbox",
"bbox", "shiki",
"techn", "sidharth",
"cytoscape", "sphinxcontrib",
"Lucida",
"Bilkent",
"cpettitt",
"antiscript",
"ts-nocheck",
"setupGraphViewbox",
"flatmap",
"Kaufmann",
"viewports",
"edgechromium",
"statediagram", "statediagram",
"Brolin",
"Greywolf",
"stylis", "stylis",
"svgXlink", "substate",
"xlink" "sveidqvist",
"techn",
"ts-nocheck",
"tuleap",
"verdana",
"viewports",
"vinod",
"visio",
"vitepress",
"xlink",
"yash"
], ],
"patterns": [ "patterns": [
{ { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
"name": "Markdown links",
"pattern": "\\((.*)\\)",
"description": ""
},
{ {
"name": "Markdown code blocks", "name": "Markdown code blocks",
"pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx", "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
@@ -100,25 +92,14 @@
"pattern": "\\`([^\\`\\r\\n]+?)\\`", "pattern": "\\`([^\\`\\r\\n]+?)\\`",
"description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex" "description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
}, },
{ { "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
"name": "Link contents", { "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
"pattern": "\\<a(.*)\\>",
"description": ""
},
{
"name": "Snippet references",
"pattern": "-- snippet:(.*)",
"description": ""
},
{ {
"name": "Snippet references 2", "name": "Snippet references 2",
"pattern": "\\<\\[sample:(.*)", "pattern": "\\<\\[sample:(.*)",
"description": "another kind of snippet reference" "description": "another kind of snippet reference"
}, },
{ { "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" },
"name": "Multi-line code blocks",
"pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm"
},
{ {
"name": "HTML Tags", "name": "HTML Tags",
"pattern": "<[^>]*>", "pattern": "<[^>]*>",

12
cypress/helpers/util.js
View File

@@ -2,6 +2,8 @@ const utf8ToB64 = (str) => {
return window.btoa(unescape(encodeURIComponent(str))); return window.btoa(unescape(encodeURIComponent(str)));
}; };
const batchId = 'mermid-batch' + new Date().getTime();
export const mermaidUrl = (graphStr, options, api) => { export const mermaidUrl = (graphStr, options, api) => {
const obj = { const obj = {
code: graphStr, code: graphStr,
@@ -49,9 +51,12 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
if (useAppli) { if (useAppli) {
cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
cy.eyesOpen({ cy.eyesOpen({
appName: 'Mermaid', appName: 'Mermaid',
testName: name, testName: name,
batchName: Cypress.spec.name,
batchId: batchId + Cypress.spec.name,
}); });
} }
@@ -65,7 +70,9 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
// Default name to test title // Default name to test title
if (useAppli) { if (useAppli) {
cy.log('Check eyes' + Cypress.spec.name);
cy.eyesCheckWindow('Click!'); cy.eyesCheckWindow('Click!');
cy.log('Closing eyes: ' + Cypress.spec.name);
cy.eyesClose(); cy.eyesClose();
} else { } else {
cy.matchImageSnapshot(name); cy.matchImageSnapshot(name);
@@ -101,9 +108,12 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
if (useAppli) { if (useAppli) {
cy.log('Opening eyes 2' + Cypress.spec.name);
cy.eyesOpen({ cy.eyesOpen({
appName: 'Mermaid', appName: 'Mermaid',
testName: name, testName: name,
batchName: Cypress.spec.name,
batchId: batchId + Cypress.spec.name,
}); });
} }
@@ -115,7 +125,9 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
// Default name to test title // Default name to test title
if (useAppli) { if (useAppli) {
cy.log('Check eyes 2' + Cypress.spec.name);
cy.eyesCheckWindow('Click!'); cy.eyesCheckWindow('Click!');
cy.log('Closing eyes 2' + Cypress.spec.name);
cy.eyesClose(); cy.eyesClose();
} else { } else {
cy.matchImageSnapshot(name); cy.matchImageSnapshot(name);

6
docs/config/directives.md
View File

@@ -30,7 +30,7 @@ Mermaid basically supports two types of configuration options to be overridden b
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. 2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs
@@ -233,7 +233,7 @@ Some common flowchart configurations are:
- _diagramPadding_: number - _diagramPadding_: number
- _useMaxWidth_: number - _useMaxWidth_: number
For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
The following code snippet changes flowchart config: The following code snippet changes flowchart config:
@@ -277,7 +277,7 @@ Some common sequence configurations are:
- _showSequenceNumbers_: boolean - _showSequenceNumbers_: boolean
- _wrap_: boolean - _wrap_: boolean
For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code. For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
So, `wrap` by default has a value of `false` for sequence diagrams. So, `wrap` by default has a value of `false` for sequence diagrams.

2
docs/config/setup/modules/mermaidAPI.md
View File

@@ -80,7 +80,7 @@ mermaid.initialize(config);
#### Defined in #### Defined in
[mermaidAPI.ts:736](https://github.com/weedySeaDragon/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L736) [mermaidAPI.ts:740](https://github.com/weedySeaDragon/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L740)
## Functions ## Functions

2
docs/syntax/gantt.md
View File

@@ -280,7 +280,7 @@ gantt
## Styling ## Styling
Styling of the a gantt diagram is done by defining a number of css classes. During rendering, these classes are extracted from the file located at src/themes/gantt.scss Styling of the Gantt diagram is done by defining a number of CSS classes. During rendering, these classes are extracted from the file located at src/diagrams/gantt/styles.js
### Classes used ### Classes used

42
package.json
View File

@@ -7,7 +7,7 @@
"module": "dist/mermaid.core.mjs", "module": "dist/mermaid.core.mjs",
"types": "dist/mermaid.d.ts", "types": "dist/mermaid.d.ts",
"type": "module", "type": "module",
"packageManager": "pnpm@7.14.1", "packageManager": "pnpm@7.14.2",
"exports": { "exports": {
".": { ".": {
"require": "./dist/mermaid.min.js", "require": "./dist/mermaid.min.js",
@@ -33,7 +33,7 @@
"dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
"release": "pnpm build", "release": "pnpm build",
"lint": "eslint --cache --ignore-path .gitignore . && pnpm --filter mermaid run lint:jison && prettier --check .", "lint": "eslint --cache --ignore-path .gitignore . && pnpm --filter mermaid run lint:jison && prettier --check .",
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .", "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
"cypress": "cypress run", "cypress": "cypress run",
"cypress:open": "cypress open", "cypress:open": "cypress open",
"e2e": "start-server-and-test dev http://localhost:9000/ cypress", "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
@@ -63,7 +63,7 @@
}, },
"dependencies": { "dependencies": {
"@braintree/sanitize-url": "6.0.1", "@braintree/sanitize-url": "6.0.1",
"@types/node": "18.11.8", "@types/node": "18.11.9",
"@types/uuid": "8.3.4", "@types/uuid": "8.3.4",
"d3": "7.6.1", "d3": "7.6.1",
"dagre": "0.8.5", "dagre": "0.8.5",
@@ -81,33 +81,33 @@
}, },
"devDependencies": { "devDependencies": {
"@applitools/eyes-cypress": "3.27.6", "@applitools/eyes-cypress": "3.27.6",
"@commitlint/cli": "17.1.2", "@commitlint/cli": "17.2.0",
"@commitlint/config-conventional": "17.1.0", "@commitlint/config-conventional": "17.2.0",
"@cspell/eslint-plugin": "6.13.2", "@cspell/eslint-plugin": "6.14.0",
"@types/d3": "7.4.0", "@types/d3": "7.4.0",
"@types/dompurify": "2.3.4", "@types/dompurify": "2.3.4",
"@types/eslint": "8.4.9", "@types/eslint": "8.4.10",
"@types/express": "4.17.14", "@types/express": "4.17.14",
"@types/jsdom": "20.0.0", "@types/jsdom": "20.0.0",
"@types/lodash": "4.14.186", "@types/lodash": "4.14.188",
"@types/mdast": "3.0.10", "@types/mdast": "3.0.10",
"@types/prettier": "2.7.1", "@types/prettier": "2.7.1",
"@types/stylis": "4.0.2", "@types/stylis": "4.0.2",
"@typescript-eslint/eslint-plugin": "5.41.0", "@typescript-eslint/eslint-plugin": "5.42.0",
"@typescript-eslint/parser": "5.41.0", "@typescript-eslint/parser": "5.42.0",
"@vitest/coverage-c8": "0.24.3", "@vitest/coverage-c8": "0.24.5",
"@vitest/ui": "0.24.3", "@vitest/ui": "0.24.5",
"concurrently": "7.5.0", "concurrently": "7.5.0",
"coveralls": "3.1.1", "coveralls": "3.1.1",
"cypress": "10.11.0", "cypress": "10.11.0",
"cypress-image-snapshot": "4.0.1", "cypress-image-snapshot": "4.0.1",
"esbuild": "0.15.12", "esbuild": "0.15.13",
"eslint": "8.26.0", "eslint": "8.27.0",
"eslint-config-prettier": "8.5.0", "eslint-config-prettier": "8.5.0",
"eslint-plugin-cypress": "2.12.1", "eslint-plugin-cypress": "2.12.1",
"eslint-plugin-html": "7.1.0", "eslint-plugin-html": "7.1.0",
"eslint-plugin-jest": "27.1.3", "eslint-plugin-jest": "27.1.4",
"eslint-plugin-jsdoc": "39.4.0", "eslint-plugin-jsdoc": "39.6.2",
"eslint-plugin-json": "3.1.0", "eslint-plugin-json": "3.1.0",
"eslint-plugin-markdown": "3.0.0", "eslint-plugin-markdown": "3.0.0",
"eslint-plugin-no-only-tests": "3.1.0", "eslint-plugin-no-only-tests": "3.1.0",
@@ -122,7 +122,7 @@
"lint-staged": "13.0.3", "lint-staged": "13.0.3",
"markdown-it": "13.0.1", "markdown-it": "13.0.1",
"path-browserify": "1.0.1", "path-browserify": "1.0.1",
"pnpm": "7.14.1", "pnpm": "7.14.2",
"prettier": "2.7.1", "prettier": "2.7.1",
"prettier-plugin-jsdoc": "0.4.2", "prettier-plugin-jsdoc": "0.4.2",
"remark": "14.0.2", "remark": "14.0.2",
@@ -132,10 +132,10 @@
"typescript": "4.8.4", "typescript": "4.8.4",
"unist-util-flatmap": "1.0.0", "unist-util-flatmap": "1.0.0",
"vite": "3.2.2", "vite": "3.2.2",
"vitepress": "1.0.0-alpha.26", "vitepress": "1.0.0-alpha.27",
"vitepress-plugin-mermaid": "2.0.8", "vitepress-plugin-mermaid": "2.0.8",
"vitepress-plugin-search": "1.0.4-alpha.14", "vitepress-plugin-search": "1.0.4-alpha.15",
"vitest": "0.24.3" "vitest": "0.24.5"
}, },
"resolutions": { "resolutions": {
"d3": "7.6.1" "d3": "7.6.1"
@@ -148,6 +148,6 @@
"**/*.scss" "**/*.scss"
], ],
"volta": { "volta": {
"node": "18.12.0" "node": "18.12.1"
} }
} }

25
packages/mermaid/package.json
View File

@@ -36,7 +36,7 @@
"docs:verify": "pnpm docs:code && ts-node-esm src/docs.mts --verify", "docs:verify": "pnpm docs:code && ts-node-esm src/docs.mts --verify",
"docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress", "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
"docs:build:vitepress": "pnpm docs:pre:vitepress && vitepress build src/vitepress", "docs:build:vitepress": "pnpm docs:pre:vitepress && vitepress build src/vitepress",
"docs:dev": "pnpm docs:pre:vitepress && vitepress dev src/vitepress", "docs:dev": "pnpm docs:pre:vitepress && concurrently \"vitepress dev src/vitepress\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
"docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
"release": "pnpm build", "release": "pnpm build",
"lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .", "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
@@ -80,30 +80,32 @@
}, },
"devDependencies": { "devDependencies": {
"@applitools/eyes-cypress": "3.27.6", "@applitools/eyes-cypress": "3.27.6",
"@commitlint/cli": "17.1.2", "@commitlint/cli": "17.2.0",
"@commitlint/config-conventional": "17.1.0", "@commitlint/config-conventional": "17.2.0",
"@types/d3": "7.4.0", "@types/d3": "7.4.0",
"@types/dompurify": "2.3.4", "@types/dompurify": "2.3.4",
"@types/eslint": "8.4.9", "@types/eslint": "8.4.10",
"@types/express": "4.17.14", "@types/express": "4.17.14",
"@types/jsdom": "20.0.0", "@types/jsdom": "20.0.0",
"@types/lodash": "4.14.186", "@types/lodash": "4.14.188",
"@types/micromatch": "4.0.2",
"@types/prettier": "2.7.1", "@types/prettier": "2.7.1",
"@types/stylis": "4.0.2", "@types/stylis": "4.0.2",
"@typescript-eslint/eslint-plugin": "5.41.0", "@typescript-eslint/eslint-plugin": "5.42.0",
"@typescript-eslint/parser": "5.41.0", "@typescript-eslint/parser": "5.42.0",
"chokidar": "3.5.3",
"concurrently": "7.5.0", "concurrently": "7.5.0",
"coveralls": "3.1.1", "coveralls": "3.1.1",
"cypress": "10.11.0", "cypress": "10.11.0",
"cypress-image-snapshot": "4.0.1", "cypress-image-snapshot": "4.0.1",
"documentation": "13.2.5", "documentation": "13.2.5",
"esbuild": "0.15.12", "esbuild": "0.15.13",
"eslint": "8.26.0", "eslint": "8.27.0",
"eslint-config-prettier": "8.5.0", "eslint-config-prettier": "8.5.0",
"eslint-plugin-cypress": "2.12.1", "eslint-plugin-cypress": "2.12.1",
"eslint-plugin-html": "7.1.0", "eslint-plugin-html": "7.1.0",
"eslint-plugin-jest": "27.1.3", "eslint-plugin-jest": "27.1.4",
"eslint-plugin-jsdoc": "39.4.0", "eslint-plugin-jsdoc": "39.6.2",
"eslint-plugin-json": "3.1.0", "eslint-plugin-json": "3.1.0",
"eslint-plugin-markdown": "3.0.0", "eslint-plugin-markdown": "3.0.0",
"express": "4.18.2", "express": "4.18.2",
@@ -114,6 +116,7 @@
"js-base64": "3.7.2", "js-base64": "3.7.2",
"jsdom": "20.0.2", "jsdom": "20.0.2",
"lint-staged": "13.0.3", "lint-staged": "13.0.3",
"micromatch": "^4.0.5",
"moment": "2.29.4", "moment": "2.29.4",
"path-browserify": "1.0.1", "path-browserify": "1.0.1",
"prettier": "2.7.1", "prettier": "2.7.1",

57
packages/mermaid/src/docs.mts
View File

@@ -30,7 +30,7 @@
* @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with
* it.) * it.)
*/ */
import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs'; import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs';
import { exec } from 'child_process'; import { exec } from 'child_process';
import { globby } from 'globby'; import { globby } from 'globby';
import { JSDOM } from 'jsdom'; import { JSDOM } from 'jsdom';
@@ -38,6 +38,8 @@ import type { Code, Root } from 'mdast';
import { posix, dirname, relative } from 'path'; import { posix, dirname, relative } from 'path';
import prettier from 'prettier'; import prettier from 'prettier';
import { remark } from 'remark'; import { remark } from 'remark';
import chokidar from 'chokidar';
import mm from 'micromatch';
// @ts-ignore No typescript declaration file // @ts-ignore No typescript declaration file
import flatmap from 'unist-util-flatmap'; import flatmap from 'unist-util-flatmap';
@@ -47,6 +49,7 @@ const MERMAID_MAJOR_VERSION = (
const verifyOnly: boolean = process.argv.includes('--verify'); const verifyOnly: boolean = process.argv.includes('--verify');
const git: boolean = process.argv.includes('--git'); const git: boolean = process.argv.includes('--git');
const watch: boolean = process.argv.includes('--watch');
const vitepress: boolean = process.argv.includes('--vitepress'); const vitepress: boolean = process.argv.includes('--vitepress');
const noHeader: boolean = process.argv.includes('--noHeader') || vitepress; const noHeader: boolean = process.argv.includes('--noHeader') || vitepress;
@@ -61,14 +64,7 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`; const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
// TODO: Read from .prettierrc? const prettierConfig = prettier.resolveConfig.sync('.') ?? {};
const prettierConfig: prettier.Config = {
useTabs: false,
tabWidth: 2,
endOfLine: 'auto',
printWidth: 100,
singleQuote: true,
};
let filesWereTransformed = false; let filesWereTransformed = false;
@@ -246,11 +242,15 @@ const transformHtml = (filename: string) => {
copyTransformedContents(filename, !verifyOnly, formattedHTML); copyTransformedContents(filename, !verifyOnly, formattedHTML);
}; };
const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => { const getGlobs = (globs: string[]): string[] => {
globs.push('!**/dist'); globs.push('!**/dist');
if (!vitepress) { if (!vitepress) {
globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md'); globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
} }
return globs;
};
const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
return await globby(globs, { dot: true }); return await globby(globs, { dot: true });
}; };
@@ -263,15 +263,18 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
const action = verifyOnly ? 'Verifying' : 'Transforming'; const action = verifyOnly ? 'Verifying' : 'Transforming';
const mdFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.md')]); const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
const mdFiles = await getFilesFromGlobs(mdFileGlobs);
console.log(`${action} ${mdFiles.length} markdown files...`); console.log(`${action} ${mdFiles.length} markdown files...`);
mdFiles.forEach(transformMarkdown); mdFiles.forEach(transformMarkdown);
const htmlFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.html')]); const htmlFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.html')]);
const htmlFiles = await getFilesFromGlobs(htmlFileGlobs);
console.log(`${action} ${htmlFiles.length} html files...`); console.log(`${action} ${htmlFiles.length} html files...`);
htmlFiles.forEach(transformHtml); htmlFiles.forEach(transformHtml);
const otherFiles = await getFilesFromGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']); const otherFileGlobs = getGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']);
const otherFiles = await getFilesFromGlobs(otherFileGlobs);
console.log(`${action} ${otherFiles.length} other files...`); console.log(`${action} ${otherFiles.length} other files...`);
otherFiles.forEach((file: string) => { otherFiles.forEach((file: string) => {
copyTransformedContents(file, !verifyOnly); // no transformation copyTransformedContents(file, !verifyOnly); // no transformation
@@ -287,4 +290,32 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
exec(`git add ${FINAL_DOCS_DIR}`); exec(`git add ${FINAL_DOCS_DIR}`);
} }
} }
if (watch) {
console.log(`Watching for changes in ${SOURCE_DOCS_DIR}`);
const matcher = (globs: string[]) => (file: string) => mm.every(file, globs);
const isMd = matcher(mdFileGlobs);
const isHtml = matcher(htmlFileGlobs);
const isOther = matcher(otherFileGlobs);
chokidar
.watch(SOURCE_DOCS_DIR)
// Delete files from the final docs dir if they are deleted from the source dir
.on('unlink', (file: string) => rmSync(changeToFinalDocDir(file)))
.on('unlinkDir', (file: string) => rmdirSync(changeToFinalDocDir(file)))
.on('all', (event, path) => {
// Ignore other events.
if (!['add', 'change'].includes(event)) {
return;
}
if (isMd(path)) {
transformMarkdown(path);
} else if (isHtml(path)) {
transformHtml(path);
} else if (isOther(path)) {
copyTransformedContents(path, true);
}
});
}
})(); })();

6
packages/mermaid/src/docs/config/directives.md
View File

@@ -24,7 +24,7 @@ Mermaid basically supports two types of configuration options to be overridden b
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. 2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
``` ```
Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs
@@ -188,7 +188,7 @@ Some common flowchart configurations are:
- _diagramPadding_: number - _diagramPadding_: number
- _useMaxWidth_: number - _useMaxWidth_: number
For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
The following code snippet changes flowchart config: The following code snippet changes flowchart config:
@@ -221,7 +221,7 @@ Some common sequence configurations are:
- _showSequenceNumbers_: boolean - _showSequenceNumbers_: boolean
- _wrap_: boolean - _wrap_: boolean
For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code. For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
So, `wrap` by default has a value of `false` for sequence diagrams. So, `wrap` by default has a value of `false` for sequence diagrams.

2
packages/mermaid/src/docs/syntax/gantt.md
View File

@@ -210,7 +210,7 @@ gantt
## Styling ## Styling
Styling of the a gantt diagram is done by defining a number of css classes. During rendering, these classes are extracted from the file located at src/themes/gantt.scss Styling of the Gantt diagram is done by defining a number of CSS classes. During rendering, these classes are extracted from the file located at src/diagrams/gantt/styles.js
### Classes used ### Classes used

6
packages/mermaid/src/mermaidAPI.ts
View File

@@ -371,7 +371,11 @@ export const removeExistingElements = (
* @param text - The text for the graph definition * @param text - The text for the graph definition
* @param cb - Callback which is called after rendering is finished with the svg code as in param. * @param cb - Callback which is called after rendering is finished with the svg code as in param.
* @param svgContainingElement - HTML element where the svg will be inserted. (Is usually element with the .mermaid class) * @param svgContainingElement - HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
* inserted. If no svgContainingElement is provided then the SVG element will be appended to the body. * If no svgContainingElement is provided then the SVG element will be appended to the body.
* Selector to element in which a div with the graph temporarily will be
* inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
* element will be removed when rendering is completed.
* @returns - Resolves when finished rendering.
*/ */
const render = async function ( const render = async function (
id: string, id: string,

910
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

24
scripts/fixCSpell.ts Normal file
View File

@@ -0,0 +1,24 @@
/**
* Sorts all the `words` in the cSpell.json file.
*
* Run from the same folder as the `cSpell.json` file
* (i.e. the root of the Mermaid project).
*/
import { readFileSync, writeFileSync } from 'node:fs';
import prettier from 'prettier';
const filepath = './cSpell.json';
const cSpell: { words: string[] } = JSON.parse(readFileSync(filepath, 'utf8'));
cSpell.words = [...new Set(cSpell.words.map((word) => word.toLowerCase()))];
cSpell.words.sort((a, b) => a.localeCompare(b));
const prettierConfig = prettier.resolveConfig.sync(filepath) ?? {};
writeFileSync(
filepath,
prettier.format(JSON.stringify(cSpell), {
...prettierConfig,
filepath,
})
);