diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt new file mode 100644 index 000000000..6d26357f8 --- /dev/null +++ b/.cspell/code-terms.txt @@ -0,0 +1,137 @@ +# This file contains coding related terms +ALPHANUM +antiscript +APPLYCLASS +ARROWHEADSTYLE +ARROWTYPE +autonumber +axisl-line +Bigdecimal +birel +BIREL +bqstring +BQUOTE +bramp +BRKT +callbackargs +callbackname +classdef +classdefid +classentity +classname +COLONSEP +COMPOSIT_STATE +concat +controlx +controly +CSSCLASS +CYLINDEREND +CYLINDERSTART +datakey +DEND +descr +distp +distq +divs +docref +DOMID +doublecircle +DOUBLECIRCLEEND +DOUBLECIRCLESTART +DQUOTE +DSTART +edgesep +EMPTYSTR +enddate +ERDIAGRAM +flatmap +forwardable +frontmatter +funs +gantt +GENERICTYPE +getBoundarys +grammr +graphtype +interp +introdcued +INVTRAPEND +INVTRAPSTART +JDBC +jison +Kaufmann +keyify +LABELPOS +LABELTYPE +lcov +LEFTOF +Lexa +linebreak +LINETYPE +LINKSTYLE +LLABEL +loglevel +LOGMSG +lookaheads +mdast +minlen +Mstartx +MULT +NODIR +NSTR +Qcontrolx +reinit +rels +reqs +rewritelinks +rgba +RIGHTOF +sankey +sequencenumber +shrc +signaltype +someclass +SPACELINE +SPACELIST +STADIUMEND +STADIUMSTART +startdate +startx +starty +STMNT +stopx +stopy +strikethrough +stringifying +struct +STYLECLASS +STYLEOPTS +subcomponent +subcomponents +SUBROUTINEEND +SUBROUTINESTART +Subschemas +substr +TAGEND +TAGSTART +techn +TESTSTR +TEXTDATA +TEXTLENGTH +titlevalue +topbar +TRAPEND +TRAPSTART +ts-nocheck +tsdoc +typeof +typestr +unshift +verifymethod +VERIFYMTHD +WARN_DOCSDIR_DOESNT_MATCH +xhost +yaxis +yfunc +yytext +zenuml diff --git a/.cspell/contributors.txt b/.cspell/contributors.txt new file mode 100644 index 000000000..bd3ad9da2 --- /dev/null +++ b/.cspell/contributors.txt @@ -0,0 +1,8 @@ +# Contributors to mermaidjs, one per line +Ashish Jain +cpettitt +Dong Cai +Nikolay Rozhkov +Peng Xiao +subhash-halder +Vinod Sidharth diff --git a/.cspell/cspell.config.yaml b/.cspell/cspell.config.yaml new file mode 100644 index 000000000..33d690193 --- /dev/null +++ b/.cspell/cspell.config.yaml @@ -0,0 +1,52 @@ +# yaml-language-server: $schema=https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json + +$schema: https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json + +dictionaryDefinitions: + - name: code-terms + path: ./code-terms.txt + description: A list of coding related terms. + addWords: true + - name: mermaid-terms + path: ./mermaid-terms.txt + description: A list of terms related to the mermaid project. + addWords: true + - name: misc-terms + path: ./misc-terms.txt + description: A list of miscellaneous terms. + - name: 3rd-party-terms + path: ./libraries.txt + description: A list of 3rd party terms from dependencies. + addWords: true + - name: contributors + path: ./contributors.txt + description: A list of contributors to the mermaid project. + type: 'W' + addWords: true + + # cspell:disable + - name: suggestions + words: + - none + suggestWords: + - seperator:separator + - vertice:vertex + # cspell:enable + +patterns: + - name: character-set-cyrillic + pattern: '/\p{Script_Extensions=Cyrillic}+/gu' + - name: svg-block + pattern: '' + - name: json-property + pattern: '/"[\w/@-]+":/g' + +dictionaries: + - mermaid-terms + - suggestions + - contributors + +ignorePaths: + - '*.txt' # do not spell check local dictionaries + +# cspell:dictionary misc-terms diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt new file mode 100644 index 000000000..f51304da3 --- /dev/null +++ b/.cspell/libraries.txt @@ -0,0 +1,69 @@ +# Add third party library terms below +acyclicer +Antlr +Appli +applitools +Asciidoctor +Astah +automerge +bilkent +bisheng +codedoc +Codemia +codepaths +csstree +cytoscape +cytoscape-cose-bilkent +dagre +dagre-d3 +Deepdwn +Docsify +Docsy +DokuWiki +dompurify +elkjs +fontawesome +Foswiki +Gitea +graphlib +Grav +iconify +Inkdrop +jiti +jsdocs +jsfiddle +jsonschema +katex +khroma +mathml +matplotlib +mdbook +Mermerd +mkdocs +Nextra +nodenext +npmjs +pageview +pathe +phpbb +pixelmatch +Podlite +presetAttributify +pyplot +redmine +rehype +rscratch +sparkline +sphinxcontrib +ssim +stylis +Swimm +tsbuildinfo +Tuleap +Typora +unocss +unplugin +unstub +vite +vitest +Zune diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt new file mode 100644 index 000000000..3fa5eff26 --- /dev/null +++ b/.cspell/mermaid-terms.txt @@ -0,0 +1,39 @@ +Adamiecki +arrowend +bmatrix +braintree +catmull +compositTitleSize +doublecircle +elems +gantt +gitgraph +gzipped +knsv +Knut +marginx +marginy +Markdownish +mermaidjs +mindmap +mindmaps +multigraph +nodesep +NOTEGROUP +Pinterest +rankdir +ranksep +rect +rects +sandboxed +siebling +statediagram +substate +Sveidqvist +unfixable +Viewbox +viewports +visio +vitepress +xlink +xychart diff --git a/.cspell/misc-terms.txt b/.cspell/misc-terms.txt new file mode 100644 index 000000000..467e48891 --- /dev/null +++ b/.cspell/misc-terms.txt @@ -0,0 +1 @@ +newbranch diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 49e1aaaa6..ceff724bb 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -63,13 +63,24 @@ module.exports = { minimumDescriptionLength: 10, }, ], + '@typescript-eslint/naming-convention': [ + 'error', + { + selector: 'typeLike', + format: ['PascalCase'], + custom: { + regex: '^I[A-Z]', + match: false, + }, + }, + ], 'json/*': ['error', 'allowComments'], '@cspell/spellchecker': [ 'error', { - checkIdentifiers: false, - checkStrings: false, - checkStringTemplates: false, + checkIdentifiers: true, + checkStrings: true, + checkStringTemplates: true, }, ], 'no-empty': [ @@ -148,6 +159,19 @@ module.exports = { '@typescript-eslint/no-unused-vars': 'off', }, }, + { + files: ['*.spec.{ts,js}', 'tests/**', 'cypress/**/*.js'], + rules: { + '@cspell/spellchecker': [ + 'error', + { + checkIdentifiers: false, + checkStrings: false, + checkStringTemplates: false, + }, + ], + }, + }, { files: ['*.html', '*.md', '**/*.md/*'], rules: { diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index fa15f39e1..6be6f3b5d 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -4,7 +4,7 @@ contact_links: url: https://github.com/mermaid-js/mermaid/discussions about: Ask the Community questions or share your own graphs in our discussions. - name: Discord - url: https://discord.gg/wwtabKgp8y + url: https://discord.gg/AgrbSrBer3 about: Join our Community on Discord for Help and a casual chat. - name: Documentation url: https://mermaid.js.org diff --git a/.github/lychee.toml b/.github/lychee.toml index 4af304a99..9c9d0558c 100644 --- a/.github/lychee.toml +++ b/.github/lychee.toml @@ -35,7 +35,10 @@ exclude = [ 'packages/mermaid/src/docs/config/setup/*', # Ignore Discord invite -"https://discord.gg" +"https://discord.gg", + +# BundlePhobia has frequent downtime +"https://bundlephobia.com" ] # Exclude all private IPs from checking. diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index f20204a71..cfd22a293 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -12,7 +12,7 @@ Describe the way your implementation works or what design decisions you made if Make sure you -- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) +- [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html) - [ ] :computer: have added necessary unit/e2e tests. -- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/contributing.md#update-documentation) is used for all new features. +- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features. - [ ] :bookmark: targeted `develop` branch diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index acfb1887e..87607bc2f 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -24,7 +24,7 @@ jobs: uses: actions/setup-node@v4 with: cache: pnpm - node-version: 18 + node-version-file: '.node-version' - name: Install Packages run: pnpm install --frozen-lockfile diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 8901ec345..e0ab76607 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -12,9 +12,6 @@ on: permissions: contents: read -env: - node-version: 18.x - jobs: build-mermaid: runs-on: ubuntu-latest @@ -24,11 +21,11 @@ jobs: - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - - name: Setup Node.js ${{ env.node-version }} + - name: Setup Node.js uses: actions/setup-node@v4 with: cache: pnpm - node-version: ${{ env.node-version }} + node-version-file: '.node-version' - name: Install Packages run: | diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml index fd32e59ad..1238fe371 100644 --- a/.github/workflows/e2e-applitools.yml +++ b/.github/workflows/e2e-applitools.yml @@ -21,9 +21,9 @@ env: jobs: e2e-applitools: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [18.x] + container: + image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1 + options: --user 1001 steps: - if: ${{ ! env.USE_APPLI }} name: Warn if not using Applitools @@ -35,10 +35,10 @@ jobs: - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - - name: Setup Node.js ${{ matrix.node-version }} + - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' - if: ${{ env.USE_APPLI }} name: Notify applitools of new batch diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index cdd2e27a2..b97686db4 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -17,20 +17,22 @@ permissions: contents: read env: - node-version: 18.x # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used. targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before) }} jobs: cache: runs-on: ubuntu-latest + container: + image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1 + options: --user 1001 steps: - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: 18.x + node-version-file: '.node-version' - name: Cache snapshots id: cache-snapshot uses: actions/cache@v4 @@ -57,6 +59,9 @@ jobs: e2e: runs-on: ubuntu-latest + container: + image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1 + options: --user 1001 needs: cache strategy: fail-fast: false @@ -68,10 +73,10 @@ jobs: - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - - name: Setup Node.js ${{ env.node-version }} + - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: ${{ env.node-version }} + node-version-file: '.node-version' # These cached snapshots are downloaded, providing the reference snapshots. - name: Cache snapshots diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml index 3d4956945..59d25b7c5 100644 --- a/.github/workflows/link-checker.yml +++ b/.github/workflows/link-checker.yml @@ -36,7 +36,7 @@ jobs: restore-keys: cache-lychee- - name: Link Checker - uses: lycheeverse/lychee-action@v1.9.1 + uses: lycheeverse/lychee-action@v1.9.3 with: args: >- --config .github/lychee.toml diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index babae3fda..8f5995d71 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -13,9 +13,6 @@ on: permissions: contents: write -env: - node-version: 18.x - jobs: lint: runs-on: ubuntu-latest @@ -25,11 +22,11 @@ jobs: - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - - name: Setup Node.js ${{ env.node-version }} + - name: Setup Node.js uses: actions/setup-node@v4 with: cache: pnpm - node-version: ${{ env.node-version }} + node-version-file: '.node-version' - name: Install Packages run: | diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml index 05cd68aff..6efd90c7f 100644 --- a/.github/workflows/publish-docs.yml +++ b/.github/workflows/publish-docs.yml @@ -31,7 +31,7 @@ jobs: uses: actions/setup-node@v4 with: cache: pnpm - node-version: 18 + node-version-file: '.node-version' - name: Install Packages run: pnpm install --frozen-lockfile diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index c6503847d..c763430b0 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -19,7 +19,7 @@ jobs: uses: actions/setup-node@v4 with: cache: pnpm - node-version: 18.x + node-version-file: '.node-version' - name: Install Packages run: | diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml index 69ef74940..dce461cf5 100644 --- a/.github/workflows/release-publish.yml +++ b/.github/workflows/release-publish.yml @@ -14,11 +14,11 @@ jobs: - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - - name: Setup Node.js v18 + - name: Setup Node.js uses: actions/setup-node@v4 with: cache: pnpm - node-version: 18.x + node-version-file: '.node-version' - name: Install Packages run: | diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 5ca235b0d..7160ecc5f 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -5,9 +5,6 @@ on: [push, pull_request, merge_group] permissions: contents: read -env: - node-version: 18.x - jobs: unit-test: runs-on: ubuntu-latest @@ -17,11 +14,11 @@ jobs: - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - - name: Setup Node.js ${{ env.node-version }} + - name: Setup Node.js uses: actions/setup-node@v4 with: cache: pnpm - node-version: ${{ env.node-version }} + node-version-file: '.node-version' - name: Install Packages run: | diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 231c91f8f..86af4f513 100644 --- a/.lintstagedrc.mjs +++ b/.lintstagedrc.mjs @@ -6,6 +6,6 @@ export default { // https://prettier.io/docs/en/cli.html#--cache 'prettier --write', ], - 'cSpell.json': ['tsx scripts/fixCSpell.ts'], + '.cspell/*.txt': ['tsx scripts/fixCSpell.ts'], '**/*.jison': ['pnpm -w run lint:jison'], }; diff --git a/.node-version b/.node-version new file mode 100644 index 000000000..ee09fac75 --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +v20.11.1 diff --git a/.npmrc b/.npmrc index e72930ead..91750f557 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1,4 @@ registry=https://registry.npmjs.org auto-install-peers=true strict-peer-dependencies=false +package-import-method=clone-or-copy diff --git a/.prettierignore b/.prettierignore index fb9b694b7..e2fe936d2 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,7 @@ dist cypress/platform/xss3.html .cache +.pnpm-store coverage # Autogenerated by PNPM pnpm-lock.yaml @@ -12,4 +13,4 @@ stats packages/mermaid/src/config.type.ts # Ignore the files creates in /demos/dev except for example.html demos/dev/** -!/demos/dev/example.html \ No newline at end of file +!/demos/dev/example.html diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts index ad3d9863d..dd9af8cc5 100644 --- a/.vite/jsonSchemaPlugin.ts +++ b/.vite/jsonSchemaPlugin.ts @@ -25,6 +25,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'gitGraph', 'c4', 'sankey', + 'block', ] as const; /** diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 9633bed66..4923342e4 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -2,7 +2,7 @@ "recommendations": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", - "zixuanchen.vitest-explorer", + "vitest.explorer", "luniclynx.bison" ] } diff --git a/Dockerfile b/Dockerfile index a62800109..33a1ebd37 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,2 +1,2 @@ -FROM node:18.19.0-alpine3.18 AS base +FROM node:20.11.0-alpine3.19 AS base RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh - diff --git a/README.md b/README.md index 58287c634..d368a4349 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Generate diagrams from markdown-like text. Live Editor!

