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:
+## 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)
+
+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 @@
--- - 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 ++
+ --- + 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 ++
+ --- + 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 ++
+ --- + 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 ++
+ --- + 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" ++
+ --- + 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" ++
+ --- + 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 ++
+ --- + 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 ++
+ --- + 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 ++
+ --- + 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 ++
+ --- + 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 `
` 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