mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge branch 'next' into feat/948_packetDiagram
* next: (193 commits) Update all patch dependencies Fix docs Update packages/mermaid/src/docs/community/questions-and-suggestions.md Update packages/mermaid/src/diagrams/class/classRenderer-v2.ts update edge ids draw top actors with lines first followed by messages Bump GitHub workflow actions to latest versions Update docs Documentation: clarify sentence Fix lint Fix typo fix typo Add new Atlassian integrations chore(deps): update all patch dependencies Update demos/sequence.html chore: release v10.6.1 fix fix fix: render the participants in same order as they are created fix(flow): fix invalid ellipseText regex ...
This commit is contained in:
Sidharth Vinod
commit
ce6bfcb7f5
@ -17,6 +17,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
|
|||||||
'er',
|
'er',
|
||||||
'pie',
|
'pie',
|
||||||
'quadrantChart',
|
'quadrantChart',
|
||||||
|
'xyChart',
|
||||||
'requirement',
|
'requirement',
|
||||||
'mindmap',
|
'mindmap',
|
||||||
'timeline',
|
'timeline',
|
||||||
@ -35,7 +36,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
|
|||||||
* @param mermaidConfigSchema - The Mermaid JSON Schema to use.
|
* @param mermaidConfigSchema - The Mermaid JSON Schema to use.
|
||||||
* @returns The default mermaid config object.
|
* @returns The default mermaid config object.
|
||||||
*/
|
*/
|
||||||
export function generateDefaults(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
|
function generateDefaults(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
|
||||||
const ajv = new Ajv2019({
|
const ajv = new Ajv2019({
|
||||||
useDefaults: true,
|
useDefaults: true,
|
||||||
allowUnionTypes: true,
|
allowUnionTypes: true,
|
||||||
|
|||||||
@ -49,8 +49,10 @@ module.exports = {
|
|||||||
'no-unused-vars': 'off',
|
'no-unused-vars': 'off',
|
||||||
'cypress/no-async-tests': 'off',
|
'cypress/no-async-tests': 'off',
|
||||||
'@typescript-eslint/consistent-type-imports': 'error',
|
'@typescript-eslint/consistent-type-imports': 'error',
|
||||||
|
'@typescript-eslint/no-explicit-any': 'warn',
|
||||||
'@typescript-eslint/no-floating-promises': 'error',
|
'@typescript-eslint/no-floating-promises': 'error',
|
||||||
'@typescript-eslint/no-misused-promises': 'error',
|
'@typescript-eslint/no-misused-promises': 'error',
|
||||||
|
'@typescript-eslint/no-unused-vars': 'warn',
|
||||||
'@typescript-eslint/ban-ts-comment': [
|
'@typescript-eslint/ban-ts-comment': [
|
||||||
'error',
|
'error',
|
||||||
{
|
{
|
||||||
|
|||||||
5
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
5
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
@ -17,6 +17,9 @@ body:
|
|||||||
- Use a clear and concise title
|
- Use a clear and concise title
|
||||||
- Fill out the text fields with as much detail as possible.
|
- Fill out the text fields with as much detail as possible.
|
||||||
- Never be shy to give us screenshots and/or code samples. It will help!
|
- Never be shy to give us screenshots and/or code samples. It will help!
|
||||||
|
|
||||||
|
There is a chance that the bug is already fixed in the git `develop` branch, but is not released yet.
|
||||||
|
So please check in [Live Editor - Develop](https://develop.git.mermaid.live) before raising an issue.
|
||||||
- type: textarea
|
- type: textarea
|
||||||
attributes:
|
attributes:
|
||||||
label: Description
|
label: Description
|
||||||
@ -43,7 +46,7 @@ body:
|
|||||||
attributes:
|
attributes:
|
||||||
label: Code Sample
|
label: Code Sample
|
||||||
description: |-
|
description: |-
|
||||||
If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
|
If applicable, add the code sample or a link to the [Live Editor - Develop](https://develop.git.mermaid.live).
|
||||||
Any text pasted here will be rendered as a Code block.
|
Any text pasted here will be rendered as a Code block.
|
||||||
render: text
|
render: text
|
||||||
- type: textarea
|
- type: textarea
|
||||||
|
|||||||
8
.github/ISSUE_TEMPLATE/config.yml
vendored
8
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -7,8 +7,14 @@ contact_links:
|
|||||||
url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
|
url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
|
||||||
about: Join our Community on Slack for Help and a casual chat.
|
about: Join our Community on Slack for Help and a casual chat.
|
||||||
- name: Documentation
|
- name: Documentation
|
||||||
url: https://mermaid-js.github.io
|
url: https://mermaid.js.org
|
||||||
about: Read our documentation for all that Mermaid.js can offer.
|
about: Read our documentation for all that Mermaid.js can offer.
|
||||||
- name: Live Editor
|
- name: Live Editor
|
||||||
url: https://mermaid.live
|
url: https://mermaid.live
|
||||||
about: Try the live editor to preview graphs in no time.
|
about: Try the live editor to preview graphs in no time.
|
||||||
|
- name: Live Editor - Develop
|
||||||
|
url: https://develop.git.mermaid.live
|
||||||
|
about: Try unreleased changes in the develop branch.
|
||||||
|
- name: Live Editor - Next
|
||||||
|
url: https://next.git.mermaid.live
|
||||||
|
about: Try unreleased changes in the next branch.
|
||||||
|
|||||||
6
.github/workflows/build-docs.yml
vendored
6
.github/workflows/build-docs.yml
vendored
@ -16,12 +16,12 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
|
|
||||||
- name: Setup Node.js
|
- name: Setup Node.js
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: 18
|
node-version: 18
|
||||||
@ -29,7 +29,7 @@ jobs:
|
|||||||
- name: Install Packages
|
- name: Install Packages
|
||||||
run: pnpm install --frozen-lockfile
|
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')) }}
|
if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
|
||||||
run: pnpm --filter mermaid run docs:verify-version
|
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:
|
matrix:
|
||||||
node-version: [18.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: ${{ matrix.node-version }}
|
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
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout repository
|
- name: Checkout repository
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
- name: Check for difference in README.md and docs/README.md
|
- name: Check for difference in README.md and docs/README.md
|
||||||
run: |
|
run: |
|
||||||
|
|||||||
2
.github/workflows/checks.yml
vendored
2
.github/workflows/checks.yml
vendored
@ -15,7 +15,7 @@ jobs:
|
|||||||
name: check tests
|
name: check tests
|
||||||
if: github.repository_owner == 'mermaid-js'
|
if: github.repository_owner == 'mermaid-js'
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
with:
|
with:
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
- uses: testomatio/check-tests@stable
|
- uses: testomatio/check-tests@stable
|
||||||
|
|||||||
2
.github/workflows/codeql.yml
vendored
2
.github/workflows/codeql.yml
vendored
@ -29,7 +29,7 @@ jobs:
|
|||||||
|
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout repository
|
- name: Checkout repository
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
# Initializes the CodeQL tools for scanning.
|
# Initializes the CodeQL tools for scanning.
|
||||||
- name: Initialize CodeQL
|
- name: Initialize CodeQL
|
||||||
|
|||||||
4
.github/workflows/dependency-review.yml
vendored
4
.github/workflows/dependency-review.yml
vendored
@ -1,6 +1,6 @@
|
|||||||
# Dependency Review Action
|
# 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
|
# 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
|
# 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
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: 'Checkout Repository'
|
- name: 'Checkout Repository'
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
- name: 'Dependency Review'
|
- name: 'Dependency Review'
|
||||||
uses: actions/dependency-review-action@v3
|
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: |
|
run: |
|
||||||
echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this 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: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: ${{ matrix.node-version }}
|
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]
|
node-version: [18.x]
|
||||||
containers: [1, 2, 3, 4]
|
containers: [1, 2, 3, 4]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: ${{ matrix.node-version }}
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|
||||||
|
|||||||
2
.github/workflows/link-checker.yml
vendored
2
.github/workflows/link-checker.yml
vendored
@ -26,7 +26,7 @@ jobs:
|
|||||||
# lychee only uses the GITHUB_TOKEN to avoid rate-limiting
|
# lychee only uses the GITHUB_TOKEN to avoid rate-limiting
|
||||||
contents: read
|
contents: read
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- name: Restore lychee cache
|
- name: Restore lychee cache
|
||||||
uses: actions/cache@v3
|
uses: actions/cache@v3
|
||||||
|
|||||||
4
.github/workflows/lint.yml
vendored
4
.github/workflows/lint.yml
vendored
@ -20,13 +20,13 @@ jobs:
|
|||||||
matrix:
|
matrix:
|
||||||
node-version: [18.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: ${{ matrix.node-version }}
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|||||||
@ -16,7 +16,7 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout Repository
|
- name: Checkout Repository
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
- name: Validate Configuration
|
- name: Validate Configuration
|
||||||
uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
|
uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
|
||||||
with:
|
with:
|
||||||
|
|||||||
4
.github/workflows/publish-docs.yml
vendored
4
.github/workflows/publish-docs.yml
vendored
@ -23,12 +23,12 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
|
|
||||||
- name: Setup Node.js
|
- name: Setup Node.js
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
|||||||
@ -9,14 +9,14 @@ jobs:
|
|||||||
publish-preview:
|
publish-preview:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
with:
|
with:
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
|
|
||||||
- name: Setup Node.js
|
- name: Setup Node.js
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: 18.x
|
node-version: 18.x
|
||||||
|
|||||||
4
.github/workflows/release-publish.yml
vendored
4
.github/workflows/release-publish.yml
vendored
@ -8,14 +8,14 @@ jobs:
|
|||||||
publish:
|
publish:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
- uses: fregante/setup-git-user@v2
|
- uses: fregante/setup-git-user@v2
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js v18
|
- name: Setup Node.js v18
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: 18.x
|
node-version: 18.x
|
||||||
|
|||||||
4
.github/workflows/test.yml
vendored
4
.github/workflows/test.yml
vendored
@ -12,13 +12,13 @@ jobs:
|
|||||||
matrix:
|
matrix:
|
||||||
node-version: [18.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: ${{ matrix.node-version }}
|
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:
|
update-browser-list:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
- run: npx browserslist@latest --update-db
|
- run: npx browserslist@latest --update-db
|
||||||
- name: Commit changes
|
- name: Commit changes
|
||||||
uses: EndBug/add-and-commit@v9
|
uses: EndBug/add-and-commit@v9
|
||||||
|
|||||||
14
CHANGELOG.md
14
CHANGELOG.md
@ -68,7 +68,7 @@ try {
|
|||||||
|
|
||||||
### Init deprecated and InitThrowsErrors removed
|
### Init deprecated and InitThrowsErrors removed
|
||||||
|
|
||||||
The config passed to `init` was not being used eariler.
|
The config passed to `init` was not being used earlier.
|
||||||
It will now be used.
|
It will now be used.
|
||||||
The `init` function is deprecated and will be removed in the next major release.
|
The `init` function is deprecated and will be removed in the next major release.
|
||||||
init currently works as a wrapper to `initialize` and `run`.
|
init currently works as a wrapper to `initialize` and `run`.
|
||||||
@ -195,7 +195,7 @@ mermaid.run({
|
|||||||
- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
|
- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
|
||||||
- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
|
- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
|
||||||
- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
|
- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
|
||||||
- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
|
- The live editor can't show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
|
||||||
- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
|
- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
|
||||||
- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
|
- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
|
||||||
- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
|
- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
|
||||||
@ -504,7 +504,7 @@ mermaid.run({
|
|||||||
|
|
||||||
- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
|
- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
|
||||||
- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
|
- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
|
||||||
- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
|
- How to link backwards in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
|
||||||
- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
|
- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
|
||||||
- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
|
- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
|
||||||
- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
|
- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
|
||||||
@ -619,7 +619,7 @@ mermaid.run({
|
|||||||
- render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
|
- render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
|
||||||
- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
|
- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
|
||||||
- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
|
- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
|
||||||
- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
|
- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
|
||||||
- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
|
- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
|
||||||
- Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
|
- Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
|
||||||
|
|
||||||
@ -659,7 +659,7 @@ mermaid.run({
|
|||||||
- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
|
- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
|
||||||
- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
|
- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
|
||||||
- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
|
- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
|
||||||
- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
|
- Problem with click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
|
||||||
- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
|
- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
|
||||||
- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
|
- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
|
||||||
- UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
|
- UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
|
||||||
@ -762,7 +762,7 @@ mermaid.run({
|
|||||||
- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
|
- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
|
||||||
- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
|
- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
|
||||||
- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
|
- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
|
||||||
- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
|
- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
|
||||||
- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
|
- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
|
||||||
- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
|
- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
|
||||||
|
|
||||||
@ -908,7 +908,7 @@ mermaid.run({
|
|||||||
|
|
||||||
- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
|
- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
|
||||||
- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
|
- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
|
||||||
- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
|
- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
|
||||||
- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
|
- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
|
||||||
- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
|
- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
|
||||||
|
|
||||||
|
|||||||
@ -59,8 +59,8 @@ representative at an online or offline event.
|
|||||||
## Enforcement
|
## Enforcement
|
||||||
|
|
||||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||||
reported to the community leaders responsible for enforcement at security@mermaid.live
|
reported to the community leaders responsible for enforcement at <security@mermaid.live>.
|
||||||
.
|
|
||||||
All complaints will be reviewed and investigated promptly and fairly.
|
All complaints will be reviewed and investigated promptly and fairly.
|
||||||
|
|
||||||
All community leaders are obligated to respect the privacy and security of the
|
All community leaders are obligated to respect the privacy and security of the
|
||||||
|
|||||||
27
README.md
27
README.md
@ -20,6 +20,9 @@ Generate diagrams from markdown-like text.
|
|||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="./README.zh-CN.md">简体中文</a>
|
<a href="./README.zh-CN.md">简体中文</a>
|
||||||
</p>
|
</p>
|
||||||
|
<p align="center">
|
||||||
|
Try Live Editor previews of future releases: <a href="https://develop.git.mermaid.live/" title="Try the mermaid version from the develop branch.">Develop</a> | <a href="https://next.git.mermaid.live/" title="Try the mermaid version from the next branch.">Next</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
@ -31,7 +34,7 @@ Generate diagrams from markdown-like text.
|
|||||||
[](https://www.jsdelivr.com/package/npm/mermaid)
|
[](https://www.jsdelivr.com/package/npm/mermaid)
|
||||||
[](https://www.npmjs.com/package/mermaid)
|
[](https://www.npmjs.com/package/mermaid)
|
||||||
[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||||
[](https://twitter.com/mermaidjs_)
|
[](https://twitter.com/mermaidjs_)
|
||||||
|
|
||||||
<img src="./img/header.png" alt="" />
|
<img src="./img/header.png" alt="" />
|
||||||
|
|
||||||
@ -41,6 +44,22 @@ Generate diagrams from markdown-like text.
|
|||||||
|
|
||||||
<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>
|
<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
|
## About
|
||||||
|
|
||||||
<!-- <Main description> -->
|
<!-- <Main description> -->
|
||||||
@ -55,10 +74,10 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
|
|||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<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.md).
|
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.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).
|
||||||
|
|
||||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
||||||
|
|
||||||
|
|||||||
@ -12,7 +12,7 @@ Mermaid
|
|||||||
<p>
|
<p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://mermaid.live/"><b>Live Editor!</b></a>
|
<a href="https://mermaid.live/"><b>实时编辑器!</b></a>
|
||||||
</p>
|
</p>
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
|
<a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
|
||||||
@ -21,6 +21,10 @@ Mermaid
|
|||||||
<a href="./README.md">English</a>
|
<a href="./README.md">English</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
尝试未来版本的实时编辑器预览: <a href="https://develop.git.mermaid.live/" title="尝试来自develop分支的mermaid版本。">Develop</a> | <a href="https://next.git.mermaid.live/" title="尝试来自next分支的mermaid版本。">Next</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
@ -31,7 +35,7 @@ Mermaid
|
|||||||
[](https://www.jsdelivr.com/package/npm/mermaid)
|
[](https://www.jsdelivr.com/package/npm/mermaid)
|
||||||
[](https://www.npmjs.com/package/mermaid)
|
[](https://www.npmjs.com/package/mermaid)
|
||||||
[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||||
[](https://twitter.com/mermaidjs_)
|
[](https://twitter.com/mermaidjs_)
|
||||||
|
|
||||||
<img src="./img/header.png" alt="" />
|
<img src="./img/header.png" alt="" />
|
||||||
|
|
||||||
@ -53,7 +57,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
|
|||||||
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
|
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
|
||||||
<br/>
|
<br/>
|
||||||
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
||||||
你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
||||||
|
|
||||||
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
||||||
|
|
||||||
|
|||||||
@ -160,6 +160,7 @@
|
|||||||
"vitepress",
|
"vitepress",
|
||||||
"vueuse",
|
"vueuse",
|
||||||
"xlink",
|
"xlink",
|
||||||
|
"xychart",
|
||||||
"yash",
|
"yash",
|
||||||
"yokozuna",
|
"yokozuna",
|
||||||
"zenuml",
|
"zenuml",
|
||||||
|
|||||||
@ -132,4 +132,9 @@ describe('XSS', () => {
|
|||||||
cy.wait(1000);
|
cy.wait(1000);
|
||||||
cy.get('#the-malware').should('not.exist');
|
cy.get('#the-malware').should('not.exist');
|
||||||
});
|
});
|
||||||
|
it('should sanitize backticks in class names properly', () => {
|
||||||
|
cy.visit('http://localhost:9000/xss24.html');
|
||||||
|
cy.wait(1000);
|
||||||
|
cy.get('#the-malware').should('not.exist');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -501,4 +501,16 @@ describe('Class diagram', () => {
|
|||||||
B : -methods()
|
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');
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { imgSnapshotTest } from '../../helpers/util.ts';
|
import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
|
||||||
|
|
||||||
describe('Configuration and directives - nodes should be light blue', () => {
|
describe('Configuration and directives - nodes should be light blue', () => {
|
||||||
it('No config - use default', () => {
|
it('No config - use default', () => {
|
||||||
@ -206,8 +206,7 @@ graph TD
|
|||||||
describe('when rendering several diagrams', () => {
|
describe('when rendering several diagrams', () => {
|
||||||
it('diagrams should not taint later diagrams', () => {
|
it('diagrams should not taint later diagrams', () => {
|
||||||
const url = 'http://localhost:9000/theme-directives.html';
|
const url = 'http://localhost:9000/theme-directives.html';
|
||||||
cy.visit(url);
|
urlSnapshotTest(url, {});
|
||||||
cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -520,6 +520,32 @@ describe('Gantt diagram', () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// TODO: fix it
|
||||||
|
//
|
||||||
|
// This test is skipped deliberately
|
||||||
|
// because it fails and blocks our development pipeline
|
||||||
|
// It was added as an attempt to fix gantt performance issues
|
||||||
|
//
|
||||||
|
// https://github.com/mermaid-js/mermaid/issues/3274
|
||||||
|
//
|
||||||
|
it.skip('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gantt
|
||||||
|
title A long Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %m-%d
|
||||||
|
tickInterval 1day
|
||||||
|
excludes weekends
|
||||||
|
section Section
|
||||||
|
A task : a1, 9999-10-01, 30d
|
||||||
|
Another task : after a1, 20d
|
||||||
|
section Another
|
||||||
|
Task in sec : 2022-10-20, 12d
|
||||||
|
another task : 24d
|
||||||
|
`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it('should render when compact is true', () => {
|
it('should render when compact is true', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|||||||
@ -26,7 +26,7 @@ describe('Git Graph diagram', () => {
|
|||||||
`gitGraph
|
`gitGraph
|
||||||
commit id: "Normal Commit"
|
commit id: "Normal Commit"
|
||||||
commit id: "Reverse Commit" type: REVERSE
|
commit id: "Reverse Commit" type: REVERSE
|
||||||
commit id: "Hightlight Commit" type: HIGHLIGHT
|
commit id: "Highlight Commit" type: HIGHLIGHT
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
@ -36,7 +36,7 @@ describe('Git Graph diagram', () => {
|
|||||||
`gitGraph
|
`gitGraph
|
||||||
commit id: "Normal Commit with tag" tag: "v1.0.0"
|
commit id: "Normal Commit with tag" tag: "v1.0.0"
|
||||||
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
|
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
|
||||||
commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4"
|
commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4"
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
@ -102,7 +102,7 @@ describe('Git Graph diagram', () => {
|
|||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('8: should render a simple gitgraph with more than 8 branchs & overriding variables', () => {
|
it('8: should render a simple gitgraph with more than 8 branches & overriding variables', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||||
'gitBranchLabel0': '#ffffff',
|
'gitBranchLabel0': '#ffffff',
|
||||||
@ -358,7 +358,7 @@ gitGraph
|
|||||||
`gitGraph TB:
|
`gitGraph TB:
|
||||||
commit id: "Normal Commit"
|
commit id: "Normal Commit"
|
||||||
commit id: "Reverse Commit" type: REVERSE
|
commit id: "Reverse Commit" type: REVERSE
|
||||||
commit id: "Hightlight Commit" type: HIGHLIGHT
|
commit id: "Highlight Commit" type: HIGHLIGHT
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
@ -368,7 +368,7 @@ gitGraph
|
|||||||
`gitGraph TB:
|
`gitGraph TB:
|
||||||
commit id: "Normal Commit with tag" tag: "v1.0.0"
|
commit id: "Normal Commit with tag" tag: "v1.0.0"
|
||||||
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
|
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
|
||||||
commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4"
|
commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4"
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
@ -434,7 +434,7 @@ gitGraph
|
|||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('22: should render a simple gitgraph with more than 8 branchs & overriding variables | Vertical Branch', () => {
|
it('22: should render a simple gitgraph with more than 8 branches & overriding variables | Vertical Branch', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||||
'gitBranchLabel0': '#ffffff',
|
'gitBranchLabel0': '#ffffff',
|
||||||
|
|||||||
@ -160,4 +160,70 @@ describe('Quadrant Chart', () => {
|
|||||||
);
|
);
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
|
it('should render x-axis labels in the center, if x-axis has two labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
quadrantChart
|
||||||
|
title Reach and engagement of campaigns
|
||||||
|
x-axis Low Reach --> High Reach
|
||||||
|
y-axis Low Engagement
|
||||||
|
quadrant-1 We should expand
|
||||||
|
quadrant-2 Need to promote
|
||||||
|
quadrant-3 Re-evaluate
|
||||||
|
quadrant-4 May be improved
|
||||||
|
Campaign A: [0.3, 0.6]
|
||||||
|
Campaign B: [0.45, 0.23]
|
||||||
|
Campaign C: [0.57, 0.69]
|
||||||
|
Campaign D: [0.78, 0.34]
|
||||||
|
Campaign E: [0.40, 0.34]
|
||||||
|
Campaign F: [0.35, 0.78]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render y-axis labels in the center, if y-axis has two labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
quadrantChart
|
||||||
|
title Reach and engagement of campaigns
|
||||||
|
x-axis Low Reach
|
||||||
|
y-axis Low Engagement --> High Engagement
|
||||||
|
quadrant-1 We should expand
|
||||||
|
quadrant-2 Need to promote
|
||||||
|
quadrant-3 Re-evaluate
|
||||||
|
quadrant-4 May be improved
|
||||||
|
Campaign A: [0.3, 0.6]
|
||||||
|
Campaign B: [0.45, 0.23]
|
||||||
|
Campaign C: [0.57, 0.69]
|
||||||
|
Campaign D: [0.78, 0.34]
|
||||||
|
Campaign E: [0.40, 0.34]
|
||||||
|
Campaign F: [0.35, 0.78]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
quadrantChart
|
||||||
|
title Reach and engagement of campaigns
|
||||||
|
x-axis Reach -->
|
||||||
|
y-axis Engagement -->
|
||||||
|
quadrant-1 We should expand
|
||||||
|
quadrant-2 Need to promote
|
||||||
|
quadrant-3 Re-evaluate
|
||||||
|
quadrant-4 May be improved
|
||||||
|
Campaign A: [0.3, 0.6]
|
||||||
|
Campaign B: [0.45, 0.23]
|
||||||
|
Campaign C: [0.57, 0.69]
|
||||||
|
Campaign D: [0.78, 0.34]
|
||||||
|
Campaign E: [0.40, 0.34]
|
||||||
|
Campaign F: [0.35, 0.78]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -57,7 +57,7 @@ describe('Timeline diagram', () => {
|
|||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('5: should render a simple timeline with directive overriden colors', () => {
|
it('5: should render a simple timeline with directive overridden colors', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||||
'cScale0': '#ff0000',
|
'cScale0': '#ff0000',
|
||||||
|
|||||||
322
cypress/integration/rendering/xyChart.spec.js
Normal file
322
cypress/integration/rendering/xyChart.spec.js
Normal file
@ -0,0 +1,322 @@
|
|||||||
|
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
|
||||||
|
|
||||||
|
describe('XY Chart', () => {
|
||||||
|
it('should render the simplest possible chart', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
line [10, 30, 20]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Should render a complete chart', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('Should render a chart without title', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('y-axis title not required', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Should render a chart without y-axis with different range', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
|
||||||
|
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('x axis title not required', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
|
||||||
|
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Multiple plots can be rendered', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
line [23, 46, 77, 34]
|
||||||
|
line [45, 32, 33, 12]
|
||||||
|
bar [87, 54, 99, 85]
|
||||||
|
line [78, 88, 22, 4]
|
||||||
|
line [22, 29, 75, 33]
|
||||||
|
bar [52, 96, 35, 10]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Decimals and negative numbers are supported', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
y-axis -2.4 --> 3.5
|
||||||
|
line [+1.3, .6, 2.4, -.34]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render spark line with "plotReservedSpacePercent"', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: dark
|
||||||
|
xyChart:
|
||||||
|
width: 200
|
||||||
|
height: 20
|
||||||
|
plotReservedSpacePercent: 100
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render spark bar without displaying other property', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: dark
|
||||||
|
xyChart:
|
||||||
|
width: 200
|
||||||
|
height: 20
|
||||||
|
xAxis:
|
||||||
|
showLabel: false
|
||||||
|
showTitle: false
|
||||||
|
showTick: false
|
||||||
|
showAxisLine: false
|
||||||
|
yAxis:
|
||||||
|
showLabel: false
|
||||||
|
showTitle: false
|
||||||
|
showTick: false
|
||||||
|
showAxisLine: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Should use all the config from directive', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
%%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%%
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Should use all the config from yaml', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: forest
|
||||||
|
xyChart:
|
||||||
|
width: 1000
|
||||||
|
height: 600
|
||||||
|
titlePadding: 5
|
||||||
|
titleFontSize: 10
|
||||||
|
xAxis:
|
||||||
|
labelFontSize: 20
|
||||||
|
labelPadding: 10
|
||||||
|
titleFontSize: 30
|
||||||
|
titlePadding: 20
|
||||||
|
tickLength: 10
|
||||||
|
tickWidth: 5
|
||||||
|
axisLineWidth: 5
|
||||||
|
yAxis:
|
||||||
|
labelFontSize: 20
|
||||||
|
labelPadding: 10
|
||||||
|
titleFontSize: 30
|
||||||
|
titlePadding: 20
|
||||||
|
tickLength: 10
|
||||||
|
tickWidth: 5
|
||||||
|
axisLineWidth: 5
|
||||||
|
chartOrientation: horizontal
|
||||||
|
plotReservedSpacePercent: 60
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render with show axis title false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
xAxis:
|
||||||
|
showTitle: false
|
||||||
|
yAxis:
|
||||||
|
showTitle: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render with show axis label false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
xAxis:
|
||||||
|
showLabel: false
|
||||||
|
yAxis:
|
||||||
|
showLabel: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render with show axis tick false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
xAxis:
|
||||||
|
showTick: false
|
||||||
|
yAxis:
|
||||||
|
showTick: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render with show axis line false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
xAxis:
|
||||||
|
showAxisLine: false
|
||||||
|
yAxis:
|
||||||
|
showAxisLine: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render all the theme color', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
themeVariables:
|
||||||
|
xyChart:
|
||||||
|
titleColor: "#ff0000"
|
||||||
|
backgroundColor: "#f0f8ff"
|
||||||
|
yAxisLabelColor: "#ee82ee"
|
||||||
|
yAxisTitleColor: "#7fffd4"
|
||||||
|
yAxisTickColor: "#87ceeb"
|
||||||
|
yAxisLineColor: "#ff6347"
|
||||||
|
xAxisLabelColor: "#7fffd4"
|
||||||
|
xAxisTitleColor: "#ee82ee"
|
||||||
|
xAxisTickColor: "#ff6347"
|
||||||
|
xAxisLineColor: "#87ceeb"
|
||||||
|
plotColorPalette: "#008000, #faba63"
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
});
|
||||||
File diff suppressed because one or more lines are too long
@ -58,12 +58,21 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
flowchart
|
flowchart TB
|
||||||
classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
|
C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
|
||||||
CS(Customer Awareness Journey):::mainCategories
|
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
|
||||||
</pre
|
C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid">
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart TB
|
||||||
|
A & A & A & A & A & A & A & A ---> C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart TB
|
||||||
|
A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 --> C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
flowchart
|
flowchart
|
||||||
Node1:::class1 --> Node2:::class2
|
Node1:::class1 --> Node2:::class2
|
||||||
Node1:::class1 --> Node3:::class2
|
Node1:::class1 --> Node3:::class2
|
||||||
@ -441,6 +450,7 @@ mindmap
|
|||||||
messageFontFamily: 'courier',
|
messageFontFamily: 'courier',
|
||||||
},
|
},
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
|
logLevel: 0,
|
||||||
});
|
});
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
|
|||||||
@ -42,7 +42,8 @@
|
|||||||
</pre>
|
</pre>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({ startOnLoad: true, logLevel: 0 });
|
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
||||||
|
await mermaid.run();
|
||||||
|
|
||||||
if (window.Cypress) {
|
if (window.Cypress) {
|
||||||
window.rendered = true;
|
window.rendered = true;
|
||||||
|
|||||||
@ -1,15 +1,6 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
|
||||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
/* background: rgb(221, 208, 208); */
|
/* background: rgb(221, 208, 208); */
|
||||||
@ -122,26 +113,21 @@
|
|||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
|
||||||
// console.error('Mermaid error: ', err);
|
|
||||||
};
|
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
// theme: 'dark',
|
|
||||||
// theme: 'dark',
|
|
||||||
// arrowMarkerAbsolute: true,
|
|
||||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
|
||||||
logLevel: 0,
|
logLevel: 0,
|
||||||
// flowchart: { useMaxWidth: true },
|
|
||||||
graph: { curve: 'cardinal', htmlLabels: false },
|
graph: { curve: 'cardinal', htmlLabels: false },
|
||||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
|
||||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
|
||||||
fontFamily: '"arial", sans-serif',
|
fontFamily: '"arial", sans-serif',
|
||||||
curve: 'cardinal',
|
curve: 'cardinal',
|
||||||
securityLevel: 'strict',
|
securityLevel: 'strict',
|
||||||
|
startOnLoad: false,
|
||||||
});
|
});
|
||||||
function callback() {
|
|
||||||
alert('It worked');
|
await mermaid.run();
|
||||||
|
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
109
cypress/platform/xss24.html
Normal file
109
cypress/platform/xss24.html
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||||
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
/* background: rgb(221, 208, 208); */
|
||||||
|
/* background:#333; */
|
||||||
|
font-family: 'Arial';
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
.mermaid2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mermaid svg {
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
}
|
||||||
|
.malware {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 150px;
|
||||||
|
background: red;
|
||||||
|
color: black;
|
||||||
|
display: flex;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>Security check</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div id="diagram" class="mermaid"></div>
|
||||||
|
<div id="res" class=""></div>
|
||||||
|
</div>
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
// console.error('Mermaid error: ', err);
|
||||||
|
};
|
||||||
|
mermaid.initialize({
|
||||||
|
theme: 'forest',
|
||||||
|
arrowMarkerAbsolute: true,
|
||||||
|
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||||
|
logLevel: 0,
|
||||||
|
state: {
|
||||||
|
defaultRenderer: 'dagre-wrapper',
|
||||||
|
},
|
||||||
|
flowchart: {
|
||||||
|
// defaultRenderer: 'dagre-wrapper',
|
||||||
|
nodeSpacing: 10,
|
||||||
|
curve: 'cardinal',
|
||||||
|
htmlLabels: true,
|
||||||
|
},
|
||||||
|
htmlLabels: false,
|
||||||
|
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||||
|
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||||
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||||
|
// fontFamily: '"times", sans-serif',
|
||||||
|
// fontFamily: 'courier',
|
||||||
|
fontSize: 18,
|
||||||
|
curve: 'basis',
|
||||||
|
securityLevel: 'strict',
|
||||||
|
startOnLoad: false,
|
||||||
|
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
||||||
|
// themeVariables: {relationLabelColor: 'red'}
|
||||||
|
});
|
||||||
|
function callback() {
|
||||||
|
alert('It worked');
|
||||||
|
}
|
||||||
|
|
||||||
|
let diagram = 'classDiagram\n';
|
||||||
|
diagram += '`Class<img src=x on';
|
||||||
|
diagram += 'error=xssAttack()>` <|-- `Class2<img src=x on';
|
||||||
|
diagram += 'error=xssAttack()>`';
|
||||||
|
|
||||||
|
console.log(diagram);
|
||||||
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
|
document.querySelector('#res').innerHTML = svg;
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
@ -84,14 +94,6 @@
|
|||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
}
|
}
|
||||||
function xssAttack() {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.id = 'the-malware';
|
|
||||||
div.className = 'malware';
|
|
||||||
div.innerHTML = 'XSS Succeeded';
|
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
|
||||||
throw new Error('XSS Succeeded');
|
|
||||||
}
|
|
||||||
let diagram = 'graph LR\n';
|
let diagram = 'graph LR\n';
|
||||||
diagram += 'B-->D("<img onerror=location=`java';
|
diagram += 'B-->D("<img onerror=location=`java';
|
||||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|||||||
@ -173,7 +173,7 @@
|
|||||||
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
||||||
}
|
}
|
||||||
|
|
||||||
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
|
Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
|
||||||
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
|
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
|
||||||
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
|
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
---
|
---
|
||||||
graph LR
|
graph LR
|
||||||
accTitle: This is a complicated flow
|
accTitle: This is a complicated flow
|
||||||
accDescr: This is the descriptoin for the complicated flow.
|
accDescr: This is the description for the complicated flow.
|
||||||
|
|
||||||
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
||||||
|
|
||||||
|
|||||||
@ -60,6 +60,9 @@
|
|||||||
<li>
|
<li>
|
||||||
<h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
|
<h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<h2><a href="./xychart.html">XY charts</a></h2>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<h2><a href="./requirements.html">Requirements</a></h2>
|
<h2><a href="./requirements.html">Requirements</a></h2>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
<h1>Requirement diagram demos</h1>
|
<h1>Requirement diagram demos</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
requirementDiagram
|
requirementDiagram
|
||||||
accTitle: Requirments demo in black and white
|
accTitle: Requirements demo in black and white
|
||||||
accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names
|
accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names
|
||||||
|
|
||||||
requirement test_req {
|
requirement test_req {
|
||||||
|
|||||||
@ -164,6 +164,13 @@
|
|||||||
end
|
end
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<pre class="mermaid">
|
||||||
|
sequenceDiagram
|
||||||
|
actor Alice
|
||||||
|
actor John
|
||||||
|
Alice-xJohn: Hello John, how are you?
|
||||||
|
John--xAlice: Great!
|
||||||
|
</pre>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
|
|||||||
@ -183,7 +183,7 @@
|
|||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Compsite states can link to themselves</h2>
|
<h2>Composite states can link to themselves</h2>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state Active {
|
state Active {
|
||||||
@ -199,7 +199,7 @@
|
|||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> S1
|
[*] --> S1
|
||||||
S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines.
|
S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines.
|
||||||
S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
|
S1 --> S3: This transition description uses \na newline character\nto create multiple\nlines.
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|||||||
184
demos/xychart.html
Normal file
184
demos/xychart.html
Normal file
@ -0,0 +1,184 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<title>Mermaid Quick Test Page</title>
|
||||||
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||||
|
<style>
|
||||||
|
div.mermaid {
|
||||||
|
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||||
|
font-family: 'Courier New', Courier, monospace !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>XY Charts demos</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue (in $)"
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
</pre>
|
||||||
|
<hr />
|
||||||
|
<h1>XY Charts horizontal</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
xychart-beta horizontal
|
||||||
|
title "Basic xychart"
|
||||||
|
x-axis "this is x axis" [category1, "category 2", category3, category4]
|
||||||
|
y-axis yaxisText 10 --> 150
|
||||||
|
bar "sample bat" [52, 96, 35, 10]
|
||||||
|
line [23, 46, 75, 43]
|
||||||
|
</pre>
|
||||||
|
<hr />
|
||||||
|
<h1>XY Charts only lines and bar</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
xychart-beta
|
||||||
|
line [23, 46, 77, 34]
|
||||||
|
line [45, 32, 33, 12]
|
||||||
|
line [87, 54, 99, 85]
|
||||||
|
line [78, 88, 22, 4]
|
||||||
|
line [22, 29, 75, 33]
|
||||||
|
bar [52, 96, 35, 10]
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<h1>XY Charts with +ve and -ve numbers</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
xychart-beta
|
||||||
|
line [+1.3, .6, 2.4, -.34]
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h1>XY Charts Bar with multiple category</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
xychart-beta
|
||||||
|
title "Basic xychart with many categories"
|
||||||
|
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
|
||||||
|
y-axis yaxisText 10 --> 150
|
||||||
|
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h1>XY Charts line with multiple category</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
xychart-beta
|
||||||
|
title "Line chart with many category"
|
||||||
|
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
|
||||||
|
y-axis yaxisText 10 --> 150
|
||||||
|
line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h1>XY Charts category with large text</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
xychart-beta
|
||||||
|
title "Basic xychart with many categories with category overlap"
|
||||||
|
x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
|
||||||
|
y-axis yaxisText 10 --> 150
|
||||||
|
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h1>sparkline demo</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: dark
|
||||||
|
xyChart:
|
||||||
|
width: 200
|
||||||
|
height: 20
|
||||||
|
plotReservedSpacePercent: 100
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h1>sparkBar demo</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: dark
|
||||||
|
xyChart:
|
||||||
|
width: 200
|
||||||
|
height: 20
|
||||||
|
plotReservedSpacePercent: 100
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h1>XY Charts demos with all configs</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: forest
|
||||||
|
xyChart:
|
||||||
|
width: 1000
|
||||||
|
height: 600
|
||||||
|
titlePadding: 5
|
||||||
|
titleFontSize: 10
|
||||||
|
xAxis:
|
||||||
|
labelFontSize: 20
|
||||||
|
labelPadding: 10
|
||||||
|
titleFontSize: 30
|
||||||
|
titlePadding: 20
|
||||||
|
tickLength: 10
|
||||||
|
tickWidth: 5
|
||||||
|
axisLineWidth: 5
|
||||||
|
yAxis:
|
||||||
|
labelFontSize: 20
|
||||||
|
labelPadding: 10
|
||||||
|
titleFontSize: 30
|
||||||
|
titlePadding: 20
|
||||||
|
tickLength: 10
|
||||||
|
tickWidth: 5
|
||||||
|
axisLineWidth: 5
|
||||||
|
chartOrientation: horizontal
|
||||||
|
plotReservedSpacePercent: 60
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revene"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
<h1>XY Charts demos with all theme config</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
themeVariables:
|
||||||
|
xyChart:
|
||||||
|
titleColor: "#ff0000"
|
||||||
|
backgroundColor: "#f0f8ff"
|
||||||
|
yAxisLabelColor: "#ee82ee"
|
||||||
|
yAxisTitleColor: "#7fffd4"
|
||||||
|
yAxisTickColor: "#87ceeb"
|
||||||
|
yAxisLineColor: "#ff6347"
|
||||||
|
xAxisLabelColor: "#7fffd4"
|
||||||
|
xAxisTitleColor: "#ee82ee"
|
||||||
|
xAxisTickColor: "#ff6347"
|
||||||
|
xAxisLineColor: "#87ceeb"
|
||||||
|
plotColorPalette: "#008000, #faba63"
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revene"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
mermaid.initialize({
|
||||||
|
theme: 'default',
|
||||||
|
logLevel: 3,
|
||||||
|
securityLevel: 'loose',
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
version: '3.9'
|
version: '3.9'
|
||||||
services:
|
services:
|
||||||
mermaid:
|
mermaid:
|
||||||
image: node:18.17.1-alpine3.18
|
image: node:18.18.2-alpine3.18
|
||||||
stdin_open: true
|
stdin_open: true
|
||||||
tty: true
|
tty: true
|
||||||
working_dir: /mermaid
|
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.
|
## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
|
||||||
|
|
||||||
- Search in Discussions
|
- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
|
||||||
- Search in open Issues
|
- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)
|
||||||
- Search in closed Issues
|
|
||||||
|
|
||||||
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.
|
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.
|
Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.
|
||||||
|
|||||||
@ -97,7 +97,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
|
|||||||
graph LR
|
graph LR
|
||||||
accTitle: Big Decisions
|
accTitle: Big Decisions
|
||||||
accDescr: Bob's Burgers process for making big decisions
|
accDescr: Bob's Burgers process for making big decisions
|
||||||
A[Identify Big Descision] --> B{Make Big Decision}
|
A[Identify Big Decision] --> B{Make Big Decision}
|
||||||
B --> D[Be done]
|
B --> D[Be done]
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -105,7 +105,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
|
|||||||
graph LR
|
graph LR
|
||||||
accTitle: Big Decisions
|
accTitle: Big Decisions
|
||||||
accDescr: Bob's Burgers process for making big decisions
|
accDescr: Bob's Burgers process for making big decisions
|
||||||
A[Identify Big Descision] --> B{Make Big Decision}
|
A[Identify Big Decision] --> B{Make Big Decision}
|
||||||
B --> D[Be done]
|
B --> D[Be done]
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -137,7 +137,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
|
|||||||
for making very, very big decisions.
|
for making very, very big decisions.
|
||||||
This is actually a very simple flow: identify the big decision and then make the big decision.
|
This is actually a very simple flow: identify the big decision and then make the big decision.
|
||||||
}
|
}
|
||||||
A[Identify Big Descision] --> B{Make Big Decision}
|
A[Identify Big Decision] --> B{Make Big Decision}
|
||||||
B --> D[Be done]
|
B --> D[Be done]
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -149,7 +149,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
|
|||||||
for making very, very big decisions.
|
for making very, very big decisions.
|
||||||
This is actually a very simple flow: identify the big decision and then make the big decision.
|
This is actually a very simple flow: identify the big decision and then make the big decision.
|
||||||
}
|
}
|
||||||
A[Identify Big Descision] --> B{Make Big Decision}
|
A[Identify Big Decision] --> B{Make Big Decision}
|
||||||
B --> D[Be done]
|
B --> D[Be done]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -10,8 +10,8 @@ When mermaid starts, configuration is extracted to determine a configuration to
|
|||||||
|
|
||||||
- The default configuration
|
- 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**.
|
- 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 (v\<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. 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 select configuration parameters directly in the diagram code via directives. 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.
|
**The render config** is configuration that is used when rendering by applying these configurations.
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
# Directives
|
# Directives
|
||||||
|
|
||||||
> **Warning**
|
> **Warning**
|
||||||
> Directives are deprecated from v\<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
|
> Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
|
||||||
|
|
||||||
## Directives
|
## Directives
|
||||||
|
|
||||||
|
|||||||
@ -16,4 +16,4 @@
|
|||||||
|
|
||||||
#### Defined in
|
#### 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
|
#### 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
|
#### 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)
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
|
[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
|
|||||||
|
|
||||||
#### Defined in
|
#### 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
|
## Variables
|
||||||
|
|
||||||
@ -96,7 +96,7 @@ mermaid.initialize(config);
|
|||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641)
|
[mermaidAPI.ts:603](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L603)
|
||||||
|
|
||||||
## Functions
|
## Functions
|
||||||
|
|
||||||
@ -127,7 +127,7 @@ Return the last node appended
|
|||||||
|
|
||||||
#### Defined in
|
#### 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
|
#### 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
|
#### 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
|
#### 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
|
#### Defined in
|
||||||
|
|
||||||
[mermaidAPI.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L160)
|
[mermaidAPI.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L124)
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 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)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -294,7 +254,7 @@ Put the svgCode into an iFrame. Return the iFrame code
|
|||||||
|
|
||||||
#### Defined in
|
#### 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
|
#### 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)
|
||||||
|
|||||||
@ -2,53 +2,54 @@
|
|||||||
>
|
>
|
||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
>
|
>
|
||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations.md](../../packages/mermaid/src/docs/ecosystem/integrations.md).
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md).
|
||||||
|
|
||||||
# Integrations
|
# Integrations
|
||||||
|
|
||||||
## Recommendations
|
## Official integration: [Mermaid Chart](./mermaid-chart.md)
|
||||||
|
|
||||||
### File Extension
|
We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid.
|
||||||
|
|
||||||
Applications that support mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions.
|
## Community integrations
|
||||||
|
|
||||||
### MIME Type
|
Below are a list of community plugins and integrations created with Mermaid.
|
||||||
|
|
||||||
The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for mermaid media is `text/vnd.mermaid`.
|
### Productivity tools
|
||||||
|
|
||||||
[IANA](https://www.iana.org/) recognition pending.
|
✅ = Native support
|
||||||
|
|
||||||
---
|
- [GitHub](https://github.com) ✅
|
||||||
|
- [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
|
||||||
The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
|
|
||||||
|
|
||||||
They also serve as proof of concept, for the variety of things that can be built with mermaid.
|
|
||||||
|
|
||||||
## Productivity
|
|
||||||
|
|
||||||
- [GitHub](https://github.com) (**Native support**)
|
|
||||||
- [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
|
|
||||||
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
|
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
|
||||||
- [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
|
- [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
|
||||||
- [GitHub Writer](https://github.com/ckeditor/github-writer)
|
- [GitHub Writer](https://github.com/ckeditor/github-writer)
|
||||||
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
|
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
|
||||||
- [Gitea](https://gitea.io) (**Native support**)
|
- [Gitea](https://gitea.io) ✅
|
||||||
- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
|
- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
|
||||||
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
|
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
|
||||||
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
|
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
|
||||||
- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
|
- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
|
||||||
- [Joplin](https://joplinapp.org) (**Native support**)
|
- [Joplin](https://joplinapp.org) ✅
|
||||||
- [Slab](https://slab.com) (**Native support**)
|
- [Slab](https://slab.com) ✅
|
||||||
- [Swimm](https://swimm.io) (**Native support**)
|
- [Swimm](https://swimm.io) ✅
|
||||||
- [Notion](https://notion.so) (**Native support**)
|
- [Notion](https://notion.so) ✅
|
||||||
- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
|
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
|
||||||
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
|
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
|
||||||
|
- [NotesHub](https://noteshub.app) ✅
|
||||||
- [GitBook](https://gitbook.com)
|
- [GitBook](https://gitbook.com)
|
||||||
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
||||||
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
||||||
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
||||||
- [LiveBook](https://livebook.dev) (**Native support**)
|
- [LiveBook](https://livebook.dev) ✅
|
||||||
- [Atlassian Products](https://www.atlassian.com)
|
- [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)
|
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
|
||||||
- [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
|
- [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
|
||||||
- [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
|
- [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
|
||||||
@ -57,15 +58,19 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
|
- [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
|
||||||
- [redmine-mermaid](https://github.com/styz/redmine_mermaid)
|
- [redmine-mermaid](https://github.com/styz/redmine_mermaid)
|
||||||
- [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
|
- [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
|
||||||
- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
|
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||||
- [mermerd](https://github.com/KarnerTh/mermerd)
|
- [mermerd](https://github.com/KarnerTh/mermerd)
|
||||||
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
|
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
|
||||||
|
|
||||||
## CRM/ERP/Similar
|
### CRM/ERP
|
||||||
|
|
||||||
|
Customer Relationship Management/Enterprise Resource Planning
|
||||||
|
|
||||||
- [coreBOS](https://blog.corebos.org/blog/december2019)
|
- [coreBOS](https://blog.corebos.org/blog/december2019)
|
||||||
|
|
||||||
## Blogs
|
### Blogging
|
||||||
|
|
||||||
|
Blogging frameworks and platforms
|
||||||
|
|
||||||
- [WordPress](https://wordpress.org)
|
- [WordPress](https://wordpress.org)
|
||||||
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
|
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
|
||||||
@ -77,7 +82,9 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Nextra](https://nextra.site/)
|
- [Nextra](https://nextra.site/)
|
||||||
- [Mermaid](https://nextra.site/docs/guide/mermaid)
|
- [Mermaid](https://nextra.site/docs/guide/mermaid)
|
||||||
|
|
||||||
## CMS
|
### CMS/ECM
|
||||||
|
|
||||||
|
Content Management Systems/Enterprise Content Management
|
||||||
|
|
||||||
- [VitePress](https://vitepress.vuejs.org/)
|
- [VitePress](https://vitepress.vuejs.org/)
|
||||||
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
|
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
|
||||||
@ -87,7 +94,9 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
|
- [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
|
||||||
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
|
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
|
||||||
|
|
||||||
## Communication
|
### Communication
|
||||||
|
|
||||||
|
Communication tools and platforms
|
||||||
|
|
||||||
- [Discourse](https://discourse.org)
|
- [Discourse](https://discourse.org)
|
||||||
- [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
|
- [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
|
||||||
@ -97,8 +106,10 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
|
- [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
|
||||||
- [NodeBB](https://nodebb.org)
|
- [NodeBB](https://nodebb.org)
|
||||||
- [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
|
- [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
|
### Wikis
|
||||||
|
|
||||||
- [MediaWiki](https://www.mediawiki.org)
|
- [MediaWiki](https://www.mediawiki.org)
|
||||||
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
|
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
|
||||||
@ -114,7 +125,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
|
- [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
|
||||||
- [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
|
- [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
|
||||||
|
|
||||||
## Editor Plugins
|
### Editor Plugins
|
||||||
|
|
||||||
- [VS Code](https://code.visualstudio.com/)
|
- [VS Code](https://code.visualstudio.com/)
|
||||||
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
|
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
|
||||||
@ -165,14 +176,16 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [Standard Notes](https://standardnotes.com/)
|
- [Standard Notes](https://standardnotes.com/)
|
||||||
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
|
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
|
||||||
|
|
||||||
## Document Generation
|
### Document Generation
|
||||||
|
|
||||||
|
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||||
|
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
|
||||||
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
||||||
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
||||||
- [remark](https://remark.js.org/)
|
- [remark](https://remark.js.org/)
|
||||||
- [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
|
- [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
|
||||||
- [rehype](https://github.com/rehypejs/rehype)
|
- [rehype](https://github.com/rehypejs/rehype)
|
||||||
- [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
|
- [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
|
||||||
- [Gatsby](https://www.gatsbyjs.com/)
|
- [Gatsby](https://www.gatsbyjs.com/)
|
||||||
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
|
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
|
||||||
- [JSDoc](https://jsdoc.app/)
|
- [JSDoc](https://jsdoc.app/)
|
||||||
@ -182,15 +195,15 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
|
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
|
||||||
- [Type Doc](https://typedoc.org/)
|
- [Type Doc](https://typedoc.org/)
|
||||||
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
|
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
|
||||||
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
|
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme)
|
||||||
- [Codedoc](https://codedoc.cc/)
|
- [Codedoc](https://codedoc.cc/)
|
||||||
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
|
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
|
||||||
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
|
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
|
||||||
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
|
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
|
||||||
- [Quarto](https://quarto.org/)
|
- [Quarto](https://quarto.org/)
|
||||||
- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
|
- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
|
||||||
|
|
||||||
## Browser Extensions
|
### Browser Extensions
|
||||||
|
|
||||||
| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
|
| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
|
||||||
| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||||
@ -205,7 +218,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||||||
| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
|
| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
|
||||||
| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
|
| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
|
||||||
|
|
||||||
## Other
|
### Other
|
||||||
|
|
||||||
- [Jekyll](https://jekyllrb.com/)
|
- [Jekyll](https://jekyllrb.com/)
|
||||||
- [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
|
- [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
|
||||||
31
docs/ecosystem/integrations-create.md
Normal file
31
docs/ecosystem/integrations-create.md
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-create.md](../../packages/mermaid/src/docs/ecosystem/integrations-create.md).
|
||||||
|
|
||||||
|
# Integrations - create
|
||||||
|
|
||||||
|
## Recommendations
|
||||||
|
|
||||||
|
Below are recommendations for creating plugins and integrations with Mermaid.
|
||||||
|
|
||||||
|
### File Extension
|
||||||
|
|
||||||
|
Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions.
|
||||||
|
|
||||||
|
### MIME Type
|
||||||
|
|
||||||
|
The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
|
||||||
|
|
||||||
|
Currently pending [IANA](https://www.iana.org/) recognition.
|
||||||
|
|
||||||
|
## Showcase
|
||||||
|
|
||||||
|
### Mermaid Slack workspace
|
||||||
|
|
||||||
|
We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
|
||||||
|
|
||||||
|
### Add to Mermaid Ecosystem
|
||||||
|
|
||||||
|
If you have a plugin or integration that you'd like to add to our [Community integrations](/ecosystem/integrations-community) list, please [open a pull request](https://github.com/mermaid-js/mermaid).
|
||||||
47
docs/ecosystem/mermaid-chart.md
Normal file
47
docs/ecosystem/mermaid-chart.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/mermaid-chart.md](../../packages/mermaid/src/docs/ecosystem/mermaid-chart.md).
|
||||||
|
|
||||||
|
# Mermaid Chart
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
## About
|
||||||
|
|
||||||
|
[Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Editor** - A web based editor for creating and editing Mermaid diagrams.
|
||||||
|
|
||||||
|
- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
|
||||||
|
|
||||||
|
- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
|
||||||
|
|
||||||
|
- **Plugins** - A plugin system for extending the functionality of Mermaid. Currently includes [VS Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) and [ChatGPT](https://www.mermaidchart.com/plugins/chatgpt).
|
||||||
|
|
||||||
|
- **AI** - An AI chatbot that can generate Mermaid diagrams from text (Pro plan).
|
||||||
|
|
||||||
|
- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
|
||||||
|
|
||||||
|
## Plans
|
||||||
|
|
||||||
|
- **Free** - A free plan that includes five diagrams.
|
||||||
|
|
||||||
|
- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
|
||||||
|
|
||||||
|
- **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
|
||||||
|
|
||||||
|
## Access
|
||||||
|
|
||||||
|
Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
|
||||||
|
|
||||||
|
Mermaid Chart is currently offering a 30-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
|
||||||
|
|
||||||
|
## Mermaid JS contributions
|
||||||
|
|
||||||
|
First time contributors are eligible for a free Pro tier account for 1 year.
|
||||||
@ -1,9 +0,0 @@
|
|||||||
> **Warning**
|
|
||||||
>
|
|
||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
|
||||||
>
|
|
||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/showcases.md](../../packages/mermaid/src/docs/ecosystem/showcases.md).
|
|
||||||
|
|
||||||
# Showcases
|
|
||||||
|
|
||||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts).
|
|
||||||
@ -17,7 +17,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
|
|||||||
## Four ways of using mermaid:
|
## Four ways of using mermaid:
|
||||||
|
|
||||||
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
|
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
|
||||||
2. Using [mermaid plugins](../ecosystem/integrations.md) with programs you are familiar with.
|
2. Using [mermaid plugins](../ecosystem/integrations-community.md) with programs you are familiar with.
|
||||||
3. Calling the Mermaid JavaScript API.
|
3. Calling the Mermaid JavaScript API.
|
||||||
4. Deploying Mermaid as a dependency.
|
4. Deploying Mermaid as a dependency.
|
||||||
|
|
||||||
@ -85,7 +85,7 @@ and to View, <https://mermaid.live/view?gist=https://gist.github.com/sidharthv96
|
|||||||
|
|
||||||
## 2. Using Mermaid Plugins:
|
## 2. Using Mermaid Plugins:
|
||||||
|
|
||||||
You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations.md).
|
You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations-community.md).
|
||||||
|
|
||||||
**This is covered in greater detail in the [Usage section](../config/usage.md)**
|
**This is covered in greater detail in the [Usage section](../config/usage.md)**
|
||||||
|
|
||||||
|
|||||||
@ -42,11 +42,12 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
|
|||||||
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/>
|
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/>
|
||||||
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
||||||
[Tutorials](../config/Tutorials.md) has video tutorials.
|
[Tutorials](../config/Tutorials.md) has video tutorials.
|
||||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
|
|
||||||
|
Use Mermaid with your favorite applications, check out the list of [Community Integrations](../ecosystem/integrations-community.md).
|
||||||
|
|
||||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
|
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
|
||||||
|
|
||||||
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
|
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
|
||||||
|
|
||||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
|
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
|
||||||
|
|
||||||
@ -282,6 +283,26 @@ quadrantChart
|
|||||||
Campaign F: [0.35, 0.78]
|
Campaign F: [0.35, 0.78]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### [XY Chart](../syntax/xyChart.md)
|
||||||
|
|
||||||
|
```mermaid-example
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
```
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
```
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
|
**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
|
||||||
@ -319,7 +340,7 @@ To Deploy Mermaid:
|
|||||||
</script>
|
</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)
|
**Examples can be found in** [Other examples](../syntax/examples.md)
|
||||||
|
|
||||||
|
|||||||
@ -6,8 +6,18 @@
|
|||||||
|
|
||||||
# Announcements
|
# Announcements
|
||||||
|
|
||||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
<br />
|
||||||
|
|
||||||
23 August 2023 · 15 mins
|
<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>
|
||||||
|
|
||||||
Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
|
## Calling all fans of Mermaid and Mermaid Chart! 🎉
|
||||||
|
|
||||||
|
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.
|
||||||
|
|||||||
@ -6,6 +6,18 @@
|
|||||||
|
|
||||||
# Blog
|
# Blog
|
||||||
|
|
||||||
|
## [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
|
||||||
|
|
||||||
|
A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
|
||||||
|
|
||||||
|
## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/)
|
||||||
|
|
||||||
|
8 September 2023 · 4 mins
|
||||||
|
|
||||||
|
Sankey diagrams are a powerful tool for visualizing flow data.
|
||||||
|
|
||||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||||
|
|
||||||
23 August 2023 · 15 mins
|
23 August 2023 · 15 mins
|
||||||
|
|||||||
@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
|
|||||||
title Component diagram for Internet Banking System - API Application
|
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(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.")
|
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.")
|
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
|
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(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.")
|
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.")
|
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||||
|
|
||||||
|
|||||||
@ -425,8 +425,6 @@ And `Link` can be one of:
|
|||||||
|
|
||||||
A namespace groups classes.
|
A namespace groups classes.
|
||||||
|
|
||||||
Code:
|
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
classDiagram
|
classDiagram
|
||||||
namespace BaseShapes {
|
namespace BaseShapes {
|
||||||
|
|||||||
@ -90,7 +90,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
|
|||||||
|
|
||||||
Where:
|
Where:
|
||||||
|
|
||||||
- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v\<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens.
|
- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens.
|
||||||
- `relationship` describes the way that both entities inter-relate. See below.
|
- `relationship` describes the way that both entities inter-relate. See below.
|
||||||
- `second-entity` is the name of the other entity.
|
- `second-entity` is the name of the other entity.
|
||||||
- `relationship-label` describes the relationship from the perspective of the first entity.
|
- `relationship-label` describes the relationship from the perspective of the first entity.
|
||||||
@ -198,7 +198,7 @@ erDiagram
|
|||||||
|
|
||||||
The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
||||||
|
|
||||||
### Entity Name Aliases (v\<MERMAID_RELEASE_VERSION>+)
|
### Entity Name Aliases (v10.5.0+)
|
||||||
|
|
||||||
An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.
|
An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.
|
||||||
|
|
||||||
|
|||||||
@ -467,7 +467,7 @@ flowchart TB
|
|||||||
A & B--> C & D
|
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
|
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.
|
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.
|
This goes for expressive syntaxes as well.
|
||||||
@ -764,7 +764,7 @@ flowchart LR
|
|||||||
end
|
end
|
||||||
%% ^ These subgraphs are identical, except for the links to them:
|
%% ^ These subgraphs are identical, except for the links to them:
|
||||||
|
|
||||||
%% Link *to* subgraph1: subgraph1 direction is mantained
|
%% Link *to* subgraph1: subgraph1 direction is maintained
|
||||||
outside --> subgraph1
|
outside --> subgraph1
|
||||||
%% Link *within* subgraph2:
|
%% Link *within* subgraph2:
|
||||||
%% subgraph2 inherits the direction of the top-level graph (LR)
|
%% subgraph2 inherits the direction of the top-level graph (LR)
|
||||||
@ -783,7 +783,7 @@ flowchart LR
|
|||||||
end
|
end
|
||||||
%% ^ These subgraphs are identical, except for the links to them:
|
%% ^ These subgraphs are identical, except for the links to them:
|
||||||
|
|
||||||
%% Link *to* subgraph1: subgraph1 direction is mantained
|
%% Link *to* subgraph1: subgraph1 direction is maintained
|
||||||
outside --> subgraph1
|
outside --> subgraph1
|
||||||
%% Link *within* subgraph2:
|
%% Link *within* subgraph2:
|
||||||
%% subgraph2 inherits the direction of the top-level graph (LR)
|
%% subgraph2 inherits the direction of the top-level graph (LR)
|
||||||
@ -1112,7 +1112,7 @@ flowchart TD
|
|||||||
B-->E(A fa:fa-camera-retro perhaps?)
|
B-->E(A fa:fa-camera-retro perhaps?)
|
||||||
```
|
```
|
||||||
|
|
||||||
Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
|
Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
|
||||||
|
|
||||||
## Graph declarations with spaces between vertices and link and without semicolon
|
## Graph declarations with spaces between vertices and link and without semicolon
|
||||||
|
|
||||||
@ -1146,7 +1146,7 @@ The layout of the diagram is done with the renderer. The default renderer is dag
|
|||||||
|
|
||||||
Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
|
Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
|
||||||
|
|
||||||
The _elk_ renderer is an experimenal feature.
|
The _elk_ renderer is an experimental feature.
|
||||||
You can change the renderer to elk by adding this directive:
|
You can change the renderer to elk by adding this directive:
|
||||||
|
|
||||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||||
|
|||||||
@ -827,18 +827,25 @@ Here, we have changed the default main branch name to `MetroLine1`.
|
|||||||
|
|
||||||
## Orientation (v10.3.0+)
|
## Orientation (v10.3.0+)
|
||||||
|
|
||||||
In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
|
Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**.
|
||||||
|
|
||||||
|
You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`.
|
||||||
|
|
||||||
|
### Left to Right (default, `LR:`)
|
||||||
|
|
||||||
|
In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another.
|
||||||
|
|
||||||
|
However, you can set this explicitly with `LR:` after `gitGraph`.
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
gitGraph
|
gitGraph LR:
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
branch develop
|
branch develop
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
commit
|
|
||||||
checkout main
|
checkout main
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
@ -848,13 +855,12 @@ Usage example:
|
|||||||
```
|
```
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
gitGraph
|
gitGraph LR:
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
branch develop
|
branch develop
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
commit
|
|
||||||
checkout main
|
checkout main
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
@ -863,9 +869,11 @@ Usage example:
|
|||||||
commit
|
commit
|
||||||
```
|
```
|
||||||
|
|
||||||
Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**.
|
### Top to Bottom (`TB:`)
|
||||||
|
|
||||||
In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`.
|
In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side.
|
||||||
|
|
||||||
|
To orient the graph this way, you need to add `TB:` after gitGraph.
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
|
|
||||||
@ -876,7 +884,6 @@ Usage example:
|
|||||||
branch develop
|
branch develop
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
commit
|
|
||||||
checkout main
|
checkout main
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
@ -892,7 +899,6 @@ Usage example:
|
|||||||
branch develop
|
branch develop
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
commit
|
|
||||||
checkout main
|
checkout main
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
|
|||||||
@ -102,26 +102,26 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
|
|||||||
|
|
||||||
## Chart Configurations
|
## Chart Configurations
|
||||||
|
|
||||||
| Parameter | Description | Default value |
|
| Parameter | Description | Default value |
|
||||||
| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: |
|
| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: |
|
||||||
| chartWidth | Width of the chart | 500 |
|
| chartWidth | Width of the chart | 500 |
|
||||||
| chartHeight | Height of the chart | 500 |
|
| chartHeight | Height of the chart | 500 |
|
||||||
| titlePadding | Top and Bottom padding of the title | 10 |
|
| titlePadding | Top and Bottom padding of the title | 10 |
|
||||||
| titleFontSize | Title font size | 20 |
|
| titleFontSize | Title font size | 20 |
|
||||||
| quadrantPadding | Padding outside all the quadrants | 5 |
|
| quadrantPadding | Padding outside all the quadrants | 5 |
|
||||||
| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 |
|
| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 |
|
||||||
| quadrantLabelFontSize | Quadrant text font size | 16 |
|
| quadrantLabelFontSize | Quadrant text font size | 16 |
|
||||||
| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 |
|
| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 |
|
||||||
| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 |
|
| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 |
|
||||||
| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 |
|
| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 |
|
||||||
| xAxisLabelFontSize | X-axis texts font size | 16 |
|
| xAxisLabelFontSize | X-axis texts font size | 16 |
|
||||||
| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' |
|
| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' |
|
||||||
| yAxisLabelPadding | Left and Right padding of y-axis text | 5 |
|
| yAxisLabelPadding | Left and Right padding of y-axis text | 5 |
|
||||||
| yAxisLabelFontSize | Y-axis texts font size | 16 |
|
| yAxisLabelFontSize | Y-axis texts font size | 16 |
|
||||||
| yAxisPosition | Position of y-axis (left , right) | 'left' |
|
| yAxisPosition | Position of y-axis (left , right) | 'left' |
|
||||||
| pointTextPadding | Padding between point and the below text | 5 |
|
| pointTextPadding | Padding between point and the below text | 5 |
|
||||||
| pointLabelFontSize | Point text font size | 12 |
|
| pointLabelFontSize | Point text font size | 12 |
|
||||||
| pointRadius | Radius of the point to be drawn | 5 |
|
| pointRadius | Radius of the point to be drawn | 5 |
|
||||||
|
|
||||||
## Chart Theme Variables
|
## Chart Theme Variables
|
||||||
|
|
||||||
|
|||||||
@ -217,7 +217,7 @@ Note that there are no sections defined, and each time period and its correspond
|
|||||||
|
|
||||||
2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
|
2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
|
||||||
|
|
||||||
You will need to add this option either via mermaid.intialize function or directives.
|
You will need to add this option either via mermaid.initialize function or directives.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
|
|||||||
188
docs/syntax/xyChart.md
Normal file
188
docs/syntax/xyChart.md
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md).
|
||||||
|
|
||||||
|
# XY Chart
|
||||||
|
|
||||||
|
> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
|
||||||
|
|
||||||
|
> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```mermaid-example
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
```
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
> **Note**
|
||||||
|
> All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"`
|
||||||
|
|
||||||
|
### Orientations
|
||||||
|
|
||||||
|
The chart can be drawn horizontal or vertical, default value is vertical.
|
||||||
|
|
||||||
|
xychart-beta horizontal
|
||||||
|
...
|
||||||
|
|
||||||
|
### Title
|
||||||
|
|
||||||
|
The title is a short description of the chart and it will always render on top of the chart.
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
xychart-beta
|
||||||
|
title "This is a simple example"
|
||||||
|
...
|
||||||
|
|
||||||
|
> **Note**
|
||||||
|
> If the title is a single word one no need to use `"`, but if it has space `"` is needed
|
||||||
|
|
||||||
|
### x-axis
|
||||||
|
|
||||||
|
The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
1. `x-axis title min --> max` x-axis will function as numeric with the given range
|
||||||
|
2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
|
||||||
|
|
||||||
|
### y-axis
|
||||||
|
|
||||||
|
The y-axis is employed to represent numerical range values, it cannot have categorical values.
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
1. `y-axis title min --> max`
|
||||||
|
2. `y-axis title` it will only add the title, the range will be auto generated from data.
|
||||||
|
|
||||||
|
> **Note**
|
||||||
|
> Both x and y axis are optional if not provided we will try to create the range
|
||||||
|
|
||||||
|
### Line chart
|
||||||
|
|
||||||
|
A line chart offers the capability to graphically depict lines.
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
|
||||||
|
|
||||||
|
### Bar chart
|
||||||
|
|
||||||
|
A bar chart offers the capability to graphically depict bars.
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
|
||||||
|
|
||||||
|
#### Simplest example
|
||||||
|
|
||||||
|
The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
|
||||||
|
|
||||||
|
xychart-beta
|
||||||
|
line [+1.3, .6, 2.4, -.34]
|
||||||
|
|
||||||
|
## Chart Configurations
|
||||||
|
|
||||||
|
| Parameter | Description | Default value |
|
||||||
|
| ------------------------ | ---------------------------------------------- | :-----------: |
|
||||||
|
| width | Width of the chart | 700 |
|
||||||
|
| height | Height of the chart | 500 |
|
||||||
|
| titlePadding | Top and Bottom padding of the title | 10 |
|
||||||
|
| titleFontSize | Title font size | 20 |
|
||||||
|
| showTitle | Title to be shown or not | true |
|
||||||
|
| xAxis | xAxis configuration | AxisConfig |
|
||||||
|
| yAxis | yAxis configuration | AxisConfig |
|
||||||
|
| chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
|
||||||
|
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
|
||||||
|
|
||||||
|
### AxisConfig
|
||||||
|
|
||||||
|
| Parameter | Description | Default value |
|
||||||
|
| ------------- | ------------------------------------ | :-----------: |
|
||||||
|
| showLabel | Show axis labels or tick values | true |
|
||||||
|
| labelFontSize | Font size of the label to be drawn | 14 |
|
||||||
|
| labelPadding | Top and Bottom padding of the label | 5 |
|
||||||
|
| showTitle | Axis title to be shown or not | true |
|
||||||
|
| titleFontSize | Axis title font size | 16 |
|
||||||
|
| titlePadding | Top and Bottom padding of Axis title | 5 |
|
||||||
|
| showTick | Tick to be shown or not | true |
|
||||||
|
| tickLength | How long the tick will be | 5 |
|
||||||
|
| tickWidth | How width the tick will be | 2 |
|
||||||
|
| showAxisLine | Axis line to be shown or not | true |
|
||||||
|
| axisLineWidth | Thickness of the axis line | 2 |
|
||||||
|
|
||||||
|
## Chart Theme Variables
|
||||||
|
|
||||||
|
> **Note**
|
||||||
|
> Themes for xychart resides inside xychart attribute so to set the variables use this syntax
|
||||||
|
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
|
||||||
|
|
||||||
|
| Parameter | Description |
|
||||||
|
| ---------------- | --------------------------------------------------------- |
|
||||||
|
| backgroundColor | Background color of the whole chart |
|
||||||
|
| titleColor | Color of the Title text |
|
||||||
|
| xAxisLableColor | Color of the x-axis labels |
|
||||||
|
| xAxisTitleColor | Color of the x-axis title |
|
||||||
|
| xAxisTickColor | Color of the x-axis tick |
|
||||||
|
| xAxisLineColor | Color of the x-axis line |
|
||||||
|
| yAxisLableColor | Color of the y-axis labels |
|
||||||
|
| yAxisTitleColor | Color of the y-axis title |
|
||||||
|
| yAxisTickColor | Color of the y-axis tick |
|
||||||
|
| yAxisLineColor | Color of the y-axis line |
|
||||||
|
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
|
||||||
|
|
||||||
|
## Example on config and theme
|
||||||
|
|
||||||
|
```mermaid-example
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
width: 900
|
||||||
|
height: 600
|
||||||
|
themeVariables:
|
||||||
|
xyChart:
|
||||||
|
titleColor: "#ff0000"
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
```
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
width: 900
|
||||||
|
height: 600
|
||||||
|
themeVariables:
|
||||||
|
xyChart:
|
||||||
|
titleColor: "#ff0000"
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
```
|
||||||
10
package.json
10
package.json
@ -4,7 +4,7 @@
|
|||||||
"version": "10.2.4",
|
"version": "10.2.4",
|
||||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"packageManager": "pnpm@8.7.5",
|
"packageManager": "pnpm@8.10.4",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"diagram",
|
"diagram",
|
||||||
"markdown",
|
"markdown",
|
||||||
@ -77,8 +77,8 @@
|
|||||||
"@types/node": "^18.16.0",
|
"@types/node": "^18.16.0",
|
||||||
"@types/prettier": "^2.7.2",
|
"@types/prettier": "^2.7.2",
|
||||||
"@types/rollup-plugin-visualizer": "^4.2.1",
|
"@types/rollup-plugin-visualizer": "^4.2.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||||
"@typescript-eslint/parser": "^5.59.0",
|
"@typescript-eslint/parser": "^6.7.2",
|
||||||
"@vitest/coverage-v8": "^0.34.0",
|
"@vitest/coverage-v8": "^0.34.0",
|
||||||
"@vitest/spy": "^0.34.0",
|
"@vitest/spy": "^0.34.0",
|
||||||
"@vitest/ui": "^0.34.0",
|
"@vitest/ui": "^0.34.0",
|
||||||
@ -89,7 +89,7 @@
|
|||||||
"cypress": "^12.10.0",
|
"cypress": "^12.10.0",
|
||||||
"cypress-image-snapshot": "^4.0.1",
|
"cypress-image-snapshot": "^4.0.1",
|
||||||
"esbuild": "^0.19.0",
|
"esbuild": "^0.19.0",
|
||||||
"eslint": "^8.39.0",
|
"eslint": "^8.47.0",
|
||||||
"eslint-config-prettier": "^8.8.0",
|
"eslint-config-prettier": "^8.8.0",
|
||||||
"eslint-plugin-cypress": "^2.13.2",
|
"eslint-plugin-cypress": "^2.13.2",
|
||||||
"eslint-plugin-html": "^7.1.0",
|
"eslint-plugin-html": "^7.1.0",
|
||||||
@ -125,7 +125,7 @@
|
|||||||
"vitest": "^0.34.0"
|
"vitest": "^0.34.0"
|
||||||
},
|
},
|
||||||
"volta": {
|
"volta": {
|
||||||
"node": "18.17.1"
|
"node": "18.18.2"
|
||||||
},
|
},
|
||||||
"nyc": {
|
"nyc": {
|
||||||
"report-dir": "coverage/cypress"
|
"report-dir": "coverage/cypress"
|
||||||
|
|||||||
@ -40,7 +40,7 @@
|
|||||||
"types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
|
"types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
|
||||||
"checkCircle": "npx madge --circular ./src",
|
"checkCircle": "npx madge --circular ./src",
|
||||||
"release": "pnpm build",
|
"release": "pnpm build",
|
||||||
"prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build"
|
"prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm docs:release-version && pnpm -w run build"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
@ -47,6 +47,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
|
|||||||
'er',
|
'er',
|
||||||
'pie',
|
'pie',
|
||||||
'quadrantChart',
|
'quadrantChart',
|
||||||
|
'xyChart',
|
||||||
'requirement',
|
'requirement',
|
||||||
'mindmap',
|
'mindmap',
|
||||||
'timeline',
|
'timeline',
|
||||||
|
|||||||
@ -21,7 +21,7 @@ const versionPlaceholder = '<MERMAID_RELEASE_VERSION>';
|
|||||||
const main = async () => {
|
const main = async () => {
|
||||||
const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
|
const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
|
||||||
const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
|
const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
|
||||||
mdFileGlobs.push('!**/community/development.md');
|
mdFileGlobs.push('!**/community/development.md', '!**/community/code.md');
|
||||||
const mdFiles = await getFilesFromGlobs(mdFileGlobs);
|
const mdFiles = await getFilesFromGlobs(mdFileGlobs);
|
||||||
mdFiles.sort();
|
mdFiles.sort();
|
||||||
const mdFilesWithPlaceholder: string[] = [];
|
const mdFilesWithPlaceholder: string[] = [];
|
||||||
|
|||||||
@ -3,6 +3,8 @@ import { log } from './logger.js';
|
|||||||
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
|
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
|
||||||
import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
|
import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
|
||||||
import { UnknownDiagramError } from './errors.js';
|
import { UnknownDiagramError } from './errors.js';
|
||||||
|
import { encodeEntities } from './utils.js';
|
||||||
|
|
||||||
import type { DetailedError } from './utils.js';
|
import type { DetailedError } from './utils.js';
|
||||||
import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js';
|
import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js';
|
||||||
|
|
||||||
@ -21,6 +23,7 @@ export class Diagram {
|
|||||||
|
|
||||||
private detectError?: UnknownDiagramError;
|
private detectError?: UnknownDiagramError;
|
||||||
constructor(public text: string, public metadata: Pick<DiagramMetadata, 'title'> = {}) {
|
constructor(public text: string, public metadata: Pick<DiagramMetadata, 'title'> = {}) {
|
||||||
|
this.text = encodeEntities(text);
|
||||||
this.text += '\n';
|
this.text += '\n';
|
||||||
const cnf = configApi.getConfig();
|
const cnf = configApi.getConfig();
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -135,6 +135,7 @@ export interface MermaidConfig {
|
|||||||
er?: ErDiagramConfig;
|
er?: ErDiagramConfig;
|
||||||
pie?: PieDiagramConfig;
|
pie?: PieDiagramConfig;
|
||||||
quadrantChart?: QuadrantChartConfig;
|
quadrantChart?: QuadrantChartConfig;
|
||||||
|
xyChart?: XYChartConfig;
|
||||||
requirement?: RequirementDiagramConfig;
|
requirement?: RequirementDiagramConfig;
|
||||||
mindmap?: MindmapDiagramConfig;
|
mindmap?: MindmapDiagramConfig;
|
||||||
gitGraph?: GitGraphDiagramConfig;
|
gitGraph?: GitGraphDiagramConfig;
|
||||||
@ -721,6 +722,194 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
|
|||||||
*/
|
*/
|
||||||
quadrantExternalBorderStrokeWidth?: number;
|
quadrantExternalBorderStrokeWidth?: number;
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* This object contains configuration for XYChart axis config
|
||||||
|
*
|
||||||
|
* This interface was referenced by `MermaidConfig`'s JSON-Schema
|
||||||
|
* via the `definition` "XYChartAxisConfig".
|
||||||
|
*/
|
||||||
|
export interface XYChartAxisConfig {
|
||||||
|
/**
|
||||||
|
* Should show the axis labels (tick text)
|
||||||
|
*/
|
||||||
|
showLabel?: boolean;
|
||||||
|
/**
|
||||||
|
* font size of the axis labels (tick text)
|
||||||
|
*/
|
||||||
|
labelFontSize?: number;
|
||||||
|
/**
|
||||||
|
* top and bottom space from axis label (tick text)
|
||||||
|
*/
|
||||||
|
labelPadding?: number;
|
||||||
|
/**
|
||||||
|
* Should show the axis title
|
||||||
|
*/
|
||||||
|
showTitle?: boolean;
|
||||||
|
/**
|
||||||
|
* font size of the axis title
|
||||||
|
*/
|
||||||
|
titleFontSize?: number;
|
||||||
|
/**
|
||||||
|
* top and bottom space from axis title
|
||||||
|
*/
|
||||||
|
titlePadding?: number;
|
||||||
|
/**
|
||||||
|
* Should show the axis tick lines
|
||||||
|
*/
|
||||||
|
showTick?: boolean;
|
||||||
|
/**
|
||||||
|
* length of the axis tick lines
|
||||||
|
*/
|
||||||
|
tickLength?: number;
|
||||||
|
/**
|
||||||
|
* width of the axis tick lines
|
||||||
|
*/
|
||||||
|
tickWidth?: number;
|
||||||
|
/**
|
||||||
|
* Show line across the axis
|
||||||
|
*/
|
||||||
|
showAxisLine?: boolean;
|
||||||
|
/**
|
||||||
|
* Width of the axis line
|
||||||
|
*/
|
||||||
|
axisLineWidth?: number;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* This object contains configuration specific to XYCharts
|
||||||
|
*
|
||||||
|
* This interface was referenced by `MermaidConfig`'s JSON-Schema
|
||||||
|
* via the `definition` "XYChartConfig".
|
||||||
|
*/
|
||||||
|
export interface XYChartConfig extends BaseDiagramConfig {
|
||||||
|
/**
|
||||||
|
* width of the chart
|
||||||
|
*/
|
||||||
|
width?: number;
|
||||||
|
/**
|
||||||
|
* height of the chart
|
||||||
|
*/
|
||||||
|
height?: number;
|
||||||
|
/**
|
||||||
|
* Font size of the chart title
|
||||||
|
*/
|
||||||
|
titleFontSize?: number;
|
||||||
|
/**
|
||||||
|
* Top and bottom space from the chart title
|
||||||
|
*/
|
||||||
|
titlePadding?: number;
|
||||||
|
/**
|
||||||
|
* Should show the chart title
|
||||||
|
*/
|
||||||
|
showTitle?: boolean;
|
||||||
|
xAxis?: XYChartAxisConfig1;
|
||||||
|
yAxis?: XYChartAxisConfig2;
|
||||||
|
/**
|
||||||
|
* How to plot will be drawn horizontal or vertical
|
||||||
|
*/
|
||||||
|
chartOrientation?: 'vertical' | 'horizontal';
|
||||||
|
/**
|
||||||
|
* Minimum percent of space plots of the chart will take
|
||||||
|
*/
|
||||||
|
plotReservedSpacePercent?: number;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* This object contains configuration for XYChart axis config
|
||||||
|
*/
|
||||||
|
export interface XYChartAxisConfig1 {
|
||||||
|
/**
|
||||||
|
* Should show the axis labels (tick text)
|
||||||
|
*/
|
||||||
|
showLabel?: boolean;
|
||||||
|
/**
|
||||||
|
* font size of the axis labels (tick text)
|
||||||
|
*/
|
||||||
|
labelFontSize?: number;
|
||||||
|
/**
|
||||||
|
* top and bottom space from axis label (tick text)
|
||||||
|
*/
|
||||||
|
labelPadding?: number;
|
||||||
|
/**
|
||||||
|
* Should show the axis title
|
||||||
|
*/
|
||||||
|
showTitle?: boolean;
|
||||||
|
/**
|
||||||
|
* font size of the axis title
|
||||||
|
*/
|
||||||
|
titleFontSize?: number;
|
||||||
|
/**
|
||||||
|
* top and bottom space from axis title
|
||||||
|
*/
|
||||||
|
titlePadding?: number;
|
||||||
|
/**
|
||||||
|
* Should show the axis tick lines
|
||||||
|
*/
|
||||||
|
showTick?: boolean;
|
||||||
|
/**
|
||||||
|
* length of the axis tick lines
|
||||||
|
*/
|
||||||
|
tickLength?: number;
|
||||||
|
/**
|
||||||
|
* width of the axis tick lines
|
||||||
|
*/
|
||||||
|
tickWidth?: number;
|
||||||
|
/**
|
||||||
|
* Show line across the axis
|
||||||
|
*/
|
||||||
|
showAxisLine?: boolean;
|
||||||
|
/**
|
||||||
|
* Width of the axis line
|
||||||
|
*/
|
||||||
|
axisLineWidth?: number;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* This object contains configuration for XYChart axis config
|
||||||
|
*/
|
||||||
|
export interface XYChartAxisConfig2 {
|
||||||
|
/**
|
||||||
|
* Should show the axis labels (tick text)
|
||||||
|
*/
|
||||||
|
showLabel?: boolean;
|
||||||
|
/**
|
||||||
|
* font size of the axis labels (tick text)
|
||||||
|
*/
|
||||||
|
labelFontSize?: number;
|
||||||
|
/**
|
||||||
|
* top and bottom space from axis label (tick text)
|
||||||
|
*/
|
||||||
|
labelPadding?: number;
|
||||||
|
/**
|
||||||
|
* Should show the axis title
|
||||||
|
*/
|
||||||
|
showTitle?: boolean;
|
||||||
|
/**
|
||||||
|
* font size of the axis title
|
||||||
|
*/
|
||||||
|
titleFontSize?: number;
|
||||||
|
/**
|
||||||
|
* top and bottom space from axis title
|
||||||
|
*/
|
||||||
|
titlePadding?: number;
|
||||||
|
/**
|
||||||
|
* Should show the axis tick lines
|
||||||
|
*/
|
||||||
|
showTick?: boolean;
|
||||||
|
/**
|
||||||
|
* length of the axis tick lines
|
||||||
|
*/
|
||||||
|
tickLength?: number;
|
||||||
|
/**
|
||||||
|
* width of the axis tick lines
|
||||||
|
*/
|
||||||
|
tickWidth?: number;
|
||||||
|
/**
|
||||||
|
* Show line across the axis
|
||||||
|
*/
|
||||||
|
showAxisLine?: boolean;
|
||||||
|
/**
|
||||||
|
* Width of the axis line
|
||||||
|
*/
|
||||||
|
axisLineWidth?: number;
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* The object containing configurations specific for entity relationship diagrams
|
* The object containing configurations specific for entity relationship diagrams
|
||||||
*
|
*
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { log } from '../logger.js';
|
|||||||
import createLabel from './createLabel.js';
|
import createLabel from './createLabel.js';
|
||||||
import { createText } from '../rendering-util/createText.js';
|
import { createText } from '../rendering-util/createText.js';
|
||||||
import { select } from 'd3';
|
import { select } from 'd3';
|
||||||
import { getConfig } from '../config.js';
|
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||||
import { evaluate } from '../diagrams/common/common.js';
|
import { evaluate } from '../diagrams/common/common.js';
|
||||||
|
|
||||||
const rect = (parent, node) => {
|
const rect = (parent, node) => {
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import { select } from 'd3';
|
import { select } from 'd3';
|
||||||
import { log } from '../logger.js';
|
import { log } from '../logger.js';
|
||||||
import { getConfig } from '../config.js';
|
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||||
import { evaluate } from '../diagrams/common/common.js';
|
import { evaluate } from '../diagrams/common/common.js';
|
||||||
import { decodeEntities } from '../mermaidAPI.js';
|
import { decodeEntities } from '../utils.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param dom
|
* @param dom
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { log } from '../logger.js';
|
|||||||
import createLabel from './createLabel.js';
|
import createLabel from './createLabel.js';
|
||||||
import { createText } from '../rendering-util/createText.js';
|
import { createText } from '../rendering-util/createText.js';
|
||||||
import { line, curveBasis, select } from 'd3';
|
import { line, curveBasis, select } from 'd3';
|
||||||
import { getConfig } from '../config.js';
|
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||||
import utils from '../utils.js';
|
import utils from '../utils.js';
|
||||||
import { evaluate } from '../diagrams/common/common.js';
|
import { evaluate } from '../diagrams/common/common.js';
|
||||||
import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
|
import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
|
||||||
|
|||||||
@ -231,12 +231,12 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
|||||||
if (children.length > 0) {
|
if (children.length > 0) {
|
||||||
log.debug('Cluster identified', id, descendants);
|
log.debug('Cluster identified', id, descendants);
|
||||||
edges.forEach((edge) => {
|
edges.forEach((edge) => {
|
||||||
// log.debug('Edge, decendants: ', edge, decendants[id]);
|
// log.debug('Edge, descendants: ', edge, descendants[id]);
|
||||||
|
|
||||||
// Check if any edge leaves the cluster (not the actual cluster, that's a link from the box)
|
// Check if any edge leaves the cluster (not the actual cluster, that's a link from the box)
|
||||||
if (edge.v !== id && edge.w !== id) {
|
if (edge.v !== id && edge.w !== id) {
|
||||||
// Any edge where either the one of the nodes is descending to the cluster but not the other
|
// Any edge where either the one of the nodes is descending to the cluster but not the other
|
||||||
// if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {
|
// if (descendants[id].indexOf(edge.v) < 0 && descendants[id].indexOf(edge.w) < 0) {
|
||||||
|
|
||||||
const d1 = isDescendant(edge.v, id);
|
const d1 = isDescendant(edge.v, id);
|
||||||
const d2 = isDescendant(edge.w, id);
|
const d2 = isDescendant(edge.w, id);
|
||||||
|
|||||||
@ -419,7 +419,7 @@ describe('extractDescendants', function () {
|
|||||||
return {};
|
return {};
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
it('Simple case of one level decendants GLB9', function () {
|
it('Simple case of one level descendants GLB9', function () {
|
||||||
/*
|
/*
|
||||||
subgraph A
|
subgraph A
|
||||||
a
|
a
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { select } from 'd3';
|
import { select } from 'd3';
|
||||||
import { log } from '../logger.js';
|
import { log } from '../logger.js';
|
||||||
import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
|
import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
|
||||||
import { getConfig } from '../config.js';
|
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||||
import intersect from './intersect/index.js';
|
import intersect from './intersect/index.js';
|
||||||
import createLabel from './createLabel.js';
|
import createLabel from './createLabel.js';
|
||||||
import note from './shapes/note.js';
|
import note from './shapes/note.js';
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { updateNodeBounds, labelHelper } from './util.js';
|
import { updateNodeBounds, labelHelper } from './util.js';
|
||||||
import { log } from '../../logger.js';
|
import { log } from '../../logger.js';
|
||||||
import { getConfig } from '../../config.js';
|
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||||
import intersect from '../intersect/index.js';
|
import intersect from '../intersect/index.js';
|
||||||
|
|
||||||
const note = async (parent, node) => {
|
const note = async (parent, node) => {
|
||||||
|
|||||||
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