mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge branch 'develop' into pr/rflban/4941
* develop: (200 commits) chore(deps): update all minor dependencies adds corresponding change in docs/ecosystem Adds Unison programming language to community integrations list Fixed parser/tests Update docs Update classDiagram.md Update classDiagram.md Update docs Update packages/mermaid/src/diagrams/class/classDb.ts Update packages/mermaid/src/docs/syntax/classDiagram.md Update packages/mermaid/src/diagrams/class/classDb.ts chore(deps): update all minor dependencies Update generics docs Update docs Address potential undefined refactor: Move maxEdges out of flowchart config. refactor: Move maxEdges out of flowchart config. chore: Add maxEdges to secure list Update docs Update NiceGuy.io links in integrations-community.md ...
This commit is contained in:
Sidharth Vinod
commit
1b20fe9723
26
.github/pr-labeler.yml
vendored
26
.github/pr-labeler.yml
vendored
@ -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.
|
||||
|
||||
2
.github/release-drafter.yml
vendored
2
.github/release-drafter.yml
vendored
@ -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.'
|
||||
|
||||
6
.github/workflows/build-docs.yml
vendored
6
.github/workflows/build-docs.yml
vendored
@ -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
|
||||
|
||||
|
||||
4
.github/workflows/build.yml
vendored
4
.github/workflows/build.yml
vendored
@ -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 }}
|
||||
|
||||
2
.github/workflows/check-readme-in-sync.yml
vendored
2
.github/workflows/check-readme-in-sync.yml
vendored
@ -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: |
|
||||
|
||||
2
.github/workflows/checks.yml
vendored
2
.github/workflows/checks.yml
vendored
@ -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
|
||||
|
||||
2
.github/workflows/codeql.yml
vendored
2
.github/workflows/codeql.yml
vendored
@ -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
|
||||
|
||||
4
.github/workflows/dependency-review.yml
vendored
4
.github/workflows/dependency-review.yml
vendored
@ -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
|
||||
|
||||
4
.github/workflows/e2e-applitools.yml
vendored
4
.github/workflows/e2e-applitools.yml
vendored
@ -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 }}
|
||||
|
||||
|
||||
4
.github/workflows/e2e.yml
vendored
4
.github/workflows/e2e.yml
vendored
@ -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 }}
|
||||
|
||||
|
||||
4
.github/workflows/link-checker.yml
vendored
4
.github/workflows/link-checker.yml
vendored
@ -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
|
||||
|
||||
4
.github/workflows/lint.yml
vendored
4
.github/workflows/lint.yml
vendored
@ -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 }}
|
||||
|
||||
@ -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
|
||||
22
.github/workflows/pr-labeler.yml
vendored
22
.github/workflows/pr-labeler.yml
vendored
@ -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 }}
|
||||
|
||||
4
.github/workflows/publish-docs.yml
vendored
4
.github/workflows/publish-docs.yml
vendored
@ -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
|
||||
|
||||
10
.github/workflows/release-draft.yml
vendored
10
.github/workflows/release-draft.yml
vendored
@ -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 }}
|
||||
|
||||
@ -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
|
||||
|
||||
4
.github/workflows/release-publish.yml
vendored
4
.github/workflows/release-publish.yml
vendored
@ -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
|
||||
|
||||
4
.github/workflows/test.yml
vendored
4
.github/workflows/test.yml
vendored
@ -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 }}
|
||||
|
||||
2
.github/workflows/update-browserlist.yml
vendored
2
.github/workflows/update-browserlist.yml
vendored
@ -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
|
||||
|
||||
@ -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'],
|
||||
};
|
||||
|
||||
@ -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
|
||||
@ -117,6 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||
output,
|
||||
},
|
||||
},
|
||||
define: {
|
||||
'import.meta.vitest': 'undefined',
|
||||
},
|
||||
resolve: {
|
||||
extensions: [],
|
||||
},
|
||||
|
||||
3
.vscode/launch.json
vendored
3
.vscode/launch.json
vendored
@ -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_internals>/**", "**/node_modules/**"],
|
||||
"smartStep": true,
|
||||
|
||||
18
README.md
18
README.md
@ -44,6 +44,22 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
|
||||
|
||||
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="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!"></a>
|
||||
|
||||
## Table of content
|
||||
|
||||
<details>
|
||||
<summary>Expand contents</summary>
|
||||
|
||||
- [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)
|
||||
|
||||
</details>
|
||||
|
||||
## About
|
||||
|
||||
<!-- <Main description> -->
|
||||
@ -58,7 +74,7 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
|
||||
<br/>
|
||||
|
||||
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
||||
[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).
|
||||
|
||||
@ -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 } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -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 "<a href='https://mermaid.js.org/' target="_blank"><code>note about mermaid</code></a>"`
|
||||
);
|
||||
|
||||
cy.get('svg').then((svg) => {
|
||||
cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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 } } }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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"`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
358
demos/git.html
358
demos/git.html
@ -14,30 +14,364 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Git diagram demo</h1>
|
||||
<h1>Git graph demo</h1>
|
||||
<h2>Simple "branch and merge" graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Simple "branch and merge" (top-to-bottom)
|
||||
---
|
||||
gitGraph TB:
|
||||
commit
|
||||
checkout master
|
||||
branch newbranch
|
||||
checkout newbranch
|
||||
commit
|
||||
checkout main
|
||||
merge newbranch
|
||||
</pre>
|
||||
<h2>Continuous development graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<h2>Merge feature to advanced main graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Merge feature to advanced main (left-to-right)
|
||||
---
|
||||
gitGraph LR:
|
||||
commit
|
||||
branch newbranch
|
||||
checkout newbranch
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
merge newbranch
|
||||
</pre>
|
||||
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Merge feature to advanced main (top-to-bottom)
|
||||
---
|
||||
gitGraph TB:
|
||||
commit
|
||||
branch newbranch
|
||||
checkout newbranch
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
merge newbranch
|
||||
</pre>
|
||||
<h2>Two-way merges</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<h2>Cherry-pick from branch graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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"
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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"
|
||||
</pre>
|
||||
<h2>Cherry-pick from main graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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"
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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"
|
||||
</pre>
|
||||
<h2>Cherry-pick then merge graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<h2>Merge from main onto undeveloped branch graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Merge from main onto undeveloped branch (left-to-right)
|
||||
---
|
||||
gitGraph LR:
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
checkout develop
|
||||
merge main
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Merge from main onto undeveloped branch (top-to-bottom)
|
||||
---
|
||||
gitGraph TB:
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
checkout develop
|
||||
merge main
|
||||
</pre>
|
||||
<h2>Merge from main onto developed branch graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Merge from main onto developed branch (left-to-right)
|
||||
---
|
||||
gitGraph LR:
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
checkout develop
|
||||
commit
|
||||
merge main
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Merge from main onto developed branch (top-to-bottom)
|
||||
---
|
||||
gitGraph TB:
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
checkout develop
|
||||
commit
|
||||
merge main
|
||||
</pre>
|
||||
<h2>Two branches from same commit graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<h2>Three branches and a cherry-pick from each graph</h2>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
const ALLOWED_TAGS = [
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
---
|
||||
config:
|
||||
sankey:
|
||||
useMaxWidth: true
|
||||
showValues: false
|
||||
width: 1200
|
||||
height: 600
|
||||
|
||||
@ -164,6 +164,13 @@
|
||||
end
|
||||
</pre>
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
actor Alice
|
||||
actor John
|
||||
Alice-xJohn: Hello John, how are you?
|
||||
John--xAlice: Great!
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
version: '3.9'
|
||||
services:
|
||||
mermaid:
|
||||
image: node:18.18.2-alpine3.18
|
||||
image: node:18.19.0-alpine3.18
|
||||
stdin_open: true
|
||||
tty: true
|
||||
working_dir: /mermaid
|
||||
|
||||
@ -10,9 +10,8 @@
|
||||
|
||||
## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
|
||||
|
||||
- Search in Discussions
|
||||
- Search in open Issues
|
||||
- Search in closed Issues
|
||||
- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
|
||||
- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)
|
||||
|
||||
If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
|
||||
Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.
|
||||
|
||||
@ -10,8 +10,8 @@ When mermaid starts, configuration is extracted to determine a configuration to
|
||||
|
||||
- The default configuration
|
||||
- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
|
||||
- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
|
||||
- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
|
||||
- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
|
||||
- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
|
||||
|
||||
**The render config** is configuration that is used when rendering by applying these configurations.
|
||||
|
||||
|
||||
@ -16,4 +16,4 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59)
|
||||
[mermaidAPI.ts:60](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L60)
|
||||
|
||||
@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L79)
|
||||
[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
|
||||
|
||||
---
|
||||
|
||||
@ -51,4 +51,4 @@ The svg code for the rendered graph.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L69)
|
||||
[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)
|
||||
|
||||
@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L63)
|
||||
[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
|
||||
|
||||
## Variables
|
||||
|
||||
@ -96,7 +96,7 @@ mermaid.initialize(config);
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641)
|
||||
[mermaidAPI.ts:608](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L608)
|
||||
|
||||
## Functions
|
||||
|
||||
@ -127,7 +127,7 @@ Return the last node appended
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L299)
|
||||
[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
|
||||
|
||||
---
|
||||
|
||||
@ -153,7 +153,7 @@ the cleaned up svgCode
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245)
|
||||
[mermaidAPI.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L209)
|
||||
|
||||
---
|
||||
|
||||
@ -178,7 +178,7 @@ the string with all the user styles
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L175)
|
||||
[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139)
|
||||
|
||||
---
|
||||
|
||||
@ -201,7 +201,7 @@ the string with all the user styles
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
|
||||
[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)
|
||||
|
||||
---
|
||||
|
||||
@ -228,47 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L160)
|
||||
|
||||
---
|
||||
|
||||
### decodeEntities
|
||||
|
||||
▸ **decodeEntities**(`text`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :----- | :------- | :----------------- |
|
||||
| `text` | `string` | text to be decoded |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L146)
|
||||
|
||||
---
|
||||
|
||||
### encodeEntities
|
||||
|
||||
▸ **encodeEntities**(`text`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :----- | :------- | :----------------- |
|
||||
| `text` | `string` | text to be encoded |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L117)
|
||||
[mermaidAPI.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L124)
|
||||
|
||||
---
|
||||
|
||||
@ -294,7 +254,7 @@ Put the svgCode into an iFrame. Return the iFrame code
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
|
||||
[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
|
||||
|
||||
---
|
||||
|
||||
@ -319,4 +279,4 @@ Remove any existing elements from the given document
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L349)
|
||||
[mermaidAPI.ts:313](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L313)
|
||||
|
||||
@ -35,12 +35,19 @@ Below are a list of community plugins and integrations created with Mermaid.
|
||||
- [Notion](https://notion.so) ✅
|
||||
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
|
||||
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
|
||||
- [NotesHub](https://noteshub.app) ✅
|
||||
- [GitBook](https://gitbook.com)
|
||||
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
||||
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
||||
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
||||
- [LiveBook](https://livebook.dev) ✅
|
||||
- [Atlassian Products](https://www.atlassian.com)
|
||||
- [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
|
||||
- [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
|
||||
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
|
||||
- [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
|
||||
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
|
||||
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
|
||||
@ -99,9 +106,13 @@ Communication tools and platforms
|
||||
- [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
|
||||
- [NodeBB](https://nodebb.org)
|
||||
- [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
|
||||
- [Slack](https://slack.com)
|
||||
- [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
|
||||
|
||||
### Wikis
|
||||
|
||||
- [PmWiki](https://www.pmwiki.org)
|
||||
- [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
|
||||
- [MediaWiki](https://www.mediawiki.org)
|
||||
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
|
||||
- [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
|
||||
@ -169,7 +180,9 @@ Communication tools and platforms
|
||||
|
||||
### Document Generation
|
||||
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
|
||||
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
|
||||
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
||||
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
||||
- [remark](https://remark.js.org/)
|
||||
@ -224,5 +237,5 @@ Communication tools and platforms
|
||||
- [ExDoc](https://github.com/elixir-lang/ex_doc)
|
||||
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
|
||||
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
|
||||
- [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
|
||||
- [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/reference#markdown_element)
|
||||
- [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element)
|
||||
- [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams)
|
||||
|
||||
@ -340,7 +340,7 @@ To Deploy Mermaid:
|
||||
</script>
|
||||
```
|
||||
|
||||
**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` 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 `<div>` or `<pre>` 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)
|
||||
|
||||
|
||||
@ -6,18 +6,10 @@
|
||||
|
||||
# Announcements
|
||||
|
||||
<br />
|
||||
Check out our latest blog posts below. See more blog posts [here](blog.md).
|
||||
|
||||
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
## [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.
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.")
|
||||
|
||||
|
||||
@ -240,9 +240,9 @@ class BankAccount{
|
||||
|
||||
#### Generic Types
|
||||
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` 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<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
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\<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
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
|
||||
<style>
|
||||
|
||||
@ -467,7 +467,7 @@ flowchart TB
|
||||
A & B--> C & D
|
||||
```
|
||||
|
||||
If you describe the same diagram using the the basic syntax, it will take four lines. A
|
||||
If you describe the same diagram using the basic syntax, it will take four lines. A
|
||||
word of warning, one could go overboard with this making the flowchart harder to read in
|
||||
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
|
||||
This goes for expressive syntaxes as well.
|
||||
|
||||
@ -366,41 +366,49 @@ A few important rules to note here are:
|
||||
1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
|
||||
2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
|
||||
3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
|
||||
4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
|
||||
5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
|
||||
|
||||
Let see an example:
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
commit id:"TWO"
|
||||
cherry-pick id:"A"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
branch release
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
merge develop id:"MERGE"
|
||||
commit id:"TWO"
|
||||
checkout release
|
||||
cherry-pick id:"MERGE" parent:"B"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
commit id:"TWO"
|
||||
cherry-pick id:"A"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
branch release
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
merge develop id:"MERGE"
|
||||
commit id:"TWO"
|
||||
checkout release
|
||||
cherry-pick id:"MERGE" parent:"B"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
```
|
||||
|
||||
## Gitgraph specific configuration options
|
||||
|
||||
20
package.json
20
package.json
@ -4,7 +4,7 @@
|
||||
"version": "10.2.4",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@8.9.2",
|
||||
"packageManager": "pnpm@8.14.1",
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
@ -15,26 +15,26 @@
|
||||
"git graph"
|
||||
],
|
||||
"scripts": {
|
||||
"build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
|
||||
"build:vite": "tsx .vite/build.ts",
|
||||
"build:mermaid": "pnpm build:vite --mermaid",
|
||||
"build:viz": "pnpm build:mermaid --visualize",
|
||||
"build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
|
||||
"build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
|
||||
"build:watch": "pnpm build:vite --watch",
|
||||
"build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
|
||||
"dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
|
||||
"dev": "concurrently \"pnpm build:vite --watch\" \"tsx .vite/server.ts\"",
|
||||
"dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev",
|
||||
"release": "pnpm build",
|
||||
"lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
|
||||
"lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
|
||||
"lint:jison": "ts-node-esm ./scripts/jison/lint.mts",
|
||||
"contributors": "ts-node-esm scripts/updateContributors.ts",
|
||||
"lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && tsx scripts/fixCSpell.ts",
|
||||
"lint:jison": "tsx ./scripts/jison/lint.mts",
|
||||
"contributors": "tsx scripts/updateContributors.ts",
|
||||
"cypress": "cypress run",
|
||||
"cypress:open": "cypress open",
|
||||
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
|
||||
"coverage:cypress:clean": "rimraf .nyc_output coverage/cypress",
|
||||
"e2e:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm e2e",
|
||||
"coverage:merge": "ts-node-esm scripts/coverage.ts",
|
||||
"coverage:merge": "tsx scripts/coverage.ts",
|
||||
"coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
|
||||
"ci": "vitest run",
|
||||
"test": "pnpm lint && vitest run",
|
||||
@ -116,14 +116,14 @@
|
||||
"rimraf": "^5.0.0",
|
||||
"rollup-plugin-visualizer": "^5.9.2",
|
||||
"start-server-and-test": "^2.0.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"tsx": "^4.6.2",
|
||||
"typescript": "^5.1.3",
|
||||
"vite": "^4.3.9",
|
||||
"vite": "^4.4.12",
|
||||
"vite-plugin-istanbul": "^4.1.0",
|
||||
"vitest": "^0.34.0"
|
||||
},
|
||||
"volta": {
|
||||
"node": "18.18.2"
|
||||
"node": "18.19.0"
|
||||
},
|
||||
"nyc": {
|
||||
"report-dir": "coverage/cypress"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mermaid",
|
||||
"version": "10.6.0",
|
||||
"version": "10.6.1",
|
||||
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"module": "./dist/mermaid.core.mjs",
|
||||
@ -26,18 +26,18 @@
|
||||
"clean": "rimraf dist",
|
||||
"dev": "pnpm -w dev",
|
||||
"docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
|
||||
"docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts",
|
||||
"docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --verify",
|
||||
"docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
|
||||
"docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
|
||||
"docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
|
||||
"docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
|
||||
"docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
|
||||
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
|
||||
"docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
|
||||
"docs:release-version": "ts-node-esm scripts/update-release-version.mts",
|
||||
"docs:verify-version": "ts-node-esm scripts/update-release-version.mts --verify",
|
||||
"types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
|
||||
"types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
|
||||
"docs:release-version": "tsx scripts/update-release-version.mts",
|
||||
"docs:verify-version": "tsx scripts/update-release-version.mts --verify",
|
||||
"types:build-config": "tsx scripts/create-types-from-json-schema.mts",
|
||||
"types:verify-config": "tsx scripts/create-types-from-json-schema.mts --verify",
|
||||
"checkCircle": "npx madge --circular ./src",
|
||||
"release": "pnpm build",
|
||||
"prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm docs:release-version && pnpm -w run build"
|
||||
@ -70,7 +70,7 @@
|
||||
"dagre-d3-es": "7.0.10",
|
||||
"dayjs": "^1.11.7",
|
||||
"dompurify": "^3.0.5",
|
||||
"elkjs": "^0.8.2",
|
||||
"elkjs": "^0.9.0",
|
||||
"khroma": "^2.0.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mdast-util-from-markdown": "^1.3.0",
|
||||
|
||||
@ -3,6 +3,8 @@ import { log } from './logger.js';
|
||||
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
|
||||
import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
|
||||
import { UnknownDiagramError } from './errors.js';
|
||||
import { encodeEntities } from './utils.js';
|
||||
|
||||
import type { DetailedError } from './utils.js';
|
||||
import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js';
|
||||
|
||||
@ -21,6 +23,7 @@ export class Diagram {
|
||||
|
||||
private detectError?: UnknownDiagramError;
|
||||
constructor(public text: string, public metadata: Pick<DiagramMetadata, 'title'> = {}) {
|
||||
this.text = encodeEntities(text);
|
||||
this.text += '\n';
|
||||
const cnf = configApi.getConfig();
|
||||
try {
|
||||
|
||||
@ -68,6 +68,11 @@ export interface MermaidConfig {
|
||||
* The maximum allowed size of the users text diagram
|
||||
*/
|
||||
maxTextSize?: number;
|
||||
/**
|
||||
* Defines the maximum number of edges that can be drawn in a graph.
|
||||
*
|
||||
*/
|
||||
maxEdges?: number;
|
||||
darkMode?: boolean;
|
||||
htmlLabels?: boolean;
|
||||
/**
|
||||
@ -1411,6 +1416,14 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
|
||||
* Margin top for the text over the diagram
|
||||
*/
|
||||
titleTopMargin?: number;
|
||||
/**
|
||||
* Defines a top/bottom margin for subgraph titles
|
||||
*
|
||||
*/
|
||||
subGraphTitleMargin?: {
|
||||
top?: number;
|
||||
bottom?: number;
|
||||
};
|
||||
arrowMarkerAbsolute?: boolean;
|
||||
/**
|
||||
* The amount of padding around the diagram as a whole so that embedded
|
||||
|
||||
@ -5,9 +5,11 @@ import { createText } from '../rendering-util/createText.js';
|
||||
import { select } from 'd3';
|
||||
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
|
||||
const rect = (parent, node) => {
|
||||
log.info('Creating subgraph rect for ', node.id, node);
|
||||
const siteConfig = getConfig();
|
||||
|
||||
// Add outer g element
|
||||
const shapeSvg = parent
|
||||
@ -18,7 +20,7 @@ const rect = (parent, node) => {
|
||||
// add the rect
|
||||
const rect = shapeSvg.insert('rect', ':first-child');
|
||||
|
||||
const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
|
||||
const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
|
||||
|
||||
// Create the label and insert it after the rect
|
||||
const label = shapeSvg.insert('g').attr('class', 'cluster-label');
|
||||
@ -34,7 +36,7 @@ const rect = (parent, node) => {
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
if (evaluate(siteConfig.flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
@ -63,17 +65,18 @@ const rect = (parent, node) => {
|
||||
.attr('width', width)
|
||||
.attr('height', node.height + padding);
|
||||
|
||||
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
if (useHtmlLabels) {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
|
||||
`translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
|
||||
);
|
||||
} else {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
|
||||
`translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
|
||||
);
|
||||
}
|
||||
// Center the label
|
||||
@ -127,6 +130,8 @@ const noteGroup = (parent, node) => {
|
||||
return shapeSvg;
|
||||
};
|
||||
const roundedWithTitle = (parent, node) => {
|
||||
const siteConfig = getConfig();
|
||||
|
||||
// Add outer g element
|
||||
const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
|
||||
|
||||
@ -143,7 +148,7 @@ const roundedWithTitle = (parent, node) => {
|
||||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
if (evaluate(siteConfig.flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
@ -175,6 +180,7 @@ const roundedWithTitle = (parent, node) => {
|
||||
.attr('width', width + padding)
|
||||
.attr('height', node.height + padding - bbox.height - 3);
|
||||
|
||||
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
// Center the label
|
||||
label.attr(
|
||||
'transform',
|
||||
@ -184,7 +190,8 @@ const roundedWithTitle = (parent, node) => {
|
||||
(node.y -
|
||||
node.height / 2 -
|
||||
node.padding / 3 +
|
||||
(evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
|
||||
(evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
|
||||
subGraphTitleTopMargin +
|
||||
')'
|
||||
);
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { select } from 'd3';
|
||||
import { log } from '../logger.js';
|
||||
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
import { decodeEntities } from '../mermaidAPI.js';
|
||||
import { decodeEntities } from '../utils.js';
|
||||
|
||||
/**
|
||||
* @param dom
|
||||
|
||||
79
packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
Normal file
79
packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
Normal file
@ -0,0 +1,79 @@
|
||||
import type { Mocked } from 'vitest';
|
||||
import type { SVG } from '../diagram-api/types.js';
|
||||
import { addEdgeMarkers } from './edgeMarker.js';
|
||||
|
||||
describe('addEdgeMarker', () => {
|
||||
const svgPath = {
|
||||
attr: vitest.fn(),
|
||||
} as unknown as Mocked<SVG>;
|
||||
const url = 'http://example.com';
|
||||
const id = 'test';
|
||||
const diagramType = 'test';
|
||||
|
||||
beforeEach(() => {
|
||||
svgPath.attr.mockReset();
|
||||
});
|
||||
|
||||
it('should add markers for arrow_cross:arrow_point', () => {
|
||||
const arrowTypeStart = 'arrow_cross';
|
||||
const arrowTypeEnd = 'arrow_point';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-start',
|
||||
`url(${url}#${id}_${diagramType}-crossStart)`
|
||||
);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-end',
|
||||
`url(${url}#${id}_${diagramType}-pointEnd)`
|
||||
);
|
||||
});
|
||||
|
||||
it('should add markers for aggregation:arrow_point', () => {
|
||||
const arrowTypeStart = 'aggregation';
|
||||
const arrowTypeEnd = 'arrow_point';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-start',
|
||||
`url(${url}#${id}_${diagramType}-aggregationStart)`
|
||||
);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-end',
|
||||
`url(${url}#${id}_${diagramType}-pointEnd)`
|
||||
);
|
||||
});
|
||||
|
||||
it('should add markers for arrow_point:aggregation', () => {
|
||||
const arrowTypeStart = 'arrow_point';
|
||||
const arrowTypeEnd = 'aggregation';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-start',
|
||||
`url(${url}#${id}_${diagramType}-pointStart)`
|
||||
);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-end',
|
||||
`url(${url}#${id}_${diagramType}-aggregationEnd)`
|
||||
);
|
||||
});
|
||||
|
||||
it('should add markers for aggregation:composition', () => {
|
||||
const arrowTypeStart = 'aggregation';
|
||||
const arrowTypeEnd = 'composition';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-start',
|
||||
`url(${url}#${id}_${diagramType}-aggregationStart)`
|
||||
);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-end',
|
||||
`url(${url}#${id}_${diagramType}-compositionEnd)`
|
||||
);
|
||||
});
|
||||
|
||||
it('should not add invalid markers', () => {
|
||||
const arrowTypeStart = 'this is an invalid marker';
|
||||
const arrowTypeEnd = ') url(https://my-malicious-site.example)';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
57
packages/mermaid/src/dagre-wrapper/edgeMarker.ts
Normal file
57
packages/mermaid/src/dagre-wrapper/edgeMarker.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import type { SVG } from '../diagram-api/types.js';
|
||||
import { log } from '../logger.js';
|
||||
import type { EdgeData } from '../types.js';
|
||||
/**
|
||||
* Adds SVG markers to a path element based on the arrow types specified in the edge.
|
||||
*
|
||||
* @param svgPath - The SVG path element to add markers to.
|
||||
* @param edge - The edge data object containing the arrow types.
|
||||
* @param url - The URL of the SVG marker definitions.
|
||||
* @param id - The ID prefix for the SVG marker definitions.
|
||||
* @param diagramType - The type of diagram being rendered.
|
||||
*/
|
||||
export const addEdgeMarkers = (
|
||||
svgPath: SVG,
|
||||
edge: Pick<EdgeData, 'arrowTypeStart' | 'arrowTypeEnd'>,
|
||||
url: string,
|
||||
id: string,
|
||||
diagramType: string
|
||||
) => {
|
||||
if (edge.arrowTypeStart) {
|
||||
addEdgeMarker(svgPath, 'start', edge.arrowTypeStart, url, id, diagramType);
|
||||
}
|
||||
if (edge.arrowTypeEnd) {
|
||||
addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType);
|
||||
}
|
||||
};
|
||||
|
||||
const arrowTypesMap = {
|
||||
arrow_cross: 'cross',
|
||||
arrow_point: 'point',
|
||||
arrow_barb: 'barb',
|
||||
arrow_circle: 'circle',
|
||||
aggregation: 'aggregation',
|
||||
extension: 'extension',
|
||||
composition: 'composition',
|
||||
dependency: 'dependency',
|
||||
lollipop: 'lollipop',
|
||||
} as const;
|
||||
|
||||
const addEdgeMarker = (
|
||||
svgPath: SVG,
|
||||
position: 'start' | 'end',
|
||||
arrowType: string,
|
||||
url: string,
|
||||
id: string,
|
||||
diagramType: string
|
||||
) => {
|
||||
const endMarkerType = arrowTypesMap[arrowType as keyof typeof arrowTypesMap];
|
||||
|
||||
if (!endMarkerType) {
|
||||
log.warn(`Unknown arrow type: ${arrowType}`);
|
||||
return; // unknown arrow type, ignore
|
||||
}
|
||||
|
||||
const suffix = position === 'start' ? 'Start' : 'End';
|
||||
svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${endMarkerType}${suffix})`);
|
||||
};
|
||||
@ -6,6 +6,8 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
import utils from '../utils.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
import { addEdgeMarkers } from './edgeMarker.js';
|
||||
|
||||
let edgeLabels = {};
|
||||
let terminalLabels = {};
|
||||
@ -135,6 +137,8 @@ function setTerminalWidth(fo, value) {
|
||||
export const positionEdgeLabel = (edge, paths) => {
|
||||
log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
|
||||
let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
|
||||
const siteConfig = getConfig();
|
||||
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
if (edge.label) {
|
||||
const el = edgeLabels[edge.id];
|
||||
let x = edge.x;
|
||||
@ -158,7 +162,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
y = pos.y;
|
||||
}
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
|
||||
}
|
||||
|
||||
//let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
|
||||
@ -172,7 +176,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
}
|
||||
if (edge.startLabelRight) {
|
||||
const el = terminalLabels[edge.id].startRight;
|
||||
@ -188,7 +192,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
}
|
||||
if (edge.endLabelLeft) {
|
||||
const el = terminalLabels[edge.id].endLeft;
|
||||
@ -200,7 +204,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
}
|
||||
if (edge.endLabelRight) {
|
||||
const el = terminalLabels[edge.id].endRight;
|
||||
@ -212,7 +216,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
}
|
||||
};
|
||||
|
||||
@ -506,108 +510,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
|
||||
log.info('arrowTypeStart', edge.arrowTypeStart);
|
||||
log.info('arrowTypeEnd', edge.arrowTypeEnd);
|
||||
|
||||
switch (edge.arrowTypeStart) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_point':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_barb':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_circle':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'aggregation':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'extension':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'composition':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'dependency':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
switch (edge.arrowTypeEnd) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
|
||||
break;
|
||||
case 'arrow_point':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
|
||||
break;
|
||||
case 'arrow_barb':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
|
||||
break;
|
||||
case 'arrow_circle':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
|
||||
break;
|
||||
case 'aggregation':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'extension':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'composition':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'dependency':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
addEdgeMarkers(svgPath, edge, url, id, diagramType);
|
||||
|
||||
let paths = {};
|
||||
if (pointsHasChanged) {
|
||||
paths.updatedPath = points;
|
||||
|
||||
@ -13,8 +13,10 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
|
||||
import { insertCluster, clear as clearClusters } from './clusters.js';
|
||||
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
|
||||
import { log } from '../logger.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
|
||||
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
|
||||
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
|
||||
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
|
||||
const dir = graph.graph().rankdir;
|
||||
log.trace('Dir in recursive render - dir:', dir);
|
||||
@ -52,7 +54,14 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
|
||||
if (node && node.clusterNode) {
|
||||
// const children = graph.children(v);
|
||||
log.info('Cluster identified', v, node.width, graph.node(v));
|
||||
const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
|
||||
const o = await recursiveRender(
|
||||
nodes,
|
||||
node.graph,
|
||||
diagramtype,
|
||||
id,
|
||||
graph.node(v),
|
||||
siteConfig
|
||||
);
|
||||
const newEl = o.elem;
|
||||
updateNodeBounds(node, newEl);
|
||||
node.diff = o.diff || 0;
|
||||
@ -101,6 +110,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
|
||||
log.info('Graph after layout:', graphlibJson.write(graph));
|
||||
// Move the nodes to the correct place
|
||||
let diff = 0;
|
||||
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
sortNodesByHierarchy(graph).forEach(function (v) {
|
||||
const node = graph.node(v);
|
||||
log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
@ -114,16 +124,18 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
|
||||
);
|
||||
if (node && node.clusterNode) {
|
||||
// clusterDb[node.id].node = node;
|
||||
|
||||
node.y += subGraphTitleTotalMargin;
|
||||
positionNode(node);
|
||||
} else {
|
||||
// Non cluster node
|
||||
if (graph.children(v).length > 0) {
|
||||
// A cluster in the non-recursive way
|
||||
// positionCluster(node);
|
||||
node.height += subGraphTitleTotalMargin;
|
||||
insertCluster(clusters, node);
|
||||
clusterDb[node.id].node = node;
|
||||
} else {
|
||||
node.y += subGraphTitleTotalMargin / 2;
|
||||
positionNode(node);
|
||||
}
|
||||
}
|
||||
@ -134,6 +146,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
|
||||
const edge = graph.edge(e);
|
||||
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
|
||||
|
||||
edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
|
||||
const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id);
|
||||
positionEdgeLabel(edge, paths);
|
||||
});
|
||||
@ -159,7 +172,8 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
|
||||
adjustClustersAndEdges(graph);
|
||||
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
|
||||
// log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
|
||||
await recursiveRender(elem, graph, diagramtype, id);
|
||||
const siteConfig = getConfig();
|
||||
await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
|
||||
};
|
||||
|
||||
// const shapeDefinitions = {};
|
||||
|
||||
@ -1013,6 +1013,7 @@ const class_box = (parent, node) => {
|
||||
});
|
||||
|
||||
rect
|
||||
.attr('style', node.style)
|
||||
.attr('class', 'outer title-state')
|
||||
.attr('x', -maxWidth / 2 - halfPadding)
|
||||
.attr('y', -(maxHeight / 2) - halfPadding)
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import createLabel from '../createLabel.js';
|
||||
import { createText } from '../../rendering-util/createText.js';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
import { decodeEntities } from '../../mermaidAPI.js';
|
||||
import { select } from 'd3';
|
||||
import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
|
||||
import { decodeEntities } from '../../utils.js';
|
||||
|
||||
export const labelHelper = async (parent, node, _classes, isNode) => {
|
||||
let classes;
|
||||
@ -80,7 +80,9 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
|
||||
? getConfig().fontSize
|
||||
: window.getComputedStyle(document.body).fontSize;
|
||||
const enlargingFactor = 5;
|
||||
img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
|
||||
const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
|
||||
img.style.minWidth = width;
|
||||
img.style.maxWidth = width;
|
||||
} else {
|
||||
img.style.width = '100%';
|
||||
}
|
||||
|
||||
@ -69,4 +69,18 @@ Expecting 'TXT', got 'NEWLINE'"
|
||||
'"No diagram type detected matching given configuration for text: thor TD; A-->B"'
|
||||
);
|
||||
});
|
||||
|
||||
test('should consider entity codes when present in diagram defination', async () => {
|
||||
const diagram = await getDiagramFromText(`sequenceDiagram
|
||||
A->>B: I #9829; you!
|
||||
B->>A: I #9829; you #infin; times more!`);
|
||||
// @ts-ignore: we need to add types for sequenceDb which will be done in separate PR
|
||||
const messages = diagram.db?.getMessages?.();
|
||||
if (!messages) {
|
||||
throw new Error('Messages not found!');
|
||||
}
|
||||
|
||||
expect(messages[0].message).toBe('I fl°°9829¶ß you!');
|
||||
expect(messages[1].message).toBe('I fl°°9829¶ß you fl°infin¶ß times more!');
|
||||
});
|
||||
});
|
||||
|
||||
@ -84,6 +84,7 @@ export const addClass = function (_id: string) {
|
||||
methods: [],
|
||||
members: [],
|
||||
annotations: [],
|
||||
styles: [],
|
||||
domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
|
||||
} as ClassNode;
|
||||
|
||||
@ -214,7 +215,7 @@ export const cleanupLabel = function (label: string) {
|
||||
};
|
||||
|
||||
/**
|
||||
* Called by parser when a special node is found, e.g. a clickable element.
|
||||
* Called by parser when assigning cssClass to a class
|
||||
*
|
||||
* @param ids - Comma separated list of ids
|
||||
* @param className - Class to add
|
||||
@ -446,11 +447,27 @@ const getNamespaces = function (): NamespaceMap {
|
||||
* @public
|
||||
*/
|
||||
export const addClassesToNamespace = function (id: string, classNames: string[]) {
|
||||
if (namespaces[id] !== undefined) {
|
||||
classNames.map((className) => {
|
||||
classes[className].parent = id;
|
||||
namespaces[id].classes[className] = classes[className];
|
||||
});
|
||||
if (namespaces[id] === undefined) {
|
||||
return;
|
||||
}
|
||||
for (const name of classNames) {
|
||||
const { className } = splitClassNameAndType(name);
|
||||
classes[className].parent = id;
|
||||
namespaces[id].classes[className] = classes[className];
|
||||
}
|
||||
};
|
||||
|
||||
export const setCssStyle = function (id: string, styles: string[]) {
|
||||
const thisClass = classes[id];
|
||||
if (!styles || !thisClass) {
|
||||
return;
|
||||
}
|
||||
for (const s of styles) {
|
||||
if (s.includes(',')) {
|
||||
thisClass.styles.push(...s.split(','));
|
||||
} else {
|
||||
thisClass.styles.push(s);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -490,4 +507,5 @@ export default {
|
||||
addClassesToNamespace,
|
||||
getNamespace,
|
||||
getNamespaces,
|
||||
setCssStyle,
|
||||
};
|
||||
|
||||
@ -56,5 +56,18 @@ describe('class diagram, ', function () {
|
||||
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
|
||||
expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
|
||||
});
|
||||
it('should be possible to apply a style to an individual node', function () {
|
||||
const str =
|
||||
'classDiagram\n' +
|
||||
'class Class01\n class Class02\n style Class01 fill:#f9f,stroke:#333,stroke-width:4px';
|
||||
|
||||
parser.parse(str);
|
||||
|
||||
const styleElements = parser.yy.getClass('Class01').styles;
|
||||
|
||||
expect(styleElements[0]).toBe('fill:#f9f');
|
||||
expect(styleElements[1]).toBe('stroke:#333');
|
||||
expect(styleElements[2]).toBe('stroke-width:4px');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -409,6 +409,7 @@ class C13["With Città foreign language"]
|
||||
},
|
||||
],
|
||||
"methods": [],
|
||||
"styles": [],
|
||||
"type": "",
|
||||
}
|
||||
`);
|
||||
@ -1043,6 +1044,19 @@ foo()
|
||||
`;
|
||||
parser.parse(str);
|
||||
});
|
||||
|
||||
it('should handle namespace with generic types', () => {
|
||||
parser.parse(`classDiagram
|
||||
|
||||
namespace space {
|
||||
class Square~Shape~{
|
||||
int id
|
||||
List~int~ position
|
||||
setPoints(List~int~ points)
|
||||
getPoints() List~int~
|
||||
}
|
||||
}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -104,7 +104,7 @@ export const addClasses = function (
|
||||
*/
|
||||
const cssClassStr = vertex.cssClasses.join(' ');
|
||||
|
||||
const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
|
||||
const styles = getStylesFromArray(vertex.styles);
|
||||
|
||||
// Use vertex id as text in the box if no text is provided by the graph definition
|
||||
const vertexText = vertex.label ?? vertex.id;
|
||||
@ -231,7 +231,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
|
||||
//Set relationship style and line type
|
||||
classes: 'relation',
|
||||
pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid',
|
||||
id: 'id' + cnt,
|
||||
id: `id_${edge.id1}_${edge.id2}_${cnt}`,
|
||||
// Set link type for rendering
|
||||
arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal',
|
||||
//Set edge extra labels
|
||||
|
||||
@ -681,3 +681,82 @@ describe('given text representing a method, ', function () {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('given text representing an attribute', () => {
|
||||
describe('when the attribute has no modifiers', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = 'name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has public "+" modifier', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = '+name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('+name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has protected "#" modifier', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = '#name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('#name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has private "-" modifier', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = '-name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('-name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has internal "~" modifier', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = '~name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('~name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has static "$" modifier', () => {
|
||||
it('should parse the display text correctly and apply static css style', () => {
|
||||
const str = 'name String$';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('name String');
|
||||
expect(displayDetails.cssStyle).toBe(staticCssStyle);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has abstract "*" modifier', () => {
|
||||
it('should parse the display text correctly and apply abstract css style', () => {
|
||||
const str = 'name String*';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('name String');
|
||||
expect(displayDetails.cssStyle).toBe(abstractCssStyle);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,6 +10,7 @@ export interface ClassNode {
|
||||
members: ClassMember[];
|
||||
annotations: string[];
|
||||
domId: string;
|
||||
styles: string[];
|
||||
parent?: string;
|
||||
link?: string;
|
||||
linkTarget?: string;
|
||||
@ -106,7 +107,7 @@ export class ClassMember {
|
||||
this.visibility = firstChar as Visibility;
|
||||
}
|
||||
|
||||
if (lastChar.match(/[*?]/)) {
|
||||
if (lastChar.match(/[$*]/)) {
|
||||
potentialClassifier = lastChar;
|
||||
}
|
||||
|
||||
|
||||
@ -60,6 +60,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
|
||||
<string>["] this.popState();
|
||||
<string>[^"]* return "STR";
|
||||
<*>["] this.begin("string");
|
||||
"style" return 'STYLE';
|
||||
|
||||
<INITIAL,namespace>"namespace" { this.begin('namespace'); return 'NAMESPACE'; }
|
||||
<namespace>\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; }
|
||||
@ -127,6 +128,10 @@ line was introduced with 'click'.
|
||||
<*>\- return 'MINUS';
|
||||
<*>"." return 'DOT';
|
||||
<*>\+ return 'PLUS';
|
||||
":" return 'COLON';
|
||||
"," return 'COMMA';
|
||||
\# return 'BRKT';
|
||||
"#" return 'BRKT';
|
||||
<*>\% return 'PCT';
|
||||
<*>"=" return 'EQUALS';
|
||||
<*>\= return 'EQUALS';
|
||||
@ -198,6 +203,7 @@ line was introduced with 'click'.
|
||||
[\uFFD2-\uFFD7\uFFDA-\uFFDC]
|
||||
return 'UNICODE_TEXT';
|
||||
<*>\s return 'SPACE';
|
||||
\s return 'SPACE';
|
||||
<*><<EOF>> return 'EOF';
|
||||
|
||||
/lex
|
||||
@ -254,6 +260,7 @@ statement
|
||||
| memberStatement
|
||||
| annotationStatement
|
||||
| clickStatement
|
||||
| styleStatement
|
||||
| cssClassStatement
|
||||
| noteStatement
|
||||
| direction
|
||||
@ -365,10 +372,26 @@ clickStatement
|
||||
| CLICK className HREF STR STR LINK_TARGET {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);}
|
||||
;
|
||||
|
||||
cssClassStatement
|
||||
: CSSCLASS STR alphaNumToken {yy.setCssClass($2, $3);}
|
||||
styleStatement
|
||||
:STYLE ALPHA stylesOpt {$$ = $STYLE;yy.setCssStyle($2,$stylesOpt);}
|
||||
;
|
||||
|
||||
cssClassStatement
|
||||
: CSSCLASS STR ALPHA {yy.setCssClass($2, $3);}
|
||||
;
|
||||
|
||||
stylesOpt
|
||||
: style {$$ = [$style]}
|
||||
| stylesOpt COMMA style {$stylesOpt.push($style);$$ = $stylesOpt;}
|
||||
;
|
||||
|
||||
style
|
||||
: styleComponent
|
||||
| style styleComponent {$$ = $style + $styleComponent;}
|
||||
;
|
||||
|
||||
styleComponent: ALPHA | NUM | COLON | UNIT | SPACE | BRKT | STYLE | PCT | LABEL;
|
||||
|
||||
commentToken : textToken | graphCodeTokens ;
|
||||
|
||||
textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT | DEFAULT;
|
||||
|
||||
@ -145,6 +145,7 @@ g.classGroup line {
|
||||
|
||||
.edgeTerminals {
|
||||
font-size: 11px;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.classTitleText {
|
||||
|
||||
@ -38,6 +38,20 @@ describe('when securityLevel is antiscript, all script must be removed', () => {
|
||||
compareRemoveScript(`<img onerror="alert('hello');">`, `<img>`);
|
||||
});
|
||||
|
||||
it('should detect unsecured target attribute, if value is _blank then generate a secured link', () => {
|
||||
compareRemoveScript(
|
||||
`<a href="https://mermaid.js.org/" target="_blank">note about mermaid</a>`,
|
||||
`<a href="https://mermaid.js.org/" target="_blank" rel="noopener">note about mermaid</a>`
|
||||
);
|
||||
});
|
||||
|
||||
it('should detect unsecured target attribute from links', () => {
|
||||
compareRemoveScript(
|
||||
`<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`,
|
||||
`<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`
|
||||
);
|
||||
});
|
||||
|
||||
it('should detect iframes', () => {
|
||||
compareRemoveScript(
|
||||
`<iframe src="http://abc.com/script1.js"></iframe>
|
||||
|
||||
@ -25,7 +25,27 @@ export const getRows = (s?: string): string[] => {
|
||||
* @returns The safer text
|
||||
*/
|
||||
export const removeScript = (txt: string): string => {
|
||||
return DOMPurify.sanitize(txt);
|
||||
const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
|
||||
|
||||
DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
|
||||
if (node.tagName === 'A' && node.hasAttribute('target')) {
|
||||
node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
|
||||
}
|
||||
});
|
||||
|
||||
const sanitizedText = DOMPurify.sanitize(txt);
|
||||
|
||||
DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
|
||||
if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
|
||||
node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
|
||||
node.removeAttribute(TEMPORARY_ATTRIBUTE);
|
||||
if (node.getAttribute('target') === '_blank') {
|
||||
node.setAttribute('rel', 'noopener');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return sanitizedText;
|
||||
};
|
||||
|
||||
const sanitizeMore = (text: string, config: MermaidConfig) => {
|
||||
|
||||
@ -11,6 +11,7 @@ import common from '../../common/common.js';
|
||||
import { interpolateToCurve, getStylesFromArray } from '../../../utils.js';
|
||||
import ELK from 'elkjs/lib/elk.bundled.js';
|
||||
import { getLineFunctionsWithOffset } from '../../../utils/lineWithOffset.js';
|
||||
import { addEdgeMarkers } from '../../../dagre-wrapper/edgeMarker.js';
|
||||
|
||||
const elk = new ELK();
|
||||
|
||||
@ -586,108 +587,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
|
||||
}
|
||||
|
||||
// look in edge data and decide which marker to use
|
||||
switch (edgeData.arrowTypeStart) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_point':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_barb':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_circle':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'aggregation':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'extension':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'composition':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'dependency':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
switch (edgeData.arrowTypeEnd) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
|
||||
break;
|
||||
case 'arrow_point':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
|
||||
break;
|
||||
case 'arrow_barb':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
|
||||
break;
|
||||
case 'arrow_circle':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
|
||||
break;
|
||||
case 'aggregation':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'extension':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'composition':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'dependency':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
addEdgeMarkers(svgPath, edgeData, url, id, diagramType);
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -12,7 +12,6 @@ import {
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
} from '../common/commonDb.js';
|
||||
import errorDiagram from '../error/errorDiagram.js';
|
||||
|
||||
const MERMAID_DOM_ID_PREFIX = 'flowchart-';
|
||||
let vertexCounter = 0;
|
||||
@ -92,7 +91,6 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop
|
||||
if (txt[0] === '"' && txt[txt.length - 1] === '"') {
|
||||
txt = txt.substring(1, txt.length - 1);
|
||||
}
|
||||
|
||||
vertices[id].text = txt;
|
||||
} else {
|
||||
if (vertices[id].text === undefined) {
|
||||
@ -160,11 +158,17 @@ export const addSingleLink = function (_start, _end, type) {
|
||||
if (edge?.length > 10) {
|
||||
edge.length = 10;
|
||||
}
|
||||
if (edges.length < 280) {
|
||||
if (edges.length < (config.maxEdges ?? 500)) {
|
||||
log.info('abc78 pushing edge...');
|
||||
edges.push(edge);
|
||||
} else {
|
||||
throw new Error('Too many edges');
|
||||
throw new Error(
|
||||
`Edge limit exceeded. ${edges.length} edges found, but the limit is ${config.maxEdges}.
|
||||
|
||||
Initialize mermaid with maxEdges set to a higher number to allow more edges.
|
||||
You cannot set this config via configuration inside the diagram as it is a secure config.
|
||||
You have to call mermaid.initialize.`
|
||||
);
|
||||
}
|
||||
};
|
||||
export const addLink = function (_start, _end, type) {
|
||||
@ -201,6 +205,13 @@ export const updateLinkInterpolate = function (positions, interp) {
|
||||
*/
|
||||
export const updateLink = function (positions, style) {
|
||||
positions.forEach(function (pos) {
|
||||
if (pos >= edges.length) {
|
||||
throw new Error(
|
||||
`The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${
|
||||
edges.length - 1
|
||||
}. (Help: Ensure that the index is within the range of existing edges.)`
|
||||
);
|
||||
}
|
||||
if (pos === 'default') {
|
||||
edges.defaultStyle = style;
|
||||
} else {
|
||||
@ -425,7 +436,7 @@ const setupToolTips = function (element) {
|
||||
tooltipElem
|
||||
.text(el.attr('title'))
|
||||
.style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
|
||||
.style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
|
||||
.style('top', window.scrollY + rect.bottom + 'px');
|
||||
tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>'));
|
||||
el.classed('hover', true);
|
||||
})
|
||||
@ -453,6 +464,7 @@ export const clear = function (ver = 'gen-1') {
|
||||
tooltips = {};
|
||||
firstGraphFlag = true;
|
||||
version = ver;
|
||||
config = getConfig();
|
||||
commonClear();
|
||||
};
|
||||
export const setGen = (ver) => {
|
||||
|
||||
@ -286,6 +286,30 @@ describe('[Style] when parsing', () => {
|
||||
expect(edges[0].type).toBe('arrow_point');
|
||||
});
|
||||
|
||||
it('should handle style definitions within number of edges', function () {
|
||||
expect(() =>
|
||||
flow.parser
|
||||
.parse(
|
||||
`graph TD
|
||||
A-->B
|
||||
linkStyle 1 stroke-width:1px;`
|
||||
)
|
||||
.toThrow(
|
||||
'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)'
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle style definitions within number of edges', function () {
|
||||
const res = flow.parser.parse(`graph TD
|
||||
A-->B
|
||||
linkStyle 0 stroke-width:1px;`);
|
||||
|
||||
const edges = flow.parser.yy.getEdges();
|
||||
|
||||
expect(edges[0].style[0]).toBe('stroke-width:1px');
|
||||
});
|
||||
|
||||
it('should handle multi-numbered style definitions with more then 1 digit in a row', function () {
|
||||
const res = flow.parser.parse(
|
||||
'graph TD\n' +
|
||||
|
||||
@ -535,6 +535,10 @@ describe('[Text] when parsing', () => {
|
||||
expect(vert['A'].text).toBe('this is an ellipse');
|
||||
});
|
||||
|
||||
it('should not freeze when ellipse text has a `(`', function () {
|
||||
expect(() => flow.parser.parse('graph\nX(- My Text (')).toThrowError();
|
||||
});
|
||||
|
||||
it('should handle text in diamond vertices with space', function () {
|
||||
const res = flow.parser.parse('graph TD;A(chimpansen hoppar)-->C;');
|
||||
|
||||
|
||||
@ -134,7 +134,7 @@ that id.
|
||||
<*>\s*\~\~[\~]+\s* return 'LINK';
|
||||
|
||||
<ellipseText>[-/\)][\)] { this.popState(); return '-)'; }
|
||||
<ellipseText>[^\(\)\[\]\{\}]|-/!\)+ return "TEXT"
|
||||
<ellipseText>[^\(\)\[\]\{\}]|-\!\)+ return "TEXT"
|
||||
<*>"(-" { this.pushState("ellipseText"); return '(-'; }
|
||||
|
||||
<text>"])" { this.popState(); return 'STADIUMEND'; }
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
const getStyles = (options) =>
|
||||
`
|
||||
.mermaid-main-font {
|
||||
font-family: "trebuchet ms", verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
|
||||
}
|
||||
|
||||
.exclude-range {
|
||||
fill: ${options.excludeBkgColor};
|
||||
}
|
||||
@ -45,11 +45,7 @@ const getStyles = (options) =>
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
// font-size: ${options.ganttFontSize};
|
||||
// text-height: 14px;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
|
||||
}
|
||||
|
||||
|
||||
@ -59,10 +55,11 @@ const getStyles = (options) =>
|
||||
stroke: ${options.gridColor};
|
||||
opacity: 0.8;
|
||||
shape-rendering: crispEdges;
|
||||
text {
|
||||
font-family: ${options.fontFamily};
|
||||
fill: ${options.textColor};
|
||||
}
|
||||
}
|
||||
|
||||
.grid .tick text {
|
||||
font-family: ${options.fontFamily};
|
||||
fill: ${options.textColor};
|
||||
}
|
||||
|
||||
.grid path {
|
||||
@ -89,33 +86,27 @@ const getStyles = (options) =>
|
||||
|
||||
.taskText {
|
||||
text-anchor: middle;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
|
||||
}
|
||||
|
||||
// .taskText:not([font-size]) {
|
||||
// font-size: ${options.ganttFontSize};
|
||||
// }
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: ${options.taskTextDarkColor};
|
||||
text-anchor: start;
|
||||
// font-size: ${options.ganttFontSize};
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: ${options.taskTextDarkColor};
|
||||
text-anchor: end;
|
||||
// font-size: ${options.ganttFontSize};
|
||||
}
|
||||
|
||||
|
||||
/* Special case clickable */
|
||||
|
||||
.task.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.taskText.clickable {
|
||||
cursor: pointer;
|
||||
fill: ${options.taskTextClickableColor} !important;
|
||||
@ -134,6 +125,7 @@ const getStyles = (options) =>
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0,
|
||||
@ -255,9 +247,8 @@ const getStyles = (options) =>
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: ${options.textColor} ;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
fill: ${options.titleColor || options.textColor};
|
||||
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -255,11 +255,12 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
|
||||
log.debug('in mergeBranch');
|
||||
};
|
||||
|
||||
export const cherryPick = function (sourceId, targetId, tag) {
|
||||
export const cherryPick = function (sourceId, targetId, tag, parentCommitId) {
|
||||
log.debug('Entering cherryPick:', sourceId, targetId, tag);
|
||||
sourceId = common.sanitizeText(sourceId, getConfig());
|
||||
targetId = common.sanitizeText(targetId, getConfig());
|
||||
tag = common.sanitizeText(tag, getConfig());
|
||||
parentCommitId = common.sanitizeText(parentCommitId, getConfig());
|
||||
|
||||
if (!sourceId || commits[sourceId] === undefined) {
|
||||
let error = new Error(
|
||||
@ -274,20 +275,21 @@ export const cherryPick = function (sourceId, targetId, tag) {
|
||||
};
|
||||
throw error;
|
||||
}
|
||||
|
||||
let sourceCommit = commits[sourceId];
|
||||
let sourceCommitBranch = sourceCommit.branch;
|
||||
if (sourceCommit.type === commitType.MERGE) {
|
||||
if (
|
||||
parentCommitId &&
|
||||
!(Array.isArray(sourceCommit.parents) && sourceCommit.parents.includes(parentCommitId))
|
||||
) {
|
||||
let error = new Error(
|
||||
'Incorrect usage of "cherryPick". Source commit should not be a merge commit'
|
||||
'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.'
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
if (sourceCommit.type === commitType.MERGE && !parentCommitId) {
|
||||
let error = new Error(
|
||||
'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.'
|
||||
);
|
||||
error.hash = {
|
||||
text: 'cherryPick ' + sourceId + ' ' + targetId,
|
||||
token: 'cherryPick ' + sourceId + ' ' + targetId,
|
||||
line: '1',
|
||||
loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
|
||||
expected: ['cherry-pick abc'],
|
||||
};
|
||||
throw error;
|
||||
}
|
||||
if (!targetId || commits[targetId] === undefined) {
|
||||
@ -327,7 +329,11 @@ export const cherryPick = function (sourceId, targetId, tag) {
|
||||
parents: [head == null ? null : head.id, sourceCommit.id],
|
||||
branch: curBranch,
|
||||
type: commitType.CHERRY_PICK,
|
||||
tag: tag ?? 'cherry-pick:' + sourceCommit.id,
|
||||
tag:
|
||||
tag ??
|
||||
`cherry-pick:${sourceCommit.id}${
|
||||
sourceCommit.type === commitType.MERGE ? `|parent:${parentCommitId}` : ''
|
||||
}`,
|
||||
};
|
||||
head = commit;
|
||||
commits[commit.id] = commit;
|
||||
|
||||
@ -673,6 +673,145 @@ describe('when parsing a gitGraph', function () {
|
||||
expect(commits[cherryPickCommitID].branch).toBe('main');
|
||||
});
|
||||
|
||||
it('should support cherry-picking of merge commits', function () {
|
||||
const str = `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"
|
||||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const commits = parser.yy.getCommits();
|
||||
const cherryPickCommitID = Object.keys(commits)[4];
|
||||
expect(commits[cherryPickCommitID].tag).toBe('cherry-pick:M|parent:B');
|
||||
expect(commits[cherryPickCommitID].branch).toBe('release');
|
||||
});
|
||||
|
||||
it('should support cherry-picking of merge commits with tag', function () {
|
||||
const str = `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:"ZERO" tag: "v1.0"
|
||||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const commits = parser.yy.getCommits();
|
||||
const cherryPickCommitID = Object.keys(commits)[4];
|
||||
expect(commits[cherryPickCommitID].tag).toBe('v1.0');
|
||||
expect(commits[cherryPickCommitID].branch).toBe('release');
|
||||
});
|
||||
|
||||
it('should support cherry-picking of merge commits with additional commit', function () {
|
||||
const str = `gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
commit id: "C"
|
||||
cherry-pick id: "M" tag: "v2.1:ZERO" parent:"ZERO"
|
||||
commit id: "D"
|
||||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const commits = parser.yy.getCommits();
|
||||
const cherryPickCommitID = Object.keys(commits)[5];
|
||||
expect(commits[cherryPickCommitID].tag).toBe('v2.1:ZERO');
|
||||
expect(commits[cherryPickCommitID].branch).toBe('release');
|
||||
});
|
||||
|
||||
it('should support cherry-picking of merge commits with empty tag', function () {
|
||||
const str = `gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
commit id: "C"
|
||||
cherry-pick id:"M" parent: "ZERO" tag:""
|
||||
commit id: "D"
|
||||
cherry-pick id:"M" tag:"" parent: "B"
|
||||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const commits = parser.yy.getCommits();
|
||||
const cherryPickCommitID = Object.keys(commits)[5];
|
||||
const cherryPickCommitID2 = Object.keys(commits)[7];
|
||||
expect(commits[cherryPickCommitID].tag).toBe('');
|
||||
expect(commits[cherryPickCommitID2].tag).toBe('');
|
||||
expect(commits[cherryPickCommitID].branch).toBe('release');
|
||||
});
|
||||
|
||||
it('should fail cherry-picking of merge commits if the parent of merge commits is not specified', function () {
|
||||
expect(() =>
|
||||
parser
|
||||
.parse(
|
||||
`gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
commit id: "C"
|
||||
cherry-pick id:"M"
|
||||
`
|
||||
)
|
||||
.toThrow(
|
||||
'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.'
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it('should fail cherry-picking of merge commits when the parent provided is not an immediate parent of cherry picked commit', function () {
|
||||
expect(() =>
|
||||
parser
|
||||
.parse(
|
||||
`gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
commit id: "C"
|
||||
cherry-pick id:"M" parent: "A"
|
||||
`
|
||||
)
|
||||
.toThrow(
|
||||
'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.'
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw error when try to branch existing branch: main', function () {
|
||||
const str = `gitGraph
|
||||
commit
|
||||
|
||||
@ -338,26 +338,34 @@ const drawCommits = (svg, commits, modifyGraph) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Detect if there are other commits between commit1's x-position and commit2's x-position on the
|
||||
* same branch as commit2.
|
||||
* Detect if there are commits
|
||||
* between commitA's x-position
|
||||
* and commitB's x-position on the
|
||||
* same branch as commitA, where
|
||||
* commitA isn't main
|
||||
*
|
||||
* @param {any} commit1
|
||||
* @param {any} commit2
|
||||
* @param {any} commitA
|
||||
* @param {any} commitB
|
||||
* @param branchToGetCurve
|
||||
* @param p1
|
||||
* @param p2
|
||||
* @param allCommits
|
||||
* @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
|
||||
* @returns {boolean}
|
||||
* If there are commits between
|
||||
* commitA's x-position
|
||||
* and commitB's x-position
|
||||
* on the source branch, where
|
||||
* source branch is not main
|
||||
* return true
|
||||
*/
|
||||
const hasOverlappingCommits = (commit1, commit2, allCommits) => {
|
||||
// Find commits on the same branch as commit2
|
||||
const keys = Object.keys(allCommits);
|
||||
const overlappingComits = keys.filter((key) => {
|
||||
return (
|
||||
allCommits[key].branch === commit2.branch &&
|
||||
allCommits[key].seq > commit1.seq &&
|
||||
allCommits[key].seq < commit2.seq
|
||||
);
|
||||
const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
|
||||
const commitBIsFurthest = dir === 'TB' ? p1.x < p2.x : p1.y < p2.y;
|
||||
const branchToGetCurve = commitBIsFurthest ? commitB.branch : commitA.branch;
|
||||
const isOnBranchToGetCurve = (x) => x.branch === branchToGetCurve;
|
||||
const isBetweenCommits = (x) => x.seq > commitA.seq && x.seq < commitB.seq;
|
||||
return Object.values(allCommits).some((commitX) => {
|
||||
return isBetweenCommits(commitX) && isOnBranchToGetCurve(commitX);
|
||||
});
|
||||
|
||||
return overlappingComits.length > 0;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -388,49 +396,61 @@ const findLane = (y1, y2, depth = 0) => {
|
||||
* Draw the lines between the commits. They were arrows initially.
|
||||
*
|
||||
* @param {any} svg
|
||||
* @param {any} commit1
|
||||
* @param {any} commit2
|
||||
* @param {any} commitA
|
||||
* @param {any} commitB
|
||||
* @param {any} allCommits
|
||||
*/
|
||||
const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
const p1 = commitPos[commit1.id];
|
||||
const p2 = commitPos[commit2.id];
|
||||
const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
|
||||
// log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
|
||||
const drawArrow = (svg, commitA, commitB, allCommits) => {
|
||||
const p1 = commitPos[commitA.id]; // arrowStart
|
||||
const p2 = commitPos[commitB.id]; // arrowEnd
|
||||
const arrowNeedsRerouting = shouldRerouteArrow(commitA, commitB, p1, p2, allCommits);
|
||||
// log.debug('drawArrow', p1, p2, arrowNeedsRerouting, commitA.id, commitB.id);
|
||||
|
||||
// Lower-right quadrant logic; top-left is 0,0
|
||||
|
||||
let arc = '';
|
||||
let arc2 = '';
|
||||
let radius = 0;
|
||||
let offset = 0;
|
||||
let colorClassNum = branchPos[commit2.branch].index;
|
||||
let colorClassNum = branchPos[commitB.branch].index;
|
||||
let lineDef;
|
||||
if (overlappingCommits) {
|
||||
if (arrowNeedsRerouting) {
|
||||
arc = 'A 10 10, 0, 0, 0,';
|
||||
arc2 = 'A 10 10, 0, 0, 1,';
|
||||
radius = 10;
|
||||
offset = 10;
|
||||
// Figure out the color of the arrow,arrows going down take the color from the destination branch
|
||||
colorClassNum = branchPos[commit2.branch].index;
|
||||
|
||||
const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
|
||||
const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
|
||||
|
||||
if (dir === 'TB') {
|
||||
if (p1.x < p2.x) {
|
||||
// Source commit is on branch position left of destination commit
|
||||
// so render arrow rightward with colour of destination branch
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
|
||||
p1.y + offset
|
||||
} L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
|
||||
} else {
|
||||
// Source commit is on branch position right of destination commit
|
||||
// so render arrow leftward with colour of source branch
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
|
||||
p1.y + offset
|
||||
} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
} else {
|
||||
if (p1.y < p2.y) {
|
||||
// Source commit is on branch positioned above destination commit
|
||||
// so render arrow downward with colour of destination branch
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
|
||||
p1.x + offset
|
||||
} ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
|
||||
} else {
|
||||
// Source commit is on branch positioned below destination commit
|
||||
// so render arrow upward with colour of source branch
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
|
||||
p1.x + offset
|
||||
} ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
|
||||
@ -445,7 +465,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
offset = 20;
|
||||
|
||||
// Figure out the color of the arrow,arrows going down take the color from the destination branch
|
||||
colorClassNum = branchPos[commit2.branch].index;
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
|
||||
p1.y + offset
|
||||
@ -458,14 +478,14 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
offset = 20;
|
||||
|
||||
// Arrows going up take the color from the source branch
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
|
||||
p2.y
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
|
||||
if (p1.x === p2.x) {
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
|
||||
p2.y + radius
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
@ -475,10 +495,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
|
||||
// Figure out the color of the arrow,arrows going down take the color from the destination branch
|
||||
colorClassNum = branchPos[commit2.branch].index;
|
||||
|
||||
// Arrows going up take the color from the target branch
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
@ -487,16 +505,15 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
|
||||
// Arrows going up take the color from the source branch
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
}
|
||||
|
||||
if (p1.y === p2.y) {
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
|
||||
@ -39,6 +39,7 @@ branch(?=\s|$) return 'BRANCH';
|
||||
"order:" return 'ORDER';
|
||||
merge(?=\s|$) return 'MERGE';
|
||||
cherry\-pick(?=\s|$) return 'CHERRY_PICK';
|
||||
"parent:" return 'PARENT_COMMIT'
|
||||
// "reset" return 'RESET';
|
||||
checkout(?=\s|$) return 'CHECKOUT';
|
||||
"LR" return 'DIR';
|
||||
@ -109,10 +110,17 @@ branchStatement
|
||||
|
||||
cherryPickStatement
|
||||
: CHERRY_PICK COMMIT_ID STR {yy.cherryPick($3, '', undefined)}
|
||||
| CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR {yy.cherryPick($3, '', undefined,$5)}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR {yy.cherryPick($3, '', $5)}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '')}
|
||||
| CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG STR {yy.cherryPick($3, '', $7,$5)}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR PARENT_COMMIT STR {yy.cherryPick($3, '', $5,$7)}
|
||||
| CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR {yy.cherryPick($5, '', $3)}
|
||||
| CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR {yy.cherryPick($3, '', '')}
|
||||
| CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR {yy.cherryPick($5, '', '')}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '')}
|
||||
| CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '',$5)}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR PARENT_COMMIT STR {yy.cherryPick($3, '', '',$7)}
|
||||
| CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR PARENT_COMMIT STR {yy.cherryPick($5, '', $3,$7)}
|
||||
| CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR PARENT_COMMIT STR{yy.cherryPick($5, '', '',$7)}
|
||||
;
|
||||
|
||||
mergeStatement
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import type d3 from 'd3';
|
||||
import { scaleOrdinal, pie as d3pie, arc } from 'd3';
|
||||
|
||||
import { log } from '../../logger.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
@ -38,33 +37,25 @@ const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
|
||||
*/
|
||||
export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
log.debug('rendering pie chart\n' + text);
|
||||
|
||||
const db = diagObj.db as PieDB;
|
||||
const globalConfig: MermaidConfig = getConfig();
|
||||
const pieConfig: Required<PieDiagramConfig> = cleanAndMerge(db.getConfig(), globalConfig.pie);
|
||||
|
||||
const height = 450;
|
||||
// TODO: remove document width
|
||||
const width: number =
|
||||
document.getElementById(id)?.parentElement?.offsetWidth ?? pieConfig.useWidth;
|
||||
const svg: SVG = selectSvgElement(id);
|
||||
// Set viewBox
|
||||
svg.attr('viewBox', `0 0 ${width} ${height}`);
|
||||
configureSvgSize(svg, height, width, pieConfig.useMaxWidth);
|
||||
|
||||
const MARGIN = 40;
|
||||
const LEGEND_RECT_SIZE = 18;
|
||||
const LEGEND_SPACING = 4;
|
||||
|
||||
const height = 450;
|
||||
const pieWidth: number = height;
|
||||
const svg: SVG = selectSvgElement(id);
|
||||
const group: Group = svg.append('g');
|
||||
group.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
|
||||
const sections: Sections = db.getSections();
|
||||
group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
|
||||
|
||||
const { themeVariables } = globalConfig;
|
||||
let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
|
||||
outerStrokeWidth ??= 2;
|
||||
|
||||
const textPosition: number = pieConfig.textPosition;
|
||||
const radius: number = Math.min(width, height) / 2 - MARGIN;
|
||||
const radius: number = Math.min(pieWidth, height) / 2 - MARGIN;
|
||||
// Shape helper to build arcs:
|
||||
const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
|
||||
d3.PieArcDatum<D3Sections>
|
||||
@ -84,7 +75,6 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
.attr('r', radius + outerStrokeWidth / 2)
|
||||
.attr('class', 'pieOuterCircle');
|
||||
|
||||
const sections: Sections = db.getSections();
|
||||
const arcs: d3.PieArcDatum<D3Sections>[] = createPieArcs(sections);
|
||||
|
||||
const myGeneratedColors = [
|
||||
@ -177,6 +167,19 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
}
|
||||
return label;
|
||||
});
|
||||
|
||||
const longestTextWidth = Math.max(
|
||||
...legend
|
||||
.selectAll('text')
|
||||
.nodes()
|
||||
.map((node) => (node as Element)?.getBoundingClientRect().width ?? 0)
|
||||
);
|
||||
|
||||
const totalWidth = pieWidth + MARGIN + LEGEND_RECT_SIZE + LEGEND_SPACING + longestTextWidth;
|
||||
|
||||
// Set viewBox
|
||||
svg.attr('viewBox', `0 0 ${totalWidth} ${height}`);
|
||||
configureSvgSize(svg, height, totalWidth, pieConfig.useMaxWidth);
|
||||
};
|
||||
|
||||
export const renderer = { draw };
|
||||
|
||||
@ -16,7 +16,7 @@ import {
|
||||
sankeyCenter as d3SankeyCenter,
|
||||
sankeyJustify as d3SankeyJustify,
|
||||
} from 'd3-sankey';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { setupGraphViewbox } from '../../setupGraphViewbox.js';
|
||||
import { Uid } from '../../rendering-util/uid.js';
|
||||
import type { SankeyNodeAlignment } from '../../config.type.js';
|
||||
|
||||
@ -70,12 +70,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
||||
const suffix = conf?.suffix ?? defaultSankeyConfig.suffix!;
|
||||
const showValues = conf?.showValues ?? defaultSankeyConfig.showValues!;
|
||||
|
||||
// FIX: using max width prevents height from being set, is it intended?
|
||||
// to add height directly one can use `svg.attr('height', height)`
|
||||
//
|
||||
// @ts-ignore TODO: svg type vs selection mismatch
|
||||
configureSvgSize(svg, height, width, useMaxWidth);
|
||||
|
||||
// Prepare data for construction based on diagObj.db
|
||||
// This must be a mutable object with `nodes` and `links` properties:
|
||||
//
|
||||
@ -208,6 +202,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
||||
.attr('d', d3SankeyLinkHorizontal())
|
||||
.attr('stroke', coloring)
|
||||
.attr('stroke-width', (d: any) => Math.max(1, d.width));
|
||||
|
||||
setupGraphViewbox(undefined, svg, 0, useMaxWidth);
|
||||
};
|
||||
|
||||
export default {
|
||||
|
||||
@ -829,6 +829,11 @@ export const draw = function (_text: string, id: string, _version: string, diagO
|
||||
bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
|
||||
}
|
||||
|
||||
log.debug('createdActors', createdActors);
|
||||
log.debug('destroyedActors', destroyedActors);
|
||||
|
||||
drawActors(diagram, actors, actorKeys, false);
|
||||
|
||||
// Draw the messages/signals
|
||||
let sequenceIndex = 1;
|
||||
let sequenceIndexStep = 1;
|
||||
@ -1028,14 +1033,12 @@ export const draw = function (_text: string, id: string, _version: string, diagO
|
||||
}
|
||||
});
|
||||
|
||||
log.debug('createdActors', createdActors);
|
||||
log.debug('destroyedActors', destroyedActors);
|
||||
|
||||
drawActors(diagram, actors, actorKeys, false);
|
||||
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
|
||||
|
||||
if (conf.mirrorActors) {
|
||||
drawActors(diagram, actors, actorKeys, true);
|
||||
}
|
||||
|
||||
backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
|
||||
fixLifeLineHeights(diagram, actors, actorKeys, conf);
|
||||
|
||||
|
||||
@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
|
||||
const center = actor.x + actor.width / 2;
|
||||
const centerY = actorY + 5;
|
||||
|
||||
const boxpluslineGroup = elem.append('g').lower();
|
||||
const boxpluslineGroup = elem.append('g');
|
||||
var g = boxpluslineGroup;
|
||||
|
||||
if (!isFooter) {
|
||||
|
||||
@ -4,7 +4,10 @@ import { defineConfig, MarkdownOptions } from 'vitepress';
|
||||
|
||||
const allMarkdownTransformers: MarkdownOptions = {
|
||||
// the shiki theme to highlight code blocks
|
||||
theme: 'github-dark',
|
||||
theme: {
|
||||
light: 'github-light',
|
||||
dark: 'github-dark',
|
||||
},
|
||||
config: async (md) => {
|
||||
await MermaidExample(md);
|
||||
},
|
||||
@ -91,7 +94,7 @@ function nav() {
|
||||
items: [
|
||||
{
|
||||
text: 'Changelog',
|
||||
link: 'https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md',
|
||||
link: 'https://github.com/mermaid-js/mermaid/releases',
|
||||
},
|
||||
{
|
||||
text: 'Contributing',
|
||||
@ -150,7 +153,7 @@ function sidebarSyntax() {
|
||||
{ text: 'Timeline 🔥', link: '/syntax/timeline' },
|
||||
{ text: 'Zenuml 🔥', link: '/syntax/zenuml' },
|
||||
{ text: 'Sankey 🔥', link: '/syntax/sankey' },
|
||||
{ text: 'XYChart 🔥', link: '/syntax/xychart' },
|
||||
{ text: 'XYChart 🔥', link: '/syntax/xyChart' },
|
||||
{ text: 'Other Examples', link: '/syntax/examples' },
|
||||
],
|
||||
},
|
||||
|
||||
@ -4,9 +4,8 @@
|
||||
|
||||
## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
|
||||
|
||||
- Search in Discussions
|
||||
- Search in open Issues
|
||||
- Search in closed Issues
|
||||
- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
|
||||
- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)
|
||||
|
||||
If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
|
||||
Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.
|
||||
|
||||
@ -4,8 +4,8 @@ When mermaid starts, configuration is extracted to determine a configuration to
|
||||
|
||||
- The default configuration
|
||||
- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
|
||||
- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
|
||||
- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
|
||||
- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
|
||||
- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
|
||||
|
||||
**The render config** is configuration that is used when rendering by applying these configurations.
|
||||
|
||||
|
||||
@ -33,12 +33,19 @@ Below are a list of community plugins and integrations created with Mermaid.
|
||||
- [Notion](https://notion.so) ✅
|
||||
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
|
||||
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
|
||||
- [NotesHub](https://noteshub.app) ✅
|
||||
- [GitBook](https://gitbook.com)
|
||||
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
||||
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
||||
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
||||
- [LiveBook](https://livebook.dev) ✅
|
||||
- [Atlassian Products](https://www.atlassian.com)
|
||||
- [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
|
||||
- [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
|
||||
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
|
||||
- [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
|
||||
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
|
||||
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
|
||||
@ -97,9 +104,13 @@ Communication tools and platforms
|
||||
- [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
|
||||
- [NodeBB](https://nodebb.org)
|
||||
- [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
|
||||
- [Slack](https://slack.com)
|
||||
- [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
|
||||
|
||||
### Wikis
|
||||
|
||||
- [PmWiki](https://www.pmwiki.org)
|
||||
- [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
|
||||
- [MediaWiki](https://www.mediawiki.org)
|
||||
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
|
||||
- [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
|
||||
@ -167,7 +178,9 @@ Communication tools and platforms
|
||||
|
||||
### Document Generation
|
||||
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
|
||||
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
|
||||
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
||||
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
||||
- [remark](https://remark.js.org/)
|
||||
@ -222,5 +235,5 @@ Communication tools and platforms
|
||||
- [ExDoc](https://github.com/elixir-lang/ex_doc)
|
||||
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
|
||||
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
|
||||
- [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
|
||||
- [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/reference#markdown_element)
|
||||
- [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element)
|
||||
- [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams)
|
||||
|
||||
@ -97,7 +97,7 @@ To Deploy Mermaid:
|
||||
</script>
|
||||
```
|
||||
|
||||
**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` 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 `<div>` or `<pre>` 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)
|
||||
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
# Announcements
|
||||
|
||||
<br />
|
||||
Check out our latest blog posts below. See more blog posts [here](blog.md).
|
||||
|
||||
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
## [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.
|
||||
|
||||
@ -1,5 +1,23 @@
|
||||
# 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
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
"preview-https": "pnpm build && serve .vitepress/dist",
|
||||
"preview-https-no-prefetch": "pnpm build-no-prefetch && serve .vitepress/dist",
|
||||
"prefetch": "pnpm fetch-contributors && pnpm fetch-avatars",
|
||||
"fetch-avatars": "ts-node-esm .vitepress/scripts/fetch-avatars.ts",
|
||||
"fetch-contributors": "ts-node-esm .vitepress/scripts/fetch-contributors.ts"
|
||||
"fetch-avatars": "tsx .vitepress/scripts/fetch-avatars.ts",
|
||||
"fetch-contributors": "tsx .vitepress/scripts/fetch-contributors.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^10.1.0",
|
||||
@ -22,17 +22,17 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/carbon": "^1.1.16",
|
||||
"@unocss/reset": "^0.56.0",
|
||||
"@vite-pwa/vitepress": "^0.2.0",
|
||||
"@unocss/reset": "^0.58.0",
|
||||
"@vite-pwa/vitepress": "^0.3.0",
|
||||
"@vitejs/plugin-vue": "^4.2.1",
|
||||
"fast-glob": "^3.2.12",
|
||||
"https-localhost": "^4.7.1",
|
||||
"pathe": "^1.1.0",
|
||||
"unocss": "^0.56.0",
|
||||
"unplugin-vue-components": "^0.25.0",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-pwa": "^0.16.0",
|
||||
"vitepress": "1.0.0-rc.22",
|
||||
"unocss": "^0.58.0",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^4.4.12",
|
||||
"vite-plugin-pwa": "^0.17.0",
|
||||
"vitepress": "1.0.0-rc.31",
|
||||
"workbox-window": "^7.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -257,7 +257,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.")
|
||||
|
||||
|
||||
@ -143,9 +143,9 @@ class BankAccount{
|
||||
|
||||
#### Generic Types
|
||||
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` 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<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
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
|
||||
@ -281,8 +281,6 @@ And `Link` can be one of:
|
||||
|
||||
A namespace groups classes.
|
||||
|
||||
Code:
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
namespace BaseShapes {
|
||||
@ -520,9 +518,22 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
||||
|
||||
## Styling
|
||||
|
||||
### Styling a node
|
||||
### Styling a node (v<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
#### 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
|
||||
<style>
|
||||
|
||||
@ -293,7 +293,7 @@ flowchart TB
|
||||
A & B--> C & D
|
||||
```
|
||||
|
||||
If you describe the same diagram using the the basic syntax, it will take four lines. A
|
||||
If you describe the same diagram using the basic syntax, it will take four lines. A
|
||||
word of warning, one could go overboard with this making the flowchart harder to read in
|
||||
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
|
||||
This goes for expressive syntaxes as well.
|
||||
|
||||
@ -244,24 +244,29 @@ A few important rules to note here are:
|
||||
1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
|
||||
2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
|
||||
3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
|
||||
4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
|
||||
5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
|
||||
|
||||
Let see an example:
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
commit id:"TWO"
|
||||
cherry-pick id:"A"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
branch release
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
merge develop id:"MERGE"
|
||||
commit id:"TWO"
|
||||
checkout release
|
||||
cherry-pick id:"MERGE" parent:"B"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
```
|
||||
|
||||
## Gitgraph specific configuration options
|
||||
|
||||
@ -2,7 +2,7 @@ import mermaid from './mermaid.js';
|
||||
import { mermaidAPI } from './mermaidAPI.js';
|
||||
import './diagram-api/diagram-orchestration.js';
|
||||
import { addDiagrams } from './diagram-api/diagram-orchestration.js';
|
||||
import { beforeAll, describe, it, expect, vi } from 'vitest';
|
||||
import { beforeAll, describe, it, expect, vi, afterEach } from 'vitest';
|
||||
import type { DiagramDefinition } from './diagram-api/types.js';
|
||||
|
||||
beforeAll(async () => {
|
||||
@ -89,7 +89,7 @@ describe('when using mermaid and ', () => {
|
||||
).resolves.not.toThrow();
|
||||
// should still render, even if lazyLoadedDiagrams fails
|
||||
expect(mermaidAPI.render).toHaveBeenCalled();
|
||||
});
|
||||
}, 20_000);
|
||||
|
||||
it('should defer diagram load based on parameter', async () => {
|
||||
let loaded = false;
|
||||
|
||||
@ -38,8 +38,6 @@ import type { MermaidConfig } from './config.type.js';
|
||||
|
||||
import mermaidAPI, { removeExistingElements } from './mermaidAPI.js';
|
||||
import {
|
||||
encodeEntities,
|
||||
decodeEntities,
|
||||
createCssStyles,
|
||||
createUserStyles,
|
||||
appendDivSvgG,
|
||||
@ -68,6 +66,8 @@ vi.mock('stylis', () => {
|
||||
};
|
||||
});
|
||||
import { compile, serialize } from 'stylis';
|
||||
import { decodeEntities, encodeEntities } from './utils.js';
|
||||
import { Diagram } from './Diagram.js';
|
||||
|
||||
/**
|
||||
* @see https://vitest.dev/guide/mocking.html Mock part of a module
|
||||
@ -745,4 +745,16 @@ describe('mermaidAPI', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDiagramFromText', () => {
|
||||
it('should clean up comments when present in diagram definition', async () => {
|
||||
const diagram = await mermaidAPI.getDiagramFromText(
|
||||
`flowchart LR
|
||||
%% This is a comment A -- text --> B{node}
|
||||
A -- text --> B -- text2 --> C`
|
||||
);
|
||||
expect(diagram).toBeInstanceOf(Diagram);
|
||||
expect(diagram.type).toBe('flowchart-v2');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -17,7 +17,7 @@ import { compile, serialize, stringify } from 'stylis';
|
||||
import { version } from '../package.json';
|
||||
import * as configApi from './config.js';
|
||||
import { addDiagrams } from './diagram-api/diagram-orchestration.js';
|
||||
import { Diagram, getDiagramFromText } from './Diagram.js';
|
||||
import { Diagram, getDiagramFromText as getDiagramFromTextInternal } from './Diagram.js';
|
||||
import errorRenderer from './diagrams/error/errorRenderer.js';
|
||||
import { attachFunctions } from './interactionDb.js';
|
||||
import { log, setLogLevel } from './logger.js';
|
||||
@ -28,8 +28,9 @@ import type { MermaidConfig } from './config.type.js';
|
||||
import { evaluate } from './diagrams/common/common.js';
|
||||
import isEmpty from 'lodash-es/isEmpty.js';
|
||||
import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
|
||||
import type { DiagramStyleClassDef } from './diagram-api/types.js';
|
||||
import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
|
||||
import { preprocessDiagram } from './preprocess.js';
|
||||
import { decodeEntities } from './utils.js';
|
||||
|
||||
const MAX_TEXTLENGTH = 50_000;
|
||||
const MAX_TEXTLENGTH_EXCEEDED_MSG =
|
||||
@ -110,43 +111,6 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param text - text to be encoded
|
||||
* @returns
|
||||
*/
|
||||
export const encodeEntities = function (text: string): string {
|
||||
let txt = text;
|
||||
|
||||
txt = txt.replace(/style.*:\S*#.*;/g, function (s): string {
|
||||
return s.substring(0, s.length - 1);
|
||||
});
|
||||
txt = txt.replace(/classDef.*:\S*#.*;/g, function (s): string {
|
||||
return s.substring(0, s.length - 1);
|
||||
});
|
||||
|
||||
txt = txt.replace(/#\w+;/g, function (s) {
|
||||
const innerTxt = s.substring(1, s.length - 1);
|
||||
|
||||
const isInt = /^\+?\d+$/.test(innerTxt);
|
||||
if (isInt) {
|
||||
return 'fl°°' + innerTxt + '¶ß';
|
||||
} else {
|
||||
return 'fl°' + innerTxt + '¶ß';
|
||||
}
|
||||
});
|
||||
|
||||
return txt;
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* @param text - text to be decoded
|
||||
* @returns
|
||||
*/
|
||||
export const decodeEntities = function (text: string): string {
|
||||
return text.replace(/fl°°/g, '&#').replace(/fl°/g, '&').replace(/¶ß/g, ';');
|
||||
};
|
||||
|
||||
// append !important; to each cssClass followed by a final !important, all enclosed in { }
|
||||
//
|
||||
/**
|
||||
@ -436,8 +400,6 @@ const render = async function (
|
||||
appendDivSvgG(root, id, enclosingDivID);
|
||||
}
|
||||
|
||||
text = encodeEntities(text);
|
||||
|
||||
// -------------------------------------------------------------------------------
|
||||
// Create the diagram
|
||||
|
||||
@ -557,6 +519,11 @@ function initialize(options: MermaidConfig = {}) {
|
||||
addDiagrams();
|
||||
}
|
||||
|
||||
const getDiagramFromText = (text: string, metadata: Pick<DiagramMetadata, 'title'> = {}) => {
|
||||
const { code } = preprocessDiagram(text);
|
||||
return getDiagramFromTextInternal(code, metadata);
|
||||
};
|
||||
|
||||
/**
|
||||
* Add accessibility (a11y) information to the diagram.
|
||||
*
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
import type { Group } from '../diagram-api/types.js';
|
||||
import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
|
||||
import { log } from '../logger.js';
|
||||
import { decodeEntities } from '../mermaidAPI.js';
|
||||
import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
|
||||
import { decodeEntities } from '../utils.js';
|
||||
import { splitLineToFitWidth } from './splitText.js';
|
||||
import type { MarkdownLine, MarkdownWord } from './types.js';
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user