diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 0bbd8db66..15e184327 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,4 +1,22 @@ -'Type: Bug / Error': ['bug/*', fix/*] -'Type: Enhancement': ['feature/*', 'feat/*'] -'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*'] -'Area: Documentation': ['docs/*'] +# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json +autolabeler: + - label: 'Type: Bug / Error' + branch: + - '/bug\/.+/' + - '/fix\/.+/' + - label: 'Type: Enhancement' + branch: + - '/feature\/.+/' + - '/feat\/.+/' + - label: 'Type: Other' + branch: + - '/other\/.+/' + - '/chore\/.+/' + - '/test\/.+/' + - '/refactor\/.+/' + - label: 'Area: Documentation' + branch: + - '/docs\/.+/' + +template: | + This field is unused, as we only use this config file for labeling PRs. diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml index e650f8dd1..83138c3d4 100644 --- a/.github/release-drafter.yml +++ b/.github/release-drafter.yml @@ -25,8 +25,6 @@ categories: change-template: '- $TITLE (#$NUMBER) @$AUTHOR' sort-by: title sort-direction: ascending -branches: - - develop exclude-labels: - 'Skip changelog' no-changes-template: 'This release contains minor changes and bugfixes.' diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index 152b177ae..acfb1887e 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -16,12 +16,12 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: 18 @@ -29,7 +29,7 @@ jobs: - name: Install Packages run: pnpm install --frozen-lockfile - - name: Verify release verion + - name: Verify release version if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }} run: pnpm --filter mermaid run docs:verify-version diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index eeb557ebb..605dea9ab 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -19,13 +19,13 @@ jobs: matrix: node-version: [18.x] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml index 5a8ca319b..ad6df66b5 100644 --- a/.github/workflows/check-readme-in-sync.yml +++ b/.github/workflows/check-readme-in-sync.yml @@ -18,7 +18,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Check for difference in README.md and docs/README.md run: | diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 9f9f316c4..012fbf19d 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -15,7 +15,7 @@ jobs: name: check tests if: github.repository_owner == 'mermaid-js' steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: testomatio/check-tests@stable diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 26cb2db26..f8c50f47f 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -29,7 +29,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml index 34b14c395..4e7519779 100644 --- a/.github/workflows/dependency-review.yml +++ b/.github/workflows/dependency-review.yml @@ -1,6 +1,6 @@ # Dependency Review Action # -# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging. +# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging. # # Source repository: https://github.com/actions/dependency-review-action # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement @@ -15,6 +15,6 @@ jobs: runs-on: ubuntu-latest steps: - name: 'Checkout Repository' - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: 'Dependency Review' uses: actions/dependency-review-action@v3 diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml index 5b1943142..543fb5dbb 100644 --- a/.github/workflows/e2e-applitools.yml +++ b/.github/workflows/e2e-applitools.yml @@ -30,13 +30,13 @@ jobs: run: | echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run." - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 3e6966677..71806a9c4 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -17,13 +17,13 @@ jobs: node-version: [18.x] containers: [1, 2, 3, 4] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml index 70580bfff..3d4956945 100644 --- a/.github/workflows/link-checker.yml +++ b/.github/workflows/link-checker.yml @@ -26,7 +26,7 @@ jobs: # lychee only uses the GITHUB_TOKEN to avoid rate-limiting contents: read steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Restore lychee cache uses: actions/cache@v3 @@ -36,7 +36,7 @@ jobs: restore-keys: cache-lychee- - name: Link Checker - uses: lycheeverse/lychee-action@v1.8.0 + uses: lycheeverse/lychee-action@v1.9.1 with: args: >- --config .github/lychee.toml diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index f59c8af31..f0c5560a1 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -20,13 +20,13 @@ jobs: matrix: node-version: [18.x] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml deleted file mode 100644 index ff5d8d0a1..000000000 --- a/.github/workflows/pr-labeler-config-validator.yml +++ /dev/null @@ -1,23 +0,0 @@ -name: Validate PR Labeler Configuration -on: - push: - paths: - - .github/workflows/pr-labeler-config-validator.yml - - .github/workflows/pr-labeler.yml - - .github/pr-labeler.yml - pull_request: - paths: - - .github/workflows/pr-labeler-config-validator.yml - - .github/workflows/pr-labeler.yml - - .github/pr-labeler.yml - -jobs: - pr-labeler: - runs-on: ubuntu-latest - steps: - - name: Checkout Repository - uses: actions/checkout@v3 - - name: Validate Configuration - uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3 - with: - configuration-path: .github/pr-labeler.yml diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml index 0a53c6e42..b2fc1cc26 100644 --- a/.github/workflows/pr-labeler.yml +++ b/.github/workflows/pr-labeler.yml @@ -1,13 +1,31 @@ name: Apply labels to PR on: pull_request_target: - types: [opened] + # required for pr-labeler to support PRs from forks + # ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ ======================= + # Be very careful what you put in this GitHub Action workflow file to avoid + # malicious PRs from getting access to the Mermaid-js repo. + # + # Please read the following first before reviewing/merging: + # - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target + # - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ + types: [opened, reopened, synchronize] + +permissions: + contents: read jobs: pr-labeler: runs-on: ubuntu-latest + permissions: + contents: read # read permission is required to read config file + pull-requests: write # write permission is required to label PRs steps: - name: Label PR - uses: TimonVS/pr-labeler-action@v4 + uses: release-drafter/release-drafter@v5 + with: + config-name: pr-labeler.yml + disable-autolabeler: false + disable-releaser: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml index f63e58750..05cd68aff 100644 --- a/.github/workflows/publish-docs.yml +++ b/.github/workflows/publish-docs.yml @@ -23,12 +23,12 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: 18 diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml index a37b7bcf2..8ad1b13ec 100644 --- a/.github/workflows/release-draft.yml +++ b/.github/workflows/release-draft.yml @@ -5,11 +5,19 @@ on: branches: - develop +permissions: + contents: read + jobs: draft-release: runs-on: ubuntu-latest + permissions: + contents: write # write permission is required to create a github release + pull-requests: read # required to read PR titles/labels steps: - name: Draft Release - uses: toolmantim/release-drafter@v5 + uses: release-drafter/release-drafter@v5 + with: + disable-autolabeler: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index 221e3836e..c6503847d 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -9,14 +9,14 @@ jobs: publish-preview: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: pnpm/action-setup@v2 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: 18.x diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml index eb28fe9c8..69ef74940 100644 --- a/.github/workflows/release-publish.yml +++ b/.github/workflows/release-publish.yml @@ -8,14 +8,14 @@ jobs: publish: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: fregante/setup-git-user@v2 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js v18 - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: 18.x diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 7c32795e8..a18b31c9c 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -12,13 +12,13 @@ jobs: matrix: node-version: [18.x] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: pnpm node-version: ${{ matrix.node-version }} diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml index 813a400b3..0a83df795 100644 --- a/.github/workflows/update-browserlist.yml +++ b/.github/workflows/update-browserlist.yml @@ -8,7 +8,7 @@ jobs: update-browser-list: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - run: npx browserslist@latest --update-db - name: Commit changes uses: EndBug/add-and-commit@v9 diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 3ae66bba2..231c91f8f 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': ['ts-node-esm scripts/fixCSpell.ts'], + 'cSpell.json': ['tsx scripts/fixCSpell.ts'], '**/*.jison': ['pnpm -w run lint:jison'], }; diff --git a/.prettierignore b/.prettierignore index 8a9086315..fb9b694b7 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,3 +10,6 @@ stats .nyc_output # Autogenerated by `pnpm run --filter mermaid types:build-config` 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 diff --git a/.vite/build.ts b/.vite/build.ts index b89df9e31..bacc6bc6c 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -117,6 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) output, }, }, + define: { + 'import.meta.vitest': 'undefined', + }, resolve: { extensions: [], }, diff --git a/.vscode/launch.json b/.vscode/launch.json index dc5ec94a1..7d17e55d2 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -18,7 +18,8 @@ "type": "node", "request": "launch", "args": ["scripts/docs.cli.mts"], - "runtimeArgs": ["--loader", "ts-node/esm"], + // we'll need to change this to --import in Node.JS v20.6.0 and up + "runtimeArgs": ["--loader", "tsx/esm"], "cwd": "${workspaceRoot}/packages/mermaid", "skipFiles": ["/**", "**/node_modules/**"], "smartStep": true, diff --git a/README.md b/README.md index 04747385a..cf21fdb8e 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,22 @@ 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! +## Table of content + +
+Expand contents + +- [About](#about) +- [Examples](#examples) +- [Release](#release) +- [Related projects](#related-projects) +- [Contributors](#contributors) +- [Security and safe diagrams](#security-and-safe-diagrams) +- [Reporting vulnerabilities](#reporting-vulnerabilities) +- [Appreciation](#appreciation) + +
+ ## About @@ -58,7 +74,7 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).
-[Tutorials](./docs/config/Tutorials.md) has video tutorials. +For video tutorials, visit our [Tutorials](./docs/config/Tutorials.md) page. Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.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/ecosystem/integrations-community.md). diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 37e9cada0..20a1aea0a 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -571,4 +571,14 @@ class C13["With Città foreign language"] { logLevel: 1, flowchart: { htmlLabels: false } } ); }); + it('should render a simple class diagram with style definition', () => { + imgSnapshotTest( + ` + classDiagram-v2 + class Class10 + style Class10 fill:#f9f,stroke:#333,stroke-width:4px + `, + { logLevel: 1, flowchart: { htmlLabels: false } } + ); + }); }); diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index a23430b08..cab3649df 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -501,4 +501,16 @@ describe('Class diagram', () => { B : -methods() `); }); + + it('should handle notes with anchor tag having target attribute', () => { + renderGraph( + `classDiagram + class test { } + note for test "note about mermaid"` + ); + + cy.get('svg').then((svg) => { + cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener'); + }); + }); }); diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index aac4a31b1..e23820ffa 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -729,6 +729,18 @@ A ~~~ B {} ); }); + + it('5064: Should render when subgraph child has links to outside node and subgraph', () => { + imgSnapshotTest( + `flowchart TB + Out --> In + subgraph Sub + In + end + Sub --> In` + ); + }); + describe('Markdown strings flowchart (#4220)', () => { describe('html labels', () => { it('With styling and classes', () => { @@ -874,4 +886,93 @@ end }); }); }); + describe('Subgraph title margins', () => { + it('Should render subgraphs with title margins set (LR)', () => { + imgSnapshotTest( + `flowchart LR + + subgraph TOP + direction TB + subgraph B1 + direction RL + i1 -->f1 + end + subgraph B2 + direction BT + i2 -->f2 + end + end + A --> TOP --> B + B1 --> B2 + `, + { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } } + ); + }); + it('Should render subgraphs with title margins set (TD)', () => { + imgSnapshotTest( + `flowchart TD + + subgraph TOP + direction LR + subgraph B1 + direction RL + i1 -->f1 + end + subgraph B2 + direction BT + i2 -->f2 + end + end + A --> TOP --> B + B1 --> B2 + `, + { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } } + ); + }); + it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => { + imgSnapshotTest( + `flowchart LR + + subgraph TOP + direction TB + subgraph B1 + direction RL + i1 -->f1 + end + subgraph B2 + direction BT + i2 -->f2 + end + end + A --> TOP --> B + B1 --> B2 + `, + { + htmlLabels: false, + flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } }, + } + ); + }); + it('Should render subgraphs with title margins and edge labels', () => { + imgSnapshotTest( + `flowchart LR + + subgraph TOP + direction TB + subgraph B1 + direction RL + i1 --lb1-->f1 + end + subgraph B2 + direction BT + i2 --lb2-->f2 + end + end + A --lb3--> TOP --lb4--> B + B1 --lb5--> B2 + `, + { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } } + ); + }); + }); }); diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 9f040a36f..d3e4dd9dd 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -701,4 +701,129 @@ gitGraph TB: {} ); }); + it('34: should render a simple gitgraph with two branches from same commit', () => { + imgSnapshotTest( + `gitGraph + commit id:"1-abcdefg" + commit id:"2-abcdefg" + branch feature-001 + commit id:"3-abcdefg" + commit id:"4-abcdefg" + checkout main + branch feature-002 + commit id:"5-abcdefg" + checkout feature-001 + merge feature-002 + `, + {} + ); + }); + it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"1-abcdefg" + commit id:"2-abcdefg" + branch feature-001 + commit id:"3-abcdefg" + commit id:"4-abcdefg" + checkout main + branch feature-002 + commit id:"5-abcdefg" + checkout feature-001 + merge feature-002 + `, + {} + ); + }); + it('36: should render GitGraph with branch that is not used immediately', () => { + imgSnapshotTest( + `gitGraph LR: + commit id:"1-abcdefg" + branch x + checkout main + commit id:"2-abcdefg" + checkout x + commit id:"3-abcdefg" + checkout main + merge x + `, + {} + ); + }); + it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"1-abcdefg" + branch x + checkout main + commit id:"2-abcdefg" + checkout x + commit id:"3-abcdefg" + checkout main + merge x + `, + {} + ); + }); + it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => { + imgSnapshotTest( + `gitGraph LR: + commit id:"1-abcdefg" + branch x + checkout main + commit id:"2-abcdefg" + checkout x + commit id:"3-abcdefg" + checkout main + merge x + checkout x + branch y + checkout x + commit id:"4-abcdefg" + checkout y + commit id:"5-abcdefg" + checkout x + merge y + `, + {} + ); + }); + it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"1-abcdefg" + branch x + checkout main + commit id:"2-abcdefg" + checkout x + commit id:"3-abcdefg" + checkout main + merge x + checkout x + branch y + checkout x + commit id:"4-abcdefg" + checkout y + commit id:"5-abcdefg" + checkout x + merge y + `, + {} + ); + }); + it('40: should render a simple gitgraph with cherry pick merge commit', () => { + imgSnapshotTest( + `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + cherry-pick id: "M" parent:"B"` + ); + }); }); diff --git a/cypress/integration/rendering/pie.spec.ts b/cypress/integration/rendering/pie.spec.ts index 269efafb2..4a1d774c0 100644 --- a/cypress/integration/rendering/pie.spec.ts +++ b/cypress/integration/rendering/pie.spec.ts @@ -44,7 +44,7 @@ describe('pie chart', () => { const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); - expect(maxWidthValue).to.eq(984); + expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI }); }); @@ -59,7 +59,7 @@ describe('pie chart', () => { ); cy.get('svg').should((svg) => { const width = parseFloat(svg.attr('width')); - expect(width).to.eq(984); + expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI expect(svg).to.not.have.attr('style'); }); }); diff --git a/demos/git.html b/demos/git.html index f24217711..92e0e6863 100644 --- a/demos/git.html +++ b/demos/git.html @@ -14,30 +14,364 @@ -

