marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-15 10:14:21 +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/>
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.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
[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/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)

2
applitools.config.js
View File

@@ -15,5 +15,5 @@ module.exports = defineConfig({
// { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
],
// 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",
"language": "en",
"words": [
"blockquotes",
"customizability",
"Gantt",
"jison",
"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",
"acyclicer",
"adamiecki",
"alois",
"antiscript",
"applitools",
"Asciidoctor",
"Astah",
"Bisheng",
"asciidoctor",
"ashish",
"astah",
"bbox",
"bilkent",
"bisheng",
"brolin",
"codedoc",
"Docsy",
"Doku",
"Gitea",
"Gitgraph",
"Grav",
"Inkdrop",
"Jaoude",
"colour",
"cpettitt",
"customizability",
"cuzon",
"cytoscape",
"dagre",
"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",
"mermerd",
"mindaugas",
"mindmap",
"mindmaps",
"mitigations",
"mkdocs",
"orlandoni",
"phpbb",
"Plantuml",
"Playfair's",
"Podlite",
"redmine",
"sphinxcontrib",
"Tuleap",
"dagre",
"vitepress",
"docsify",
"colour",
"graphlib",
"acyclicer",
"plantuml",
"playfair",
"podlite",
"ranksep",
"descr",
"substate",
"Ashish",
"bbox",
"techn",
"cytoscape",
"Lucida",
"Bilkent",
"cpettitt",
"antiscript",
"ts-nocheck",
"setupGraphViewbox",
"flatmap",
"Kaufmann",
"viewports",
"edgechromium",
"redmine",
"sandboxed",
"setupgraphviewbox",
"shiki",
"sidharth",
"sphinxcontrib",
"statediagram",
"Brolin",
"Greywolf",
"stylis",
"svgXlink",
"xlink"
"substate",
"sveidqvist",
"techn",
"ts-nocheck",
"tuleap",
"verdana",
"viewports",
"vinod",
"visio",
"vitepress",
"xlink",
"yash"
],
"patterns": [
{
"name": "Markdown links",
"pattern": "\\((.*)\\)",
"description": ""
},
{ "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
{
"name": "Markdown code blocks",
"pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
@@ -100,25 +92,14 @@
"pattern": "\\`([^\\`\\r\\n]+?)\\`",
"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": "Snippet references",
"pattern": "-- snippet:(.*)",
"description": ""
},
{ "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
{ "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
{
"name": "Snippet references 2",
"pattern": "\\<\\[sample:(.*)",
"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",
"pattern": "<[^>]*>",

12
cypress/helpers/util.js
View File

@@ -2,6 +2,8 @@ const utf8ToB64 = (str) => {
return window.btoa(unescape(encodeURIComponent(str)));
};
const batchId = 'mermid-batch' + new Date().getTime();
export const mermaidUrl = (graphStr, options, api) => {
const obj = {
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, '-');
if (useAppli) {
cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
cy.eyesOpen({
appName: 'Mermaid',
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
if (useAppli) {
cy.log('Check eyes' + Cypress.spec.name);
cy.eyesCheckWindow('Click!');
cy.log('Closing eyes: ' + Cypress.spec.name);
cy.eyesClose();
} else {
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, '-');
if (useAppli) {
cy.log('Opening eyes 2' + Cypress.spec.name);
cy.eyesOpen({
appName: 'Mermaid',
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
if (useAppli) {
cy.log('Check eyes 2' + Cypress.spec.name);
cy.eyesCheckWindow('Click!');
cy.log('Closing eyes 2' + Cypress.spec.name);
cy.eyesClose();
} else {
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.
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
@@ -233,7 +233,7 @@ Some common flowchart configurations are:
- _diagramPadding_: 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_
The following code snippet changes flowchart config:
@@ -277,7 +277,7 @@ Some common sequence configurations are:
- _showSequenceNumbers_: 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_
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
[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

2
docs/syntax/gantt.md
View File

@@ -280,7 +280,7 @@ gantt
## 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

42
package.json
View File

@@ -7,7 +7,7 @@
"module": "dist/mermaid.core.mjs",
"types": "dist/mermaid.d.ts",
"type": "module",
"packageManager": "pnpm@7.14.1",
"packageManager": "pnpm@7.14.2",
"exports": {
".": {
"require": "./dist/mermaid.min.js",
@@ -33,7 +33,7 @@
"dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
"release": "pnpm build",
"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:open": "cypress open",
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
@@ -63,7 +63,7 @@
},
"dependencies": {
"@braintree/sanitize-url": "6.0.1",
"@types/node": "18.11.8",
"@types/node": "18.11.9",
"@types/uuid": "8.3.4",
"d3": "7.6.1",
"dagre": "0.8.5",
@@ -81,33 +81,33 @@
},
"devDependencies": {
"@applitools/eyes-cypress": "3.27.6",
"@commitlint/cli": "17.1.2",
"@commitlint/config-conventional": "17.1.0",
"@cspell/eslint-plugin": "6.13.2",
"@commitlint/cli": "17.2.0",
"@commitlint/config-conventional": "17.2.0",
"@cspell/eslint-plugin": "6.14.0",
"@types/d3": "7.4.0",
"@types/dompurify": "2.3.4",
"@types/eslint": "8.4.9",
"@types/eslint": "8.4.10",
"@types/express": "4.17.14",
"@types/jsdom": "20.0.0",
"@types/lodash": "4.14.186",
"@types/lodash": "4.14.188",
"@types/mdast": "3.0.10",
"@types/prettier": "2.7.1",
"@types/stylis": "4.0.2",
"@typescript-eslint/eslint-plugin": "5.41.0",
"@typescript-eslint/parser": "5.41.0",
"@vitest/coverage-c8": "0.24.3",
"@vitest/ui": "0.24.3",
"@typescript-eslint/eslint-plugin": "5.42.0",
"@typescript-eslint/parser": "5.42.0",
"@vitest/coverage-c8": "0.24.5",
"@vitest/ui": "0.24.5",
"concurrently": "7.5.0",
"coveralls": "3.1.1",
"cypress": "10.11.0",
"cypress-image-snapshot": "4.0.1",
"esbuild": "0.15.12",
"eslint": "8.26.0",
"esbuild": "0.15.13",
"eslint": "8.27.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-cypress": "2.12.1",
"eslint-plugin-html": "7.1.0",
"eslint-plugin-jest": "27.1.3",
"eslint-plugin-jsdoc": "39.4.0",
"eslint-plugin-jest": "27.1.4",
"eslint-plugin-jsdoc": "39.6.2",
"eslint-plugin-json": "3.1.0",
"eslint-plugin-markdown": "3.0.0",
"eslint-plugin-no-only-tests": "3.1.0",
@@ -122,7 +122,7 @@
"lint-staged": "13.0.3",
"markdown-it": "13.0.1",
"path-browserify": "1.0.1",
"pnpm": "7.14.1",
"pnpm": "7.14.2",
"prettier": "2.7.1",
"prettier-plugin-jsdoc": "0.4.2",
"remark": "14.0.2",
@@ -132,10 +132,10 @@
"typescript": "4.8.4",
"unist-util-flatmap": "1.0.0",
"vite": "3.2.2",
"vitepress": "1.0.0-alpha.26",
"vitepress": "1.0.0-alpha.27",
"vitepress-plugin-mermaid": "2.0.8",
"vitepress-plugin-search": "1.0.4-alpha.14",
"vitest": "0.24.3"
"vitepress-plugin-search": "1.0.4-alpha.15",
"vitest": "0.24.5"
},
"resolutions": {
"d3": "7.6.1"
@@ -148,6 +148,6 @@
"**/*.scss"
],
"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: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: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",
"release": "pnpm build",
"lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
@@ -80,30 +80,32 @@
},
"devDependencies": {
"@applitools/eyes-cypress": "3.27.6",
"@commitlint/cli": "17.1.2",
"@commitlint/config-conventional": "17.1.0",
"@commitlint/cli": "17.2.0",
"@commitlint/config-conventional": "17.2.0",
"@types/d3": "7.4.0",
"@types/dompurify": "2.3.4",
"@types/eslint": "8.4.9",
"@types/eslint": "8.4.10",
"@types/express": "4.17.14",
"@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/stylis": "4.0.2",
"@typescript-eslint/eslint-plugin": "5.41.0",
"@typescript-eslint/parser": "5.41.0",
"@typescript-eslint/eslint-plugin": "5.42.0",
"@typescript-eslint/parser": "5.42.0",
"chokidar": "3.5.3",
"concurrently": "7.5.0",
"coveralls": "3.1.1",
"cypress": "10.11.0",
"cypress-image-snapshot": "4.0.1",
"documentation": "13.2.5",
"esbuild": "0.15.12",
"eslint": "8.26.0",
"esbuild": "0.15.13",
"eslint": "8.27.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-cypress": "2.12.1",
"eslint-plugin-html": "7.1.0",
"eslint-plugin-jest": "27.1.3",
"eslint-plugin-jsdoc": "39.4.0",
"eslint-plugin-jest": "27.1.4",
"eslint-plugin-jsdoc": "39.6.2",
"eslint-plugin-json": "3.1.0",
"eslint-plugin-markdown": "3.0.0",
"express": "4.18.2",
@@ -114,6 +116,7 @@
"js-base64": "3.7.2",
"jsdom": "20.0.2",
"lint-staged": "13.0.3",
"micromatch": "^4.0.5",
"moment": "2.29.4",
"path-browserify": "1.0.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
* it.)
*/
import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs';
import { exec } from 'child_process';
import { globby } from 'globby';
import { JSDOM } from 'jsdom';
@@ -38,6 +38,8 @@ import type { Code, Root } from 'mdast';
import { posix, dirname, relative } from 'path';
import prettier from 'prettier';
import { remark } from 'remark';
import chokidar from 'chokidar';
import mm from 'micromatch';
// @ts-ignore No typescript declaration file
import flatmap from 'unist-util-flatmap';
@@ -47,6 +49,7 @@ const MERMAID_MAJOR_VERSION = (
const verifyOnly: boolean = process.argv.includes('--verify');
const git: boolean = process.argv.includes('--git');
const watch: boolean = process.argv.includes('--watch');
const vitepress: boolean = process.argv.includes('--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.`;
// TODO: Read from .prettierrc?
const prettierConfig: prettier.Config = {
useTabs: false,
tabWidth: 2,
endOfLine: 'auto',
printWidth: 100,
singleQuote: true,
};
const prettierConfig = prettier.resolveConfig.sync('.') ?? {};
let filesWereTransformed = false;
@@ -246,11 +242,15 @@ const transformHtml = (filename: string) => {
copyTransformedContents(filename, !verifyOnly, formattedHTML);
};
const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
const getGlobs = (globs: string[]): string[] => {
globs.push('!**/dist');
if (!vitepress) {
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 });
};
@@ -263,15 +263,18 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
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...`);
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...`);
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...`);
otherFiles.forEach((file: string) => {
copyTransformedContents(file, !verifyOnly); // no transformation
@@ -287,4 +290,32 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
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.
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
@@ -188,7 +188,7 @@ Some common flowchart configurations are:
- _diagramPadding_: 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_
The following code snippet changes flowchart config:
@@ -221,7 +221,7 @@ Some common sequence configurations are:
- _showSequenceNumbers_: 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_
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 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

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

@@ -371,7 +371,11 @@ export const removeExistingElements = (
* @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 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 (
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,
})
);