- 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us + 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us

简体中文 @@ -33,7 +33,7 @@ Try Live Editor previews of future releases: @@ -42,7 +42,7 @@ Try Live Editor previews of future releases: Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! +Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! ## Table of content @@ -53,7 +53,7 @@ Try Live Editor previews of future releases: docs - live editor] +### Flowchart [docs - live editor] ``` flowchart LR @@ -115,12 +115,12 @@ C -->|One| D[Result 1] C -->|Two| E[Result 2] ``` -### Sequence diagram [docs - live editor] +### Sequence diagram [docs - live editor] ``` sequenceDiagram Alice->>John: Hello John, how are you? -loop Healthcheck +loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! @@ -132,7 +132,7 @@ Bob-->>John: Jolly good! ```mermaid sequenceDiagram Alice->>John: Hello John, how are you? -loop Healthcheck +loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! @@ -141,7 +141,7 @@ John->>Bob: How about you? Bob-->>John: Jolly good! ``` -### Gantt chart [docs - live editor] +### Gantt chart [docs - live editor] ``` gantt @@ -165,7 +165,7 @@ gantt Parallel 4 : des6, after des4, 1d ``` -### Class diagram [docs - live editor] +### Class diagram [docs - live editor] ``` classDiagram @@ -207,7 +207,7 @@ class Class10 { ``` -### State diagram [docs - live editor] +### State diagram [docs - live editor] ``` stateDiagram-v2 @@ -229,7 +229,7 @@ Moving --> Crash Crash --> [*] ``` -### Pie chart [docs - live editor] +### Pie chart [docs - live editor] ``` pie @@ -247,7 +247,7 @@ pie ### Git graph [experimental - live editor] -### Bar chart (using gantt chart) [docs - live editor] +### Bar chart (using gantt chart) [docs - live editor] ``` gantt @@ -285,7 +285,7 @@ gantt 5 : 0, 5 ``` -### User Journey diagram [docs - live editor] +### User Journey diagram [docs - live editor] ``` journey @@ -311,7 +311,7 @@ gantt Sit down: 3: Me ``` -### C4 diagram [docs] +### C4 diagram [docs] ``` C4Context @@ -405,7 +405,7 @@ The above command generates files into the `dist` folder and publishes them to < Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out. -Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md) +Detailed information about how to contribute can be found in the [contribution guide](https://mermaid.js.org/community/contributing.html) ## Security and safe diagrams diff --git a/README.zh-CN.md b/README.zh-CN.md index c468b2d9f..942f54bff 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -15,7 +15,7 @@ Mermaid 实时编辑器!