Git diagram demo

+

Git graph demo

+

Simple "branch and merge" graph

     ---
-    title: Simple Git diagram
+    title: Simple "branch and merge" (left-to-right)
     ---
-    gitGraph:
-    options
-    {
-    "nodeSpacing": 50,
-    "nodeRadius": 5
-    }
-    end
-    branch master
+    gitGraph LR:
     commit
     branch newbranch
     checkout newbranch
     commit
+    checkout main
+    merge newbranch
+
+ 
+    ---
+    title: Simple "branch and merge" (top-to-bottom)
+    ---
+    gitGraph TB:
     commit
-    checkout master
+    branch newbranch
+    checkout newbranch
     commit
+    checkout main
+    merge newbranch
+
+

Continuous development graph

+ 
+    ---
+    title: Continuous development (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+
+ 
+    ---
+    title: Continuous development (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+
+

Merge feature to advanced main graph

+ 
+    ---
+    title: Merge feature to advanced main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
     commit
     merge newbranch
- + 
+    ---
+    title: Merge feature to advanced main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
+    commit
+    merge newbranch
+
+

Two-way merges

+ 
+    ---
+    title: Two-way merges (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+
+ 
+    ---
+    title: Two-way merges (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+
+

Cherry-pick from branch graph

+ 
+    ---
+    title: Cherry-pick from branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+
+ 
+    ---
+    title: Cherry-pick from branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+
+

Cherry-pick from main graph

+ 
+    ---
+    title: Cherry-pick from main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+
+ 
+    ---
+    title: Cherry-pick from main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+
+

Cherry-pick then merge graph

+ 
+    ---
+    title: Cherry-pick then merge (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+
+ 
+    ---
+    title: Cherry-pick then merge (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+
+

Merge from main onto undeveloped branch graph

+ 
+    ---
+    title: Merge from main onto undeveloped branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+
+ 
+    ---
+    title: Merge from main onto undeveloped branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+
+

Merge from main onto developed branch graph

+ 
+    ---
+    title: Merge from main onto developed branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+
+ 
+    ---
+    title: Merge from main onto developed branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+
+

Two branches from same commit graph

+ 
+    ---
+    title: Two branches from same commit (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+
+ 
+    ---
+    title: Two branches from same commit (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+
+

Three branches and a cherry-pick from each graph

+ 
+    ---
+    title: Three branches and a cherry-pick from each (left-to-right)
+    ---
+    gitGraph LR:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+
+ 
+    ---
+    title: Three branches and a cherry-pick from each (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+
``` -**Doing so commands the mermaid parser to look for the `
` or `
` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `
` or `
` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found in** [Other examples](../syntax/examples.md)
 
diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index 98ca64421..79e32f2f0 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,18 +6,10 @@
 
 # Announcements
 
-

+Check out our latest blog posts below. See more blog posts [here](blog.md).
 
-Mermaid Chart - A smarter way to create diagrams | Product Hunt
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
 
-## Calling all fans of Mermaid and Mermaid Chart! 🎉
+14 November 2023 · 5 mins
 
-We’ve officially made our Product Hunt debut, and would love any and all support from the community!
-
-[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
-
-Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
-
-We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
-
-Your support means the world to us. Thank you for being part of the diagramming movement.
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
diff --git a/docs/news/blog.md b/docs/news/blog.md
index cc34b9f5c..da20ed1bb 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,24 @@
 
 # Blog
 
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+
+14 November 2023 · 5 mins
+
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
+
+## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
+
+12 October 2023 · 4 mins
+
+Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
+
 ## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
 
 22 September 2023 · 7 mins
diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md
index 1676708f5..e6b7736c3 100644
--- a/docs/syntax/c4.md
+++ b/docs/syntax/c4.md
@@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     title Component diagram for Internet Banking System - API Application
 
     Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
     ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
     System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 
@@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     title Component diagram for Internet Banking System - API Application
 
     Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
     ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
     System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index a6109149a..b20ccccb3 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -240,9 +240,9 @@ class BankAccount{
 
 #### Generic Types
 
-Members can be defined using generic types, such as `List`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List>` are supported.
+Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List>` are supported, though generics that include a comma are currently not supported. (such as `List>`)
 
-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
+> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
 
 ```mermaid-example
 classDiagram
@@ -425,8 +425,6 @@ And `Link` can be one of:
 
 A namespace groups classes.
 
-Code:
-
 ```mermaid-example
 classDiagram
 namespace BaseShapes {
@@ -768,9 +766,30 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node
+### Styling a node (v\+)
 
-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
+It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
+
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+```mermaid
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+#### Classes
+
+More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
+should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
 
 ```html