diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts index dd66d984c5..6fd8ca3f54 100644 --- a/.build/jsonSchema.ts +++ b/.build/jsonSchema.ts @@ -1,7 +1,6 @@ import { load, JSON_SCHEMA } from 'js-yaml'; import assert from 'node:assert'; import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; - import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js'; /** @@ -24,6 +23,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'gitGraph', 'c4', 'sankey', + 'block', 'packet', ] as const; diff --git a/.build/langium-cli.d.ts b/.build/langium-cli.d.ts deleted file mode 100644 index a1cfe25f89..0000000000 --- a/.build/langium-cli.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare module 'langium-cli' { - export interface GenerateOptions { - file?: string; - mode?: 'development' | 'production'; - watch?: boolean; - } - - export function generate(options: GenerateOptions): Promise; -} diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt new file mode 100644 index 0000000000..fa063616a7 --- /dev/null +++ b/.cspell/code-terms.txt @@ -0,0 +1,140 @@ +# 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 +iife +interp +introdcued +INVTRAPEND +INVTRAPSTART +JDBC +jison +Kaufmann +keyify +LABELPOS +LABELTYPE +lcov +LEFTOF +Lexa +linebreak +LINETYPE +LINKSTYLE +LLABEL +loglevel +LOGMSG +lookaheads +mdast +metafile +minlen +Mstartx +MULT +NODIR +NSTR +outdir +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 0000000000..bd3ad9da24 --- /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 0000000000..33d6901936 --- /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 0000000000..9d29261868 --- /dev/null +++ b/.cspell/libraries.txt @@ -0,0 +1,71 @@ +# Add third party library terms below +acyclicer +Antlr +Appli +applitools +Asciidoctor +Astah +automerge +bilkent +bisheng +Blazor +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 +langium +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 0000000000..3fa5eff269 --- /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 0000000000..467e48891e --- /dev/null +++ b/.cspell/misc-terms.txt @@ -0,0 +1 @@ +newbranch diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 49e1aaaa66..ceff724bb4 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 fa15f39e1c..6be6f3b5d8 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 4af304a990..7c1a840f8a 100644 --- a/.github/lychee.toml +++ b/.github/lychee.toml @@ -35,7 +35,13 @@ exclude = [ 'packages/mermaid/src/docs/config/setup/*', # Ignore Discord invite -"https://discord.gg" +"https://discord.gg", + +# BundlePhobia has frequent downtime +"https://bundlephobia.com", + +# Chrome webstore redirect issue +"https://chromewebstore.google.com" ] # Exclude all private IPs from checking. diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index f20204a714..cfd22a2935 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 acfb1887e9..87607bc2ff 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 605dea9ab3..e0ab766079 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -15,20 +15,17 @@ permissions: jobs: build-mermaid: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [18.x] steps: - uses: actions/checkout@v4 - 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: cache: pnpm - node-version: ${{ matrix.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 fd32e59adf..1238fe3713 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 e9a4966b40..fe590dd10c 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -24,13 +24,16 @@ env: 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 @@ -72,11 +75,13 @@ 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 matrix: - node-version: [18.x] containers: [1, 2, 3, 4] steps: - uses: actions/checkout@v4 @@ -84,10 +89,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' # 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 3d4956945e..59d25b7c54 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 f0c5560a1e..8f5995d717 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -16,20 +16,17 @@ permissions: jobs: lint: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [18.x] steps: - uses: actions/checkout@v4 - 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: cache: pnpm - node-version: ${{ matrix.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 05cd68aff1..6efd90c7f7 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 c6503847d9..c763430b04 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 69ef749402..dce461cf57 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 a18b31c9cd..7160ecc5fe 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -8,20 +8,17 @@ permissions: jobs: unit-test: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [18.x] steps: - uses: actions/checkout@v4 - 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: cache: pnpm - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' - name: Install Packages run: | diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 231c91f8f4..86af4f5133 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 0000000000..ee09fac75c --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +v20.11.1 diff --git a/.npmrc b/.npmrc index e72930ead1..91750f5578 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 a0cd771e33..7da0646e32 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,7 @@ dist cypress/platform/xss3.html .cache +.pnpm-store coverage # Autogenerated by PNPM pnpm-lock.yaml diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 9633bed665..4923342e4a 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 a62800109c..1cc9ef0306 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,2 +1,2 @@ -FROM node:18.19.0-alpine3.18 AS base +FROM node:20.11.1-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 58287c634d..d368a43499 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 c468b2d9fa..942f54bff9 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 5566b673fe..0000000000 --- a/cSpell.json +++ /dev/null @@ -1,213 +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", - "iife", - "inkdrop", - "jaoude", - "jgreywolf", - "jison", - "jiti", - "kaufmann", - "khroma", - "klemm", - "klink", - "knsv", - "knut", - "knutsveidqvist", - "laganeckas", - "langium", - "linetype", - "lintstagedrc", - "logmsg", - "lucida", - "markdownish", - "matthieu", - "matthieumorel", - "mdast", - "mdbook", - "mermaidjs", - "mermerd", - "metafile", - "mindaugas", - "mindmap", - "mindmaps", - "mitigations", - "mkdocs", - "mmorel", - "mult", - "neurodiverse", - "nextra", - "nikolay", - "nirname", - "npmjs", - "orlandoni", - "outdir", - "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 0000000000..885a41afd8 --- /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 0000000000..9d62c642dc --- /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/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 73ff4ee005..7566110082 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -92,6 +92,31 @@ describe('Gantt diagram', () => { {} ); }); + it('should handle multiple dependencies syntax with after and until', () => { + imgSnapshotTest( + ` + gantt + dateFormat YYYY-MM-DD + axisFormat %d/%m + title Adding GANTT diagram to mermaid + excludes weekdays 2014-01-10 + todayMarker off + + section team's critical event + deadline A :milestone, crit, deadlineA, 2024-02-01, 0 + deadline B :milestone, crit, deadlineB, 2024-02-15, 0 + boss on leave :bossaway, 2024-01-28, 2024-02-11 + + section new intern + onboarding :onboarding, 2024-01-02, 1w + literature review :litreview, 2024-01-02, 10d + project A :projectA, after onboarding litreview, until deadlineA bossaway + chilling :chilling, after projectA, until deadlineA + project B :projectB, after deadlineA, until deadlineB + `, + {} + ); + }); it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => { imgSnapshotTest( ` @@ -583,4 +608,106 @@ describe('Gantt diagram', () => { {} ); }); + + it("should render when there's a semicolon in the title", () => { + imgSnapshotTest( + ` + gantt + title ;Gantt With a Semicolon in the Title + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + `, + {} + ); + }); + + it("should render when there's a semicolon in a section is true", () => { + imgSnapshotTest( + ` + gantt + title Gantt Digram + dateFormat YYYY-MM-DD + section ;Section With a Semicolon + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + `, + {} + ); + }); + + it("should render when there's a semicolon in the task data", () => { + imgSnapshotTest( + ` + gantt + title Gantt Digram + dateFormat YYYY-MM-DD + section Section + ;A task with a semiclon :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + `, + {} + ); + }); + + it("should render when there's a hashtag in the title", () => { + imgSnapshotTest( + ` + gantt + title #Gantt With a Hashtag in the Title + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + `, + {} + ); + }); + + it("should render when there's a hashtag in a section is true", () => { + imgSnapshotTest( + ` + gantt + title Gantt Digram + dateFormat YYYY-MM-DD + section #Section With a Hashtag + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + `, + {} + ); + }); + + it("should render when there's a hashtag in the task data", () => { + imgSnapshotTest( + ` + gantt + title Gantt Digram + dateFormat YYYY-MM-DD + section Section + #A task with a hashtag :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + `, + {} + ); + }); }); diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 19ddde31d4..2184fecf88 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -943,4 +943,74 @@ gitGraph TB: { gitGraph: { parallelCommits: true } } ); }); + it('46: should render GitGraph with merge back and merge forward', () => { + imgSnapshotTest( + `gitGraph LR: + commit id:"1-abcdefg" + + branch branch-A + branch branch-B + commit id:"2-abcdefg" + + checkout branch-A + merge branch-B + + checkout branch-B + merge branch-A + `, + { gitGraph: { parallelCommits: true } } + ); + }); + it('47: should render GitGraph with merge back and merge forward | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"1-abcdefg" + + branch branch-A + branch branch-B + commit id:"2-abcdefg" + + checkout branch-A + merge branch-B + + checkout branch-B + merge branch-A + `, + { gitGraph: { parallelCommits: true } } + ); + }); + it('48: should render GitGraph with merge on a new branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph LR: + commit id:"1-abcdefg" + + branch branch-B order: 2 + commit id:"2-abcdefg" + + branch branch-A + merge main + + checkout branch-B + merge branch-A + `, + { gitGraph: { parallelCommits: true } } + ); + }); + it('49: should render GitGraph with merge on a new branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"1-abcdefg" + + branch branch-B order: 2 + commit id:"2-abcdefg" + + branch branch-A + merge main + + checkout branch-B + merge branch-A + `, + { gitGraph: { parallelCommits: true } } + ); + }); }); diff --git a/cypress/integration/rendering/katex.spec.js b/cypress/integration/rendering/katex.spec.js new file mode 100644 index 0000000000..fb1d13392a --- /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 27e03da9c0..306b6c79f0 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( ` @@ -792,6 +812,34 @@ context('Sequence diagram', () => { }); }); context('links', () => { + it('should support actor links', () => { + renderGraph( + ` + sequenceDiagram + link Alice: Dashboard @ https://dashboard.contoso.com/alice + link Alice: Wiki @ https://wiki.contoso.com/alice + link John: Dashboard @ https://dashboard.contoso.com/john + link John: Wiki @ https://wiki.contoso.com/john + Alice->>John: Hello John
+ John-->>Alice: Great

day! + `, + { securityLevel: 'loose' } + ); + cy.get('#actor0_popup').should((popupMenu) => { + const style = popupMenu.attr('style'); + expect(style).to.undefined; + }); + cy.get('#root-0').click(); + cy.get('#actor0_popup').should((popupMenu) => { + const style = popupMenu.attr('style'); + expect(style).to.match(/^display: block;$/); + }); + cy.get('#root-0').click(); + cy.get('#actor0_popup').should((popupMenu) => { + const style = popupMenu.attr('style'); + expect(style).to.match(/^display: none;$/); + }); + }); it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => { //Be aware that the syntax for "properties" is likely to be changed. imgSnapshotTest( diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 020ea8b482..f77f6b0e7e 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -17,24 +17,30 @@