- 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们 + 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们

English @@ -34,7 +34,7 @@ Mermaid [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) -[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y) +[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3) [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_) @@ -43,7 +43,7 @@ Mermaid **感谢所有参与进来提交 PR，解答疑问的人们! 🙏** -Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! +Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! ## 关于 Mermaid @@ -57,20 +57,20 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。

Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。
-你可以访问 [教程](./docs/ecosystem/tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 +你可以访问 [教程](https://mermaid.js.org/ecosystem/tutorials.html) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](https://mermaid.js.org/ecosystem/integrations-community.html) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 -如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/ecosystem/tutorials.md). +如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](https://mermaid.js.org/intro/getting-started.html), [用法](https://mermaid.js.org/config/usage.html) 和 [教程](https://mermaid.js.org/ecosystem/tutorials.html). ## 示例 -**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。** +**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid.js.org/intro/syntax-reference.html) 查看详情。** -### 流程图 [文档 - live editor] +### 流程图 [文档 - live editor] ``` flowchart LR @@ -88,12 +88,12 @@ C -->|One| D[Result 1] C -->|Two| E[Result 2] ``` -### 时序图 [文档 - live editor] +### 时序图 [文档 - live editor] ``` sequenceDiagram Alice->>John: Hello John, how are you? -loop Healthcheck +loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! @@ -105,7 +105,7 @@ Bob-->>John: Jolly good! ```mermaid sequenceDiagram Alice->>John: Hello John, how are you? -loop Healthcheck +loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! @@ -114,7 +114,7 @@ John->>Bob: How about you? Bob-->>John: Jolly good! ``` -### 甘特图 [文档 - live editor] +### 甘特图 [文档 - live editor] ``` gantt @@ -138,7 +138,7 @@ gantt Parallel 4 : des6, after des4, 1d ``` -### 类图 [文档 - live editor] +### 类图 [文档 - live editor] ``` classDiagram @@ -178,7 +178,7 @@ class Class10 { } ``` -### 状态图 [[docs - live editor] +### 状态图 [docs - live editor] ``` stateDiagram-v2 @@ -200,7 +200,7 @@ Moving --> Crash Crash --> [*] ``` -### 饼图 [文档 - live editor] +### 饼图 [文档 - live editor] ``` pie @@ -218,7 +218,7 @@ pie ### Git 图 [实验特性 - live editor] -### 用户体验旅程图 [文档 - live editor] +### 用户体验旅程图 [文档 - live editor] ``` journey @@ -244,7 +244,7 @@ pie Sit down: 3: Me ``` -### C4 图 [文档] +### C4 图 [文档] ``` C4Context @@ -338,7 +338,7 @@ npm publish Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。有很多不同的方式可以参与进来，而且我们还在寻找额外的帮助。如果你想知道如何开始贡献，请查看 [这个 issue](https://github.com/mermaid-js/mermaid/issues/866)。 -关于如何贡献的详细信息可以在 [贡献指南](CONTRIBUTING.md) 中找到。 +关于如何贡献的详细信息可以在 [贡献指南](https://mermaid.js.org/community/contributing.html) 中找到。 ## 安全 diff --git a/cSpell.json b/cSpell.json deleted file mode 100644 index 4b8772347..000000000 --- a/cSpell.json +++ /dev/null @@ -1,209 +0,0 @@ -{ - "version": "0.2", - "language": "en", - "words": [ - "acyclicer", - "adamiecki", - "alois", - "aloisklink", - "antiscript", - "antlr", - "appli", - "applitools", - "asciidoctor", - "ashish", - "ashishjain", - "astah", - "bbox", - "bilkent", - "bisheng", - "blrs", - "braintree", - "brkt", - "brolin", - "brotli", - "catmull", - "città", - "classdef", - "codedoc", - "codemia", - "colour", - "commitlint", - "cpettitt", - "customizability", - "cuzon", - "cytoscape", - "dagre", - "deepdwn", - "descr", - "docsify", - "docsy", - "doku", - "dompurify", - "dont", - "doublecircle", - "edgechromium", - "elems", - "elkjs", - "elle", - "faber", - "flatmap", - "foswiki", - "frontmatter", - "ftplugin", - "gantt", - "gitea", - "gitgraph", - "globby", - "graphlib", - "graphviz", - "grav", - "greywolf", - "gzipped", - "huynh", - "huynhicode", - "inkdrop", - "jaoude", - "jgreywolf", - "jison", - "jiti", - "kaufmann", - "khroma", - "klemm", - "klink", - "knsv", - "knut", - "knutsveidqvist", - "laganeckas", - "linetype", - "lintstagedrc", - "logmsg", - "lucida", - "markdownish", - "matthieu", - "matthieumorel", - "mdast", - "mdbook", - "mermaidjs", - "mermerd", - "mindaugas", - "mindmap", - "mindmaps", - "mitigations", - "mkdocs", - "mmorel", - "mult", - "neurodiverse", - "nextra", - "nikolay", - "nirname", - "npmjs", - "orlandoni", - "pathe", - "pbrolin", - "phpbb", - "pixelmatch", - "plantuml", - "playfair", - "pnpm", - "podlite", - "quence", - "radious", - "ranksep", - "rect", - "rects", - "reda", - "redmine", - "regexes", - "rehype", - "roledescription", - "rozhkov", - "sandboxed", - "sankey", - "setupgraphviewbox", - "shiki", - "sidharth", - "sidharthv", - "sphinxcontrib", - "ssim", - "startx", - "starty", - "statediagram", - "steph", - "stopx", - "stopy", - "stylis", - "subhash-halder", - "substate", - "sulais", - "sveidqvist", - "swimm", - "techn", - "teststr", - "textlength", - "treemap", - "ts-nocheck", - "tsdoc", - "tuleap", - "tylerlong", - "typora", - "ugge", - "unist", - "unocss", - "upvoting", - "valign", - "verdana", - "viewports", - "vinod", - "visio", - "vitepress", - "vueuse", - "xlink", - "xychart", - "yash", - "yokozuna", - "zenuml", - "zune" - ], - "patterns": [ - { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" }, - { - "name": "Markdown code blocks", - "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx", - "description": "Taken from the cSpell example at https://cspell.org/configuration/patterns/#verbose-regular-expressions" - }, - { - "name": "Inline code blocks", - "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": "\\", "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": "HTML Tags", - "pattern": "<[^>]*>", - "description": "Reference: https://stackoverflow.com/questions/11229831/regular-expression-to-remove-html-tags-from-a-string" - } - ], - "ignoreRegExpList": [ - "Markdown links", - "Markdown code blocks", - "Inline code blocks", - "Link contents", - "Snippet references", - "Snippet references 2", - "Multi-line code blocks", - "HTML Tags" - ], - "ignorePaths": [ - "packages/mermaid/src/docs/CHANGELOG.md", - "packages/mermaid/src/docs/.vitepress/redirect.ts", - "packages/mermaid/src/docs/.vitepress/contributor-names.json" - ] -} diff --git a/cspell.config.yaml b/cspell.config.yaml new file mode 100644 index 000000000..885a41afd --- /dev/null +++ b/cspell.config.yaml @@ -0,0 +1,45 @@ +# yaml-language-server: $schema=https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json + +$schema: https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json +version: '0.2' +language: en-US,en-GB + +import: + - ./.cspell/cspell.config.yaml + +ignoreRegExpList: + - character-set-cyrillic + - svg-block +ignorePaths: + - '*lock.{yaml,json}' + - dist + - CHANGELOG.md + - packages/mermaid/src/docs/.vitepress/redirect.ts + - packages/mermaid/src/docs/.vitepress/contributor-names.json + - backup + - '**/*.spec.{js,ts}' # checked by eslint + - 'tests/webpack/src/index.js' # checked by eslint + - 'cypress/**/*.js' # checked by eslint + - '*.csv' + - '*.patch' + - 'docs/**/*.html' + - 'cypress/platform/**' +dictionaries: + - misc-terms +overrides: + - filename: + - '**/*.{jison,ts,mts,cjs,mjs,js,json,yaml,yml,md,html}' + - 'run' + - Dockerfile + ignoreRegExpList: + - js-unicode-escape + dictionaries: + - code-terms + - 3rd-party-terms + - fonts + - html + - lorem-ipsum + - filename: '**/package.json' + ignoreRegExpList: + - json-property +# cspell:dictionaries code-terms diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js new file mode 100644 index 000000000..9d62c642d --- /dev/null +++ b/cypress/integration/rendering/block.spec.js @@ -0,0 +1,386 @@ +import { imgSnapshotTest } from '../../helpers/util'; +/* eslint-disable no-useless-escape */ +describe('Block diagram', () => { + it('BL1: should calculate the block widths', () => { + imgSnapshotTest( + `block-beta + columns 2 + block + id2["I am a wide one"] + id1 + end + id["Next row"] + ` + ); + }); + + it('BL2: should handle colums statement in sub-blocks', () => { + imgSnapshotTest( + `block-beta + id1["Hello"] + block + columns 3 + id2["to"] + id3["the"] + id4["World"] + id5["World"] + end + `, + {} + ); + }); + + it('BL3: should align block widths and handle colums statement in sub-blocks', () => { + imgSnapshotTest( + `block-beta + block + columns 1 + id1 + id2 + id2.1 + end + id3 + id4 + `, + {} + ); + }); + + it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => { + imgSnapshotTest( + `block-beta + columns 1 + block + columns 1 + block + columns 3 + id1 + id2 + id2.1(("XYZ")) + end + id48 + end + id3 + `, + {} + ); + }); + + it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => { + imgSnapshotTest( + `block-beta + columns 1 + block + id1 + id2 + block + columns 1 + id3("Wider then") + id5(("id5")) + end + end + id4 + `, + {} + ); + }); + + it('BL6: should handle block arrows and spece statements', () => { + imgSnapshotTest( + `block-beta + columns 3 + space:3 + ida idb idc + id1 id2 + blockArrowId<["Label"]>(right) + blockArrowId2<["Label"]>(left) + blockArrowId3<["Label"]>(up) + blockArrowId4<["Label"]>(down) + blockArrowId5<["Label"]>(x) + blockArrowId6<["Label"]>(y) + blockArrowId6<["Label"]>(x, down) + `, + {} + ); + }); + + it('BL7: should handle different types of edges', () => { + imgSnapshotTest( + `block-beta + columns 3 + A space:5 + A --o B + A --> C + A --x D + `, + {} + ); + }); + + it('BL8: should handle sub-blocks without columns statements', () => { + imgSnapshotTest( + `block-beta + columns 2 + C A B + block + D + E + end + `, + {} + ); + }); + + it('BL9: should handle edges from blocks in sub blocks to other blocks', () => { + imgSnapshotTest( + `block-beta + columns 3 + B space + block + D + end + D --> B + `, + {} + ); + }); + + it('BL10: should handle edges from composite blocks', () => { + imgSnapshotTest( + `block-beta + columns 3 + B space + block BL + D + end + BL --> B + `, + {} + ); + }); + + it('BL11: should handle edges to composite blocks', () => { + imgSnapshotTest( + `block-beta + columns 3 + B space + block BL + D + end + B --> BL + `, + {} + ); + }); + + it('BL12: edges should handle labels', () => { + imgSnapshotTest( + `block-beta + A + space + A -- "apa" --> E + `, + {} + ); + }); + + it('BL13: should handle block arrows in different directions', () => { + imgSnapshotTest( + `block-beta + columns 3 + space blockArrowId1<["down"]>(down) space + blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left) + space blockArrowId5<["up"]>(up) space + blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y) + `, + {} + ); + }); + + it('BL14: should style statements and class statements', () => { + imgSnapshotTest( + `block-beta + A + B + classDef blue fill:#66f,stroke:#333,stroke-width:2px; + class A blue + style B fill:#f9F,stroke:#333,stroke-width:4px + `, + {} + ); + }); + + it('BL15: width alignment - D and E should share available space', () => { + imgSnapshotTest( + `block-beta + block + D + E + end + db("This is the text in the box") + `, + {} + ); + }); + + it('BL16: width alignment - C should be as wide as the composite block', () => { + imgSnapshotTest( + `block-beta + block + A("This is the text") + B + end + C + `, + {} + ); + }); + + it('BL16: width alignment - blocks shold be equal in width', () => { + imgSnapshotTest( + `block-beta + A("This is the text") + B + C + `, + {} + ); + }); + + it('BL17: block types 1 - square, rounded and circle', () => { + imgSnapshotTest( + `block-beta + A["square"] + B("rounded") + C(("circle")) + `, + {} + ); + }); + + it('BL18: block types 2 - odd, diamond and hexagon', () => { + imgSnapshotTest( + `block-beta + A>"rect_left_inv_arrow"] + B{"diamond"} + C{{"hexagon"}} + `, + {} + ); + }); + + it('BL19: block types 3 - stadium', () => { + imgSnapshotTest( + `block-beta + A(["stadium"]) + `, + {} + ); + }); + + it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => { + imgSnapshotTest( + `block-beta + A[/"lean right"/] + B[\"lean left"\] + C[/"trapezoid"\] + D[\"trapezoid alt"/] + `, + {} + ); + }); + + it('BL21: block types 1 - square, rounded and circle', () => { + imgSnapshotTest( + `block-beta + A["square"] + B("rounded") + C(("circle")) + `, + {} + ); + }); + + it('BL22: sizing - it should be possible to make a block wider', () => { + imgSnapshotTest( + `block-beta + A("rounded"):2 + B:2 + C + `, + {} + ); + }); + + it('BL23: sizing - it should be possible to make a composite block wider', () => { + imgSnapshotTest( + `block-beta + block:2 + A + end + B + `, + {} + ); + }); + + it('BL24: block in the middle with space on each side', () => { + imgSnapshotTest( + `block-beta + columns 3 + space + middle["In the middle"] + space + `, + {} + ); + }); + it('BL25: space and an edge', () => { + imgSnapshotTest( + `block-beta + columns 5 + A space B + A --x B + `, + {} + ); + }); + it('BL26: block sizes for regular blocks', () => { + imgSnapshotTest( + `block-beta + columns 3 + a["A wide one"] b:2 c:2 d + `, + {} + ); + }); + it('BL27: composite block with a set width - f should use the available space', () => { + imgSnapshotTest( + `block-beta + columns 3 + a:3 + block:e:3 + f + end + g + `, + {} + ); + }); + it('BL23: composite block with a set width - f and g should split the available space', () => { + imgSnapshotTest( + `block-beta + columns 3 + a:3 + block:e:3 + f + g + end + h + i + j + `, + {} + ); + }); +}); diff --git a/cypress/integration/rendering/katex.spec.js b/cypress/integration/rendering/katex.spec.js new file mode 100644 index 000000000..fb1d13392 --- /dev/null +++ b/cypress/integration/rendering/katex.spec.js @@ -0,0 +1,36 @@ +import { imgSnapshotTest } from '../../helpers/util'; + +describe('Katex', () => { + it('1: should render a complex Katex flowchart no htmlLabels', () => { + imgSnapshotTest( + `graph LR + A["$$f(\\relax{x}) = \\int_{-\\infty}^\\infty \\hat{f}(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi$$"] -->|"$$\\Bigg(\\bigg(\\Big(\\big((\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a})\\big)\\Big)\\bigg)\\Bigg)$$"| B("$$1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\cdots}}}}$$") + A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\phase{-78^\\circ}$$") + B --> D("$$x = \\begin{cases} a &\\text{if } b \\\\ c &\\text{if } d \\end{cases}$$") + C --> E("$$x(t)=c_1\\begin{bmatrix}-\\cos{t}+\\sin{t}\\\\ 2\\cos{t} \\end{bmatrix}e^{2t}$$")`, + { fontFamily: 'courier' } + ); + }); + it('2: should render a Katex flowchart containing the Greek alphabet', () => { + imgSnapshotTest( + `graph LR + A["$$\\alpha\\beta\\gamma\\delta\\epsilon\\zeta\\eta\\theta\\iota\\kappa\\lambda\\mu\\nu\\xi\\omicron\\pi\\rho\\sigma\\tau\\upsilon\\phi\\chi\\psi\\omega$$"] --> B["$$\\Alpha\\Beta\\Gamma\\Delta\\Epsilon\\Zeta\\Eta\\Theta\\Iota\\Kappa\\Lambda\\Mu\\Nu\\Xi\\Omicron\\Pi\\Rho\\Sigma\\Tau\\Upsilon\\Phi\\Chi\\Psi\\Omega$$"]`, + { fontFamily: 'courier' } + ); + }); + it('3: should render a Katex flowchart containing set theory symbols', () => { + imgSnapshotTest( + `graph LR + A["$$\\forall\\complement\\therefore\\emptyset\\exists\\subset\\because\\empty\\exist\\supset\\mapsto\\varnothing\\nexists\\mid\\to\\implies\\in\\land\\gets\\impliedby\\isin\\lor\\leftrightarrow\\iff\\notin\\ni\\notni\\lnot$$"] --> B["$$\\nabla\\Im\\Reals\\jmath\\partial\\image\\wp\\aleph\\Game\\weierp\\alef\\Finv\\N\\Z\\alefsym\\cnums\\natnums\\beth\\Complex\\R\\gimel\\ell\\Re\\daleth\\hbar\\real\\eth\\hslash\\reals$$"]`, + { fontFamily: 'courier' } + ); + }); + // TODO: changes made to develop between Feb 13 - Feb 23 cause this test to no longer function + // it.skip('4: should render an error box originating from Katex', () => { + // imgSnapshotTest( + // `graph LR + // A["$$\\shouldBeError$$"]`, + // { fontFamily: 'courier' } + // ); + // }); +}); diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 10432f057..306b6c79f 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -375,6 +375,26 @@ context('Sequence diagram', () => { {} ); }); + it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => { + imgSnapshotTest( + ` + sequenceDiagram + actor Bob + Alice->>Bob: Hi Bob + Bob->>Alice: Hi Alice + `, + {} + ); + cy.get('.actor').should('have.class', 'actor-top'); + cy.get('.actor-man').should('have.class', 'actor-top'); + cy.get('.actor.actor-top').should('not.have.class', 'actor-bottom'); + cy.get('.actor-man.actor-top').should('not.have.class', 'actor-bottom'); + + cy.get('.actor').should('have.class', 'actor-bottom'); + cy.get('.actor-man').should('have.class', 'actor-bottom'); + cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top'); + cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top'); + }); it('should render long notes left of actor', () => { imgSnapshotTest( ` diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 020ea8b48..f77f6b0e7 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -17,24 +17,30 @@