mirror of
https://github.com/mermaid-js/mermaid.git
synced 2024-08-27 20:51:30 +02:00
Merge branch 'develop' into sidv/eslintv9
* develop: (59 commits) docs: Update mermaid.init remove date docs: Remove incorrect = chore: Prettier format chore: Update config.type.ts chore Add vitest.workspace.js chore: Stricter TS version chore: Remove MermaidAPI from docs doc: Update deprecation message doc: Update deprecation message fix: prevent escaping label styles chore: update browsers list chore(deps): update all patch dependencies docs: Added demo diagram of bidirectional arrows for sequence diagrams fix(deps): update all patch dependencies chore: Update drupal regex chore: Update pnpm chore: Update docs to remove html tag like text rebuild chore: Use string templates chore: Update docs ...
This commit is contained in:
commit
871a13aff8
74 changed files with 3768 additions and 2441 deletions
5
.github/lychee.toml
vendored
5
.github/lychee.toml
vendored
|
@ -41,7 +41,10 @@ exclude = [
|
||||||
"https://bundlephobia.com",
|
"https://bundlephobia.com",
|
||||||
|
|
||||||
# Chrome webstore migration issue. Temporary
|
# Chrome webstore migration issue. Temporary
|
||||||
"https://chromewebstore.google.com"
|
"https://chromewebstore.google.com",
|
||||||
|
|
||||||
|
# Drupal 403
|
||||||
|
"https://(www.)?drupal.org"
|
||||||
]
|
]
|
||||||
|
|
||||||
# Exclude all private IPs from checking.
|
# Exclude all private IPs from checking.
|
||||||
|
|
72
.github/workflows/e2e.yml
vendored
72
.github/workflows/e2e.yml
vendored
|
@ -1,9 +1,3 @@
|
||||||
# We use github cache to save snapshots between runs.
|
|
||||||
# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
|
|
||||||
# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
|
|
||||||
# These are then downloaded before running the E2E, providing the reference snapshots.
|
|
||||||
# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
|
|
||||||
|
|
||||||
name: E2E
|
name: E2E
|
||||||
|
|
||||||
on:
|
on:
|
||||||
|
@ -72,16 +66,6 @@ jobs:
|
||||||
mkdir -p cypress/snapshots/stats/base
|
mkdir -p cypress/snapshots/stats/base
|
||||||
mv stats cypress/snapshots/stats/base
|
mv stats cypress/snapshots/stats/base
|
||||||
|
|
||||||
- name: Cypress run
|
|
||||||
uses: cypress-io/github-action@v6
|
|
||||||
id: cypress-snapshot-gen
|
|
||||||
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
|
|
||||||
with:
|
|
||||||
install: false
|
|
||||||
start: pnpm run dev
|
|
||||||
wait-on: 'http://localhost:9000'
|
|
||||||
browser: chrome
|
|
||||||
|
|
||||||
e2e:
|
e2e:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
container:
|
container:
|
||||||
|
@ -146,6 +130,10 @@ jobs:
|
||||||
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
|
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
|
||||||
VITEST_COVERAGE: true
|
VITEST_COVERAGE: true
|
||||||
CYPRESS_COMMIT: ${{ github.sha }}
|
CYPRESS_COMMIT: ${{ github.sha }}
|
||||||
|
ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
|
||||||
|
ARGOS_PARALLEL: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
|
||||||
|
ARGOS_PARALLEL_TOTAL: 4
|
||||||
|
ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
|
||||||
|
|
||||||
- name: Upload Coverage to Codecov
|
- name: Upload Coverage to Codecov
|
||||||
uses: codecov/codecov-action@v4
|
uses: codecov/codecov-action@v4
|
||||||
|
@ -158,55 +146,3 @@ jobs:
|
||||||
fail_ci_if_error: false
|
fail_ci_if_error: false
|
||||||
verbose: true
|
verbose: true
|
||||||
token: 6845cc80-77ee-4e17-85a1-026cd95e0766
|
token: 6845cc80-77ee-4e17-85a1-026cd95e0766
|
||||||
|
|
||||||
# We upload the artifacts into numbered archives to prevent overwriting
|
|
||||||
- name: Upload Artifacts
|
|
||||||
uses: actions/upload-artifact@v4
|
|
||||||
if: ${{ always() }}
|
|
||||||
with:
|
|
||||||
name: snapshots-${{ matrix.containers }}
|
|
||||||
retention-days: 1
|
|
||||||
path: ./cypress/snapshots
|
|
||||||
|
|
||||||
combineArtifacts:
|
|
||||||
needs: e2e
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
if: ${{ always() }}
|
|
||||||
steps:
|
|
||||||
# Download all snapshot artifacts and merge them into a single folder
|
|
||||||
- name: Download All Artifacts
|
|
||||||
uses: actions/download-artifact@v4
|
|
||||||
with:
|
|
||||||
path: snapshots
|
|
||||||
pattern: snapshots-*
|
|
||||||
merge-multiple: true
|
|
||||||
|
|
||||||
# For successful push events, we save the snapshots cache
|
|
||||||
- name: Save snapshots cache
|
|
||||||
id: cache-upload
|
|
||||||
if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
|
|
||||||
uses: actions/cache/save@v4
|
|
||||||
with:
|
|
||||||
path: ./snapshots
|
|
||||||
key: ${{ runner.os }}-snapshots-${{ github.event.after }}
|
|
||||||
|
|
||||||
- name: Flatten images to a folder
|
|
||||||
if: ${{ needs.e2e.result == 'failure' }}
|
|
||||||
run: |
|
|
||||||
mkdir errors
|
|
||||||
cd snapshots
|
|
||||||
find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
|
|
||||||
|
|
||||||
- name: Upload Error snapshots
|
|
||||||
if: ${{ needs.e2e.result == 'failure' }}
|
|
||||||
uses: actions/upload-artifact@v4
|
|
||||||
id: upload-artifacts
|
|
||||||
with:
|
|
||||||
name: error-snapshots
|
|
||||||
retention-days: 10
|
|
||||||
path: errors/
|
|
||||||
|
|
||||||
- name: Notify Users
|
|
||||||
if: ${{ needs.e2e.result == 'failure' }}
|
|
||||||
run: |
|
|
||||||
echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
|
|
||||||
|
|
|
@ -35,6 +35,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
|
||||||
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
|
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
|
||||||
[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
|
[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
|
||||||
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
|
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
|
||||||
|
[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)
|
||||||
|
|
||||||
<img src="./img/header.png" alt="" />
|
<img src="./img/header.png" alt="" />
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,8 @@ import { defineConfig } from 'cypress';
|
||||||
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
|
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
|
||||||
import coverage from '@cypress/code-coverage/task';
|
import coverage from '@cypress/code-coverage/task';
|
||||||
import eyesPlugin from '@applitools/eyes-cypress';
|
import eyesPlugin from '@applitools/eyes-cypress';
|
||||||
|
import { registerArgosTask } from '@argos-ci/cypress/task';
|
||||||
|
|
||||||
export default eyesPlugin(
|
export default eyesPlugin(
|
||||||
defineConfig({
|
defineConfig({
|
||||||
projectId: 'n2sma2',
|
projectId: 'n2sma2',
|
||||||
|
@ -17,10 +19,17 @@ export default eyesPlugin(
|
||||||
}
|
}
|
||||||
return launchOptions;
|
return launchOptions;
|
||||||
});
|
});
|
||||||
addMatchImageSnapshotPlugin(on, config);
|
|
||||||
// copy any needed variables from process.env to config.env
|
// copy any needed variables from process.env to config.env
|
||||||
config.env.useAppli = process.env.USE_APPLI ? true : false;
|
config.env.useAppli = process.env.USE_APPLI ? true : false;
|
||||||
|
config.env.useArgos = !!process.env.CI;
|
||||||
|
|
||||||
|
if (config.env.useArgos) {
|
||||||
|
registerArgosTask(on, config, {
|
||||||
|
token: 'fc3a35cf5200db928d65b2047861582d9444032b',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addMatchImageSnapshotPlugin(on, config);
|
||||||
|
}
|
||||||
// do not forget to return the changed config object!
|
// do not forget to return the changed config object!
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
|
|
|
@ -95,19 +95,8 @@ export const openURLAndVerifyRendering = (
|
||||||
options: CypressMermaidConfig,
|
options: CypressMermaidConfig,
|
||||||
validation?: any
|
validation?: any
|
||||||
): void => {
|
): void => {
|
||||||
const useAppli: boolean = Cypress.env('useAppli');
|
|
||||||
const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
||||||
|
|
||||||
if (useAppli) {
|
|
||||||
cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
|
|
||||||
cy.eyesOpen({
|
|
||||||
appName: 'Mermaid',
|
|
||||||
testName: name,
|
|
||||||
batchName: Cypress.spec.name,
|
|
||||||
batchId: batchId + Cypress.spec.name,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
cy.visit(url);
|
cy.visit(url);
|
||||||
cy.window().should('have.property', 'rendered', true);
|
cy.window().should('have.property', 'rendered', true);
|
||||||
cy.get('svg').should('be.visible');
|
cy.get('svg').should('be.visible');
|
||||||
|
@ -116,11 +105,27 @@ export const openURLAndVerifyRendering = (
|
||||||
cy.get('svg').should(validation);
|
cy.get('svg').should(validation);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
verifyScreenshot(name);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const verifyScreenshot = (name: string): void => {
|
||||||
|
const useAppli: boolean = Cypress.env('useAppli');
|
||||||
|
const useArgos: boolean = Cypress.env('useArgos');
|
||||||
|
|
||||||
if (useAppli) {
|
if (useAppli) {
|
||||||
|
cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
|
||||||
|
cy.eyesOpen({
|
||||||
|
appName: 'Mermaid',
|
||||||
|
testName: name,
|
||||||
|
batchName: Cypress.spec.name,
|
||||||
|
batchId: batchId + Cypress.spec.name,
|
||||||
|
});
|
||||||
cy.log(`Check eyes ${Cypress.spec.name}`);
|
cy.log(`Check eyes ${Cypress.spec.name}`);
|
||||||
cy.eyesCheckWindow('Click!');
|
cy.eyesCheckWindow('Click!');
|
||||||
cy.log(`Closing eyes ${Cypress.spec.name}`);
|
cy.log(`Closing eyes ${Cypress.spec.name}`);
|
||||||
cy.eyesClose();
|
cy.eyesClose();
|
||||||
|
} else if (useArgos) {
|
||||||
|
cy.argosScreenshot(name);
|
||||||
} else {
|
} else {
|
||||||
cy.matchImageSnapshot(name);
|
cy.matchImageSnapshot(name);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { renderGraph } from '../../helpers/util.ts';
|
import { renderGraph, verifyScreenshot } from '../../helpers/util.ts';
|
||||||
describe('Configuration', () => {
|
describe('Configuration', () => {
|
||||||
describe('arrowMarkerAbsolute', () => {
|
describe('arrowMarkerAbsolute', () => {
|
||||||
it('should handle default value false of arrowMarkerAbsolute', () => {
|
it('should handle default value false of arrowMarkerAbsolute', () => {
|
||||||
|
@ -119,8 +119,7 @@ describe('Configuration', () => {
|
||||||
const url = 'http://localhost:9000/regression/issue-1874.html';
|
const url = 'http://localhost:9000/regression/issue-1874.html';
|
||||||
cy.visit(url);
|
cy.visit(url);
|
||||||
cy.window().should('have.property', 'rendered', true);
|
cy.window().should('have.property', 'rendered', true);
|
||||||
cy.get('svg').should('be.visible');
|
verifyScreenshot(
|
||||||
cy.matchImageSnapshot(
|
|
||||||
'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
|
'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -145,7 +144,7 @@ describe('Configuration', () => {
|
||||||
// none of the diagrams should be error diagrams
|
// none of the diagrams should be error diagrams
|
||||||
expect($svg).to.not.contain('Syntax error');
|
expect($svg).to.not.contain('Syntax error');
|
||||||
});
|
});
|
||||||
cy.matchImageSnapshot(
|
verifyScreenshot(
|
||||||
'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
|
'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -162,7 +161,7 @@ describe('Configuration', () => {
|
||||||
// some of the diagrams should be error diagrams
|
// some of the diagrams should be error diagrams
|
||||||
expect($svg).to.contain('Syntax error');
|
expect($svg).to.contain('Syntax error');
|
||||||
});
|
});
|
||||||
cy.matchImageSnapshot(
|
verifyScreenshot(
|
||||||
'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
|
'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -10,7 +10,6 @@ describe('XSS', () => {
|
||||||
cy.wait(1000).then(() => {
|
cy.wait(1000).then(() => {
|
||||||
cy.get('.mermaid').should('exist');
|
cy.get('.mermaid').should('exist');
|
||||||
});
|
});
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not allow tags in the css', () => {
|
it('should not allow tags in the css', () => {
|
||||||
|
|
|
@ -30,7 +30,6 @@ describe('C4 diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a simple C4Container diagram', () => {
|
it('should render a simple C4Container diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -50,7 +49,6 @@ describe('C4 diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a simple C4Component diagram', () => {
|
it('should render a simple C4Component diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -69,7 +67,6 @@ describe('C4 diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a simple C4Dynamic diagram', () => {
|
it('should render a simple C4Dynamic diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -93,7 +90,6 @@ describe('C4 diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a simple C4Deployment diagram', () => {
|
it('should render a simple C4Deployment diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -117,6 +113,5 @@ describe('C4 diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -32,7 +32,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 1 }
|
{ logLevel: 1 }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('2: should render a simple class diagrams with cardinality', () => {
|
it('2: should render a simple class diagrams with cardinality', () => {
|
||||||
|
@ -61,7 +60,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('3: should render a simple class diagram with different visibilities', () => {
|
it('3: should render a simple class diagram with different visibilities', () => {
|
||||||
|
@ -79,7 +77,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('4: should render a simple class diagram with comments', () => {
|
it('4: should render a simple class diagram with comments', () => {
|
||||||
|
@ -109,7 +106,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('5: should render a simple class diagram with abstract method', () => {
|
it('5: should render a simple class diagram with abstract method', () => {
|
||||||
|
@ -121,7 +117,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('6: should render a simple class diagram with static method', () => {
|
it('6: should render a simple class diagram with static method', () => {
|
||||||
|
@ -133,7 +128,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('7: should render a simple class diagram with Generic class', () => {
|
it('7: should render a simple class diagram with Generic class', () => {
|
||||||
|
@ -153,7 +147,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('8: should render a simple class diagram with Generic class and relations', () => {
|
it('8: should render a simple class diagram with Generic class and relations', () => {
|
||||||
|
@ -174,7 +167,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('9: should render a simple class diagram with clickable link', () => {
|
it('9: should render a simple class diagram with clickable link', () => {
|
||||||
|
@ -196,7 +188,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('10: should render a simple class diagram with clickable callback', () => {
|
it('10: should render a simple class diagram with clickable callback', () => {
|
||||||
|
@ -218,7 +209,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('11: should render a simple class diagram with return type on method', () => {
|
it('11: should render a simple class diagram with return type on method', () => {
|
||||||
|
@ -233,7 +223,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('12: should render a simple class diagram with generic types', () => {
|
it('12: should render a simple class diagram with generic types', () => {
|
||||||
|
@ -249,7 +238,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('13: should render a simple class diagram with css classes applied', () => {
|
it('13: should render a simple class diagram with css classes applied', () => {
|
||||||
|
@ -267,7 +255,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('14: should render a simple class diagram with css classes applied directly', () => {
|
it('14: should render a simple class diagram with css classes applied directly', () => {
|
||||||
|
@ -283,7 +270,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
|
it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
|
||||||
|
@ -298,7 +284,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('16: should render multiple class diagrams', () => {
|
it('16: should render multiple class diagrams', () => {
|
||||||
|
@ -351,7 +336,6 @@ describe('Class diagram', () => {
|
||||||
],
|
],
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// it('17: should render a class diagram when useMaxWidth is true (default)', () => {
|
// it('17: should render a class diagram when useMaxWidth is true (default)', () => {
|
||||||
|
@ -421,7 +405,6 @@ describe('Class diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 1 }
|
{ logLevel: 1 }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render class diagram with newlines in title', () => {
|
it('should render class diagram with newlines in title', () => {
|
||||||
|
@ -439,7 +422,6 @@ describe('Class diagram', () => {
|
||||||
+quack()
|
+quack()
|
||||||
}
|
}
|
||||||
`);
|
`);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render class diagram with many newlines in title', () => {
|
it('should render class diagram with many newlines in title', () => {
|
||||||
|
|
|
@ -218,7 +218,6 @@ describe('Entity Relationship Diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ loglevel: 1 }
|
{ loglevel: 1 }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render entities with keys', () => {
|
it('should render entities with keys', () => {
|
||||||
|
|
|
@ -8,7 +8,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a complete quadrant chart', () => {
|
it('should render a complete quadrant chart', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -30,7 +29,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render without points', () => {
|
it('should render without points', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -46,7 +44,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should able to render y-axix on right side', () => {
|
it('should able to render y-axix on right side', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -63,7 +60,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should able to render x-axix on bottom', () => {
|
it('should able to render x-axix on bottom', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -80,7 +76,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should able to render x-axix on bottom and y-axis on right', () => {
|
it('should able to render x-axix on bottom and y-axis on right', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -97,7 +92,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render without title', () => {
|
it('should render without title', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -112,7 +106,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should use all the config', () => {
|
it('should use all the config', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -135,7 +128,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should use all the theme variable', () => {
|
it('should use all the theme variable', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -158,7 +150,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render x-axis labels in the center, if x-axis has two labels', () => {
|
it('should render x-axis labels in the center, if x-axis has two labels', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -180,7 +171,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render y-axis labels in the center, if y-axis has two labels', () => {
|
it('should render y-axis labels in the center, if y-axis has two labels', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -202,7 +192,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
|
it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -224,7 +213,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('it should render data points with styles', () => {
|
it('it should render data points with styles', () => {
|
||||||
|
@ -249,7 +237,6 @@ describe('Quadrant Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('it should render data points with styles + classes', () => {
|
it('it should render data points with styles + classes', () => {
|
||||||
|
|
|
@ -44,6 +44,5 @@ describe('Requirement diagram', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
/// <reference types="Cypress" />
|
// <reference types="Cypress" />
|
||||||
|
|
||||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
|
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
|
||||||
|
|
||||||
|
@ -68,6 +68,19 @@ context('Sequence diagram', () => {
|
||||||
{ sequence: { actorFontFamily: 'courier' } }
|
{ sequence: { actorFontFamily: 'courier' } }
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('should render bidirectional arrows', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
sequenceDiagram
|
||||||
|
Alice<<->>John: Hello John, how are you?
|
||||||
|
Alice<<-->>John: Hi Alice, I can hear you!
|
||||||
|
John<<->>Alice: This also works the other way
|
||||||
|
John<<-->>Alice: Yes
|
||||||
|
Alice->John: Test
|
||||||
|
John->>Alice: Still works
|
||||||
|
`
|
||||||
|
);
|
||||||
|
});
|
||||||
it('should handle different line breaks', () => {
|
it('should handle different line breaks', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
@ -464,6 +477,18 @@ context('Sequence diagram', () => {
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('should render notes over actors and participant', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
sequenceDiagram
|
||||||
|
actor Alice
|
||||||
|
participant Charlie
|
||||||
|
note over Alice: some note
|
||||||
|
note over Charlie: other note
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
it('should render long messages from an actor to the left to one to the right', () => {
|
it('should render long messages from an actor to the left to one to the right', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|
|
@ -8,7 +8,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 1, fontFamily: 'courier' }
|
{ logLevel: 1, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a simple state diagrams', () => {
|
it('v2 should render a simple state diagrams', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -20,7 +19,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a long descriptions instead of id when available', () => {
|
it('v2 should render a long descriptions instead of id when available', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -32,7 +30,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a long descriptions with additional descriptions', () => {
|
it('v2 should render a long descriptions with additional descriptions', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -44,7 +41,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a single state with short descriptions', () => {
|
it('v2 should render a single state with short descriptions', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -55,7 +51,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a transition descriptions with new lines', () => {
|
it('v2 should render a transition descriptions with new lines', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -69,7 +64,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a state with a note', () => {
|
it('v2 should render a state with a note', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -83,7 +77,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a state with on the left side when so specified', () => {
|
it('v2 should render a state with on the left side when so specified', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -97,7 +90,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a state with a note together with another state', () => {
|
it('v2 should render a state with a note together with another state', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -113,7 +105,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a note with multiple lines in it', () => {
|
it('v2 should render a note with multiple lines in it', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -156,7 +147,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a simple state diagrams 2', () => {
|
it('v2 should render a simple state diagrams 2', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -169,7 +159,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a simple state diagrams with labels', () => {
|
it('v2 should render a simple state diagrams with labels', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -185,7 +174,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render state descriptions', () => {
|
it('v2 should render state descriptions', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -198,7 +186,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render composite states', () => {
|
it('v2 should render composite states', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -217,7 +204,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render multiple composite states', () => {
|
it('v2 should render multiple composite states', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -287,7 +273,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render concurrency states', () => {
|
it('v2 should render concurrency states', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -311,7 +296,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('v2 should render a state with states in it', () => {
|
it('v2 should render a state with states in it', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
|
|
@ -10,7 +10,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a long descriptions instead of id when available', () => {
|
it('should render a long descriptions instead of id when available', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -22,7 +21,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a long descriptions with additional descriptions', () => {
|
it('should render a long descriptions with additional descriptions', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -34,7 +32,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a single state with short descriptions', () => {
|
it('should render a single state with short descriptions', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -45,7 +42,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a transition descriptions with new lines', () => {
|
it('should render a transition descriptions with new lines', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -59,7 +55,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a state with a note', () => {
|
it('should render a state with a note', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -73,7 +68,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a state with on the left side when so specified', () => {
|
it('should render a state with on the left side when so specified', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -87,7 +81,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a state with a note together with another state', () => {
|
it('should render a state with a note together with another state', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -103,7 +96,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a note with multiple lines in it', () => {
|
it('should render a note with multiple lines in it', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -146,7 +138,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a simple state diagrams 2', () => {
|
it('should render a simple state diagrams 2', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -159,7 +150,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a simple state diagrams with labels', () => {
|
it('should render a simple state diagrams with labels', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -175,7 +165,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render state descriptions', () => {
|
it('should render state descriptions', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -188,7 +177,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render composite states', () => {
|
it('should render composite states', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -207,7 +195,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render multiple composit states', () => {
|
it('should render multiple composit states', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -277,7 +264,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render concurrency states', () => {
|
it('should render concurrency states', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -301,7 +287,6 @@ describe('State diagram', () => {
|
||||||
`,
|
`,
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a state with states in it', () => {
|
it('should render a state with states in it', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
|
|
@ -10,7 +10,6 @@ describe('themeCSS balancing, it', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should not allow unbalanced CSS definitions 2', () => {
|
it('should not allow unbalanced CSS definitions 2', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -21,7 +20,6 @@ describe('themeCSS balancing, it', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -45,7 +43,6 @@ describe('Pie Chart', () => {
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a flowchart diagram', () => {
|
it('should render a flowchart diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -70,7 +67,6 @@ describe('Pie Chart', () => {
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a new flowchart diagram', () => {
|
it('should render a new flowchart diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -96,7 +92,6 @@ describe('Pie Chart', () => {
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a sequence diagram', () => {
|
it('should render a sequence diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -125,7 +120,6 @@ describe('Pie Chart', () => {
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render a class diagram', () => {
|
it('should render a class diagram', () => {
|
||||||
|
@ -175,7 +169,6 @@ describe('Pie Chart', () => {
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a state diagram', () => {
|
it('should render a state diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -210,7 +203,6 @@ stateDiagram
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a state diagram (v2)', () => {
|
it('should render a state diagram (v2)', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -245,7 +237,6 @@ stateDiagram-v2
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a er diagram', () => {
|
it('should render a er diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -266,7 +257,6 @@ erDiagram
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a user journey diagram', () => {
|
it('should render a user journey diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -287,7 +277,6 @@ erDiagram
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('should render a gantt diagram', () => {
|
it('should render a gantt diagram', () => {
|
||||||
cy.clock(new Date('2014-01-06').getTime());
|
cy.clock(new Date('2014-01-06').getTime());
|
||||||
|
@ -326,7 +315,6 @@ erDiagram
|
||||||
`,
|
`,
|
||||||
{ theme }
|
{ theme }
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -9,7 +9,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Should render a complete chart', () => {
|
it('Should render a complete chart', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -35,7 +34,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('y-axis title not required', () => {
|
it('y-axis title not required', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -48,7 +46,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Should render a chart without y-axis with different range', () => {
|
it('Should render a chart without y-axis with different range', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -60,7 +57,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('x axis title not required', () => {
|
it('x axis title not required', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -72,7 +68,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Multiple plots can be rendered', () => {
|
it('Multiple plots can be rendered', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -87,7 +82,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Decimals and negative numbers are supported', () => {
|
it('Decimals and negative numbers are supported', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -98,7 +92,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Render spark line with "plotReservedSpacePercent"', () => {
|
it('Render spark line with "plotReservedSpacePercent"', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -116,7 +109,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Render spark bar without displaying other property', () => {
|
it('Render spark bar without displaying other property', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -143,7 +135,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Should use all the config from directive', () => {
|
it('Should use all the config from directive', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -158,7 +149,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Should use all the config from yaml', () => {
|
it('Should use all the config from yaml', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -199,7 +189,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Render with show axis title false', () => {
|
it('Render with show axis title false', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -221,7 +210,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Render with show axis label false', () => {
|
it('Render with show axis label false', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -243,7 +231,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Render with show axis tick false', () => {
|
it('Render with show axis tick false', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -265,7 +252,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Render with show axis line false', () => {
|
it('Render with show axis line false', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -287,7 +273,6 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('Render all the theme color', () => {
|
it('Render all the theme color', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -317,6 +302,17 @@ describe('XY Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
});
|
||||||
|
it('should use the correct distances between data points', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis 0 --> 2
|
||||||
|
line [0, 1, 0, 1]
|
||||||
|
bar [1, 0, 1, 0]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
import '@cypress/code-coverage/support';
|
import '@cypress/code-coverage/support';
|
||||||
import '@applitools/eyes-cypress/commands';
|
import '@applitools/eyes-cypress/commands';
|
||||||
|
import '@argos-ci/cypress/support';
|
||||||
// Import commands.js using ES2015 syntax:
|
// Import commands.js using ES2015 syntax:
|
||||||
import './commands';
|
import './commands';
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es2020",
|
"target": "es2020",
|
||||||
"lib": ["es2020", "dom"],
|
"lib": ["es2020", "dom"],
|
||||||
"types": ["cypress", "node"],
|
"types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"noEmit": true
|
"noEmit": true
|
||||||
},
|
},
|
||||||
|
|
|
@ -238,6 +238,17 @@
|
||||||
Alice-xJohn: Hello John, how are you?
|
Alice-xJohn: Hello John, how are you?
|
||||||
John--xAlice: Great!
|
John--xAlice: Great!
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<pre class="mermaid">
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice<<->>Bob: Hello!
|
||||||
|
Alice<<->>Bob: Wow, we said that at the same time!
|
||||||
|
Bob<<-->>Alice: Bidirectional Arrows are so cool
|
||||||
|
</pre>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
version: '3.9'
|
|
||||||
services:
|
services:
|
||||||
mermaid:
|
mermaid:
|
||||||
build:
|
build:
|
||||||
|
@ -8,7 +7,7 @@ services:
|
||||||
tty: true
|
tty: true
|
||||||
working_dir: /mermaid
|
working_dir: /mermaid
|
||||||
mem_limit: '8G'
|
mem_limit: '8G'
|
||||||
entrypoint: docker-entrypoint.sh
|
entrypoint: ./docker-entrypoint.sh
|
||||||
environment:
|
environment:
|
||||||
- NODE_OPTIONS=--max_old_space_size=8192
|
- NODE_OPTIONS=--max_old_space_size=8192
|
||||||
volumes:
|
volumes:
|
||||||
|
@ -16,6 +15,7 @@ services:
|
||||||
- root_cache:/root/.cache
|
- root_cache:/root/.cache
|
||||||
- root_local:/root/.local
|
- root_local:/root/.local
|
||||||
- root_npm:/root/.npm
|
- root_npm:/root/.npm
|
||||||
|
- /tmp:/tmp
|
||||||
ports:
|
ports:
|
||||||
- 9000:9000
|
- 9000:9000
|
||||||
- 3333:3333
|
- 3333:3333
|
||||||
|
|
|
@ -56,7 +56,7 @@ The following commands must be sufficient enough to start with:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl -fsSL https://get.pnpm.io/install.sh | sh -
|
curl -fsSL https://get.pnpm.io/install.sh | sh -
|
||||||
pnpm env use --global 18
|
pnpm env use --global 20
|
||||||
```
|
```
|
||||||
|
|
||||||
You may also need to reload `.shrc` or `.bashrc` afterwards.
|
You may also need to reload `.shrc` or `.bashrc` afterwards.
|
||||||
|
|
|
@ -10,4 +10,4 @@
|
||||||
|
|
||||||
- [config](modules/config.md)
|
- [config](modules/config.md)
|
||||||
- [defaultConfig](modules/defaultConfig.md)
|
- [defaultConfig](modules/defaultConfig.md)
|
||||||
- [mermaidAPI](modules/mermaidAPI.md)
|
- [mermaid](modules/mermaid.md)
|
||||||
|
|
171
docs/config/setup/classes/mermaid.UnknownDiagramError.md
Normal file
171
docs/config/setup/classes/mermaid.UnknownDiagramError.md
Normal file
|
@ -0,0 +1,171 @@
|
||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/classes/mermaid.UnknownDiagramError.md](../../../../packages/mermaid/src/docs/config/setup/classes/mermaid.UnknownDiagramError.md).
|
||||||
|
|
||||||
|
# Class: UnknownDiagramError
|
||||||
|
|
||||||
|
[mermaid](../modules/mermaid.md).UnknownDiagramError
|
||||||
|
|
||||||
|
## Hierarchy
|
||||||
|
|
||||||
|
- `Error`
|
||||||
|
|
||||||
|
↳ **`UnknownDiagramError`**
|
||||||
|
|
||||||
|
## Constructors
|
||||||
|
|
||||||
|
### constructor
|
||||||
|
|
||||||
|
• **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](mermaid.UnknownDiagramError.md)
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
| Name | Type |
|
||||||
|
| :-------- | :------- |
|
||||||
|
| `message` | `string` |
|
||||||
|
|
||||||
|
#### Returns
|
||||||
|
|
||||||
|
[`UnknownDiagramError`](mermaid.UnknownDiagramError.md)
|
||||||
|
|
||||||
|
#### Overrides
|
||||||
|
|
||||||
|
Error.constructor
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
### cause
|
||||||
|
|
||||||
|
• `Optional` **cause**: `unknown`
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
Error.cause
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es2022.error.d.ts:24
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### message
|
||||||
|
|
||||||
|
• **message**: `string`
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
Error.message
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1077
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### name
|
||||||
|
|
||||||
|
• **name**: `string`
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
Error.name
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1076
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### stack
|
||||||
|
|
||||||
|
• `Optional` **stack**: `string`
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
Error.stack
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1078
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### prepareStackTrace
|
||||||
|
|
||||||
|
▪ `Static` `Optional` **prepareStackTrace**: (`err`: `Error`, `stackTraces`: `CallSite`\[]) => `any`
|
||||||
|
|
||||||
|
Optional override for formatting stack traces
|
||||||
|
|
||||||
|
**`See`**
|
||||||
|
|
||||||
|
<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`err`, `stackTraces`): `any`
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type |
|
||||||
|
| :------------ | :------------ |
|
||||||
|
| `err` | `Error` |
|
||||||
|
| `stackTraces` | `CallSite`\[] |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`any`
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
Error.prepareStackTrace
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
node_modules/@types/node/globals.d.ts:28
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### stackTraceLimit
|
||||||
|
|
||||||
|
▪ `Static` **stackTraceLimit**: `number`
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
Error.stackTraceLimit
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
node_modules/@types/node/globals.d.ts:30
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
### captureStackTrace
|
||||||
|
|
||||||
|
▸ **captureStackTrace**(`targetObject`, `constructorOpt?`): `void`
|
||||||
|
|
||||||
|
Create .stack property on a target object
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
| Name | Type |
|
||||||
|
| :---------------- | :--------- |
|
||||||
|
| `targetObject` | `object` |
|
||||||
|
| `constructorOpt?` | `Function` |
|
||||||
|
|
||||||
|
#### Returns
|
||||||
|
|
||||||
|
`void`
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
Error.captureStackTrace
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
node_modules/@types/node/globals.d.ts:21
|
49
docs/config/setup/interfaces/mermaid.DetailedError.md
Normal file
49
docs/config/setup/interfaces/mermaid.DetailedError.md
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md).
|
||||||
|
|
||||||
|
# Interface: DetailedError
|
||||||
|
|
||||||
|
[mermaid](../modules/mermaid.md).DetailedError
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
### error
|
||||||
|
|
||||||
|
• `Optional` **error**: `any`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/utils.ts:789](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L789)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### hash
|
||||||
|
|
||||||
|
• **hash**: `any`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/utils.ts:787](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L787)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### message
|
||||||
|
|
||||||
|
• `Optional` **message**: `string`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/utils.ts:790](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L790)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### str
|
||||||
|
|
||||||
|
• **str**: `string`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/utils.ts:785](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L785)
|
|
@ -0,0 +1,39 @@
|
||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md).
|
||||||
|
|
||||||
|
# Interface: ExternalDiagramDefinition
|
||||||
|
|
||||||
|
[mermaid](../modules/mermaid.md).ExternalDiagramDefinition
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
### detector
|
||||||
|
|
||||||
|
• **detector**: `DiagramDetector`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### id
|
||||||
|
|
||||||
|
• **id**: `string`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### loader
|
||||||
|
|
||||||
|
• **loader**: `DiagramLoader`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)
|
340
docs/config/setup/interfaces/mermaid.Mermaid.md
Normal file
340
docs/config/setup/interfaces/mermaid.Mermaid.md
Normal file
|
@ -0,0 +1,340 @@
|
||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md).
|
||||||
|
|
||||||
|
# Interface: Mermaid
|
||||||
|
|
||||||
|
[mermaid](../modules/mermaid.md).Mermaid
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
### contentLoaded
|
||||||
|
|
||||||
|
• **contentLoaded**: () => `void`
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (): `void`
|
||||||
|
|
||||||
|
\##contentLoaded Callback function that is called when page is loaded. This functions fetches
|
||||||
|
configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
|
||||||
|
page.
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`void`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### detectType
|
||||||
|
|
||||||
|
• **detectType**: (`text`: `string`, `config?`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`text`, `config?`): `string`
|
||||||
|
|
||||||
|
Detects the type of the graph text.
|
||||||
|
|
||||||
|
Takes into consideration the possible existence of an `%%init` directive
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| :-------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| `text` | `string` | The text defining the graph. For example: `mermaid %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%% graph LR a-->b b-->c c-->d d-->e e-->f f-->g g-->h ` |
|
||||||
|
| `config?` | [`MermaidConfig`](mermaid.MermaidConfig.md) | The mermaid config. |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`string`
|
||||||
|
|
||||||
|
A graph definition key
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### init
|
||||||
|
|
||||||
|
• **init**: (`config?`: [`MermaidConfig`](mermaid.MermaidConfig.md), `nodes?`: `string` | `HTMLElement` | `NodeListOf`<`HTMLElement`>, `callback?`: (`id`: `string`) => `unknown`) => `Promise`<`void`>
|
||||||
|
|
||||||
|
**`Deprecated`**
|
||||||
|
|
||||||
|
Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run) instead.
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`config?`, `nodes?`, `callback?`): `Promise`<`void`>
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type |
|
||||||
|
| :---------- | :------------------------------------------------------- |
|
||||||
|
| `config?` | [`MermaidConfig`](mermaid.MermaidConfig.md) |
|
||||||
|
| `nodes?` | `string` \| `HTMLElement` \| `NodeListOf`<`HTMLElement`> |
|
||||||
|
| `callback?` | (`id`: `string`) => `unknown` |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`Promise`<`void`>
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### initialize
|
||||||
|
|
||||||
|
• **initialize**: (`config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void`
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`config`): `void`
|
||||||
|
|
||||||
|
Used to set configurations for mermaid.
|
||||||
|
This function should be called before the run function.
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| :------- | :------------------------------------------ | :-------------------------------- |
|
||||||
|
| `config` | [`MermaidConfig`](mermaid.MermaidConfig.md) | Configuration object for mermaid. |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`void`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### mermaidAPI
|
||||||
|
|
||||||
|
• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
|
||||||
|
|
||||||
|
**`Deprecated`**
|
||||||
|
|
||||||
|
Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:415](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L415)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### parse
|
||||||
|
|
||||||
|
• **parse**: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`text`, `parseOptions`): `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
|
||||||
|
|
||||||
|
Parse the text and validate the syntax.
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| :------------- | :----------------------------------------------------------------------- | :------------------------------ |
|
||||||
|
| `text` | `string` | The mermaid diagram definition. |
|
||||||
|
| `parseOptions` | [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` } | Options for parsing. |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
|
||||||
|
|
||||||
|
An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
|
||||||
|
|
||||||
|
**`See`**
|
||||||
|
|
||||||
|
[ParseOptions](mermaid.ParseOptions.md)
|
||||||
|
|
||||||
|
**`Throws`**
|
||||||
|
|
||||||
|
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
|
||||||
|
|
||||||
|
▸ (`text`, `parseOptions?`): `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type |
|
||||||
|
| :-------------- | :---------------------------------------- |
|
||||||
|
| `text` | `string` |
|
||||||
|
| `parseOptions?` | [`ParseOptions`](mermaid.ParseOptions.md) |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`Promise`<[`ParseResult`](mermaid.ParseResult.md)>
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:416](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L416)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### parseError
|
||||||
|
|
||||||
|
• `Optional` **parseError**: [`ParseErrorFunction`](../modules/mermaid.md#parseerrorfunction)
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:410](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L410)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### registerExternalDiagrams
|
||||||
|
|
||||||
|
• **registerExternalDiagrams**: (`diagrams`: [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[], `opts`: { `lazyLoad?`: `boolean` = true }) => `Promise`<`void`>
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`diagrams`, `opts?`): `Promise`<`void`>
|
||||||
|
|
||||||
|
Used to register external diagram types.
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type | Default value | Description |
|
||||||
|
| :--------------- | :--------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------- |
|
||||||
|
| `diagrams` | [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[] | `undefined` | Array of [ExternalDiagramDefinition](mermaid.ExternalDiagramDefinition.md). |
|
||||||
|
| `opts` | `Object` | `{}` | If opts.lazyLoad is false, the diagrams will be loaded immediately. |
|
||||||
|
| `opts.lazyLoad?` | `boolean` | `true` | - |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`Promise`<`void`>
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:423](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L423)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### render
|
||||||
|
|
||||||
|
• **render**: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`id`, `text`, `svgContainingElement?`): `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type |
|
||||||
|
| :---------------------- | :-------- |
|
||||||
|
| `id` | `string` |
|
||||||
|
| `text` | `string` |
|
||||||
|
| `svgContainingElement?` | `Element` |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`Promise`<[`RenderResult`](mermaid.RenderResult.md)>
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:417](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L417)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### run
|
||||||
|
|
||||||
|
• **run**: (`options`: [`RunOptions`](mermaid.RunOptions.md)) => `Promise`<`void`>
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`options?`): `Promise`<`void`>
|
||||||
|
|
||||||
|
## run
|
||||||
|
|
||||||
|
Function that goes through the document to find the chart definitions in there and render them.
|
||||||
|
|
||||||
|
The function tags the processed attributes with the attribute data-processed and ignores found
|
||||||
|
elements with the attribute already set. This way the init function can be triggered several
|
||||||
|
times.
|
||||||
|
|
||||||
|
```mermaid-example
|
||||||
|
graph LR;
|
||||||
|
a(Find elements)-->b{Processed}
|
||||||
|
b-->|Yes|c(Leave element)
|
||||||
|
b-->|No |d(Transform)
|
||||||
|
```
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph LR;
|
||||||
|
a(Find elements)-->b{Processed}
|
||||||
|
b-->|Yes|c(Leave element)
|
||||||
|
b-->|No |d(Transform)
|
||||||
|
```
|
||||||
|
|
||||||
|
Renders the mermaid diagrams
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| :-------- | :------------------------------------ | :----------------------- |
|
||||||
|
| `options` | [`RunOptions`](mermaid.RunOptions.md) | Optional runtime configs |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`Promise`<`void`>
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:422](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L422)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### setParseErrorHandler
|
||||||
|
|
||||||
|
• **setParseErrorHandler**: (`parseErrorHandler`: (`err`: `any`, `hash`: `any`) => `void`) => `void`
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`parseErrorHandler`): `void`
|
||||||
|
|
||||||
|
## setParseErrorHandler Alternative to directly setting parseError using:
|
||||||
|
|
||||||
|
```js
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
forExampleDisplayErrorInGui(err); // do something with the error
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
This is provided for environments where the mermaid object can't directly have a new member added
|
||||||
|
to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| :------------------ | :-------------------------------------- | :------------------------- |
|
||||||
|
| `parseErrorHandler` | (`err`: `any`, `hash`: `any`) => `void` | New parseError() callback. |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`void`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### startOnLoad
|
||||||
|
|
||||||
|
• **startOnLoad**: `boolean`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:409](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L409)
|
467
docs/config/setup/interfaces/mermaid.MermaidConfig.md
Normal file
467
docs/config/setup/interfaces/mermaid.MermaidConfig.md
Normal file
|
@ -0,0 +1,467 @@
|
||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md).
|
||||||
|
|
||||||
|
# Interface: MermaidConfig
|
||||||
|
|
||||||
|
[mermaid](../modules/mermaid.md).MermaidConfig
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
### altFontFamily
|
||||||
|
|
||||||
|
• `Optional` **altFontFamily**: `string`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L85)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### arrowMarkerAbsolute
|
||||||
|
|
||||||
|
• `Optional` **arrowMarkerAbsolute**: `boolean`
|
||||||
|
|
||||||
|
Controls whether or arrow markers in html code are absolute paths or anchors.
|
||||||
|
This matters if you are using base tag settings.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L104)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### block
|
||||||
|
|
||||||
|
• `Optional` **block**: `BlockDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### c4
|
||||||
|
|
||||||
|
• `Optional` **c4**: `C4DiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L159)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### class
|
||||||
|
|
||||||
|
• `Optional` **class**: `ClassDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:150](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L150)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### darkMode
|
||||||
|
|
||||||
|
• `Optional` **darkMode**: `boolean`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L76)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### deterministicIDSeed
|
||||||
|
|
||||||
|
• `Optional` **deterministicIDSeed**: `string`
|
||||||
|
|
||||||
|
This option is the optional seed for deterministic ids.
|
||||||
|
If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
|
||||||
|
You can set this attribute to base the seed on a static string.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L144)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### deterministicIds
|
||||||
|
|
||||||
|
• `Optional` **deterministicIds**: `boolean`
|
||||||
|
|
||||||
|
This option controls if the generated ids of nodes in the SVG are
|
||||||
|
generated randomly or based on a seed.
|
||||||
|
If set to `false`, the IDs are generated based on the current date and
|
||||||
|
thus are not deterministic. This is the default behavior.
|
||||||
|
|
||||||
|
This matters if your files are checked into source control e.g. git and
|
||||||
|
should not change unless content is changed.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### dompurifyConfig
|
||||||
|
|
||||||
|
• `Optional` **dompurifyConfig**: `Config`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### er
|
||||||
|
|
||||||
|
• `Optional` **er**: `ErDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L152)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### flowchart
|
||||||
|
|
||||||
|
• `Optional` **flowchart**: `FlowchartDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### fontFamily
|
||||||
|
|
||||||
|
• `Optional` **fontFamily**: `string`
|
||||||
|
|
||||||
|
Specifies the font to be used in the rendered diagrams.
|
||||||
|
Can be any possible CSS `font-family`.
|
||||||
|
See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L84)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### fontSize
|
||||||
|
|
||||||
|
• `Optional` **fontSize**: `number`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L165)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### forceLegacyMathML
|
||||||
|
|
||||||
|
• `Optional` **forceLegacyMathML**: `boolean`
|
||||||
|
|
||||||
|
This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
|
||||||
|
fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
|
||||||
|
If set to true, ignores legacyMathML.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L126)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### gantt
|
||||||
|
|
||||||
|
• `Optional` **gantt**: `GanttDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L147)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### gitGraph
|
||||||
|
|
||||||
|
• `Optional` **gitGraph**: `GitGraphDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### htmlLabels
|
||||||
|
|
||||||
|
• `Optional` **htmlLabels**: `boolean`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L77)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### journey
|
||||||
|
|
||||||
|
• `Optional` **journey**: `JourneyDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### legacyMathML
|
||||||
|
|
||||||
|
• `Optional` **legacyMathML**: `boolean`
|
||||||
|
|
||||||
|
This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
|
||||||
|
without their own MathML implementation. If this option is disabled and MathML is not supported, the math
|
||||||
|
equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
|
||||||
|
fall back to legacy rendering for KaTeX.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L119)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### logLevel
|
||||||
|
|
||||||
|
• `Optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
|
||||||
|
|
||||||
|
This option decides the amount of logging to be used by mermaid.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L90)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### markdownAutoWrap
|
||||||
|
|
||||||
|
• `Optional` **markdownAutoWrap**: `boolean`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### maxEdges
|
||||||
|
|
||||||
|
• `Optional` **maxEdges**: `number`
|
||||||
|
|
||||||
|
Defines the maximum number of edges that can be drawn in a graph.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L75)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### maxTextSize
|
||||||
|
|
||||||
|
• `Optional` **maxTextSize**: `number`
|
||||||
|
|
||||||
|
The maximum allowed size of the users text diagram
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L70)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### mindmap
|
||||||
|
|
||||||
|
• `Optional` **mindmap**: `MindmapDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:157](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L157)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### packet
|
||||||
|
|
||||||
|
• `Optional` **packet**: `PacketDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:161](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L161)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### pie
|
||||||
|
|
||||||
|
• `Optional` **pie**: `PieDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L153)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### quadrantChart
|
||||||
|
|
||||||
|
• `Optional` **quadrantChart**: `QuadrantChartConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L154)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### requirement
|
||||||
|
|
||||||
|
• `Optional` **requirement**: `RequirementDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### sankey
|
||||||
|
|
||||||
|
• `Optional` **sankey**: `SankeyDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L160)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### secure
|
||||||
|
|
||||||
|
• `Optional` **secure**: `string`\[]
|
||||||
|
|
||||||
|
This option controls which `currentConfig` keys are considered secure and
|
||||||
|
can only be changed via call to `mermaid.initialize`.
|
||||||
|
This prevents malicious graph directives from overriding a site's default security.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:111](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L111)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### securityLevel
|
||||||
|
|
||||||
|
• `Optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
|
||||||
|
|
||||||
|
Level of trust for parsed diagram
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L94)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### sequence
|
||||||
|
|
||||||
|
• `Optional` **sequence**: `SequenceDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L146)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### startOnLoad
|
||||||
|
|
||||||
|
• `Optional` **startOnLoad**: `boolean`
|
||||||
|
|
||||||
|
Dictates whether mermaid starts on Page load
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L98)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### state
|
||||||
|
|
||||||
|
• `Optional` **state**: `StateDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### suppressErrorRendering
|
||||||
|
|
||||||
|
• `Optional` **suppressErrorRendering**: `boolean`
|
||||||
|
|
||||||
|
Suppresses inserting 'Syntax error' diagram in the DOM.
|
||||||
|
This is useful when you want to control how to handle syntax errors in your application.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### theme
|
||||||
|
|
||||||
|
• `Optional` **theme**: `"default"` | `"forest"` | `"dark"` | `"neutral"` | `"null"`
|
||||||
|
|
||||||
|
Theme, the CSS style sheet.
|
||||||
|
You may also use `themeCSS` to override this value.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L64)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### themeCSS
|
||||||
|
|
||||||
|
• `Optional` **themeCSS**: `string`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L66)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### themeVariables
|
||||||
|
|
||||||
|
• `Optional` **themeVariables**: `any`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L65)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### timeline
|
||||||
|
|
||||||
|
• `Optional` **timeline**: `TimelineDiagramConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L149)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### wrap
|
||||||
|
|
||||||
|
• `Optional` **wrap**: `boolean`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### xyChart
|
||||||
|
|
||||||
|
• `Optional` **xyChart**: `XYChartConfig`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/config.type.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L155)
|
|
@ -2,11 +2,11 @@
|
||||||
>
|
>
|
||||||
> ## 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/config/setup/interfaces/mermaidAPI.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md).
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md).
|
||||||
|
|
||||||
# Interface: ParseOptions
|
# Interface: ParseOptions
|
||||||
|
|
||||||
[mermaidAPI](../modules/mermaidAPI.md).ParseOptions
|
[mermaid](../modules/mermaid.md).ParseOptions
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
|
@ -19,4 +19,4 @@ The `parseError` function will not be called.
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
|
[packages/mermaid/src/types.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L43)
|
21
docs/config/setup/interfaces/mermaid.ParseResult.md
Normal file
21
docs/config/setup/interfaces/mermaid.ParseResult.md
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseResult.md).
|
||||||
|
|
||||||
|
# Interface: ParseResult
|
||||||
|
|
||||||
|
[mermaid](../modules/mermaid.md).ParseResult
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
### diagramType
|
||||||
|
|
||||||
|
• **diagramType**: `string`
|
||||||
|
|
||||||
|
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/types.ts:50](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L50)
|
|
@ -2,11 +2,11 @@
|
||||||
>
|
>
|
||||||
> ## 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/config/setup/interfaces/mermaidAPI.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md).
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderResult.md).
|
||||||
|
|
||||||
# Interface: RenderResult
|
# Interface: RenderResult
|
||||||
|
|
||||||
[mermaidAPI](../modules/mermaidAPI.md).RenderResult
|
[mermaid](../modules/mermaid.md).RenderResult
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
|
@ -18,7 +18,7 @@ Bind function to be called after the svg has been inserted into the DOM.
|
||||||
This is necessary for adding event listeners to the elements in the svg.
|
This is necessary for adding event listeners to the elements in the svg.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
|
const { svg, bindFunctions } = await mermaid.render('id1', 'graph TD;A-->B');
|
||||||
div.innerHTML = svg;
|
div.innerHTML = svg;
|
||||||
bindFunctions?.(div); // To call bindFunctions only if it's present.
|
bindFunctions?.(div); // To call bindFunctions only if it's present.
|
||||||
```
|
```
|
||||||
|
@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[mermaidAPI.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L94)
|
[packages/mermaid/src/types.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L73)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[mermaidAPI.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L84)
|
[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -63,4 +63,4 @@ The svg code for the rendered graph.
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
|
[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
|
71
docs/config/setup/interfaces/mermaid.RunOptions.md
Normal file
71
docs/config/setup/interfaces/mermaid.RunOptions.md
Normal file
|
@ -0,0 +1,71 @@
|
||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md).
|
||||||
|
|
||||||
|
# Interface: RunOptions
|
||||||
|
|
||||||
|
[mermaid](../modules/mermaid.md).RunOptions
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
### nodes
|
||||||
|
|
||||||
|
• `Optional` **nodes**: `ArrayLike`<`HTMLElement`>
|
||||||
|
|
||||||
|
The nodes to render. If this is set, `querySelector` will be ignored.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:39](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L39)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### postRenderCallback
|
||||||
|
|
||||||
|
• `Optional` **postRenderCallback**: (`id`: `string`) => `unknown`
|
||||||
|
|
||||||
|
A callback to call after each diagram is rendered.
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`id`): `unknown`
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type |
|
||||||
|
| :--- | :------- |
|
||||||
|
| `id` | `string` |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`unknown`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L43)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### querySelector
|
||||||
|
|
||||||
|
• `Optional` **querySelector**: `string`
|
||||||
|
|
||||||
|
The query selector to use when finding elements to render. Default: `".mermaid"`.
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:35](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L35)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### suppressErrors
|
||||||
|
|
||||||
|
• `Optional` **suppressErrors**: `boolean`
|
||||||
|
|
||||||
|
If `true`, errors will be logged to the console, but not thrown. Default: `false`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:47](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L47)
|
|
@ -1,21 +0,0 @@
|
||||||
> **Warning**
|
|
||||||
>
|
|
||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
|
||||||
>
|
|
||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseResult.md).
|
|
||||||
|
|
||||||
# Interface: ParseResult
|
|
||||||
|
|
||||||
[mermaidAPI](../modules/mermaidAPI.md).ParseResult
|
|
||||||
|
|
||||||
## Properties
|
|
||||||
|
|
||||||
### diagramType
|
|
||||||
|
|
||||||
• **diagramType**: `string`
|
|
||||||
|
|
||||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L71)
|
|
|
@ -10,11 +10,11 @@
|
||||||
|
|
||||||
### defaultConfig
|
### defaultConfig
|
||||||
|
|
||||||
• `Const` **defaultConfig**: `MermaidConfig`
|
• `Const` **defaultConfig**: [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
|
[packages/mermaid/src/config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
|
||||||
|
|
||||||
## Functions
|
## Functions
|
||||||
|
|
||||||
|
@ -27,8 +27,8 @@ Pushes in a directive to the configuration
|
||||||
#### Parameters
|
#### Parameters
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| :---------- | :-------------- | :----------------------- |
|
| :---------- | :-------------------------------------------------------- | :----------------------- |
|
||||||
| `directive` | `MermaidConfig` | The directive to push in |
|
| `directive` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The directive to push in |
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
|
@ -36,13 +36,13 @@ Pushes in a directive to the configuration
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
|
[packages/mermaid/src/config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### getConfig
|
### getConfig
|
||||||
|
|
||||||
▸ **getConfig**(): `MermaidConfig`
|
▸ **getConfig**(): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
## getConfig
|
## getConfig
|
||||||
|
|
||||||
|
@ -54,19 +54,19 @@ Pushes in a directive to the configuration
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
`MermaidConfig`
|
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
The currentConfig
|
The currentConfig
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
|
[packages/mermaid/src/config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### getSiteConfig
|
### getSiteConfig
|
||||||
|
|
||||||
▸ **getSiteConfig**(): `MermaidConfig`
|
▸ **getSiteConfig**(): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
## getSiteConfig
|
## getSiteConfig
|
||||||
|
|
||||||
|
@ -78,13 +78,13 @@ The currentConfig
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
`MermaidConfig`
|
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
The siteConfig
|
The siteConfig
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
|
[packages/mermaid/src/config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -109,8 +109,8 @@ The siteConfig
|
||||||
#### Parameters
|
#### Parameters
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
| Name | Type | Default value | Description |
|
||||||
| :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
| :------- | :-------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
| `config` | `MermaidConfig` | `siteConfig` | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
|
| `config` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | `siteConfig` | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
|
@ -118,7 +118,7 @@ The siteConfig
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
|
[packages/mermaid/src/config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -147,7 +147,7 @@ options in-place
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
|
[packages/mermaid/src/config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -158,8 +158,8 @@ options in-place
|
||||||
#### Parameters
|
#### Parameters
|
||||||
|
|
||||||
| Name | Type |
|
| Name | Type |
|
||||||
| :----- | :-------------- |
|
| :----- | :-------------------------------------------------------- |
|
||||||
| `conf` | `MermaidConfig` |
|
| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
|
@ -167,13 +167,13 @@ options in-place
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
|
[packages/mermaid/src/config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### setConfig
|
### setConfig
|
||||||
|
|
||||||
▸ **setConfig**(`conf`): `MermaidConfig`
|
▸ **setConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
## setConfig
|
## setConfig
|
||||||
|
|
||||||
|
@ -188,24 +188,24 @@ corresponding siteConfig value.
|
||||||
#### Parameters
|
#### Parameters
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| :----- | :-------------- | :-------------------------- |
|
| :----- | :-------------------------------------------------------- | :-------------------------- |
|
||||||
| `conf` | `MermaidConfig` | The potential currentConfig |
|
| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The potential currentConfig |
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
`MermaidConfig`
|
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
The currentConfig merged with the sanitized conf
|
The currentConfig merged with the sanitized conf
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
|
[packages/mermaid/src/config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### setSiteConfig
|
### setSiteConfig
|
||||||
|
|
||||||
▸ **setSiteConfig**(`conf`): `MermaidConfig`
|
▸ **setSiteConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
## setSiteConfig
|
## setSiteConfig
|
||||||
|
|
||||||
|
@ -221,56 +221,56 @@ function _Default value: At default, will mirror Global Config_
|
||||||
#### Parameters
|
#### Parameters
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| :----- | :-------------- | :------------------------------------------ |
|
| :----- | :-------------------------------------------------------- | :------------------------------------------ |
|
||||||
| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
|
| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The base currentConfig to use as siteConfig |
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
`MermaidConfig`
|
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
The new siteConfig
|
The new siteConfig
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
|
[packages/mermaid/src/config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### updateCurrentConfig
|
### updateCurrentConfig
|
||||||
|
|
||||||
▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
|
▸ **updateCurrentConfig**(`siteCfg`, `_directives`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
#### Parameters
|
#### Parameters
|
||||||
|
|
||||||
| Name | Type |
|
| Name | Type |
|
||||||
| :------------ | :----------------- |
|
| :------------ | :----------------------------------------------------------- |
|
||||||
| `siteCfg` | `MermaidConfig` |
|
| `siteCfg` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |
|
||||||
| `_directives` | `MermaidConfig`\[] |
|
| `_directives` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)\[] |
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
`MermaidConfig`
|
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
|
[packages/mermaid/src/config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### updateSiteConfig
|
### updateSiteConfig
|
||||||
|
|
||||||
▸ **updateSiteConfig**(`conf`): `MermaidConfig`
|
▸ **updateSiteConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
#### Parameters
|
#### Parameters
|
||||||
|
|
||||||
| Name | Type |
|
| Name | Type |
|
||||||
| :----- | :-------------- |
|
| :----- | :-------------------------------------------------------- |
|
||||||
| `conf` | `MermaidConfig` |
|
| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |
|
||||||
|
|
||||||
#### Returns
|
#### Returns
|
||||||
|
|
||||||
`MermaidConfig`
|
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
|
[packages/mermaid/src/config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
|
||||||
|
|
|
@ -14,13 +14,13 @@
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
|
[packages/mermaid/src/defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### default
|
### default
|
||||||
|
|
||||||
• `Const` **default**: `RequiredDeep`<`MermaidConfig`>
|
• `Const` **default**: `RequiredDeep`<[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)>
|
||||||
|
|
||||||
Default mermaid configuration options.
|
Default mermaid configuration options.
|
||||||
|
|
||||||
|
@ -30,4 +30,4 @@ Non-JSON JS default values are listed in this file, e.g. functions, or
|
||||||
|
|
||||||
#### Defined in
|
#### Defined in
|
||||||
|
|
||||||
[defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)
|
[packages/mermaid/src/defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)
|
||||||
|
|
57
docs/config/setup/modules/mermaid.md
Normal file
57
docs/config/setup/modules/mermaid.md
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaid.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaid.md).
|
||||||
|
|
||||||
|
# Module: mermaid
|
||||||
|
|
||||||
|
## Classes
|
||||||
|
|
||||||
|
- [UnknownDiagramError](../classes/mermaid.UnknownDiagramError.md)
|
||||||
|
|
||||||
|
## Interfaces
|
||||||
|
|
||||||
|
- [DetailedError](../interfaces/mermaid.DetailedError.md)
|
||||||
|
- [ExternalDiagramDefinition](../interfaces/mermaid.ExternalDiagramDefinition.md)
|
||||||
|
- [Mermaid](../interfaces/mermaid.Mermaid.md)
|
||||||
|
- [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
|
||||||
|
- [ParseOptions](../interfaces/mermaid.ParseOptions.md)
|
||||||
|
- [ParseResult](../interfaces/mermaid.ParseResult.md)
|
||||||
|
- [RenderResult](../interfaces/mermaid.RenderResult.md)
|
||||||
|
- [RunOptions](../interfaces/mermaid.RunOptions.md)
|
||||||
|
|
||||||
|
## Type Aliases
|
||||||
|
|
||||||
|
### ParseErrorFunction
|
||||||
|
|
||||||
|
Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
|
||||||
|
|
||||||
|
#### Type declaration
|
||||||
|
|
||||||
|
▸ (`err`, `hash?`): `void`
|
||||||
|
|
||||||
|
##### Parameters
|
||||||
|
|
||||||
|
| Name | Type |
|
||||||
|
| :------ | :--------------------------------------------------------------------------------- |
|
||||||
|
| `err` | `string` \| [`DetailedError`](../interfaces/mermaid.DetailedError.md) \| `unknown` |
|
||||||
|
| `hash?` | `any` |
|
||||||
|
|
||||||
|
##### Returns
|
||||||
|
|
||||||
|
`void`
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/Diagram.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L9)
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
### default
|
||||||
|
|
||||||
|
• `Const` **default**: [`Mermaid`](../interfaces/mermaid.Mermaid.md)
|
||||||
|
|
||||||
|
#### Defined in
|
||||||
|
|
||||||
|
[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
|
|
@ -1,284 +0,0 @@
|
||||||
> **Warning**
|
|
||||||
>
|
|
||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
|
||||||
>
|
|
||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md).
|
|
||||||
|
|
||||||
# Module: mermaidAPI
|
|
||||||
|
|
||||||
## Interfaces
|
|
||||||
|
|
||||||
- [ParseOptions](../interfaces/mermaidAPI.ParseOptions.md)
|
|
||||||
- [ParseResult](../interfaces/mermaidAPI.ParseResult.md)
|
|
||||||
- [RenderResult](../interfaces/mermaidAPI.RenderResult.md)
|
|
||||||
|
|
||||||
## References
|
|
||||||
|
|
||||||
### default
|
|
||||||
|
|
||||||
Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
|
|
||||||
|
|
||||||
## Type Aliases
|
|
||||||
|
|
||||||
### D3Element
|
|
||||||
|
|
||||||
Ƭ **D3Element**: `any`
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74)
|
|
||||||
|
|
||||||
## Variables
|
|
||||||
|
|
||||||
### mermaidAPI
|
|
||||||
|
|
||||||
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
|
|
||||||
|
|
||||||
## mermaidAPI configuration defaults
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const config = {
|
|
||||||
theme: 'default',
|
|
||||||
logLevel: 'fatal',
|
|
||||||
securityLevel: 'strict',
|
|
||||||
startOnLoad: true,
|
|
||||||
arrowMarkerAbsolute: false,
|
|
||||||
suppressErrorRendering: false,
|
|
||||||
|
|
||||||
er: {
|
|
||||||
diagramPadding: 20,
|
|
||||||
layoutDirection: 'TB',
|
|
||||||
minEntityWidth: 100,
|
|
||||||
minEntityHeight: 75,
|
|
||||||
entityPadding: 15,
|
|
||||||
stroke: 'gray',
|
|
||||||
fill: 'honeydew',
|
|
||||||
fontSize: 12,
|
|
||||||
useMaxWidth: true,
|
|
||||||
},
|
|
||||||
flowchart: {
|
|
||||||
diagramPadding: 8,
|
|
||||||
htmlLabels: true,
|
|
||||||
curve: 'basis',
|
|
||||||
},
|
|
||||||
sequence: {
|
|
||||||
diagramMarginX: 50,
|
|
||||||
diagramMarginY: 10,
|
|
||||||
actorMargin: 50,
|
|
||||||
width: 150,
|
|
||||||
height: 65,
|
|
||||||
boxMargin: 10,
|
|
||||||
boxTextMargin: 5,
|
|
||||||
noteMargin: 10,
|
|
||||||
messageMargin: 35,
|
|
||||||
messageAlign: 'center',
|
|
||||||
mirrorActors: true,
|
|
||||||
bottomMarginAdj: 1,
|
|
||||||
useMaxWidth: true,
|
|
||||||
rightAngles: false,
|
|
||||||
showSequenceNumbers: false,
|
|
||||||
},
|
|
||||||
gantt: {
|
|
||||||
titleTopMargin: 25,
|
|
||||||
barHeight: 20,
|
|
||||||
barGap: 4,
|
|
||||||
topPadding: 50,
|
|
||||||
leftPadding: 75,
|
|
||||||
gridLineStartPadding: 35,
|
|
||||||
fontSize: 11,
|
|
||||||
fontFamily: '"Open Sans", sans-serif',
|
|
||||||
numberSectionStyles: 4,
|
|
||||||
axisFormat: '%Y-%m-%d',
|
|
||||||
topAxis: false,
|
|
||||||
displayMode: '',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
mermaid.initialize(config);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:634](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L634)
|
|
||||||
|
|
||||||
## Functions
|
|
||||||
|
|
||||||
### appendDivSvgG
|
|
||||||
|
|
||||||
▸ **appendDivSvgG**(`parentRoot`, `id`, `enclosingDivId`, `divStyle?`, `svgXlink?`): `any`
|
|
||||||
|
|
||||||
Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes.
|
|
||||||
Only set the style attribute on the enclosing div if divStyle is given.
|
|
||||||
Only set the xmlns:xlink attribute on svg if svgXlink is given.
|
|
||||||
Return the last node appended
|
|
||||||
|
|
||||||
#### Parameters
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| :--------------- | :------- | :----------------------------------------------- |
|
|
||||||
| `parentRoot` | `any` | the d3 node to append things to |
|
|
||||||
| `id` | `string` | the value to set the id attr to |
|
|
||||||
| `enclosingDivId` | `string` | the id to set the enclosing div to |
|
|
||||||
| `divStyle?` | `string` | if given, the style to set the enclosing div to |
|
|
||||||
| `svgXlink?` | `string` | if given, the link to set the new svg element to |
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
`any`
|
|
||||||
|
|
||||||
- returns the parentRoot that had nodes appended
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### cleanUpSvgCode
|
|
||||||
|
|
||||||
▸ **cleanUpSvgCode**(`svgCode?`, `inSandboxMode`, `useArrowMarkerUrls`): `string`
|
|
||||||
|
|
||||||
Clean up svgCode. Do replacements needed
|
|
||||||
|
|
||||||
#### Parameters
|
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| :------------------- | :-------- | :------------ | :---------------------------------------------------------- |
|
|
||||||
| `svgCode` | `string` | `''` | the code to clean up |
|
|
||||||
| `inSandboxMode` | `boolean` | `undefined` | security level |
|
|
||||||
| `useArrowMarkerUrls` | `boolean` | `undefined` | should arrow marker's use full urls? (vs. just the anchors) |
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
`string`
|
|
||||||
|
|
||||||
the cleaned up svgCode
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### createCssStyles
|
|
||||||
|
|
||||||
▸ **createCssStyles**(`config`, `classDefs?`): `string`
|
|
||||||
|
|
||||||
Create the user styles
|
|
||||||
|
|
||||||
#### Parameters
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| :---------- | :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| `config` | `MermaidConfig` | configuration that has style and theme settings to use |
|
|
||||||
| `classDefs` | `undefined` \| `null` \| `Map`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
`string`
|
|
||||||
|
|
||||||
the string with all the user styles
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L153)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### createUserStyles
|
|
||||||
|
|
||||||
▸ **createUserStyles**(`config`, `graphType`, `classDefs`, `svgId`): `string`
|
|
||||||
|
|
||||||
#### Parameters
|
|
||||||
|
|
||||||
| Name | Type |
|
|
||||||
| :---------- | :----------------------------------------------------- |
|
|
||||||
| `config` | `MermaidConfig` |
|
|
||||||
| `graphType` | `string` |
|
|
||||||
| `classDefs` | `undefined` \| `Map`<`string`, `DiagramStyleClassDef`> |
|
|
||||||
| `svgId` | `string` |
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
`string`
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L199)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### cssImportantStyles
|
|
||||||
|
|
||||||
▸ **cssImportantStyles**(`cssClass`, `element`, `cssClasses?`): `string`
|
|
||||||
|
|
||||||
Create a CSS style that starts with the given class name, then the element,
|
|
||||||
with an enclosing block that has each of the cssClasses followed by !important;
|
|
||||||
|
|
||||||
#### Parameters
|
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| :----------- | :---------- | :------------ | :--------------------------------------------- |
|
|
||||||
| `cssClass` | `string` | `undefined` | CSS class name |
|
|
||||||
| `element` | `string` | `undefined` | CSS element |
|
|
||||||
| `cssClasses` | `string`\[] | `[]` | list of CSS styles to append after the element |
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
`string`
|
|
||||||
|
|
||||||
- the constructed string
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L138)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### putIntoIFrame
|
|
||||||
|
|
||||||
▸ **putIntoIFrame**(`svgCode?`, `svgElement?`): `string`
|
|
||||||
|
|
||||||
Put the svgCode into an iFrame. Return the iFrame code
|
|
||||||
|
|
||||||
#### Parameters
|
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| :------------ | :------- | :------------ | :--------------------------------------------------------------------------- |
|
|
||||||
| `svgCode` | `string` | `''` | the svg code to put inside the iFrame |
|
|
||||||
| `svgElement?` | `any` | `undefined` | the d3 node that has the current svgElement so we can get the height from it |
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
`string`
|
|
||||||
|
|
||||||
- the code with the iFrame that now contains the svgCode
|
|
||||||
TODO replace btoa(). Replace with buf.toString('base64')?
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:253](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L253)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### removeExistingElements
|
|
||||||
|
|
||||||
▸ **removeExistingElements**(`doc`, `id`, `divId`, `iFrameId`): `void`
|
|
||||||
|
|
||||||
Remove any existing elements from the given document
|
|
||||||
|
|
||||||
#### Parameters
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| :--------- | :--------- | :------------------------------------ |
|
|
||||||
| `doc` | `Document` | the document to removed elements from |
|
|
||||||
| `id` | `string` | id for any existing SVG element |
|
|
||||||
| `divId` | `string` | - |
|
|
||||||
| `iFrameId` | `string` | - |
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
`void`
|
|
||||||
|
|
||||||
#### Defined in
|
|
||||||
|
|
||||||
[mermaidAPI.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L326)
|
|
|
@ -24,12 +24,12 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
|
||||||
|
|
||||||
## Site-wide Theme
|
## Site-wide Theme
|
||||||
|
|
||||||
To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
|
To customize themes site-wide, call the `initialize` method on the `mermaid`.
|
||||||
|
|
||||||
Example of `initialize` call setting `theme` to `base`:
|
Example of `initialize` call setting `theme` to `base`:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
mermaidAPI.initialize({
|
mermaid.initialize({
|
||||||
securityLevel: 'loose',
|
securityLevel: 'loose',
|
||||||
theme: 'base',
|
theme: 'base',
|
||||||
});
|
});
|
||||||
|
|
|
@ -193,7 +193,7 @@ await mermaid.run({
|
||||||
### Calling `mermaid.init` - Deprecated
|
### Calling `mermaid.init` - Deprecated
|
||||||
|
|
||||||
> **Warning**
|
> **Warning**
|
||||||
> mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
|
> mermaid.init is deprecated in v10 and will be removed in a future release. Please use mermaid.run instead.
|
||||||
|
|
||||||
By default, `mermaid.init` will be called when the document is ready, finding all elements with
|
By default, `mermaid.init` will be called when the document is ready, finding all elements with
|
||||||
`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
|
`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
|
||||||
|
@ -217,9 +217,6 @@ Or with no config object, and a jQuery selection:
|
||||||
mermaid.init(undefined, $('#someId .yetAnotherClass'));
|
mermaid.init(undefined, $('#someId .yetAnotherClass'));
|
||||||
```
|
```
|
||||||
|
|
||||||
> **Warning**
|
|
||||||
> This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
|
|
||||||
|
|
||||||
## Usage with webpack
|
## Usage with webpack
|
||||||
|
|
||||||
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
|
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
|
||||||
|
|
|
@ -206,14 +206,16 @@ Messages can be of two displayed either solid or with a dotted line.
|
||||||
[Actor][Arrow][Actor]:Message text
|
[Actor][Arrow][Actor]:Message text
|
||||||
```
|
```
|
||||||
|
|
||||||
There are six types of arrows currently supported:
|
There are ten types of arrows currently supported:
|
||||||
|
|
||||||
| Type | Description |
|
| Type | Description |
|
||||||
| ------ | ------------------------------------------------ |
|
| -------- | ------------------------------------------------------------------------ |
|
||||||
| `->` | Solid line without arrow |
|
| `->` | Solid line without arrow |
|
||||||
| `-->` | Dotted line without arrow |
|
| `-->` | Dotted line without arrow |
|
||||||
| `->>` | Solid line with arrowhead |
|
| `->>` | Solid line with arrowhead |
|
||||||
| `-->>` | Dotted line with arrowhead |
|
| `-->>` | Dotted line with arrowhead |
|
||||||
|
| `<<->>` | Solid line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
|
||||||
|
| `<<-->>` | Dotted line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
|
||||||
| `-x` | Solid line with a cross at the end |
|
| `-x` | Solid line with a cross at the end |
|
||||||
| `--x` | Dotted line with a cross at the end. |
|
| `--x` | Dotted line with a cross at the end. |
|
||||||
| `-)` | Solid line with an open arrow at the end (async) |
|
| `-)` | Solid line with an open arrow at the end (async) |
|
||||||
|
@ -304,17 +306,35 @@ sequenceDiagram
|
||||||
Note over Alice,John: A typical interaction
|
Note over Alice,John: A typical interaction
|
||||||
```
|
```
|
||||||
|
|
||||||
It is also possible to add a line break (applies to text input in general):
|
## Line breaks
|
||||||
|
|
||||||
|
Line break can be added to Note and Message:
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
Alice->John: Hello John, how are you?
|
Alice->John: Hello John,<br/>how are you?
|
||||||
Note over Alice,John: A typical interaction<br/>But now in two lines
|
Note over Alice,John: A typical interaction<br/>But now in two lines
|
||||||
```
|
```
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
Alice->John: Hello John, how are you?
|
Alice->John: Hello John,<br/>how are you?
|
||||||
|
Note over Alice,John: A typical interaction<br/>But now in two lines
|
||||||
|
```
|
||||||
|
|
||||||
|
Line breaks in Actor names requires aliases:
|
||||||
|
|
||||||
|
```mermaid-example
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice as Alice<br/>Johnson
|
||||||
|
Alice->John: Hello John,<br/>how are you?
|
||||||
|
Note over Alice,John: A typical interaction<br/>But now in two lines
|
||||||
|
```
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice as Alice<br/>Johnson
|
||||||
|
Alice->John: Hello John,<br/>how are you?
|
||||||
Note over Alice,John: A typical interaction<br/>But now in two lines
|
Note over Alice,John: A typical interaction<br/>But now in two lines
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
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@9.1.2+sha512.127dc83b9ea10c32be65d22a8efb4a65fb952e8fefbdfded39bdc3c97efc32d31b48b00420df2c1187ace28c921c902f0cb5a134a4d032b8b5295cbfa2c681e2",
|
"packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"diagram",
|
"diagram",
|
||||||
"markdown",
|
"markdown",
|
||||||
|
@ -63,6 +63,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@applitools/eyes-cypress": "^3.42.3",
|
"@applitools/eyes-cypress": "^3.42.3",
|
||||||
|
"@argos-ci/cypress": "^2.0.5",
|
||||||
"@cspell/eslint-plugin": "^8.8.4",
|
"@cspell/eslint-plugin": "^8.8.4",
|
||||||
"@cypress/code-coverage": "^3.12.30",
|
"@cypress/code-coverage": "^3.12.30",
|
||||||
"@eslint/js": "^9.4.0",
|
"@eslint/js": "^9.4.0",
|
||||||
|
@ -121,7 +122,7 @@
|
||||||
"rollup-plugin-visualizer": "^5.12.0",
|
"rollup-plugin-visualizer": "^5.12.0",
|
||||||
"start-server-and-test": "^2.0.3",
|
"start-server-and-test": "^2.0.3",
|
||||||
"tsx": "^4.7.1",
|
"tsx": "^4.7.1",
|
||||||
"typescript": "^5.4.5",
|
"typescript": "~5.4.5",
|
||||||
"typescript-eslint": "^7.13.0",
|
"typescript-eslint": "^7.13.0",
|
||||||
"vite": "^5.2.3",
|
"vite": "^5.2.3",
|
||||||
"vite-plugin-istanbul": "^6.0.0",
|
"vite-plugin-istanbul": "^6.0.0",
|
||||||
|
@ -129,10 +130,5 @@
|
||||||
},
|
},
|
||||||
"nyc": {
|
"nyc": {
|
||||||
"report-dir": "coverage/cypress"
|
"report-dir": "coverage/cypress"
|
||||||
},
|
|
||||||
"pnpm": {
|
|
||||||
"patchedDependencies": {
|
|
||||||
"cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,6 +39,26 @@ describe('flowchart-elk detector', () => {
|
||||||
).toBe(true);
|
).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// The error from the issue was reproduced with mindmap, so this is just an example
|
||||||
|
// what matters is the keyword somewhere inside graph definition
|
||||||
|
it('should check only the beginning of the line in search of keywords', () => {
|
||||||
|
expect(
|
||||||
|
detector('mindmap ["Descendant node in flowchart"]', {
|
||||||
|
flowchart: {
|
||||||
|
defaultRenderer: 'elk',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
).toBe(false);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
detector('mindmap ["Descendant node in graph"]', {
|
||||||
|
flowchart: {
|
||||||
|
defaultRenderer: 'elk',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
it('should detect flowchart-elk', () => {
|
it('should detect flowchart-elk', () => {
|
||||||
expect(detector('flowchart-elk')).toBe(true);
|
expect(detector('flowchart-elk')).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
|
@ -11,7 +11,7 @@ const detector: DiagramDetector = (txt, config): boolean => {
|
||||||
// If diagram explicitly states flowchart-elk
|
// If diagram explicitly states flowchart-elk
|
||||||
/^\s*flowchart-elk/.test(txt) ||
|
/^\s*flowchart-elk/.test(txt) ||
|
||||||
// If a flowchart/graph diagram has their default renderer set to elk
|
// If a flowchart/graph diagram has their default renderer set to elk
|
||||||
(/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
|
(/^\s*(flowchart|graph)/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
|
||||||
) {
|
) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "rimraf dist",
|
"clean": "rimraf dist",
|
||||||
"dev": "pnpm -w dev",
|
"dev": "pnpm -w dev",
|
||||||
"docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
|
"docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup",
|
||||||
"docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
|
"docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
|
||||||
"docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
|
"docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
|
||||||
"docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
|
"docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@braintree/sanitize-url": "^7.0.1",
|
"@braintree/sanitize-url": "^7.0.1",
|
||||||
"@mermaid-js/parser": "workspace:^",
|
"@mermaid-js/parser": "workspace:^",
|
||||||
"cytoscape": "^3.28.1",
|
"cytoscape": "^3.29.2",
|
||||||
"cytoscape-cose-bilkent": "^4.1.0",
|
"cytoscape-cose-bilkent": "^4.1.0",
|
||||||
"d3": "^7.9.0",
|
"d3": "^7.9.0",
|
||||||
"d3-sankey": "^0.12.3",
|
"d3-sankey": "^0.12.3",
|
||||||
|
@ -88,7 +88,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@adobe/jsonschema2md": "^8.0.0",
|
"@adobe/jsonschema2md": "^8.0.0",
|
||||||
"@types/cytoscape": "^3.19.16",
|
"@types/cytoscape": "^3.21.4",
|
||||||
"@types/d3": "^7.4.3",
|
"@types/d3": "^7.4.3",
|
||||||
"@types/d3-sankey": "^0.12.4",
|
"@types/d3-sankey": "^0.12.4",
|
||||||
"@types/d3-scale": "^4.0.8",
|
"@types/d3-scale": "^4.0.8",
|
||||||
|
@ -124,7 +124,7 @@
|
||||||
"type-fest": "^4.13.1",
|
"type-fest": "^4.13.1",
|
||||||
"typedoc": "^0.25.12",
|
"typedoc": "^0.25.12",
|
||||||
"typedoc-plugin-markdown": "^3.17.1",
|
"typedoc-plugin-markdown": "^3.17.1",
|
||||||
"typescript": "^5.4.3",
|
"typescript": "~5.4.3",
|
||||||
"unist-util-flatmap": "^1.0.0",
|
"unist-util-flatmap": "^1.0.0",
|
||||||
"unist-util-visit": "^5.0.0",
|
"unist-util-visit": "^5.0.0",
|
||||||
"vitepress": "^1.0.1",
|
"vitepress": "^1.0.1",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { MockedD3 } from './tests/MockedD3.js';
|
import { MockedD3 } from './tests/MockedD3.js';
|
||||||
import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
|
import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
|
||||||
import type { D3Element } from './mermaidAPI.js';
|
import type { D3Element } from './types.js';
|
||||||
|
|
||||||
describe('accessibility', () => {
|
describe('accessibility', () => {
|
||||||
const fauxSvgNode: MockedD3 = new MockedD3();
|
const fauxSvgNode: MockedD3 = new MockedD3();
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
* @see https://www.w3.org/TR/wai-aria-1.1/
|
* @see https://www.w3.org/TR/wai-aria-1.1/
|
||||||
* @see https://www.w3.org/TR/svg-aam-1.0/
|
* @see https://www.w3.org/TR/svg-aam-1.0/
|
||||||
*/
|
*/
|
||||||
import type { D3Element } from './mermaidAPI.js';
|
import type { D3Element } from './types.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* SVG element role:
|
* SVG element role:
|
||||||
|
|
|
@ -104,10 +104,7 @@ export interface MermaidConfig {
|
||||||
arrowMarkerAbsolute?: boolean;
|
arrowMarkerAbsolute?: boolean;
|
||||||
/**
|
/**
|
||||||
* This option controls which `currentConfig` keys are considered secure and
|
* This option controls which `currentConfig` keys are considered secure and
|
||||||
* can only be changed via call to `mermaidAPI.initialize`.
|
* can only be changed via call to `mermaid.initialize`.
|
||||||
* Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
|
|
||||||
* in the current `currentConfig`.
|
|
||||||
*
|
|
||||||
* This prevents malicious graph directives from overriding a site's default security.
|
* This prevents malicious graph directives from overriding a site's default security.
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -25,15 +25,10 @@ function addHtmlLabel(node) {
|
||||||
|
|
||||||
const label = node.label;
|
const label = node.label;
|
||||||
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
|
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
|
||||||
div.html(
|
const span = div.append('span');
|
||||||
'<span class="' +
|
span.html(label);
|
||||||
labelClass +
|
applyStyle(span, node.labelStyle);
|
||||||
'" ' +
|
span.attr('class', labelClass);
|
||||||
(node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
|
|
||||||
'>' +
|
|
||||||
label +
|
|
||||||
'</span>'
|
|
||||||
);
|
|
||||||
|
|
||||||
applyStyle(div, node.labelStyle);
|
applyStyle(div, node.labelStyle);
|
||||||
div.style('display', 'inline-block');
|
div.style('display', 'inline-block');
|
||||||
|
|
|
@ -256,7 +256,7 @@ boundaryStartStatement
|
||||||
|
|
||||||
boundaryStart
|
boundaryStart
|
||||||
: ENTERPRISE_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
: ENTERPRISE_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
||||||
| SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
| SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'SYSTEM'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
||||||
| BOUNDARY attributes {yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
| BOUNDARY attributes {yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
||||||
| CONTAINER_BOUNDARY attributes {$2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
|
| CONTAINER_BOUNDARY attributes {$2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
|
||||||
| NODE attributes {yy.addDeploymentNode('node', ...$2); $$=$2;}
|
| NODE attributes {yy.addDeploymentNode('node', ...$2); $$=$2;}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||||
import type { D3Element } from '../../mermaidAPI.js';
|
import type { D3Element } from '../../types.js';
|
||||||
import { sanitizeText } from '../../diagrams/common/common.js';
|
import { sanitizeText } from '../../diagrams/common/common.js';
|
||||||
import { log } from '../../logger.js';
|
import { log } from '../../logger.js';
|
||||||
import type { MindmapNode } from './mindmapTypes.js';
|
import type { MindmapNode } from './mindmapTypes.js';
|
||||||
|
|
|
@ -6,7 +6,7 @@ import type { MermaidConfig } from '../../config.type.js';
|
||||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||||
import type { DrawDefinition } from '../../diagram-api/types.js';
|
import type { DrawDefinition } from '../../diagram-api/types.js';
|
||||||
import { log } from '../../logger.js';
|
import { log } from '../../logger.js';
|
||||||
import type { D3Element } from '../../mermaidAPI.js';
|
import type { D3Element } from '../../types.js';
|
||||||
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||||
import { setupGraphViewbox } from '../../setupGraphViewbox.js';
|
import { setupGraphViewbox } from '../../setupGraphViewbox.js';
|
||||||
import type { FilledMindMapNode, MindmapDB, MindmapNode } from './mindmapTypes.js';
|
import type { FilledMindMapNode, MindmapDB, MindmapNode } from './mindmapTypes.js';
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import type { D3Element } from '../../mermaidAPI.js';
|
|
||||||
import { createText } from '../../rendering-util/createText.js';
|
import { createText } from '../../rendering-util/createText.js';
|
||||||
import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js';
|
import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js';
|
||||||
import type { Point } from '../../types.js';
|
import type { Point, D3Element } from '../../types.js';
|
||||||
import { parseFontSize } from '../../utils.js';
|
import { parseFontSize } from '../../utils.js';
|
||||||
import type { MermaidConfig } from '../../config.type.js';
|
import type { MermaidConfig } from '../../config.type.js';
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
"actor" { this.begin('ID'); return 'participant_actor'; }
|
"actor" { this.begin('ID'); return 'participant_actor'; }
|
||||||
"create" return 'create';
|
"create" return 'create';
|
||||||
"destroy" { this.begin('ID'); return 'destroy'; }
|
"destroy" { this.begin('ID'); return 'destroy'; }
|
||||||
<ID>[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
|
<ID>[^\<->\->:\n,;]+?([\-]*[^\<->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
|
||||||
<ALIAS>"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
|
<ALIAS>"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
|
||||||
<ALIAS>(?:) { this.popState(); this.popState(); return 'NEWLINE'; }
|
<ALIAS>(?:) { this.popState(); this.popState(); return 'NEWLINE'; }
|
||||||
"loop" { this.begin('LINE'); return 'loop'; }
|
"loop" { this.begin('LINE'); return 'loop'; }
|
||||||
|
@ -73,9 +73,11 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
|
||||||
"off" return 'off';
|
"off" return 'off';
|
||||||
"," return ',';
|
"," return ',';
|
||||||
";" return 'NEWLINE';
|
";" return 'NEWLINE';
|
||||||
[^\+\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; }
|
[^\+\<->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\<->\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; }
|
||||||
"->>" return 'SOLID_ARROW';
|
"->>" return 'SOLID_ARROW';
|
||||||
|
"<<->>" return 'BIDIRECTIONAL_SOLID_ARROW';
|
||||||
"-->>" return 'DOTTED_ARROW';
|
"-->>" return 'DOTTED_ARROW';
|
||||||
|
"<<-->>" return 'BIDIRECTIONAL_DOTTED_ARROW';
|
||||||
"->" return 'SOLID_OPEN_ARROW';
|
"->" return 'SOLID_OPEN_ARROW';
|
||||||
"-->" return 'DOTTED_OPEN_ARROW';
|
"-->" return 'DOTTED_OPEN_ARROW';
|
||||||
\-[x] return 'SOLID_CROSS';
|
\-[x] return 'SOLID_CROSS';
|
||||||
|
@ -310,7 +312,9 @@ signaltype
|
||||||
: SOLID_OPEN_ARROW { $$ = yy.LINETYPE.SOLID_OPEN; }
|
: SOLID_OPEN_ARROW { $$ = yy.LINETYPE.SOLID_OPEN; }
|
||||||
| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
|
| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
|
||||||
| SOLID_ARROW { $$ = yy.LINETYPE.SOLID; }
|
| SOLID_ARROW { $$ = yy.LINETYPE.SOLID; }
|
||||||
|
| BIDIRECTIONAL_SOLID_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
|
||||||
| DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; }
|
| DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; }
|
||||||
|
| BIDIRECTIONAL_DOTTED_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
|
||||||
| SOLID_CROSS { $$ = yy.LINETYPE.SOLID_CROSS; }
|
| SOLID_CROSS { $$ = yy.LINETYPE.SOLID_CROSS; }
|
||||||
| DOTTED_CROSS { $$ = yy.LINETYPE.DOTTED_CROSS; }
|
| DOTTED_CROSS { $$ = yy.LINETYPE.DOTTED_CROSS; }
|
||||||
| SOLID_POINT { $$ = yy.LINETYPE.SOLID_POINT; }
|
| SOLID_POINT { $$ = yy.LINETYPE.SOLID_POINT; }
|
||||||
|
|
|
@ -328,6 +328,8 @@ export const LINETYPE = {
|
||||||
BREAK_START: 30,
|
BREAK_START: 30,
|
||||||
BREAK_END: 31,
|
BREAK_END: 31,
|
||||||
PAR_OVER_START: 32,
|
PAR_OVER_START: 32,
|
||||||
|
BIDIRECTIONAL_SOLID: 33,
|
||||||
|
BIDIRECTIONAL_DOTTED: 34,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ARROWTYPE = {
|
export const ARROWTYPE = {
|
||||||
|
|
|
@ -516,6 +516,36 @@ Alice->>Bob:Hello Bob, how are you?`;
|
||||||
expect(messages.length).toBe(1);
|
expect(messages.length).toBe(1);
|
||||||
expect(messages[0].type).toBe(diagram.db.LINETYPE.DOTTED);
|
expect(messages[0].type).toBe(diagram.db.LINETYPE.DOTTED);
|
||||||
});
|
});
|
||||||
|
it('should handle bidirectional arrow messages', async () => {
|
||||||
|
const str = `
|
||||||
|
sequenceDiagram
|
||||||
|
Alice<<->>Bob:Hello Bob, how are you?`;
|
||||||
|
|
||||||
|
await mermaidAPI.parse(str);
|
||||||
|
const actors = diagram.db.getActors();
|
||||||
|
expect(actors.get('Alice').description).toBe('Alice');
|
||||||
|
expect(actors.get('Bob').description).toBe('Bob');
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
|
||||||
|
expect(messages.length).toBe(1);
|
||||||
|
expect(messages[0].type).toBe(diagram.db.LINETYPE.BIDIRECTIONAL_SOLID);
|
||||||
|
});
|
||||||
|
it('should handle bidirectional dotted arrow messages', async () => {
|
||||||
|
const str = `
|
||||||
|
sequenceDiagram
|
||||||
|
Alice<<-->>Bob:Hello Bob, how are you?`;
|
||||||
|
|
||||||
|
await mermaidAPI.parse(str);
|
||||||
|
const actors = diagram.db.getActors();
|
||||||
|
expect(actors.get('Alice').description).toBe('Alice');
|
||||||
|
expect(actors.get('Bob').description).toBe('Bob');
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
|
||||||
|
expect(messages.length).toBe(1);
|
||||||
|
expect(messages[0].type).toBe(diagram.db.LINETYPE.BIDIRECTIONAL_DOTTED);
|
||||||
|
});
|
||||||
it('should handle actor activation', async () => {
|
it('should handle actor activation', async () => {
|
||||||
const str = `
|
const str = `
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
|
@ -1645,7 +1675,6 @@ it should handle one actor, when textPlacement is ${textPlacement}`, async () =>
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
participant Alice`;
|
participant Alice`;
|
||||||
|
|
||||||
// mermaidAPI.reinitialize({ sequence: { textPlacement: textPlacement } });
|
|
||||||
await mermaidAPI.parse(str);
|
await mermaidAPI.parse(str);
|
||||||
// diagram.renderer.setConf(mermaidAPI.getConfig().sequence);
|
// diagram.renderer.setConf(mermaidAPI.getConfig().sequence);
|
||||||
await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
|
await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
|
||||||
|
|
|
@ -436,7 +436,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
||||||
type === diagObj.db.LINETYPE.DOTTED ||
|
type === diagObj.db.LINETYPE.DOTTED ||
|
||||||
type === diagObj.db.LINETYPE.DOTTED_CROSS ||
|
type === diagObj.db.LINETYPE.DOTTED_CROSS ||
|
||||||
type === diagObj.db.LINETYPE.DOTTED_POINT ||
|
type === diagObj.db.LINETYPE.DOTTED_POINT ||
|
||||||
type === diagObj.db.LINETYPE.DOTTED_OPEN
|
type === diagObj.db.LINETYPE.DOTTED_OPEN ||
|
||||||
|
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED
|
||||||
) {
|
) {
|
||||||
line.style('stroke-dasharray', '3, 3');
|
line.style('stroke-dasharray', '3, 3');
|
||||||
line.attr('class', 'messageLine1');
|
line.attr('class', 'messageLine1');
|
||||||
|
@ -462,6 +463,13 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
||||||
if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
|
if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
|
||||||
line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||||
}
|
}
|
||||||
|
if (
|
||||||
|
type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
|
||||||
|
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED
|
||||||
|
) {
|
||||||
|
line.attr('marker-start', 'url(' + url + '#arrowhead)');
|
||||||
|
line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||||
|
}
|
||||||
if (type === diagObj.db.LINETYPE.SOLID_POINT || type === diagObj.db.LINETYPE.DOTTED_POINT) {
|
if (type === diagObj.db.LINETYPE.SOLID_POINT || type === diagObj.db.LINETYPE.DOTTED_POINT) {
|
||||||
line.attr('marker-end', 'url(' + url + '#filled-head)');
|
line.attr('marker-end', 'url(' + url + '#filled-head)');
|
||||||
}
|
}
|
||||||
|
@ -1036,6 +1044,8 @@ export const draw = async function (_text: string, id: string, _version: string,
|
||||||
diagObj.db.LINETYPE.DOTTED_CROSS,
|
diagObj.db.LINETYPE.DOTTED_CROSS,
|
||||||
diagObj.db.LINETYPE.SOLID_POINT,
|
diagObj.db.LINETYPE.SOLID_POINT,
|
||||||
diagObj.db.LINETYPE.DOTTED_POINT,
|
diagObj.db.LINETYPE.DOTTED_POINT,
|
||||||
|
diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID,
|
||||||
|
diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
|
||||||
].includes(msg.type)
|
].includes(msg.type)
|
||||||
) {
|
) {
|
||||||
sequenceIndex = sequenceIndex + sequenceIndexStep;
|
sequenceIndex = sequenceIndex + sequenceIndexStep;
|
||||||
|
@ -1416,6 +1426,8 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
||||||
diagObj.db.LINETYPE.DOTTED_CROSS,
|
diagObj.db.LINETYPE.DOTTED_CROSS,
|
||||||
diagObj.db.LINETYPE.SOLID_POINT,
|
diagObj.db.LINETYPE.SOLID_POINT,
|
||||||
diagObj.db.LINETYPE.DOTTED_POINT,
|
diagObj.db.LINETYPE.DOTTED_POINT,
|
||||||
|
diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID,
|
||||||
|
diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
|
||||||
].includes(msg.type)
|
].includes(msg.type)
|
||||||
) {
|
) {
|
||||||
return {};
|
return {};
|
||||||
|
@ -1423,7 +1435,7 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
||||||
const [fromLeft, fromRight] = activationBounds(msg.from, actors);
|
const [fromLeft, fromRight] = activationBounds(msg.from, actors);
|
||||||
const [toLeft, toRight] = activationBounds(msg.to, actors);
|
const [toLeft, toRight] = activationBounds(msg.to, actors);
|
||||||
const isArrowToRight = fromLeft <= toLeft;
|
const isArrowToRight = fromLeft <= toLeft;
|
||||||
const startx = isArrowToRight ? fromRight : fromLeft;
|
let startx = isArrowToRight ? fromRight : fromLeft;
|
||||||
let stopx = isArrowToRight ? toLeft : toRight;
|
let stopx = isArrowToRight ? toLeft : toRight;
|
||||||
|
|
||||||
// As the line width is considered, the left and right values will be off by 2.
|
// As the line width is considered, the left and right values will be off by 2.
|
||||||
|
@ -1462,6 +1474,17 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
||||||
if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
|
if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
|
||||||
stopx += adjustValue(3);
|
stopx += adjustValue(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shorten start position of bidirectional arrow to accommodate for second arrowhead
|
||||||
|
*/
|
||||||
|
if (
|
||||||
|
[diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID, diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED].includes(
|
||||||
|
msg.type
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
startx -= adjustValue(3);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const allBounds = [fromLeft, fromRight, toLeft, toRight];
|
const allBounds = [fromLeft, fromRight, toLeft, toRight];
|
||||||
|
|
|
@ -415,11 +415,11 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
|
||||||
const center = actor.x + actor.width / 2;
|
const center = actor.x + actor.width / 2;
|
||||||
const centerY = actorY + 80;
|
const centerY = actorY + 80;
|
||||||
|
|
||||||
elem.lower();
|
const line = elem.append('g').lower();
|
||||||
|
|
||||||
if (!isFooter) {
|
if (!isFooter) {
|
||||||
actorCnt++;
|
actorCnt++;
|
||||||
elem
|
line
|
||||||
.append('line')
|
.append('line')
|
||||||
.attr('id', 'actor' + actorCnt)
|
.attr('id', 'actor' + actorCnt)
|
||||||
.attr('x1', center)
|
.attr('x1', center)
|
||||||
|
@ -735,7 +735,7 @@ export const insertArrowHead = function (elem) {
|
||||||
.attr('markerUnits', 'userSpaceOnUse')
|
.attr('markerUnits', 'userSpaceOnUse')
|
||||||
.attr('markerWidth', 12)
|
.attr('markerWidth', 12)
|
||||||
.attr('markerHeight', 12)
|
.attr('markerHeight', 12)
|
||||||
.attr('orient', 'auto')
|
.attr('orient', 'auto-start-reverse')
|
||||||
.append('path')
|
.append('path')
|
||||||
.attr('d', 'M -1 0 L 10 5 L 0 10 z'); // this is actual shape for arrowhead
|
.attr('d', 'M -1 0 L 10 5 L 0 10 z'); // this is actual shape for arrowhead
|
||||||
};
|
};
|
||||||
|
|
|
@ -143,7 +143,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
|
||||||
if (isLinearAxisData(xyChartData.xAxis)) {
|
if (isLinearAxisData(xyChartData.xAxis)) {
|
||||||
const min = xyChartData.xAxis.min;
|
const min = xyChartData.xAxis.min;
|
||||||
const max = xyChartData.xAxis.max;
|
const max = xyChartData.xAxis.max;
|
||||||
const step = (max - min + 1) / data.length;
|
const step = (max - min) / (data.length - 1);
|
||||||
const categories: string[] = [];
|
const categories: string[] = [];
|
||||||
for (let i = min; i <= max; i += step) {
|
for (let i = min; i <= max; i += step) {
|
||||||
categories.push(`${i}`);
|
categories.push(`${i}`);
|
||||||
|
|
|
@ -52,7 +52,7 @@ The following commands must be sufficient enough to start with:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl -fsSL https://get.pnpm.io/install.sh | sh -
|
curl -fsSL https://get.pnpm.io/install.sh | sh -
|
||||||
pnpm env use --global 18
|
pnpm env use --global 20
|
||||||
```
|
```
|
||||||
|
|
||||||
You may also need to reload `.shrc` or `.bashrc` afterwards.
|
You may also need to reload `.shrc` or `.bashrc` afterwards.
|
||||||
|
|
|
@ -18,12 +18,12 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
|
||||||
|
|
||||||
## Site-wide Theme
|
## Site-wide Theme
|
||||||
|
|
||||||
To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
|
To customize themes site-wide, call the `initialize` method on the `mermaid`.
|
||||||
|
|
||||||
Example of `initialize` call setting `theme` to `base`:
|
Example of `initialize` call setting `theme` to `base`:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
mermaidAPI.initialize({
|
mermaid.initialize({
|
||||||
securityLevel: 'loose',
|
securityLevel: 'loose',
|
||||||
theme: 'base',
|
theme: 'base',
|
||||||
});
|
});
|
||||||
|
|
|
@ -188,7 +188,7 @@ await mermaid.run({
|
||||||
### Calling `mermaid.init` - Deprecated
|
### Calling `mermaid.init` - Deprecated
|
||||||
|
|
||||||
```warning
|
```warning
|
||||||
mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
|
mermaid.init is deprecated in v10 and will be removed in a future release. Please use mermaid.run instead.
|
||||||
```
|
```
|
||||||
|
|
||||||
By default, `mermaid.init` will be called when the document is ready, finding all elements with
|
By default, `mermaid.init` will be called when the document is ready, finding all elements with
|
||||||
|
@ -213,10 +213,6 @@ Or with no config object, and a jQuery selection:
|
||||||
mermaid.init(undefined, $('#someId .yetAnotherClass'));
|
mermaid.init(undefined, $('#someId .yetAnotherClass'));
|
||||||
```
|
```
|
||||||
|
|
||||||
```warning
|
|
||||||
This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage with webpack
|
## Usage with webpack
|
||||||
|
|
||||||
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
|
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
|
||||||
|
|
|
@ -141,14 +141,16 @@ Messages can be of two displayed either solid or with a dotted line.
|
||||||
[Actor][Arrow][Actor]:Message text
|
[Actor][Arrow][Actor]:Message text
|
||||||
```
|
```
|
||||||
|
|
||||||
There are six types of arrows currently supported:
|
There are ten types of arrows currently supported:
|
||||||
|
|
||||||
| Type | Description |
|
| Type | Description |
|
||||||
| ------ | ------------------------------------------------ |
|
| -------- | ----------------------------------------------------------------------- |
|
||||||
| `->` | Solid line without arrow |
|
| `->` | Solid line without arrow |
|
||||||
| `-->` | Dotted line without arrow |
|
| `-->` | Dotted line without arrow |
|
||||||
| `->>` | Solid line with arrowhead |
|
| `->>` | Solid line with arrowhead |
|
||||||
| `-->>` | Dotted line with arrowhead |
|
| `-->>` | Dotted line with arrowhead |
|
||||||
|
| `<<->>` | Solid line with bidirectional arrowheads (v<MERMAID_RELEASE_VERSION>+) |
|
||||||
|
| `<<-->>` | Dotted line with bidirectional arrowheads (v<MERMAID_RELEASE_VERSION>+) |
|
||||||
| `-x` | Solid line with a cross at the end |
|
| `-x` | Solid line with a cross at the end |
|
||||||
| `--x` | Dotted line with a cross at the end. |
|
| `--x` | Dotted line with a cross at the end. |
|
||||||
| `-)` | Solid line with an open arrow at the end (async) |
|
| `-)` | Solid line with an open arrow at the end (async) |
|
||||||
|
@ -205,11 +207,22 @@ sequenceDiagram
|
||||||
Note over Alice,John: A typical interaction
|
Note over Alice,John: A typical interaction
|
||||||
```
|
```
|
||||||
|
|
||||||
It is also possible to add a line break (applies to text input in general):
|
## Line breaks
|
||||||
|
|
||||||
|
Line break can be added to Note and Message:
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
Alice->John: Hello John, how are you?
|
Alice->John: Hello John,<br/>how are you?
|
||||||
|
Note over Alice,John: A typical interaction<br/>But now in two lines
|
||||||
|
```
|
||||||
|
|
||||||
|
Line breaks in Actor names requires aliases:
|
||||||
|
|
||||||
|
```mermaid-example
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice as Alice<br/>Johnson
|
||||||
|
Alice->John: Hello John,<br/>how are you?
|
||||||
Note over Alice,John: A typical interaction<br/>But now in two lines
|
Note over Alice,John: A typical interaction<br/>But now in two lines
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -207,7 +207,7 @@ describe('when using mermaid and ', () => {
|
||||||
[Error: Parse error on line 2:
|
[Error: Parse error on line 2:
|
||||||
...equenceDiagramAlice:->Bob: Hello Bob, h...
|
...equenceDiagramAlice:->Bob: Hello Bob, h...
|
||||||
----------------------^
|
----------------------^
|
||||||
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT']
|
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT']
|
||||||
`);
|
`);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { dedent } from 'ts-dedent';
|
||||||
import type { MermaidConfig } from './config.type.js';
|
import type { MermaidConfig } from './config.type.js';
|
||||||
import { log } from './logger.js';
|
import { log } from './logger.js';
|
||||||
import utils from './utils.js';
|
import utils from './utils.js';
|
||||||
import type { ParseOptions, ParseResult, RenderResult } from './mermaidAPI.js';
|
import type { ParseOptions, ParseResult, RenderResult } from './types.js';
|
||||||
import { mermaidAPI } from './mermaidAPI.js';
|
import { mermaidAPI } from './mermaidAPI.js';
|
||||||
import { registerLazyLoadedDiagrams, detectType } from './diagram-api/detectType.js';
|
import { registerLazyLoadedDiagrams, detectType } from './diagram-api/detectType.js';
|
||||||
import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
|
import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
|
||||||
|
@ -277,7 +277,7 @@ if (typeof document !== 'undefined') {
|
||||||
* ## setParseErrorHandler Alternative to directly setting parseError using:
|
* ## setParseErrorHandler Alternative to directly setting parseError using:
|
||||||
*
|
*
|
||||||
* ```js
|
* ```js
|
||||||
* mermaid.parseError = function(err,hash){=
|
* mermaid.parseError = function(err,hash) {
|
||||||
* forExampleDisplayErrorInGui(err); // do something with the error
|
* forExampleDisplayErrorInGui(err); // do something with the error
|
||||||
* };
|
* };
|
||||||
* ```
|
* ```
|
||||||
|
@ -408,9 +408,16 @@ const render: typeof mermaidAPI.render = (id, text, container) => {
|
||||||
export interface Mermaid {
|
export interface Mermaid {
|
||||||
startOnLoad: boolean;
|
startOnLoad: boolean;
|
||||||
parseError?: ParseErrorFunction;
|
parseError?: ParseErrorFunction;
|
||||||
|
/**
|
||||||
|
* @deprecated Use {@link parse} and {@link render} instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
|
||||||
|
* @internal
|
||||||
|
*/
|
||||||
mermaidAPI: typeof mermaidAPI;
|
mermaidAPI: typeof mermaidAPI;
|
||||||
parse: typeof parse;
|
parse: typeof parse;
|
||||||
render: typeof render;
|
render: typeof render;
|
||||||
|
/**
|
||||||
|
* @deprecated Use {@link initialize} and {@link run} instead.
|
||||||
|
*/
|
||||||
init: typeof init;
|
init: typeof init;
|
||||||
run: typeof run;
|
run: typeof run;
|
||||||
registerExternalDiagrams: typeof registerExternalDiagrams;
|
registerExternalDiagrams: typeof registerExternalDiagrams;
|
||||||
|
|
|
@ -69,6 +69,7 @@ vi.mock('stylis', () => {
|
||||||
import { compile, serialize } from 'stylis';
|
import { compile, serialize } from 'stylis';
|
||||||
import { decodeEntities, encodeEntities } from './utils.js';
|
import { decodeEntities, encodeEntities } from './utils.js';
|
||||||
import { Diagram } from './Diagram.js';
|
import { Diagram } from './Diagram.js';
|
||||||
|
import { toBase64 } from './utils/base64.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @see https://vitest.dev/guide/mocking.html Mock part of a module
|
* @see https://vitest.dev/guide/mocking.html Mock part of a module
|
||||||
|
@ -176,7 +177,7 @@ describe('mermaidAPI', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('putIntoIFrame', () => {
|
describe('putIntoIFrame', () => {
|
||||||
const inputSvgCode = 'this is the SVG code';
|
const inputSvgCode = 'this is the SVG code ⛵';
|
||||||
|
|
||||||
it('uses the default SVG iFrame height is used if no svgElement given', () => {
|
it('uses the default SVG iFrame height is used if no svgElement given', () => {
|
||||||
const result = putIntoIFrame(inputSvgCode);
|
const result = putIntoIFrame(inputSvgCode);
|
||||||
|
@ -199,11 +200,10 @@ describe('mermaidAPI', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('sets src to base64 version of <body style="IFRAME_SVG_BODY_STYLE">svgCode<//body>', () => {
|
it('sets src to base64 version of <body style="IFRAME_SVG_BODY_STYLE">svgCode<//body>', () => {
|
||||||
const base64encodedSrc = btoa('<body style="' + 'margin:0' + '">' + inputSvgCode + '</body>');
|
const base64encodedSrc = toBase64(`<body style="margin:0">${inputSvgCode}</body>`);
|
||||||
const expectedRegExp = new RegExp('src="data:text/html;base64,' + base64encodedSrc + '"');
|
const expectedSrc = `src="data:text/html;charset=UTF-8;base64,${base64encodedSrc}"`;
|
||||||
|
|
||||||
const result = putIntoIFrame(inputSvgCode);
|
const result = putIntoIFrame(inputSvgCode);
|
||||||
expect(result).toMatch(expectedRegExp);
|
expect(result).toContain(expectedSrc);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('uses the height and appends px from the svgElement given', () => {
|
it('uses the height and appends px from the svgElement given', () => {
|
||||||
|
@ -593,7 +593,6 @@ describe('mermaidAPI', () => {
|
||||||
mermaidAPI.initialize({ securityLevel: 'loose' });
|
mermaidAPI.initialize({ securityLevel: 'loose' });
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
// mermaidAPI.reinitialize(config);
|
|
||||||
expect(mermaidAPI.getConfig().secure).toEqual(mermaidAPI.getSiteConfig().secure);
|
expect(mermaidAPI.getConfig().secure).toEqual(mermaidAPI.getSiteConfig().secure);
|
||||||
expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
|
expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
|
||||||
mermaidAPI.reset();
|
mermaidAPI.reset();
|
||||||
|
|
|
@ -1,14 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* This is the API to be used when optionally handling the integration with the web page, instead of
|
* This file contains functions that are used internally by mermaid
|
||||||
* using the default integration provided by mermaid.js.
|
* and is not intended to be used by the end user.
|
||||||
*
|
|
||||||
* The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
|
|
||||||
* definition as text, renders the graph/diagram and returns an svg element for the graph.
|
|
||||||
*
|
|
||||||
* It is then up to the user of the API to make use of the svg, either insert it somewhere in the
|
|
||||||
* page or do something completely different.
|
|
||||||
*
|
|
||||||
* In addition to the render function, a number of behavioral configuration options are available.
|
|
||||||
*/
|
*/
|
||||||
// @ts-ignore TODO: Investigate D3 issue
|
// @ts-ignore TODO: Investigate D3 issue
|
||||||
import { select } from 'd3';
|
import { select } from 'd3';
|
||||||
|
@ -31,6 +23,8 @@ import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.
|
||||||
import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
|
import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
|
||||||
import { preprocessDiagram } from './preprocess.js';
|
import { preprocessDiagram } from './preprocess.js';
|
||||||
import { decodeEntities } from './utils.js';
|
import { decodeEntities } from './utils.js';
|
||||||
|
import { toBase64 } from './utils/base64.js';
|
||||||
|
import type { D3Element, ParseOptions, ParseResult, RenderResult } from './types.js';
|
||||||
|
|
||||||
const MAX_TEXTLENGTH = 50_000;
|
const MAX_TEXTLENGTH = 50_000;
|
||||||
const MAX_TEXTLENGTH_EXCEEDED_MSG =
|
const MAX_TEXTLENGTH_EXCEEDED_MSG =
|
||||||
|
@ -56,44 +50,6 @@ const IFRAME_NOT_SUPPORTED_MSG = 'The "iframe" tag is not supported by your brow
|
||||||
const DOMPURIFY_TAGS = ['foreignobject'];
|
const DOMPURIFY_TAGS = ['foreignobject'];
|
||||||
const DOMPURIFY_ATTR = ['dominant-baseline'];
|
const DOMPURIFY_ATTR = ['dominant-baseline'];
|
||||||
|
|
||||||
export interface ParseOptions {
|
|
||||||
/**
|
|
||||||
* If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
|
|
||||||
* The `parseError` function will not be called.
|
|
||||||
*/
|
|
||||||
suppressErrors?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ParseResult {
|
|
||||||
/**
|
|
||||||
* The diagram type, e.g. 'flowchart', 'sequence', etc.
|
|
||||||
*/
|
|
||||||
diagramType: string;
|
|
||||||
}
|
|
||||||
// This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
|
|
||||||
export type D3Element = any;
|
|
||||||
|
|
||||||
export interface RenderResult {
|
|
||||||
/**
|
|
||||||
* The svg code for the rendered graph.
|
|
||||||
*/
|
|
||||||
svg: string;
|
|
||||||
/**
|
|
||||||
* The diagram type, e.g. 'flowchart', 'sequence', etc.
|
|
||||||
*/
|
|
||||||
diagramType: string;
|
|
||||||
/**
|
|
||||||
* Bind function to be called after the svg has been inserted into the DOM.
|
|
||||||
* This is necessary for adding event listeners to the elements in the svg.
|
|
||||||
* ```js
|
|
||||||
* const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
|
|
||||||
* div.innerHTML = svg;
|
|
||||||
* bindFunctions?.(div); // To call bindFunctions only if it's present.
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
bindFunctions?: (element: Element) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function processAndSetConfigs(text: string) {
|
function processAndSetConfigs(text: string) {
|
||||||
const processed = preprocessDiagram(text);
|
const processed = preprocessDiagram(text);
|
||||||
configApi.reset();
|
configApi.reset();
|
||||||
|
@ -248,14 +204,13 @@ export const cleanUpSvgCode = (
|
||||||
* @param svgCode - the svg code to put inside the iFrame
|
* @param svgCode - the svg code to put inside the iFrame
|
||||||
* @param svgElement - the d3 node that has the current svgElement so we can get the height from it
|
* @param svgElement - the d3 node that has the current svgElement so we can get the height from it
|
||||||
* @returns - the code with the iFrame that now contains the svgCode
|
* @returns - the code with the iFrame that now contains the svgCode
|
||||||
* TODO replace btoa(). Replace with buf.toString('base64')?
|
|
||||||
*/
|
*/
|
||||||
export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
|
export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
|
||||||
const height = svgElement?.viewBox?.baseVal?.height
|
const height = svgElement?.viewBox?.baseVal?.height
|
||||||
? svgElement.viewBox.baseVal.height + 'px'
|
? svgElement.viewBox.baseVal.height + 'px'
|
||||||
: IFRAME_HEIGHT;
|
: IFRAME_HEIGHT;
|
||||||
const base64encodedSrc = btoa('<body style="' + IFRAME_BODY_STYLE + '">' + svgCode + '</body>');
|
const base64encodedSrc = toBase64(`<body style="${IFRAME_BODY_STYLE}">${svgCode}</body>`);
|
||||||
return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}">
|
return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;charset=UTF-8;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}">
|
||||||
${IFRAME_NOT_SUPPORTED_MSG}
|
${IFRAME_NOT_SUPPORTED_MSG}
|
||||||
</iframe>`;
|
</iframe>`;
|
||||||
};
|
};
|
||||||
|
@ -568,69 +523,8 @@ function addA11yInfo(
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ## mermaidAPI configuration defaults
|
* @internal - Use mermaid.function instead of mermaid.mermaidAPI.function
|
||||||
*
|
|
||||||
* ```ts
|
|
||||||
* const config = {
|
|
||||||
* theme: 'default',
|
|
||||||
* logLevel: 'fatal',
|
|
||||||
* securityLevel: 'strict',
|
|
||||||
* startOnLoad: true,
|
|
||||||
* arrowMarkerAbsolute: false,
|
|
||||||
* suppressErrorRendering: false,
|
|
||||||
*
|
|
||||||
* er: {
|
|
||||||
* diagramPadding: 20,
|
|
||||||
* layoutDirection: 'TB',
|
|
||||||
* minEntityWidth: 100,
|
|
||||||
* minEntityHeight: 75,
|
|
||||||
* entityPadding: 15,
|
|
||||||
* stroke: 'gray',
|
|
||||||
* fill: 'honeydew',
|
|
||||||
* fontSize: 12,
|
|
||||||
* useMaxWidth: true,
|
|
||||||
* },
|
|
||||||
* flowchart: {
|
|
||||||
* diagramPadding: 8,
|
|
||||||
* htmlLabels: true,
|
|
||||||
* curve: 'basis',
|
|
||||||
* },
|
|
||||||
* sequence: {
|
|
||||||
* diagramMarginX: 50,
|
|
||||||
* diagramMarginY: 10,
|
|
||||||
* actorMargin: 50,
|
|
||||||
* width: 150,
|
|
||||||
* height: 65,
|
|
||||||
* boxMargin: 10,
|
|
||||||
* boxTextMargin: 5,
|
|
||||||
* noteMargin: 10,
|
|
||||||
* messageMargin: 35,
|
|
||||||
* messageAlign: 'center',
|
|
||||||
* mirrorActors: true,
|
|
||||||
* bottomMarginAdj: 1,
|
|
||||||
* useMaxWidth: true,
|
|
||||||
* rightAngles: false,
|
|
||||||
* showSequenceNumbers: false,
|
|
||||||
* },
|
|
||||||
* gantt: {
|
|
||||||
* titleTopMargin: 25,
|
|
||||||
* barHeight: 20,
|
|
||||||
* barGap: 4,
|
|
||||||
* topPadding: 50,
|
|
||||||
* leftPadding: 75,
|
|
||||||
* gridLineStartPadding: 35,
|
|
||||||
* fontSize: 11,
|
|
||||||
* fontFamily: '"Open Sans", sans-serif',
|
|
||||||
* numberSectionStyles: 4,
|
|
||||||
* axisFormat: '%Y-%m-%d',
|
|
||||||
* topAxis: false,
|
|
||||||
* displayMode: '',
|
|
||||||
* },
|
|
||||||
* };
|
|
||||||
* mermaid.initialize(config);
|
|
||||||
* ```
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const mermaidAPI = Object.freeze({
|
export const mermaidAPI = Object.freeze({
|
||||||
render,
|
render,
|
||||||
parse,
|
parse,
|
||||||
|
|
|
@ -21,13 +21,10 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
|
||||||
|
|
||||||
const label = node.label;
|
const label = node.label;
|
||||||
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
|
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
|
||||||
div.html(
|
const span = div.append('span');
|
||||||
`<span class="${labelClass} ${classes}" ` +
|
span.html(label);
|
||||||
(node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
|
applyStyle(span, node.labelStyle);
|
||||||
'>' +
|
span.attr('class', `${labelClass} ${classes}`);
|
||||||
label +
|
|
||||||
'</span>'
|
|
||||||
);
|
|
||||||
|
|
||||||
applyStyle(div, node.labelStyle);
|
applyStyle(div, node.labelStyle);
|
||||||
div.style('display', 'table-cell');
|
div.style('display', 'table-cell');
|
||||||
|
|
|
@ -154,10 +154,7 @@ properties:
|
||||||
secure:
|
secure:
|
||||||
description: |
|
description: |
|
||||||
This option controls which `currentConfig` keys are considered secure and
|
This option controls which `currentConfig` keys are considered secure and
|
||||||
can only be changed via call to `mermaidAPI.initialize`.
|
can only be changed via call to `mermaid.initialize`.
|
||||||
Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
|
|
||||||
in the current `currentConfig`.
|
|
||||||
|
|
||||||
This prevents malicious graph directives from overriding a site's default security.
|
This prevents malicious graph directives from overriding a site's default security.
|
||||||
default:
|
default:
|
||||||
[
|
[
|
||||||
|
|
|
@ -34,3 +34,41 @@ export interface EdgeData {
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
|
export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
|
||||||
|
|
||||||
|
export interface ParseOptions {
|
||||||
|
/**
|
||||||
|
* If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
|
||||||
|
* The `parseError` function will not be called.
|
||||||
|
*/
|
||||||
|
suppressErrors?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ParseResult {
|
||||||
|
/**
|
||||||
|
* The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||||
|
*/
|
||||||
|
diagramType: string;
|
||||||
|
}
|
||||||
|
// This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
|
||||||
|
export type D3Element = any;
|
||||||
|
|
||||||
|
export interface RenderResult {
|
||||||
|
/**
|
||||||
|
* The svg code for the rendered graph.
|
||||||
|
*/
|
||||||
|
svg: string;
|
||||||
|
/**
|
||||||
|
* The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||||
|
*/
|
||||||
|
diagramType: string;
|
||||||
|
/**
|
||||||
|
* Bind function to be called after the svg has been inserted into the DOM.
|
||||||
|
* This is necessary for adding event listeners to the elements in the svg.
|
||||||
|
* ```js
|
||||||
|
* const { svg, bindFunctions } = await mermaid.render('id1', 'graph TD;A-->B');
|
||||||
|
* div.innerHTML = svg;
|
||||||
|
* bindFunctions?.(div); // To call bindFunctions only if it's present.
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
bindFunctions?: (element: Element) => void;
|
||||||
|
}
|
||||||
|
|
|
@ -32,8 +32,7 @@ import type { MermaidConfig } from './config.type.js';
|
||||||
import memoize from 'lodash-es/memoize.js';
|
import memoize from 'lodash-es/memoize.js';
|
||||||
import merge from 'lodash-es/merge.js';
|
import merge from 'lodash-es/merge.js';
|
||||||
import { directiveRegex } from './diagram-api/regexes.js';
|
import { directiveRegex } from './diagram-api/regexes.js';
|
||||||
import type { D3Element } from './mermaidAPI.js';
|
import type { D3Element, Point, TextDimensionConfig, TextDimensions } from './types.js';
|
||||||
import type { Point, TextDimensionConfig, TextDimensions } from './types.js';
|
|
||||||
|
|
||||||
export const ZERO_WIDTH_SPACE = '\u200b';
|
export const ZERO_WIDTH_SPACE = '\u200b';
|
||||||
|
|
||||||
|
|
6
packages/mermaid/src/utils/base64.ts
Normal file
6
packages/mermaid/src/utils/base64.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
export function toBase64(str: string) {
|
||||||
|
// ref: https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem
|
||||||
|
const utf8Bytes = new TextEncoder().encode(str);
|
||||||
|
const utf8Str = Array.from(utf8Bytes, (byte) => String.fromCodePoint(byte)).join('');
|
||||||
|
return btoa(utf8Str);
|
||||||
|
}
|
|
@ -1,20 +0,0 @@
|
||||||
diff --git a/package.json b/package.json
|
|
||||||
index f2f77fa79c99382b079f4051ed51eafe8d2379c8..0bfddf55394e86f3a386eb7ab681369d410bae07 100644
|
|
||||||
--- a/package.json
|
|
||||||
+++ b/package.json
|
|
||||||
@@ -30,7 +30,15 @@
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.10"
|
|
||||||
},
|
|
||||||
+ "exports": {
|
|
||||||
+ ".": {
|
|
||||||
+ "import": "./dist/cytoscape.umd.js",
|
|
||||||
+ "default": "./dist/cytoscape.cjs.js"
|
|
||||||
+ },
|
|
||||||
+ "./*": "./*"
|
|
||||||
+ },
|
|
||||||
"main": "dist/cytoscape.cjs.js",
|
|
||||||
+ "module": "dist/cytoscape.umd.js",
|
|
||||||
"unpkg": "dist/cytoscape.min.js",
|
|
||||||
"jsdelivr": "dist/cytoscape.min.js",
|
|
||||||
"scripts": {
|
|
3806
pnpm-lock.yaml
3806
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
3
vitest.workspace.js
Normal file
3
vitest.workspace.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
import { defineWorkspace } from 'vitest/config';
|
||||||
|
|
||||||
|
export default defineWorkspace(['./vite.config.ts', './packages/mermaid/src/docs/vite.config.ts']);
|
Loading…
Reference in a new issue