diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 0bbd8db66a..15e1843276 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 e650f8dd11..83138c3d46 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 6fc629c7ae..acfb1887e9 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 diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index eeb557ebb9..605dea9ab3 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 5a8ca319b2..ad6df66b50 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 9f9f316c40..012fbf19d5 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 26cb2db268..f8c50f47fa 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 34b14c395b..4e75197790 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 5b19431421..fd32e59adf 100644 --- a/.github/workflows/e2e-applitools.yml +++ b/.github/workflows/e2e-applitools.yml @@ -28,15 +28,15 @@ jobs: - if: ${{ ! env.USE_APPLI }} name: Warn if not using Applitools run: | - echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run." + echo "::error,title=Not using Applitools::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 3e6966677b..71806a9c46 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 70580bfff1..3d4956945e 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 f59c8af31d..f0c5560a1e 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 ff5d8d0a1f..0000000000 --- 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 0a53c6e424..b2fc1cc26e 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 f63e587502..05cd68aff1 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 a37b7bcf2a..8ad1b13ecd 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 221e3836ee..c6503847d9 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 eb28fe9c8d..69ef749402 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 7c32795e8d..a18b31c9cd 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 813a400b36..0a83df795d 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/.npmrc b/.npmrc index 4c2f52b3be..e72930ead1 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,3 @@ +registry=https://registry.npmjs.org auto-install-peers=true strict-peer-dependencies=false diff --git a/.prettierignore b/.prettierignore index 8a9086315e..fb9b694b75 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 b89df9e310..bacc6bc6c6 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/README.md b/README.md index ab2aeb2e73..cf21fdb8e6 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 diff --git a/cSpell.json b/cSpell.json index 76f395915f..3ea9594f75 100644 --- a/cSpell.json +++ b/cSpell.json @@ -26,6 +26,7 @@ "città", "classdef", "codedoc", + "codemia", "colour", "commitlint", "cpettitt", diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index c656f638da..aed5d7973c 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -10,7 +10,7 @@ interface CypressConfig { type CypressMermaidConfig = MermaidConfig & CypressConfig; interface CodeObject { - code: string; + code: string | string[]; mermaid: CypressMermaidConfig; } @@ -25,7 +25,7 @@ const batchId: string = : Cypress.env('CYPRESS_COMMIT') || Date.now().toString()); export const mermaidUrl = ( - graphStr: string, + graphStr: string | string[], options: CypressMermaidConfig, api: boolean ): string => { @@ -82,7 +82,7 @@ export const urlSnapshotTest = ( }; export const renderGraph = ( - graphStr: string, + graphStr: string | string[], options: CypressMermaidConfig = {}, api = false ): void => { diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 37e9cada02..20a1aea0ab 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 a23430b083..cab3649df4 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 aac4a31b17..b7583ccf19 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', () => { diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 9f040a36f0..d3e4dd9dde 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 269efafb26..4a1d774c0a 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/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 7659138241..27e03da9c0 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -930,4 +930,36 @@ context('Sequence diagram', () => { }); }); }); + context('render after error', () => { + it('should render diagram after fixing destroy participant error', () => { + cy.on('uncaught:exception', (err) => { + return false; + }); + + renderGraph([ + `sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bo + Bob->>Alice: I agree`, + `sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bob + Bob->>Alice: I agree`, + ]); + }); + }); }); diff --git a/demos/git.html b/demos/git.html index f24217711e..92e0e68635 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
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
+    merge newbranch
+    
+

Continuous development graph

+
+    ---
+    title: Continuous development (left-to-right)
+    ---
+    gitGraph LR:
     commit
-    checkout master
+    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/syntax/c4.md b/docs/syntax/c4.md
index 1676708f50..e6b7736c33 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 a6109149a1..28ae37f9e9 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 {
@@ -461,9 +459,9 @@ The different cardinality options are :
 - `0..1` Zero or One
 - `1..*` One or more
 - `*` Many
-- `n` n {where n>1}
-- `0..n` zero to n {where n>1}
-- `1..n` one to n {where n>1}
+- `n` n (where n>1)
+- `0..n` zero to n (where n>1)
+- `1..n` one to n (where n>1)
 
 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
 
@@ -768,9 +766,30 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node
+### Styling a node (v10.7.0+)
+
+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
 
-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.
+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