Merge branch 'release/10.0.0' into sidv/splitDiagrams
* release/10.0.0: (333 commits) 10.0.0-rc.3 Export more types no side effects 10.0.0-rc.2 skip failing elk test Cleanup Update docs fix(#3406, #3394): Remove init & initThrowsErrors chore: Rename lazy loaded diagram definitions Skip flowchart-elk failing test Fix docs fix Server Fix lint Remove Readme Fix E2E Tests Fix tests feat: Break render and parse types chore: Remove all non async render/parse/init Remove CJS builds from docs chore: Remove cjs from build ...
This commit is contained in:
commit
638362baea
|
@ -3,4 +3,5 @@ dist/**
|
||||||
docs/Setup.md
|
docs/Setup.md
|
||||||
cypress.config.js
|
cypress.config.js
|
||||||
cypress/plugins/index.js
|
cypress/plugins/index.js
|
||||||
coverage
|
coverage
|
||||||
|
*.json
|
|
@ -0,0 +1,150 @@
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es6: true,
|
||||||
|
'jest/globals': true,
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
root: true,
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
parserOptions: {
|
||||||
|
ecmaFeatures: {
|
||||||
|
experimentalObjectRestSpread: true,
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
tsconfigRootDir: __dirname,
|
||||||
|
sourceType: 'module',
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
allowAutomaticSingleRunInference: true,
|
||||||
|
project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:json/recommended',
|
||||||
|
'plugin:markdown/recommended',
|
||||||
|
'plugin:@cspell/recommended',
|
||||||
|
'prettier',
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
'@typescript-eslint',
|
||||||
|
'no-only-tests',
|
||||||
|
'html',
|
||||||
|
'jest',
|
||||||
|
'jsdoc',
|
||||||
|
'json',
|
||||||
|
'@cspell',
|
||||||
|
'lodash',
|
||||||
|
'unicorn',
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
curly: 'error',
|
||||||
|
'no-console': 'error',
|
||||||
|
'no-prototype-builtins': 'off',
|
||||||
|
'no-unused-vars': 'off',
|
||||||
|
'cypress/no-async-tests': 'off',
|
||||||
|
'@typescript-eslint/no-floating-promises': 'error',
|
||||||
|
'@typescript-eslint/no-misused-promises': 'error',
|
||||||
|
'@typescript-eslint/ban-ts-comment': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
'ts-expect-error': 'allow-with-description',
|
||||||
|
'ts-ignore': 'allow-with-description',
|
||||||
|
'ts-nocheck': 'allow-with-description',
|
||||||
|
'ts-check': 'allow-with-description',
|
||||||
|
minimumDescriptionLength: 10,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'json/*': ['error', 'allowComments'],
|
||||||
|
'@cspell/spellchecker': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
checkIdentifiers: false,
|
||||||
|
checkStrings: false,
|
||||||
|
checkStringTemplates: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-empty': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
allowEmptyCatch: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-only-tests/no-only-tests': 'error',
|
||||||
|
'lodash/import-scope': ['error', 'method'],
|
||||||
|
'unicorn/better-regex': 'error',
|
||||||
|
'unicorn/no-abusive-eslint-disable': 'error',
|
||||||
|
'unicorn/no-array-push-push': 'error',
|
||||||
|
'unicorn/no-for-loop': 'error',
|
||||||
|
'unicorn/no-instanceof-array': 'error',
|
||||||
|
'unicorn/no-typeof-undefined': 'error',
|
||||||
|
'unicorn/no-unnecessary-await': 'error',
|
||||||
|
'unicorn/no-unsafe-regex': 'warn',
|
||||||
|
'unicorn/no-useless-promise-resolve-reject': 'error',
|
||||||
|
'unicorn/prefer-array-find': 'error',
|
||||||
|
'unicorn/prefer-array-flat-map': 'error',
|
||||||
|
'unicorn/prefer-array-index-of': 'error',
|
||||||
|
'unicorn/prefer-array-some': 'error',
|
||||||
|
'unicorn/prefer-default-parameters': 'error',
|
||||||
|
'unicorn/prefer-includes': 'error',
|
||||||
|
'unicorn/prefer-negative-index': 'error',
|
||||||
|
'unicorn/prefer-object-from-entries': 'error',
|
||||||
|
'unicorn/prefer-string-starts-ends-with': 'error',
|
||||||
|
'unicorn/prefer-string-trim-start-end': 'error',
|
||||||
|
'unicorn/string-content': 'error',
|
||||||
|
'unicorn/prefer-spread': 'error',
|
||||||
|
'unicorn/no-lonely-if': 'error',
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['cypress/**', 'demos/**'],
|
||||||
|
rules: {
|
||||||
|
'no-console': 'off',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['*.{js,jsx,mjs,cjs}'],
|
||||||
|
extends: ['plugin:jsdoc/recommended'],
|
||||||
|
rules: {
|
||||||
|
'jsdoc/check-indentation': 'off',
|
||||||
|
'jsdoc/check-alignment': 'off',
|
||||||
|
'jsdoc/check-line-alignment': 'off',
|
||||||
|
'jsdoc/multiline-blocks': 'off',
|
||||||
|
'jsdoc/newline-after-description': 'off',
|
||||||
|
'jsdoc/tag-lines': 'off',
|
||||||
|
'jsdoc/require-param-description': 'off',
|
||||||
|
'jsdoc/require-param-type': 'off',
|
||||||
|
'jsdoc/require-returns': 'off',
|
||||||
|
'jsdoc/require-returns-description': 'off',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['*.{ts,tsx}'],
|
||||||
|
plugins: ['tsdoc'],
|
||||||
|
rules: {
|
||||||
|
'tsdoc/syntax': 'error',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['*.spec.{ts,js}', 'cypress/**', 'demos/**', '**/docs/**'],
|
||||||
|
rules: {
|
||||||
|
'jsdoc/require-jsdoc': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': 'off',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['*.html', '*.md', '**/*.md/*'],
|
||||||
|
rules: {
|
||||||
|
'no-var': 'error',
|
||||||
|
'no-undef': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': 'off',
|
||||||
|
'@typescript-eslint/no-floating-promises': 'off',
|
||||||
|
'@typescript-eslint/no-misused-promises': 'off',
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
project: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
137
.eslintrc.json
137
.eslintrc.json
|
@ -1,137 +0,0 @@
|
||||||
{
|
|
||||||
"env": {
|
|
||||||
"browser": true,
|
|
||||||
"es6": true,
|
|
||||||
"jest/globals": true,
|
|
||||||
"node": true
|
|
||||||
},
|
|
||||||
"parser": "@typescript-eslint/parser",
|
|
||||||
"parserOptions": {
|
|
||||||
"ecmaFeatures": {
|
|
||||||
"experimentalObjectRestSpread": true,
|
|
||||||
"jsx": true
|
|
||||||
},
|
|
||||||
"sourceType": "module"
|
|
||||||
},
|
|
||||||
"extends": [
|
|
||||||
"eslint:recommended",
|
|
||||||
"plugin:@typescript-eslint/recommended",
|
|
||||||
"plugin:json/recommended",
|
|
||||||
"plugin:markdown/recommended",
|
|
||||||
"plugin:@cspell/recommended",
|
|
||||||
"prettier"
|
|
||||||
],
|
|
||||||
"plugins": [
|
|
||||||
"@typescript-eslint",
|
|
||||||
"no-only-tests",
|
|
||||||
"html",
|
|
||||||
"jest",
|
|
||||||
"jsdoc",
|
|
||||||
"json",
|
|
||||||
"@cspell",
|
|
||||||
"lodash",
|
|
||||||
"unicorn"
|
|
||||||
],
|
|
||||||
"rules": {
|
|
||||||
"curly": "error",
|
|
||||||
"no-console": "error",
|
|
||||||
"no-prototype-builtins": "off",
|
|
||||||
"no-unused-vars": "off",
|
|
||||||
"cypress/no-async-tests": "off",
|
|
||||||
"@typescript-eslint/ban-ts-comment": [
|
|
||||||
"error",
|
|
||||||
{
|
|
||||||
"ts-expect-error": "allow-with-description",
|
|
||||||
"ts-ignore": "allow-with-description",
|
|
||||||
"ts-nocheck": "allow-with-description",
|
|
||||||
"ts-check": "allow-with-description",
|
|
||||||
"minimumDescriptionLength": 10
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"json/*": ["error", "allowComments"],
|
|
||||||
"@cspell/spellchecker": [
|
|
||||||
"error",
|
|
||||||
{
|
|
||||||
"checkIdentifiers": false,
|
|
||||||
"checkStrings": false,
|
|
||||||
"checkStringTemplates": false
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"no-empty": [
|
|
||||||
"error",
|
|
||||||
{
|
|
||||||
"allowEmptyCatch": true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"no-only-tests/no-only-tests": "error",
|
|
||||||
"lodash/import-scope": ["error", "method"],
|
|
||||||
"unicorn/better-regex": "error",
|
|
||||||
"unicorn/no-abusive-eslint-disable": "error",
|
|
||||||
"unicorn/no-array-push-push": "error",
|
|
||||||
"unicorn/no-for-loop": "error",
|
|
||||||
"unicorn/no-instanceof-array": "error",
|
|
||||||
"unicorn/no-typeof-undefined": "error",
|
|
||||||
"unicorn/no-unnecessary-await": "error",
|
|
||||||
"unicorn/no-unsafe-regex": "warn",
|
|
||||||
"unicorn/no-useless-promise-resolve-reject": "error",
|
|
||||||
"unicorn/prefer-array-find": "error",
|
|
||||||
"unicorn/prefer-array-flat-map": "error",
|
|
||||||
"unicorn/prefer-array-index-of": "error",
|
|
||||||
"unicorn/prefer-array-some": "error",
|
|
||||||
"unicorn/prefer-default-parameters": "error",
|
|
||||||
"unicorn/prefer-includes": "error",
|
|
||||||
"unicorn/prefer-negative-index": "error",
|
|
||||||
"unicorn/prefer-object-from-entries": "error",
|
|
||||||
"unicorn/prefer-string-starts-ends-with": "error",
|
|
||||||
"unicorn/prefer-string-trim-start-end": "error",
|
|
||||||
"unicorn/string-content": "error",
|
|
||||||
"unicorn/prefer-spread": "error",
|
|
||||||
"unicorn/no-lonely-if": "error"
|
|
||||||
},
|
|
||||||
"overrides": [
|
|
||||||
{
|
|
||||||
"files": ["cypress/**", "demos/**"],
|
|
||||||
"rules": {
|
|
||||||
"no-console": "off"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"files": ["*.{js,jsx,mjs,cjs}"],
|
|
||||||
"extends": ["plugin:jsdoc/recommended"],
|
|
||||||
"rules": {
|
|
||||||
"jsdoc/check-indentation": "off",
|
|
||||||
"jsdoc/check-alignment": "off",
|
|
||||||
"jsdoc/check-line-alignment": "off",
|
|
||||||
"jsdoc/multiline-blocks": "off",
|
|
||||||
"jsdoc/newline-after-description": "off",
|
|
||||||
"jsdoc/tag-lines": "off",
|
|
||||||
"jsdoc/require-param-description": "off",
|
|
||||||
"jsdoc/require-param-type": "off",
|
|
||||||
"jsdoc/require-returns": "off",
|
|
||||||
"jsdoc/require-returns-description": "off"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"files": ["*.{ts,tsx}"],
|
|
||||||
"plugins": ["tsdoc"],
|
|
||||||
"rules": {
|
|
||||||
"tsdoc/syntax": "error"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
|
|
||||||
"rules": {
|
|
||||||
"jsdoc/require-jsdoc": "off",
|
|
||||||
"@typescript-eslint/no-unused-vars": "off"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"files": ["*.html", "*.md", "**/*.md/*"],
|
|
||||||
"rules": {
|
|
||||||
"no-var": "error",
|
|
||||||
"no-undef": "off",
|
|
||||||
"@typescript-eslint/no-unused-vars": "off"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
|
@ -1,6 +1,8 @@
|
||||||
# These are supported funding model platforms
|
# These are supported funding model platforms
|
||||||
|
|
||||||
github: [knsv]
|
github:
|
||||||
|
- knsv
|
||||||
|
- sidharthv96
|
||||||
#patreon: # Replace with a single Patreon username
|
#patreon: # Replace with a single Patreon username
|
||||||
#open_collective: # Replace with a single Open Collective username
|
#open_collective: # Replace with a single Open Collective username
|
||||||
#ko_fi: # Replace with a single Ko-fi username
|
#ko_fi: # Replace with a single Ko-fi username
|
||||||
|
|
|
@ -14,4 +14,5 @@ Make sure you
|
||||||
|
|
||||||
- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
|
- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
|
||||||
- [ ] :computer: have added unit/e2e tests (if appropriate)
|
- [ ] :computer: have added unit/e2e tests (if appropriate)
|
||||||
|
- [ ] :notebook: have added documentation (if appropriate)
|
||||||
- [ ] :bookmark: targeted `develop` branch
|
- [ ] :bookmark: targeted `develop` branch
|
||||||
|
|
|
@ -17,4 +17,4 @@ jobs:
|
||||||
- name: 'Checkout Repository'
|
- name: 'Checkout Repository'
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v3
|
||||||
- name: 'Dependency Review'
|
- name: 'Dependency Review'
|
||||||
uses: actions/dependency-review-action@v2
|
uses: actions/dependency-review-action@v3
|
||||||
|
|
|
@ -32,6 +32,7 @@ jobs:
|
||||||
# and run all Cypress tests
|
# and run all Cypress tests
|
||||||
- name: Cypress run
|
- name: Cypress run
|
||||||
uses: cypress-io/github-action@v4
|
uses: cypress-io/github-action@v4
|
||||||
|
id: cypress
|
||||||
# If CYPRESS_RECORD_KEY is set, run in parallel on all containers
|
# If CYPRESS_RECORD_KEY is set, run in parallel on all containers
|
||||||
# Otherwise (e.g. if running from fork), we run on a single container only
|
# Otherwise (e.g. if running from fork), we run on a single container only
|
||||||
if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
|
if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
|
||||||
|
@ -44,3 +45,10 @@ jobs:
|
||||||
parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
|
parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
|
||||||
env:
|
env:
|
||||||
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
|
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
|
||||||
|
|
||||||
|
- name: Upload Artifacts
|
||||||
|
uses: actions/upload-artifact@v3
|
||||||
|
if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
|
||||||
|
with:
|
||||||
|
name: error-snapshots
|
||||||
|
path: cypress/snapshots/**/__diff_output__/*
|
||||||
|
|
|
@ -13,11 +13,10 @@ on:
|
||||||
- master
|
- master
|
||||||
pull_request:
|
pull_request:
|
||||||
branches:
|
branches:
|
||||||
- develop
|
|
||||||
- master
|
- master
|
||||||
schedule:
|
schedule:
|
||||||
# * is a special character in YAML so you have to quote this string
|
# * is a special character in YAML so you have to quote this string
|
||||||
- cron: '30 8 * * 5'
|
- cron: '30 8 * * *'
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
linkChecker:
|
linkChecker:
|
||||||
|
|
|
@ -7,9 +7,10 @@ on:
|
||||||
- opened
|
- opened
|
||||||
- synchronize
|
- synchronize
|
||||||
- ready_for_review
|
- ready_for_review
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: write
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
lint:
|
lint:
|
||||||
|
@ -36,8 +37,35 @@ jobs:
|
||||||
CYPRESS_CACHE_FOLDER: .cache/Cypress
|
CYPRESS_CACHE_FOLDER: .cache/Cypress
|
||||||
|
|
||||||
- name: Run Linting
|
- name: Run Linting
|
||||||
run: pnpm run lint
|
shell: bash
|
||||||
|
run: |
|
||||||
|
if ! pnpm run lint; then
|
||||||
|
# print a nice error message on lint failure
|
||||||
|
ERROR_MESSAGE='Running `pnpm run lint` failed.'
|
||||||
|
ERROR_MESSAGE+=' Running `pnpm run lint:fix` may fix this issue. '
|
||||||
|
ERROR_MESSAGE+=" If this error doesn't occur on your local machine,"
|
||||||
|
ERROR_MESSAGE+=' make sure your packages are up-to-date by running `pnpm install`.'
|
||||||
|
ERROR_MESSAGE+=' You may also need to delete your prettier cache by running'
|
||||||
|
ERROR_MESSAGE+=' `rm ./node_modules/.cache/prettier/.prettier-cache`.'
|
||||||
|
echo "::error title=Lint failure::${ERROR_MESSAGE}"
|
||||||
|
# make sure to return an error exitcode so that GitHub actions shows a red-cross
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
- name: Verify Docs
|
- name: Verify Docs
|
||||||
|
id: verifyDocs
|
||||||
working-directory: ./packages/mermaid
|
working-directory: ./packages/mermaid
|
||||||
|
continue-on-error: ${{ github.event_name == 'push' }}
|
||||||
run: pnpm run docs:verify
|
run: pnpm run docs:verify
|
||||||
|
|
||||||
|
- name: Rebuild Docs
|
||||||
|
if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
|
||||||
|
working-directory: ./packages/mermaid
|
||||||
|
run: pnpm run docs:build
|
||||||
|
|
||||||
|
- name: Commit changes
|
||||||
|
uses: EndBug/add-and-commit@v9
|
||||||
|
if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
|
||||||
|
with:
|
||||||
|
message: 'Update docs'
|
||||||
|
add: 'docs/*'
|
||||||
|
|
|
@ -8,6 +8,6 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Label PR
|
- name: Label PR
|
||||||
uses: TimonVS/pr-labeler-action@v3
|
uses: TimonVS/pr-labeler-action@v4
|
||||||
env:
|
env:
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
|
@ -5,6 +5,7 @@ on:
|
||||||
push:
|
push:
|
||||||
branches:
|
branches:
|
||||||
- master
|
- master
|
||||||
|
pull_request:
|
||||||
|
|
||||||
# Allows you to run this workflow manually from the Actions tab
|
# Allows you to run this workflow manually from the Actions tab
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
@ -40,7 +41,7 @@ jobs:
|
||||||
run: pnpm install --frozen-lockfile
|
run: pnpm install --frozen-lockfile
|
||||||
|
|
||||||
- name: Setup Pages
|
- name: Setup Pages
|
||||||
uses: actions/configure-pages@v2
|
uses: actions/configure-pages@v3
|
||||||
|
|
||||||
- name: Run Build
|
- name: Run Build
|
||||||
run: pnpm --filter mermaid run docs:build:vitepress
|
run: pnpm --filter mermaid run docs:build:vitepress
|
||||||
|
@ -52,6 +53,7 @@ jobs:
|
||||||
|
|
||||||
# Deployment job
|
# Deployment job
|
||||||
deploy:
|
deploy:
|
||||||
|
if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
|
||||||
environment:
|
environment:
|
||||||
name: github-pages
|
name: github-pages
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
|
|
@ -11,18 +11,21 @@ jobs:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v3
|
||||||
- uses: fregante/setup-git-user@v1
|
- uses: fregante/setup-git-user@v1
|
||||||
|
|
||||||
- name: Setup Node.js
|
- uses: pnpm/action-setup@v2
|
||||||
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
|
- name: Setup Node.js v18
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
|
cache: pnpm
|
||||||
node-version: 18.x
|
node-version: 18.x
|
||||||
- name: Install Yarn
|
|
||||||
run: npm i yarn --global
|
|
||||||
|
|
||||||
- name: Install Json
|
|
||||||
run: npm i json --global
|
|
||||||
|
|
||||||
- name: Install Packages
|
- name: Install Packages
|
||||||
run: yarn install --frozen-lockfile
|
run: |
|
||||||
|
pnpm install --frozen-lockfile
|
||||||
|
npm i json --global
|
||||||
|
env:
|
||||||
|
CYPRESS_CACHE_FOLDER: .cache/Cypress
|
||||||
|
|
||||||
- name: Prepare release
|
- name: Prepare release
|
||||||
run: |
|
run: |
|
||||||
|
@ -31,7 +34,7 @@ jobs:
|
||||||
git checkout -t origin/release/$VERSION
|
git checkout -t origin/release/$VERSION
|
||||||
npm version --no-git-tag-version --allow-same-version $VERSION
|
npm version --no-git-tag-version --allow-same-version $VERSION
|
||||||
git add package.json
|
git add package.json
|
||||||
git commit -m "Bump version $VERSION"
|
git commit -nm "Bump version $VERSION"
|
||||||
git checkout -t origin/master
|
git checkout -t origin/master
|
||||||
git merge -m "Release $VERSION" --no-ff release/$VERSION
|
git merge -m "Release $VERSION" --no-ff release/$VERSION
|
||||||
git push --no-verify
|
git push --no-verify
|
||||||
|
|
|
@ -1,5 +1,11 @@
|
||||||
export default {
|
export default {
|
||||||
'!(docs/**/*)*.{ts,js,json,html,md,mts}': ['eslint --fix', 'prettier --write'],
|
'!(docs/**/*)*.{ts,js,json,html,md,mts}': [
|
||||||
|
'eslint --cache --cache-strategy content --fix',
|
||||||
|
// don't cache prettier yet, since we use `prettier-plugin-jsdoc`,
|
||||||
|
// and prettier doesn't invalidate cache on plugin updates"
|
||||||
|
// https://prettier.io/docs/en/cli.html#--cache
|
||||||
|
'prettier --write',
|
||||||
|
],
|
||||||
'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
|
'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
|
||||||
'**/*.jison': ['pnpm -w run lint:jison'],
|
'**/*.jison': ['pnpm -w run lint:jison'],
|
||||||
};
|
};
|
||||||
|
|
|
@ -9,5 +9,8 @@ https://mkdocs.org/
|
||||||
https://osawards.com/javascript/#nominees
|
https://osawards.com/javascript/#nominees
|
||||||
https://osawards.com/javascript/2019
|
https://osawards.com/javascript/2019
|
||||||
|
|
||||||
|
# Timeout error, maybe Twitter has anti-bot defences against GitHub's CI servers?
|
||||||
|
https://twitter.com/mermaidjs_
|
||||||
|
|
||||||
# Don't check files that are generated during the build via `pnpm docs:code`
|
# Don't check files that are generated during the build via `pnpm docs:code`
|
||||||
packages/mermaid/src/docs/config/setup/*
|
packages/mermaid/src/docs/config/setup/*
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
version: 2
|
|
||||||
snapshot:
|
|
||||||
widths:
|
|
||||||
- 1280
|
|
||||||
discovery:
|
|
||||||
disable-cache: true
|
|
|
@ -1,15 +0,0 @@
|
||||||
{
|
|
||||||
"ecmaVersion": 6,
|
|
||||||
"libs": ["browser"],
|
|
||||||
"loadEagerly": [],
|
|
||||||
"dontLoad": ["node_modules/**"],
|
|
||||||
"plugins": {
|
|
||||||
"modules": {},
|
|
||||||
"es_modules": {},
|
|
||||||
"node": {},
|
|
||||||
"doc_comment": {
|
|
||||||
"fullDocs": true,
|
|
||||||
"strong": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -20,13 +20,14 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] =>
|
||||||
if (packageName !== 'mermaid' || !visualize) {
|
if (packageName !== 'mermaid' || !visualize) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
return ['network', 'treemap', 'sunburst'].map((chartType) =>
|
return ['network', 'treemap', 'sunburst'].map(
|
||||||
visualizer({
|
(chartType) =>
|
||||||
filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
|
visualizer({
|
||||||
template: chartType as TemplateType,
|
filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
|
||||||
gzipSize: true,
|
template: chartType as TemplateType,
|
||||||
brotliSize: true,
|
gzipSize: true,
|
||||||
})
|
brotliSize: true,
|
||||||
|
}) as PluginOption
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -36,16 +37,11 @@ const packageOptions = {
|
||||||
packageName: 'mermaid',
|
packageName: 'mermaid',
|
||||||
file: 'mermaid.ts',
|
file: 'mermaid.ts',
|
||||||
},
|
},
|
||||||
'mermaid-mindmap': {
|
'mermaid-example-diagram': {
|
||||||
name: 'mermaid-mindmap',
|
name: 'mermaid-example-diagram',
|
||||||
packageName: 'mermaid-mindmap',
|
packageName: 'mermaid-example-diagram',
|
||||||
file: 'detector.ts',
|
file: 'detector.ts',
|
||||||
},
|
},
|
||||||
// 'mermaid-example-diagram-detector': {
|
|
||||||
// name: 'mermaid-example-diagram-detector',
|
|
||||||
// packageName: 'mermaid-example-diagram',
|
|
||||||
// file: 'detector.ts',
|
|
||||||
// },
|
|
||||||
};
|
};
|
||||||
|
|
||||||
interface BuildOptions {
|
interface BuildOptions {
|
||||||
|
@ -66,12 +62,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
|
entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name,
|
|
||||||
format: 'umd',
|
|
||||||
sourcemap: true,
|
|
||||||
entryFileNames: `${name}${minify ? '.min' : ''}.js`,
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
if (core) {
|
if (core) {
|
||||||
|
@ -119,11 +109,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
|
|
||||||
if (watch && config.build) {
|
if (watch && config.build) {
|
||||||
config.build.watch = {
|
config.build.watch = {
|
||||||
include: [
|
include: ['packages/mermaid-example-diagram/src/**', 'packages/mermaid/src/**'],
|
||||||
'packages/mermaid-mindmap/src/**',
|
|
||||||
'packages/mermaid/src/**',
|
|
||||||
// 'packages/mermaid-example-diagram/src/**',
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -131,11 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
};
|
};
|
||||||
|
|
||||||
const buildPackage = async (entryName: keyof typeof packageOptions) => {
|
const buildPackage = async (entryName: keyof typeof packageOptions) => {
|
||||||
return Promise.allSettled([
|
await build(getBuildConfig({ minify: false, entryName }));
|
||||||
build(getBuildConfig({ minify: false, entryName })),
|
await build(getBuildConfig({ minify: 'esbuild', entryName }));
|
||||||
build(getBuildConfig({ minify: 'esbuild', entryName })),
|
await build(getBuildConfig({ minify: false, core: true, entryName }));
|
||||||
build(getBuildConfig({ minify: false, core: true, entryName })),
|
|
||||||
]);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const main = async () => {
|
const main = async () => {
|
||||||
|
@ -146,10 +130,9 @@ const main = async () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
if (watch) {
|
if (watch) {
|
||||||
build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
|
build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
|
||||||
if (!mermaidOnly) {
|
if (!mermaidOnly) {
|
||||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
|
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
||||||
// build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
|
||||||
}
|
}
|
||||||
} else if (visualize) {
|
} else if (visualize) {
|
||||||
await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
|
await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
|
||||||
|
|
|
@ -1,14 +1,6 @@
|
||||||
import express, { NextFunction, Request, Response } from 'express';
|
import express from 'express';
|
||||||
|
import cors from 'cors';
|
||||||
import { createServer as createViteServer } from 'vite';
|
import { createServer as createViteServer } from 'vite';
|
||||||
// import { getBuildConfig } from './build';
|
|
||||||
|
|
||||||
const cors = (req: Request, res: Response, next: NextFunction) => {
|
|
||||||
res.header('Access-Control-Allow-Origin', '*');
|
|
||||||
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
|
|
||||||
res.header('Access-Control-Allow-Headers', 'Content-Type');
|
|
||||||
|
|
||||||
next();
|
|
||||||
};
|
|
||||||
|
|
||||||
async function createServer() {
|
async function createServer() {
|
||||||
const app = express();
|
const app = express();
|
||||||
|
@ -21,10 +13,9 @@ async function createServer() {
|
||||||
appType: 'custom', // don't include Vite's default HTML handling middlewares
|
appType: 'custom', // don't include Vite's default HTML handling middlewares
|
||||||
});
|
});
|
||||||
|
|
||||||
app.use(cors);
|
app.use(cors());
|
||||||
app.use(express.static('./packages/mermaid/dist'));
|
app.use(express.static('./packages/mermaid/dist'));
|
||||||
app.use(express.static('./packages/mermaid-example-diagram/dist'));
|
app.use(express.static('./packages/mermaid-example-diagram/dist'));
|
||||||
app.use(express.static('./packages/mermaid-mindmap/dist'));
|
|
||||||
app.use(vite.middlewares);
|
app.use(vite.middlewares);
|
||||||
app.use(express.static('demos'));
|
app.use(express.static('demos'));
|
||||||
app.use(express.static('cypress/platform'));
|
app.use(express.static('cypress/platform'));
|
||||||
|
@ -34,5 +25,4 @@ async function createServer() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// build(getBuildConfig({ minify: false, watch: true }));
|
|
||||||
createServer();
|
createServer();
|
||||||
|
|
|
@ -63,6 +63,28 @@ flowchart LR
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
You can use `note`, `tip`, `warning` and `danger` in triple backticks to add a note, tip, warning or danger box.
|
||||||
|
Do not use vitepress specific markdown syntax `::: warning` as it will not be processed correctly.
|
||||||
|
|
||||||
|
````
|
||||||
|
```note
|
||||||
|
Note content
|
||||||
|
```
|
||||||
|
|
||||||
|
```tip
|
||||||
|
Tip content
|
||||||
|
```
|
||||||
|
|
||||||
|
```warning
|
||||||
|
Warning content
|
||||||
|
```
|
||||||
|
|
||||||
|
```danger
|
||||||
|
Danger content
|
||||||
|
```
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
**_DO NOT CHANGE FILES IN `/docs`_**
|
**_DO NOT CHANGE FILES IN `/docs`_**
|
||||||
|
|
||||||
### The official documentation site
|
### The official documentation site
|
||||||
|
|
43
README.md
43
README.md
|
@ -1,8 +1,37 @@
|
||||||
# mermaid
|
<p align="center">
|
||||||
|
<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
|
||||||
|
</p>
|
||||||
|
<h1 align="center">
|
||||||
|
Mermaid
|
||||||
|
</h1>
|
||||||
|
<p align="center">
|
||||||
|
Generate diagrams from markdown-like text.
|
||||||
|
<p>
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
|
||||||
|
<p>
|
||||||
|
|
||||||
[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
|
<p align="center">
|
||||||
|
<a href="https://mermaid.live/"><b>Live Editor!</b></a>
|
||||||
|
</p>
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 Join Us</a>
|
||||||
|
</p>
|
||||||
|
<p align="center">
|
||||||
|
<a href="./README.zh-CN.md">简体中文</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
English | [简体中文](./README.zh-CN.md)
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
|
||||||
|
[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
|
||||||
|
[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
|
||||||
|
[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
|
||||||
|
[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
|
||||||
|
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
|
||||||
|
[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||||
|
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
|
||||||
|
|
||||||
<img src="./img/header.png" alt="" />
|
<img src="./img/header.png" alt="" />
|
||||||
|
|
||||||
|
@ -10,7 +39,7 @@ English | [简体中文](./README.zh-CN.md)
|
||||||
|
|
||||||
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
|
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
|
||||||
|
|
||||||
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
|
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
|
||||||
|
|
||||||
## About
|
## About
|
||||||
|
|
||||||
|
@ -27,14 +56,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
|
||||||
|
|
||||||
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
||||||
[Tutorials](./docs/config/Tutorials.md) has video tutorials.
|
[Tutorials](./docs/config/Tutorials.md) has video tutorials.
|
||||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
|
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
|
||||||
|
|
||||||
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
|
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
|
||||||
|
|
||||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
||||||
|
|
||||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
|
|
||||||
|
|
||||||
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
|
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
|
||||||
|
|
||||||
<a href="https://applitools.com/">
|
<a href="https://applitools.com/">
|
||||||
|
|
|
@ -1,8 +1,37 @@
|
||||||
# mermaid
|
<p align="center">
|
||||||
|
<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
|
||||||
|
</p>
|
||||||
|
<h1 align="center">
|
||||||
|
Mermaid
|
||||||
|
</h1>
|
||||||
|
<p align="center">
|
||||||
|
通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
|
||||||
|
<p>
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
|
||||||
|
<p>
|
||||||
|
|
||||||
[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
|
<p align="center">
|
||||||
|
<a href="https://mermaid.live/"><b>Live Editor!</b></a>
|
||||||
|
</p>
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
|
||||||
|
</p>
|
||||||
|
<p align="center">
|
||||||
|
<a href="./README.md">English</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
[English](./README.md) | 简体中文
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
|
||||||
|
[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
|
||||||
|
[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
|
||||||
|
[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
|
||||||
|
[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
|
||||||
|
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
|
||||||
|
[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||||
|
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
|
||||||
|
|
||||||
<img src="./img/header.png" alt="" />
|
<img src="./img/header.png" alt="" />
|
||||||
|
|
||||||
|
@ -10,7 +39,7 @@
|
||||||
|
|
||||||
**感谢所有参与进来提交 PR,解答疑问的人们! 🙏**
|
**感谢所有参与进来提交 PR,解答疑问的人们! 🙏**
|
||||||
|
|
||||||
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
|
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
|
||||||
|
|
||||||
## 关于 Mermaid
|
## 关于 Mermaid
|
||||||
|
|
||||||
|
@ -24,12 +53,10 @@ Mermaid 是一个基于 Javascript 的图表绘制工具,通过解析类 Markd
|
||||||
Mermaid 通过允许用户创建便于修改的图表来解决这一难题,它也可以作为生产脚本(或其他代码)的一部分。<br/>
|
Mermaid 通过允许用户创建便于修改的图表来解决这一难题,它也可以作为生产脚本(或其他代码)的一部分。<br/>
|
||||||
<br/>
|
<br/>
|
||||||
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
||||||
你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程,也可以查看 [Mermaid 的集成和使用](./docs/misc/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程,也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
||||||
|
|
||||||
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式,可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式,可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
||||||
|
|
||||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
|
|
||||||
|
|
||||||
<!-- </Main description> -->
|
<!-- </Main description> -->
|
||||||
|
|
||||||
## 示例
|
## 示例
|
||||||
|
@ -325,7 +352,7 @@ _很不幸的是,鱼与熊掌不可兼得,在这个场景下它意味着在
|
||||||
|
|
||||||
来自 Knut Sveidqvist:
|
来自 Knut Sveidqvist:
|
||||||
|
|
||||||
> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目,它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
|
> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目,它们提供了图形布局和绘图工具库!_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
|
||||||
>
|
>
|
||||||
> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors),没有你们,就没有这个项目的今天!_
|
> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors),没有你们,就没有这个项目的今天!_
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,58 @@
|
||||||
# A collection of updates that change the behaviour
|
# A collection of updates that change the behavior
|
||||||
|
|
||||||
|
## Async
|
||||||
|
|
||||||
|
`parse`, `render` are now async.
|
||||||
|
|
||||||
## Lazy loading and asynchronisity
|
## Lazy loading and asynchronisity
|
||||||
|
|
||||||
- Invalid dates are rendered as syntax error instead of returning best guess or the current date
|
- Invalid dates are rendered as syntax error instead of returning best guess or the current date
|
||||||
|
|
||||||
|
## ParseError is removed
|
||||||
|
|
||||||
|
```js
|
||||||
|
//< v10.0.0
|
||||||
|
mermaid.parse(text, parseError);
|
||||||
|
|
||||||
|
//>= v10.0.0
|
||||||
|
await mermaid.parse(text).catch(parseError);
|
||||||
|
// or
|
||||||
|
try {
|
||||||
|
await mermaid.parse(text);
|
||||||
|
} catch (err) {
|
||||||
|
parseError(err);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Init deprecated and InitThrowsErrors removed
|
||||||
|
|
||||||
|
The config passed to `init` was not being used eariler.
|
||||||
|
It will now be used.
|
||||||
|
The `init` function is deprecated and will be removed in the next major release.
|
||||||
|
init currently works as a wrapper to `initialize` and `run`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//< v10.0.0
|
||||||
|
mermaid.init(config, selector, cb);
|
||||||
|
|
||||||
|
//>= v10.0.0
|
||||||
|
mermaid.initialize(config);
|
||||||
|
mermaid.run({
|
||||||
|
querySelector: selector,
|
||||||
|
postRenderCallback: cb,
|
||||||
|
suppressErrors: true,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
//< v10.0.0
|
||||||
|
mermaid.initThrowsErrors(config, selector, cb);
|
||||||
|
|
||||||
|
//>= v10.0.0
|
||||||
|
mermaid.initialize(config);
|
||||||
|
mermaid.run({
|
||||||
|
querySelector: selector,
|
||||||
|
postRenderCallback: cb,
|
||||||
|
suppressErrors: false,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
/**
|
||||||
|
* Mocked C4Context diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const drawPersonOrSystemArray = vi.fn();
|
||||||
|
export const drawBoundary = vi.fn();
|
||||||
|
|
||||||
|
export const setConf = vi.fn();
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
drawPersonOrSystemArray,
|
||||||
|
drawBoundary,
|
||||||
|
setConf,
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,16 @@
|
||||||
|
/**
|
||||||
|
* Mocked class diagram v2 renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const setConf = vi.fn();
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setConf,
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
* Mocked class diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -1,79 +1,14 @@
|
||||||
// @ts-nocheck TODO: Fix TS
|
// @ts-nocheck TODO: Fix TS
|
||||||
import { vi } from 'vitest';
|
import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
|
||||||
|
|
||||||
const NewD3 = function () {
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
function returnThis() {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
append: function () {
|
|
||||||
return NewD3();
|
|
||||||
},
|
|
||||||
lower: returnThis,
|
|
||||||
attr: returnThis,
|
|
||||||
style: returnThis,
|
|
||||||
text: returnThis,
|
|
||||||
0: {
|
|
||||||
0: {
|
|
||||||
getBBox: function () {
|
|
||||||
return {
|
|
||||||
height: 10,
|
|
||||||
width: 20,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const select = function () {
|
export const select = function () {
|
||||||
return new NewD3();
|
return new MockedD3();
|
||||||
};
|
};
|
||||||
|
|
||||||
export const selectAll = function () {
|
export const selectAll = function () {
|
||||||
return new NewD3();
|
return new MockedD3();
|
||||||
};
|
};
|
||||||
|
|
||||||
export const curveBasis = 'basis';
|
export const curveBasis = 'basis';
|
||||||
export const curveLinear = 'linear';
|
export const curveLinear = 'linear';
|
||||||
export const curveCardinal = 'cardinal';
|
export const curveCardinal = 'cardinal';
|
||||||
|
|
||||||
export const MockD3 = (name, parent) => {
|
|
||||||
const children = [];
|
|
||||||
const elem = {
|
|
||||||
get __children() {
|
|
||||||
return children;
|
|
||||||
},
|
|
||||||
get __name() {
|
|
||||||
return name;
|
|
||||||
},
|
|
||||||
get __parent() {
|
|
||||||
return parent;
|
|
||||||
},
|
|
||||||
node() {
|
|
||||||
return {
|
|
||||||
getBBox() {
|
|
||||||
return {
|
|
||||||
x: 5,
|
|
||||||
y: 10,
|
|
||||||
height: 15,
|
|
||||||
width: 20,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
elem.append = (name) => {
|
|
||||||
const mockElem = MockD3(name, elem);
|
|
||||||
children.push(mockElem);
|
|
||||||
return mockElem;
|
|
||||||
};
|
|
||||||
elem.lower = vi.fn(() => elem);
|
|
||||||
elem.attr = vi.fn(() => elem);
|
|
||||||
elem.text = vi.fn(() => elem);
|
|
||||||
elem.style = vi.fn(() => elem);
|
|
||||||
return elem;
|
|
||||||
};
|
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
/**
|
||||||
|
* Mocked er diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const setConf = vi.fn();
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setConf,
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,24 @@
|
||||||
|
/**
|
||||||
|
* Mocked flow (flowchart) diagram v2 renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const setConf = vi.fn();
|
||||||
|
export const addVertices = vi.fn();
|
||||||
|
export const addEdges = vi.fn();
|
||||||
|
export const getClasses = vi.fn().mockImplementation(() => {
|
||||||
|
return {};
|
||||||
|
});
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setConf,
|
||||||
|
addVertices,
|
||||||
|
addEdges,
|
||||||
|
getClasses,
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,16 @@
|
||||||
|
/**
|
||||||
|
* Mocked gantt diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const setConf = vi.fn();
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setConf,
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
* Mocked git (graph) diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,15 @@
|
||||||
|
/**
|
||||||
|
* Mocked pie (picChart) diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
export const setConf = vi.fn();
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setConf,
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
* Mocked pie (picChart) diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
* Mocked requirement diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,23 @@
|
||||||
|
/**
|
||||||
|
* Mocked sequence diagram renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const bounds = vi.fn();
|
||||||
|
export const drawActors = vi.fn();
|
||||||
|
export const drawActorsPopup = vi.fn();
|
||||||
|
|
||||||
|
export const setConf = vi.fn();
|
||||||
|
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
bounds,
|
||||||
|
drawActors,
|
||||||
|
drawActorsPopup,
|
||||||
|
setConf,
|
||||||
|
draw,
|
||||||
|
};
|
|
@ -0,0 +1,22 @@
|
||||||
|
/**
|
||||||
|
* Mocked state diagram v2 renderer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
export const setConf = vi.fn();
|
||||||
|
export const getClasses = vi.fn().mockImplementation(() => {
|
||||||
|
return {};
|
||||||
|
});
|
||||||
|
export const stateDomId = vi.fn().mockImplementation(() => {
|
||||||
|
return 'mocked-stateDiagram-stateDomId';
|
||||||
|
});
|
||||||
|
export const draw = vi.fn().mockImplementation(() => {
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setConf,
|
||||||
|
getClasses,
|
||||||
|
draw,
|
||||||
|
};
|
19
cSpell.json
19
cSpell.json
|
@ -6,6 +6,7 @@
|
||||||
"adamiecki",
|
"adamiecki",
|
||||||
"alois",
|
"alois",
|
||||||
"antiscript",
|
"antiscript",
|
||||||
|
"appli",
|
||||||
"applitools",
|
"applitools",
|
||||||
"asciidoctor",
|
"asciidoctor",
|
||||||
"ashish",
|
"ashish",
|
||||||
|
@ -13,7 +14,9 @@
|
||||||
"bbox",
|
"bbox",
|
||||||
"bilkent",
|
"bilkent",
|
||||||
"bisheng",
|
"bisheng",
|
||||||
|
"blrs",
|
||||||
"braintree",
|
"braintree",
|
||||||
|
"brkt",
|
||||||
"brolin",
|
"brolin",
|
||||||
"brotli",
|
"brotli",
|
||||||
"classdef",
|
"classdef",
|
||||||
|
@ -30,6 +33,7 @@
|
||||||
"doku",
|
"doku",
|
||||||
"dompurify",
|
"dompurify",
|
||||||
"edgechromium",
|
"edgechromium",
|
||||||
|
"elkjs",
|
||||||
"faber",
|
"faber",
|
||||||
"flatmap",
|
"flatmap",
|
||||||
"ftplugin",
|
"ftplugin",
|
||||||
|
@ -38,6 +42,7 @@
|
||||||
"gitgraph",
|
"gitgraph",
|
||||||
"globby",
|
"globby",
|
||||||
"graphlib",
|
"graphlib",
|
||||||
|
"graphviz",
|
||||||
"grav",
|
"grav",
|
||||||
"greywolf",
|
"greywolf",
|
||||||
"inkdrop",
|
"inkdrop",
|
||||||
|
@ -51,8 +56,10 @@
|
||||||
"knut",
|
"knut",
|
||||||
"laganeckas",
|
"laganeckas",
|
||||||
"lintstagedrc",
|
"lintstagedrc",
|
||||||
|
"logmsg",
|
||||||
"lucida",
|
"lucida",
|
||||||
"matthieu",
|
"matthieu",
|
||||||
|
"mdast",
|
||||||
"mdbook",
|
"mdbook",
|
||||||
"mermerd",
|
"mermerd",
|
||||||
"mindaugas",
|
"mindaugas",
|
||||||
|
@ -60,26 +67,38 @@
|
||||||
"mindmaps",
|
"mindmaps",
|
||||||
"mitigations",
|
"mitigations",
|
||||||
"mkdocs",
|
"mkdocs",
|
||||||
|
"mult",
|
||||||
"orlandoni",
|
"orlandoni",
|
||||||
"phpbb",
|
"phpbb",
|
||||||
"plantuml",
|
"plantuml",
|
||||||
"playfair",
|
"playfair",
|
||||||
|
"pnpm",
|
||||||
"podlite",
|
"podlite",
|
||||||
|
"quence",
|
||||||
|
"radious",
|
||||||
"ranksep",
|
"ranksep",
|
||||||
|
"rect",
|
||||||
|
"rects",
|
||||||
"redmine",
|
"redmine",
|
||||||
|
"roledescription",
|
||||||
"sandboxed",
|
"sandboxed",
|
||||||
"setupgraphviewbox",
|
"setupgraphviewbox",
|
||||||
"shiki",
|
"shiki",
|
||||||
"sidharth",
|
"sidharth",
|
||||||
|
"sidharthv",
|
||||||
"sphinxcontrib",
|
"sphinxcontrib",
|
||||||
"statediagram",
|
"statediagram",
|
||||||
"stylis",
|
"stylis",
|
||||||
"substate",
|
"substate",
|
||||||
"sveidqvist",
|
"sveidqvist",
|
||||||
|
"swimm",
|
||||||
"techn",
|
"techn",
|
||||||
|
"teststr",
|
||||||
|
"textlength",
|
||||||
"treemap",
|
"treemap",
|
||||||
"ts-nocheck",
|
"ts-nocheck",
|
||||||
"tuleap",
|
"tuleap",
|
||||||
|
"ugge",
|
||||||
"unist",
|
"unist",
|
||||||
"verdana",
|
"verdana",
|
||||||
"viewports",
|
"viewports",
|
||||||
|
|
|
@ -2,7 +2,7 @@ const utf8ToB64 = (str) => {
|
||||||
return window.btoa(unescape(encodeURIComponent(str)));
|
return window.btoa(unescape(encodeURIComponent(str)));
|
||||||
};
|
};
|
||||||
|
|
||||||
const batchId = 'mermid-batch' + new Date().getTime();
|
const batchId = 'mermaid-batch' + new Date().getTime();
|
||||||
|
|
||||||
export const mermaidUrl = (graphStr, options, api) => {
|
export const mermaidUrl = (graphStr, options, api) => {
|
||||||
const obj = {
|
const obj = {
|
||||||
|
@ -46,8 +46,22 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
|
||||||
if (!options.fontSize) {
|
if (!options.fontSize) {
|
||||||
options.fontSize = '16px';
|
options.fontSize = '16px';
|
||||||
}
|
}
|
||||||
|
const url = mermaidUrl(graphStr, options, api);
|
||||||
|
openURLAndVerifyRendering(url, options, validation);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const urlSnapshotTest = (url, _options, api = false, validation) => {
|
||||||
|
const options = Object.assign(_options);
|
||||||
|
openURLAndVerifyRendering(url, options, validation);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const renderGraph = (graphStr, options, api) => {
|
||||||
|
const url = mermaidUrl(graphStr, options, api);
|
||||||
|
openURLAndVerifyRendering(url, options);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openURLAndVerifyRendering = (url, options, validation = undefined) => {
|
||||||
const useAppli = Cypress.env('useAppli');
|
const useAppli = Cypress.env('useAppli');
|
||||||
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
|
|
||||||
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
||||||
|
|
||||||
if (useAppli) {
|
if (useAppli) {
|
||||||
|
@ -60,82 +74,20 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = mermaidUrl(graphStr, options, api);
|
|
||||||
|
|
||||||
cy.visit(url);
|
cy.visit(url);
|
||||||
|
cy.window().should('have.property', 'rendered', true);
|
||||||
|
cy.get('svg').should('be.visible');
|
||||||
|
|
||||||
if (validation) {
|
if (validation) {
|
||||||
cy.get('svg').should(validation);
|
cy.get('svg').should(validation);
|
||||||
}
|
}
|
||||||
cy.get('svg');
|
|
||||||
// Default name to test title
|
|
||||||
|
|
||||||
if (useAppli) {
|
if (useAppli) {
|
||||||
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 {
|
} else {
|
||||||
cy.matchImageSnapshot(name);
|
cy.matchImageSnapshot(name);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const urlSnapshotTest = (url, _options, api = false, validation) => {
|
|
||||||
cy.log(_options);
|
|
||||||
const options = Object.assign(_options);
|
|
||||||
if (!options.fontFamily) {
|
|
||||||
options.fontFamily = 'courier';
|
|
||||||
}
|
|
||||||
if (!options.sequence) {
|
|
||||||
options.sequence = {};
|
|
||||||
}
|
|
||||||
if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
|
|
||||||
options.sequence.actorFontFamily = 'courier';
|
|
||||||
}
|
|
||||||
if (options.sequence && !options.sequence.noteFontFamily) {
|
|
||||||
options.sequence.noteFontFamily = 'courier';
|
|
||||||
}
|
|
||||||
options.sequence.actorFontFamily = 'courier';
|
|
||||||
options.sequence.noteFontFamily = 'courier';
|
|
||||||
options.sequence.messageFontFamily = 'courier';
|
|
||||||
if (options.sequence && !options.sequence.actorFontFamily) {
|
|
||||||
options.sequence.actorFontFamily = 'courier';
|
|
||||||
}
|
|
||||||
if (!options.fontSize) {
|
|
||||||
options.fontSize = '16px';
|
|
||||||
}
|
|
||||||
const useAppli = Cypress.env('useAppli');
|
|
||||||
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
|
|
||||||
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
|
||||||
|
|
||||||
if (useAppli) {
|
|
||||||
cy.log('Opening eyes 2' + Cypress.spec.name);
|
|
||||||
cy.eyesOpen({
|
|
||||||
appName: 'Mermaid',
|
|
||||||
testName: name,
|
|
||||||
batchName: Cypress.spec.name,
|
|
||||||
batchId: batchId + Cypress.spec.name,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
cy.visit(url);
|
|
||||||
if (validation) {
|
|
||||||
cy.get('svg').should(validation);
|
|
||||||
}
|
|
||||||
cy.get('body');
|
|
||||||
// Default name to test title
|
|
||||||
|
|
||||||
if (useAppli) {
|
|
||||||
cy.log('Check eyes 2' + Cypress.spec.name);
|
|
||||||
cy.eyesCheckWindow('Click!');
|
|
||||||
cy.log('Closing eyes 2' + Cypress.spec.name);
|
|
||||||
cy.eyesClose();
|
|
||||||
} else {
|
|
||||||
cy.matchImageSnapshot(name);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const renderGraph = (graphStr, options, api) => {
|
|
||||||
const url = mermaidUrl(graphStr, options, api);
|
|
||||||
|
|
||||||
cy.visit(url);
|
|
||||||
};
|
|
||||||
|
|
|
@ -1,13 +1,10 @@
|
||||||
|
import { urlSnapshotTest } from '../../helpers/util';
|
||||||
|
|
||||||
describe('mermaid', () => {
|
describe('mermaid', () => {
|
||||||
describe('registerDiagram', () => {
|
describe('registerDiagram', () => {
|
||||||
it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
|
it('should work on @mermaid-js/mermaid-example-diagram', () => {
|
||||||
const url = 'http://localhost:9000/external-diagrams-mindmap.html';
|
const url = 'http://localhost:9000/external-diagrams-example-diagram.html';
|
||||||
cy.visit(url);
|
urlSnapshotTest(url, {}, false, false);
|
||||||
|
|
||||||
cy.get('svg', {
|
|
||||||
// may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
|
|
||||||
timeout: 10000,
|
|
||||||
}).matchImageSnapshot();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -7,4 +7,10 @@ describe('CSS injections', () => {
|
||||||
flowchart: { htmlLabels: false },
|
flowchart: { htmlLabels: false },
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
it('should not allow adding styletags affecting the page', () => {
|
||||||
|
urlSnapshotTest('http://localhost:9000/ghsa3.html', {
|
||||||
|
logLevel: 1,
|
||||||
|
flowchart: { htmlLabels: false },
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,122 @@
|
||||||
|
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||||
|
|
||||||
|
describe('C4 diagram', () => {
|
||||||
|
it('should render a simple C4Context diagram', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
C4Context
|
||||||
|
accTitle: C4 context demo
|
||||||
|
accDescr: Many large C4 diagrams
|
||||||
|
|
||||||
|
title System Context diagram for Internet Banking System
|
||||||
|
|
||||||
|
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||||
|
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||||
|
|
||||||
|
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||||
|
|
||||||
|
Enterprise_Boundary(b1, "BankBoundary") {
|
||||||
|
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
BiRel(customerA, SystemAA, "Uses")
|
||||||
|
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||||||
|
Rel(SystemC, customerA, "Sends e-mails to")
|
||||||
|
|
||||||
|
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||||||
|
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||||||
|
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render a simple C4Container diagram', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
C4Container
|
||||||
|
title Container diagram for Internet Banking System
|
||||||
|
|
||||||
|
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
|
||||||
|
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
|
||||||
|
|
||||||
|
Container_Boundary(c1, "Internet Banking") {
|
||||||
|
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
|
||||||
|
}
|
||||||
|
|
||||||
|
Rel(customer, spa, "Uses", "HTTPS")
|
||||||
|
Rel(email_system, customer, "Sends e-mails to")
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render a simple C4Component diagram', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
C4Component
|
||||||
|
title Component diagram for Internet Banking System - API Application
|
||||||
|
|
||||||
|
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||||
|
|
||||||
|
Container_Boundary(api, "API Application") {
|
||||||
|
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
|
||||||
|
}
|
||||||
|
|
||||||
|
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
|
||||||
|
UpdateRelStyle(spa, sign, $offsetY="-40")
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render a simple C4Dynamic diagram', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
C4Dynamic
|
||||||
|
title Dynamic diagram for Internet Banking System - API Application
|
||||||
|
|
||||||
|
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||||
|
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
|
||||||
|
Container_Boundary(b, "API Application") {
|
||||||
|
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
|
||||||
|
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
|
||||||
|
}
|
||||||
|
Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
|
||||||
|
Rel(c2, c3, "Calls isAuthenticated() on")
|
||||||
|
Rel(c3, c4, "select * from users where username = ?", "JDBC")
|
||||||
|
|
||||||
|
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
|
||||||
|
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
|
||||||
|
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render a simple C4Deployment diagram', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
C4Deployment
|
||||||
|
title Deployment Diagram for Internet Banking System - Live
|
||||||
|
|
||||||
|
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
|
||||||
|
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
||||||
|
}
|
||||||
|
|
||||||
|
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
|
||||||
|
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
|
||||||
|
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
|
||||||
|
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
});
|
|
@ -485,8 +485,7 @@ describe('Class diagram V2', () => {
|
||||||
classDiagram-v2
|
classDiagram-v2
|
||||||
note "I love this diagram!\nDo you love it?"
|
note "I love this diagram!\nDo you love it?"
|
||||||
class Class10 {
|
class Class10 {
|
||||||
<<service>>
|
int id
|
||||||
int id
|
|
||||||
size()
|
size()
|
||||||
}
|
}
|
||||||
note for Class10 "Cool class\nI said it's very cool class!"
|
note for Class10 "Cool class\nI said it's very cool class!"
|
||||||
|
|
|
@ -414,7 +414,6 @@ describe('Class diagram', () => {
|
||||||
classDiagram
|
classDiagram
|
||||||
note "I love this diagram!\nDo you love it?"
|
note "I love this diagram!\nDo you love it?"
|
||||||
class Class10 {
|
class Class10 {
|
||||||
<<service>>
|
|
||||||
int id
|
int id
|
||||||
size()
|
size()
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { imgSnapshotTest } from '../../helpers/util';
|
import { imgSnapshotTest } from '../../helpers/util';
|
||||||
|
|
||||||
describe('State diagram', () => {
|
describe('Current diagram', () => {
|
||||||
it('should render a state with states in it', () => {
|
it('should render a state with states in it', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|
|
@ -182,6 +182,20 @@ describe('Entity Relationship Diagram', () => {
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should render entities with length in attributes type', () => {
|
||||||
|
renderGraph(
|
||||||
|
`
|
||||||
|
erDiagram
|
||||||
|
CLUSTER {
|
||||||
|
varchar(99) name
|
||||||
|
string(255) description
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
|
||||||
it('should render entities and attributes with big and small entity names', () => {
|
it('should render entities and attributes with big and small entity names', () => {
|
||||||
renderGraph(
|
renderGraph(
|
||||||
`
|
`
|
||||||
|
|
|
@ -0,0 +1,687 @@
|
||||||
|
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||||
|
|
||||||
|
describe('Flowchart ELK', () => {
|
||||||
|
it('1-elk: should render a simple flowchart', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TD
|
||||||
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
B --> C{Let me think}
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[fa:fa-car Car]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart TD
|
||||||
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
B --> C{Let me think}
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[fa:fa-car Car]
|
||||||
|
`,
|
||||||
|
{ flowchart: { defaultRenderer: 'elk' } }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('2-elk: should render a simple flowchart with diagramPadding set to 0', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TD
|
||||||
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
B --> C{Let me think}
|
||||||
|
%% this is a comment
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[fa:fa-car Car]
|
||||||
|
`,
|
||||||
|
{ flowchart: { diagramPadding: 0 } }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('3-elk: a link with correct arrowhead to a subgraph', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TD
|
||||||
|
P1
|
||||||
|
P1 -->P1.5
|
||||||
|
subgraph P1.5
|
||||||
|
P2
|
||||||
|
P2.5(( A ))
|
||||||
|
P3
|
||||||
|
end
|
||||||
|
P2 --> P4
|
||||||
|
P3 --> P6
|
||||||
|
P1.5 --> P5
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('4-elk: Length of edges', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TD
|
||||||
|
L1 --- L2
|
||||||
|
L2 --- C
|
||||||
|
M1 ---> C
|
||||||
|
R1 .-> R2
|
||||||
|
R2 <.-> C
|
||||||
|
C -->|Label 1| E1
|
||||||
|
C <-- Label 2 ---> E2
|
||||||
|
C ----> E3
|
||||||
|
C <-...-> E4
|
||||||
|
C ======> E5
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('5-elk: should render escaped without html labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TD
|
||||||
|
a["<strong>Haiya</strong>"]---->b
|
||||||
|
`,
|
||||||
|
{ htmlLabels: false, flowchart: { htmlLabels: false } }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('6-elk: should render non-escaped with html labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TD
|
||||||
|
a["<strong>Haiya</strong>"]===>b
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('7-elk: should render a flowchart when useMaxWidth is true (default)', () => {
|
||||||
|
renderGraph(
|
||||||
|
`flowchart-elk TD
|
||||||
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
B --> C{Let me think}
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[fa:fa-car Car]
|
||||||
|
`,
|
||||||
|
{ flowchart: { useMaxWidth: true } }
|
||||||
|
);
|
||||||
|
cy.get('svg').should((svg) => {
|
||||||
|
expect(svg).to.have.attr('width', '100%');
|
||||||
|
// expect(svg).to.have.attr('height');
|
||||||
|
// use within because the absolute value can be slightly different depending on the environment ±5%
|
||||||
|
// const height = parseFloat(svg.attr('height'));
|
||||||
|
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
|
||||||
|
const style = svg.attr('style');
|
||||||
|
expect(style).to.match(/^max-width: [\d.]+px;$/);
|
||||||
|
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
|
||||||
|
expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
it('8-elk: should render a flowchart when useMaxWidth is false', () => {
|
||||||
|
renderGraph(
|
||||||
|
`flowchart-elk TD
|
||||||
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
B --> C{Let me think}
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[fa:fa-car Car]
|
||||||
|
`,
|
||||||
|
{ flowchart: { useMaxWidth: false } }
|
||||||
|
);
|
||||||
|
cy.get('svg').should((svg) => {
|
||||||
|
// const height = parseFloat(svg.attr('height'));
|
||||||
|
const width = parseFloat(svg.attr('width'));
|
||||||
|
// use within because the absolute value can be slightly different depending on the environment ±5%
|
||||||
|
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
|
||||||
|
expect(width).to.be.within(230 * 0.95, 230 * 1.05);
|
||||||
|
expect(svg).to.not.have.attr('style');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it.skip('V2 elk - 16: Render Stadium shape', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
` flowchart-elk TD
|
||||||
|
A([stadium shape test])
|
||||||
|
A -->|Get money| B([Go shopping])
|
||||||
|
B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
|
||||||
|
C -->|One| D([Laptop])
|
||||||
|
C -->|Two| E([iPhone])
|
||||||
|
C -->|Three| F([Car<br/>wroom wroom])
|
||||||
|
click A "index.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
class C someclass;
|
||||||
|
`,
|
||||||
|
{ flowchart: { htmlLabels: false }, fontFamily: 'courier' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('50-elk: handle nested subgraphs in reverse order', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk LR
|
||||||
|
a -->b
|
||||||
|
subgraph A
|
||||||
|
B
|
||||||
|
end
|
||||||
|
subgraph B
|
||||||
|
b
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('51-elk: handle nested subgraphs in reverse order', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk LR
|
||||||
|
a -->b
|
||||||
|
subgraph A
|
||||||
|
B
|
||||||
|
end
|
||||||
|
subgraph B
|
||||||
|
b
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('52-elk: handle nested subgraphs in several levels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TB
|
||||||
|
b-->B
|
||||||
|
a-->c
|
||||||
|
subgraph O
|
||||||
|
A
|
||||||
|
end
|
||||||
|
subgraph B
|
||||||
|
c
|
||||||
|
end
|
||||||
|
subgraph A
|
||||||
|
a
|
||||||
|
b
|
||||||
|
B
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('53-elk: handle nested subgraphs with edges in and out', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TB
|
||||||
|
internet
|
||||||
|
nat
|
||||||
|
routeur
|
||||||
|
lb1
|
||||||
|
lb2
|
||||||
|
compute1
|
||||||
|
compute2
|
||||||
|
subgraph project
|
||||||
|
routeur
|
||||||
|
nat
|
||||||
|
subgraph subnet1
|
||||||
|
compute1
|
||||||
|
lb1
|
||||||
|
end
|
||||||
|
subgraph subnet2
|
||||||
|
compute2
|
||||||
|
lb2
|
||||||
|
end
|
||||||
|
end
|
||||||
|
internet --> routeur
|
||||||
|
routeur --> subnet1 & subnet2
|
||||||
|
subnet1 & subnet2 --> nat --> internet
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('54-elk: handle nested subgraphs with outgoing links', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TD
|
||||||
|
subgraph main
|
||||||
|
subgraph subcontainer
|
||||||
|
subcontainer-child
|
||||||
|
end
|
||||||
|
subcontainer-child--> subcontainer-sibling
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('55-elk: handle nested subgraphs with outgoing links 2', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TD
|
||||||
|
|
||||||
|
subgraph one[One]
|
||||||
|
subgraph sub_one[Sub One]
|
||||||
|
_sub_one
|
||||||
|
end
|
||||||
|
subgraph sub_two[Sub Two]
|
||||||
|
_sub_two
|
||||||
|
end
|
||||||
|
_one
|
||||||
|
end
|
||||||
|
|
||||||
|
%% here, either the first or the second one
|
||||||
|
sub_one --> sub_two
|
||||||
|
_one --> b
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('56-elk: handle nested subgraphs with outgoing links 3', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TB
|
||||||
|
subgraph container_Beta
|
||||||
|
process_C-->Process_D
|
||||||
|
end
|
||||||
|
subgraph container_Alpha
|
||||||
|
process_A-->process_B
|
||||||
|
process_A-->|messages|process_C
|
||||||
|
end
|
||||||
|
process_B-->|via_AWSBatch|container_Beta
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it.skip('57-elk: handle nested subgraphs with outgoing links 4', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk LR
|
||||||
|
subgraph A
|
||||||
|
a -->b
|
||||||
|
end
|
||||||
|
subgraph B
|
||||||
|
b
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('57-elk: handle nested subgraphs with outgoing links 2', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TB
|
||||||
|
c1-->a2
|
||||||
|
subgraph one
|
||||||
|
a1-->a2
|
||||||
|
end
|
||||||
|
subgraph two
|
||||||
|
b1-->b2
|
||||||
|
end
|
||||||
|
subgraph three
|
||||||
|
c1-->c2
|
||||||
|
end
|
||||||
|
one --> two
|
||||||
|
three --> two
|
||||||
|
two --> c2
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('57.x: handle nested subgraphs with outgoing links 5', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`%% this does not produce the desired result
|
||||||
|
flowchart-elk TB
|
||||||
|
subgraph container_Beta
|
||||||
|
process_C-->Process_D
|
||||||
|
end
|
||||||
|
subgraph container_Alpha
|
||||||
|
process_A-->process_B
|
||||||
|
process_B-->|via_AWSBatch|container_Beta
|
||||||
|
process_A-->|messages|process_C
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('58-elk: handle styling with style expressions', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk LR
|
||||||
|
id1(Start)-->id2(Stop)
|
||||||
|
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
|
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('59-elk: handle styling of subgraphs and links', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk TD
|
||||||
|
A[Christmas] ==> D
|
||||||
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
A[Christmas] ==> C
|
||||||
|
subgraph T ["Test"]
|
||||||
|
A
|
||||||
|
B
|
||||||
|
C
|
||||||
|
end
|
||||||
|
|
||||||
|
classDef Test fill:#F84E68,stroke:#333,color:white;
|
||||||
|
class A,T Test
|
||||||
|
classDef TestSub fill:green;
|
||||||
|
class T TestSub
|
||||||
|
linkStyle 0,1 color:orange, stroke: orange;
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('60-elk: handle styling for all node shapes - v2', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk LR
|
||||||
|
A[red text] -->|default style| B(blue text)
|
||||||
|
C([red text]) -->|default style| D[[blue text]]
|
||||||
|
E[(red text)] -->|default style| F((blue text))
|
||||||
|
G>red text] -->|default style| H{blue text}
|
||||||
|
I{{red text}} -->|default style| J[/blue text/]
|
||||||
|
K[\\ red text\\] -->|default style| L[/blue text\\]
|
||||||
|
M[\\ red text/] -->|default style| N[blue text];
|
||||||
|
O(((red text))) -->|default style| P(((blue text)));
|
||||||
|
linkStyle default color:Sienna;
|
||||||
|
style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
|
||||||
|
style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
|
||||||
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000;
|
||||||
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff;
|
||||||
|
style E stroke:#ff0000,fill:#ffcccc,color:#ff0000;
|
||||||
|
style F stroke:#0000ff,fill:#ccccff,color:#0000ff;
|
||||||
|
style G stroke:#ff0000,fill:#ffcccc,color:#ff0000;
|
||||||
|
style H stroke:#0000ff,fill:#ccccff,color:#0000ff;
|
||||||
|
style I stroke:#ff0000,fill:#ffcccc,color:#ff0000;
|
||||||
|
style J stroke:#0000ff,fill:#ccccff,color:#0000ff;
|
||||||
|
style K stroke:#ff0000,fill:#ffcccc,color:#ff0000;
|
||||||
|
style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
|
||||||
|
style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
|
||||||
|
style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
|
||||||
|
style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
|
||||||
|
style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('61-elk: fontawesome icons in edge labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk TD
|
||||||
|
C -->|fa:fa-car Car| F[fa:fa-car Car]
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('62-elk: should render styled subgraphs', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk TB
|
||||||
|
A
|
||||||
|
B
|
||||||
|
subgraph foo[Foo SubGraph]
|
||||||
|
C
|
||||||
|
D
|
||||||
|
end
|
||||||
|
subgraph bar[Bar SubGraph]
|
||||||
|
E
|
||||||
|
F
|
||||||
|
end
|
||||||
|
G
|
||||||
|
|
||||||
|
A-->B
|
||||||
|
B-->C
|
||||||
|
C-->D
|
||||||
|
B-->D
|
||||||
|
D-->E
|
||||||
|
E-->A
|
||||||
|
E-->F
|
||||||
|
F-->D
|
||||||
|
F-->G
|
||||||
|
B-->G
|
||||||
|
G-->D
|
||||||
|
|
||||||
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||||
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('63-elk: title on subgraphs should be themable', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
|
||||||
|
flowchart-elk LR
|
||||||
|
subgraph A
|
||||||
|
a --> b
|
||||||
|
end
|
||||||
|
subgraph B
|
||||||
|
i -->f
|
||||||
|
end
|
||||||
|
A --> B
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('65-elk: text-color from classes', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk LR
|
||||||
|
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
|
||||||
|
Lorem --> Ipsum --> Dolor
|
||||||
|
class Lorem,Dolor dark
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('66-elk: More nested subgraph cases (TB)', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk TB
|
||||||
|
subgraph two
|
||||||
|
b1
|
||||||
|
end
|
||||||
|
subgraph three
|
||||||
|
c2
|
||||||
|
end
|
||||||
|
|
||||||
|
three --> two
|
||||||
|
two --> c2
|
||||||
|
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('67-elk: More nested subgraph cases (RL)', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk RL
|
||||||
|
subgraph two
|
||||||
|
b1
|
||||||
|
end
|
||||||
|
subgraph three
|
||||||
|
c2
|
||||||
|
end
|
||||||
|
|
||||||
|
three --> two
|
||||||
|
two --> c2
|
||||||
|
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('68-elk: More nested subgraph cases (BT)', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk BT
|
||||||
|
subgraph two
|
||||||
|
b1
|
||||||
|
end
|
||||||
|
subgraph three
|
||||||
|
c2
|
||||||
|
end
|
||||||
|
|
||||||
|
three --> two
|
||||||
|
two --> c2
|
||||||
|
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('69-elk: More nested subgraph cases (LR)', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk LR
|
||||||
|
subgraph two
|
||||||
|
b1
|
||||||
|
end
|
||||||
|
subgraph three
|
||||||
|
c2
|
||||||
|
end
|
||||||
|
|
||||||
|
three --> two
|
||||||
|
two --> c2
|
||||||
|
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('70-elk: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk TB
|
||||||
|
subgraph S1
|
||||||
|
sub1 -->sub2
|
||||||
|
end
|
||||||
|
subgraph S2
|
||||||
|
sub4
|
||||||
|
end
|
||||||
|
S1 --> S2
|
||||||
|
sub1 --> sub4
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('71-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk RL
|
||||||
|
subgraph S1
|
||||||
|
sub1 -->sub2
|
||||||
|
end
|
||||||
|
subgraph S2
|
||||||
|
sub4
|
||||||
|
end
|
||||||
|
S1 --> S2
|
||||||
|
sub1 --> sub4
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('72-elk: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk BT
|
||||||
|
subgraph S1
|
||||||
|
sub1 -->sub2
|
||||||
|
end
|
||||||
|
subgraph S2
|
||||||
|
sub4
|
||||||
|
end
|
||||||
|
S1 --> S2
|
||||||
|
sub1 --> sub4
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('74-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk RL
|
||||||
|
subgraph S1
|
||||||
|
sub1 -->sub2
|
||||||
|
end
|
||||||
|
subgraph S2
|
||||||
|
sub4
|
||||||
|
end
|
||||||
|
S1 --> S2
|
||||||
|
sub1 --> sub4
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('74-elk: Handle labels for multiple edges from and to the same couple of nodes', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk RL
|
||||||
|
subgraph one
|
||||||
|
a1 -- l1 --> a2
|
||||||
|
a1 -- l2 --> a2
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('76-elk: handle unicode encoded character with HTML labels true', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart-elk TB
|
||||||
|
a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
|
||||||
|
--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('2050-elk: handling of different rendering direction in subgraphs', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk LR
|
||||||
|
|
||||||
|
subgraph TOP
|
||||||
|
direction TB
|
||||||
|
subgraph B1
|
||||||
|
direction RL
|
||||||
|
i1 -->f1
|
||||||
|
end
|
||||||
|
subgraph B2
|
||||||
|
direction BT
|
||||||
|
i2 -->f2
|
||||||
|
end
|
||||||
|
end
|
||||||
|
A --> TOP --> B
|
||||||
|
B1 --> B2
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('2388-elk: handling default in the node name', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk LR
|
||||||
|
default-index.js --> dot.template.js
|
||||||
|
index.js --> module-utl.js
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('2824-elk: Clipping of edges', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart-elk TD
|
||||||
|
A --> B
|
||||||
|
A --> C
|
||||||
|
B --> C
|
||||||
|
`,
|
||||||
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('1433-elk: should render a titled flowchart with titleTopMargin set to 0', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`---
|
||||||
|
title: Simple flowchart
|
||||||
|
---
|
||||||
|
flowchart-elk TD
|
||||||
|
A --> B
|
||||||
|
`,
|
||||||
|
{ titleTopMargin: 0 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
|
@ -310,38 +310,6 @@ describe('Gantt diagram', () => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render accessibility tags', function () {
|
|
||||||
const expectedTitle = 'Gantt Diagram';
|
|
||||||
const expectedAccDescription = 'Tasks for Q4';
|
|
||||||
renderGraph(
|
|
||||||
`
|
|
||||||
gantt
|
|
||||||
accTitle: ${expectedTitle}
|
|
||||||
accDescr: ${expectedAccDescription}
|
|
||||||
dateFormat YYYY-MM-DD
|
|
||||||
section Section
|
|
||||||
A task :a1, 2014-01-01, 30d
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
cy.get('svg').should((svg) => {
|
|
||||||
const el = svg.get(0);
|
|
||||||
const children = [...el.children];
|
|
||||||
|
|
||||||
const titleEl = children.find(function (node) {
|
|
||||||
return node.tagName === 'title';
|
|
||||||
});
|
|
||||||
const descriptionEl = children.find(function (node) {
|
|
||||||
return node.tagName === 'desc';
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(titleEl).to.exist;
|
|
||||||
expect(titleEl.textContent).to.equal(expectedTitle);
|
|
||||||
expect(descriptionEl).to.exist;
|
|
||||||
expect(descriptionEl.textContent).to.equal(expectedAccDescription);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render a gantt diagram with tick is 15 minutes', () => {
|
it('should render a gantt diagram with tick is 15 minutes', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
import { imgSnapshotTest } from '../../helpers/util.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check whether the SVG Element has a Mindmap root
|
* Check whether the SVG Element has a Mindmap root
|
||||||
|
@ -158,7 +158,6 @@ mindmap
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('rounded rect shape', () => {
|
it('rounded rect shape', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -172,7 +171,6 @@ mindmap
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('circle shape', () => {
|
it('circle shape', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -186,7 +184,6 @@ mindmap
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('default shape', () => {
|
it('default shape', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -198,7 +195,6 @@ mindmap
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('adding children', () => {
|
it('adding children', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -212,7 +208,6 @@ mindmap
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
it('adding grand children', () => {
|
it('adding grand children', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
|
@ -227,7 +222,6 @@ mindmap
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
|
||||||
});
|
});
|
||||||
/* The end */
|
/* The end */
|
||||||
});
|
});
|
||||||
|
|
|
@ -46,69 +46,4 @@ describe('Requirement diagram', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render accessibility tags', function () {
|
|
||||||
const expectedTitle = 'Gantt Diagram';
|
|
||||||
const expectedAccDescription = 'Tasks for Q4';
|
|
||||||
renderGraph(
|
|
||||||
`
|
|
||||||
requirementDiagram
|
|
||||||
accTitle: ${expectedTitle}
|
|
||||||
accDescr: ${expectedAccDescription}
|
|
||||||
|
|
||||||
requirement test_req {
|
|
||||||
id: 1
|
|
||||||
text: the test text.
|
|
||||||
risk: high
|
|
||||||
verifymethod: test
|
|
||||||
}
|
|
||||||
|
|
||||||
functionalRequirement test_req2 {
|
|
||||||
id: 1.1
|
|
||||||
text: the second test text.
|
|
||||||
risk: low
|
|
||||||
verifymethod: inspection
|
|
||||||
}
|
|
||||||
|
|
||||||
performanceRequirement test_req3 {
|
|
||||||
id: 1.2
|
|
||||||
text: the third test text.
|
|
||||||
risk: medium
|
|
||||||
verifymethod: demonstration
|
|
||||||
}
|
|
||||||
|
|
||||||
element test_entity {
|
|
||||||
type: simulation
|
|
||||||
}
|
|
||||||
|
|
||||||
element test_entity2 {
|
|
||||||
type: word doc
|
|
||||||
docRef: reqs/test_entity
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
test_entity - satisfies -> test_req2
|
|
||||||
test_req - traces -> test_req2
|
|
||||||
test_req - contains -> test_req3
|
|
||||||
test_req <- copies - test_entity2
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
cy.get('svg').should((svg) => {
|
|
||||||
const el = svg.get(0);
|
|
||||||
const children = [...el.children];
|
|
||||||
|
|
||||||
const titleEl = children.find(function (node) {
|
|
||||||
return node.tagName === 'title';
|
|
||||||
});
|
|
||||||
const descriptionEl = children.find(function (node) {
|
|
||||||
return node.tagName === 'desc';
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(titleEl).to.exist;
|
|
||||||
expect(titleEl.textContent).to.equal(expectedTitle);
|
|
||||||
expect(descriptionEl).to.exist;
|
|
||||||
expect(descriptionEl.textContent).to.equal(expectedAccDescription);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,6 +3,42 @@
|
||||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||||
|
|
||||||
context('Sequence diagram', () => {
|
context('Sequence diagram', () => {
|
||||||
|
it('should render a sequence diagram with boxes', () => {
|
||||||
|
renderGraph(
|
||||||
|
`
|
||||||
|
sequenceDiagram
|
||||||
|
box LightGrey Alice and Bob
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
end
|
||||||
|
participant John as John<br/>Second Line
|
||||||
|
Alice ->> Bob: Hello Bob, how are you?
|
||||||
|
Bob-->>John: How about you John?
|
||||||
|
Bob--x Alice: I am good thanks!
|
||||||
|
Bob-x John: I am good thanks!
|
||||||
|
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
|
||||||
|
Bob-->Alice: Checking with John...
|
||||||
|
alt either this
|
||||||
|
Alice->>John: Yes
|
||||||
|
else or this
|
||||||
|
Alice->>John: No
|
||||||
|
else or this will happen
|
||||||
|
Alice->John: Maybe
|
||||||
|
end
|
||||||
|
par this happens in parallel
|
||||||
|
Alice -->> Bob: Parallel message 1
|
||||||
|
and
|
||||||
|
Alice -->> John: Parallel message 2
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ sequence: { useMaxWidth: false } }
|
||||||
|
);
|
||||||
|
cy.get('svg').should((svg) => {
|
||||||
|
const width = parseFloat(svg.attr('width'));
|
||||||
|
expect(width).to.be.within(830 * 0.95, 830 * 1.05);
|
||||||
|
expect(svg).to.not.have.attr('style');
|
||||||
|
});
|
||||||
|
});
|
||||||
it('should render a simple sequence diagram', () => {
|
it('should render a simple sequence diagram', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|
|
@ -328,7 +328,7 @@ describe('State diagram', () => {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('v2 it should be possibel to use a choice', () => {
|
it('v2 it should be possible to use a choice', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
|
|
|
@ -0,0 +1,164 @@
|
||||||
|
import { imgSnapshotTest } from '../../helpers/util.js';
|
||||||
|
|
||||||
|
describe('Timeline diagram', () => {
|
||||||
|
it('1: should render a simple timeline with no specific sections', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('2: should render a timeline diagram with sections', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`timeline
|
||||||
|
title Timeline of Industrial Revolution
|
||||||
|
section 17th-20th century
|
||||||
|
Industry 1.0 : Machinery, Water power, Steam <br>power
|
||||||
|
Industry 2.0 : Electricity, Internal combustion engine, Mass production
|
||||||
|
Industry 3.0 : Electronics, Computers, Automation
|
||||||
|
section 21st century
|
||||||
|
Industry 4.0 : Internet, Robotics, Internet of Things
|
||||||
|
Industry 5.0 : Artificial intelligence, Big data,3D printing
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('3: should render a complex timeline with sections, and long events text with <br>', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`timeline
|
||||||
|
title England's History Timeline
|
||||||
|
section Stone Age
|
||||||
|
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||||
|
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
|
||||||
|
section Broze Age
|
||||||
|
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
|
||||||
|
: New styles of pottery and ways of burying the dead appear.
|
||||||
|
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
|
||||||
|
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('4: should render a simple timeline with directives and disableMultiColor:true ', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('5: should render a simple timeline with directive overriden colors', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||||
|
'cScale0': '#ff0000',
|
||||||
|
'cScale1': '#00ff00',
|
||||||
|
'cScale2': '#0000ff'
|
||||||
|
} } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008 : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('6: should render a simple timeline in base theme', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008 : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('7: should render a simple timeline in default theme', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008 : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('8: should render a simple timeline in dark theme', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008 : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('9: should render a simple timeline in neutral theme', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008 : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('10: should render a simple timeline in forest theme', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008 : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,231 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||||
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
/* background: rgb(221, 208, 208); */
|
||||||
|
/* background:#333; */
|
||||||
|
font-family: 'Arial';
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
.mermaid2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mermaid svg {
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
background-color: #eee;
|
||||||
|
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||||
|
radial-gradient(#fff 1%, transparent 11%);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position: 0 0, 10px 10px;
|
||||||
|
background-repeat: repeat;
|
||||||
|
}
|
||||||
|
.malware {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 150px;
|
||||||
|
background: red;
|
||||||
|
color: black;
|
||||||
|
display: flex;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>Security check</div>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
timeline
|
||||||
|
title My day
|
||||||
|
section section with no tasks
|
||||||
|
section Go to work at the dog office
|
||||||
|
1930 : first step : second step is a long step
|
||||||
|
: third step
|
||||||
|
1940 : fourth step : fifth step
|
||||||
|
section Go home
|
||||||
|
1950 : India got independent and already won war against Pakistan
|
||||||
|
1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
|
||||||
|
1970 : Green Revolution comes to india
|
||||||
|
section Another section with no tasks
|
||||||
|
I am a big big big tasks
|
||||||
|
I am not so big tasks
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
|
timeline
|
||||||
|
title MermaidChart 2023 Timeline
|
||||||
|
section 2023 Q1 <br> Release Personal Tier
|
||||||
|
Buttet 1 : sub-point 1a : sub-point 1b
|
||||||
|
: sub-point 1c
|
||||||
|
Bullet 2 : sub-point 2a : sub-point 2b
|
||||||
|
section 2023 Q2 <br> Release XYZ Tier
|
||||||
|
Buttet 3 : sub-point <br> 3a : sub-point 3b
|
||||||
|
: sub-point 3c
|
||||||
|
Bullet 4 : sub-point 4a : sub-point 4b
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
|
timeline
|
||||||
|
title England's History Timeline
|
||||||
|
section Stone Age
|
||||||
|
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||||
|
6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
|
||||||
|
section Broze Age
|
||||||
|
2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
|
||||||
|
: New styles of pottery and ways of burying the dead appear.
|
||||||
|
2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
|
||||||
|
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
%%{'init': { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google : Pixar
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008s : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
|
||||||
|
'cScale0': '#ff0000',
|
||||||
|
'cScale1': '#00ff00',
|
||||||
|
'cScale2': '#ff0000'
|
||||||
|
} } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google : Pixar
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008s : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||||
|
'cScale0': '#ff0000',
|
||||||
|
'cScale1': '#00ff00',
|
||||||
|
'cScale2': '#0000ff'
|
||||||
|
} } }%%
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008 : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
timeline
|
||||||
|
title History of Social Media Platform
|
||||||
|
2002 : LinkedIn
|
||||||
|
2004 : Facebook : Google
|
||||||
|
2005 : Youtube
|
||||||
|
2006 : Twitter
|
||||||
|
2007 : Tumblr
|
||||||
|
2008s : Instagram
|
||||||
|
2010 : Pinterest
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
mindmap
|
||||||
|
root
|
||||||
|
child1((Circle))
|
||||||
|
grandchild 1
|
||||||
|
grandchild 2
|
||||||
|
child2(Round rectangle)
|
||||||
|
grandchild 3
|
||||||
|
grandchild 4
|
||||||
|
child3[Square]
|
||||||
|
grandchild 5
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
gc6((grand<br/>child 6))
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
gc7((grand<br/>grand<br/>child 8))
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart-elk TB
|
||||||
|
a --> b
|
||||||
|
a --> c
|
||||||
|
b --> d
|
||||||
|
c --> d
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<!-- <div id="cy"></div> -->
|
||||||
|
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
|
||||||
|
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
|
||||||
|
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
||||||
|
<script type="module">
|
||||||
|
//import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||||
|
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||||
|
// import timeline from '../../packages/mermaid-timeline/src/detector';
|
||||||
|
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||||
|
// await mermaid.registerExternalDiagrams([]);
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
// console.error('Mermaid error: ', err);
|
||||||
|
};
|
||||||
|
mermaid.initialize({
|
||||||
|
theme: 'base',
|
||||||
|
startOnLoad: true,
|
||||||
|
logLevel: 0,
|
||||||
|
flowchart: {
|
||||||
|
useMaxWidth: false,
|
||||||
|
htmlLabels: true,
|
||||||
|
},
|
||||||
|
gantt: {
|
||||||
|
useMaxWidth: false,
|
||||||
|
},
|
||||||
|
timeline: {
|
||||||
|
disableMulticolor: false,
|
||||||
|
htmlLabels: false,
|
||||||
|
},
|
||||||
|
useMaxWidth: true,
|
||||||
|
lazyLoadedDiagrams: [
|
||||||
|
// './mermaid-mindmap-detector.esm.mjs',
|
||||||
|
// './mermaid-example-diagram-detector.esm.mjs',
|
||||||
|
//'./mermaid-timeline-detector.esm.mjs',
|
||||||
|
],
|
||||||
|
});
|
||||||
|
function callback() {
|
||||||
|
alert('It worked');
|
||||||
|
}
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
console.error('In parse error:');
|
||||||
|
console.error(err);
|
||||||
|
};
|
||||||
|
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -49,13 +49,9 @@ mermaid.initialize({
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
mermaid.render(
|
void (async () => {
|
||||||
'the-id-of-the-svg',
|
const { svg } = await mermaid.render('the-id-of-the-svg', code);
|
||||||
code,
|
console.log(svg);
|
||||||
(svg) => {
|
const elem = document.querySelector('#graph-to-be');
|
||||||
console.log(svg);
|
elem.innerHTML = svg;
|
||||||
const elem = document.querySelector('#graph-to-be');
|
})();
|
||||||
elem.innerHTML = svg;
|
|
||||||
}
|
|
||||||
// ,document.querySelector('#tmp')
|
|
||||||
);
|
|
||||||
|
|
|
@ -46,13 +46,9 @@
|
||||||
<pre class="mermaid" style="width: 100%; height: 20%">
|
<pre class="mermaid" style="width: 100%; height: 20%">
|
||||||
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
||||||
classDiagram-v2
|
classDiagram-v2
|
||||||
class BankAccount{
|
classA <|-- classB : implements
|
||||||
+String owner
|
classC *-- classD : composition
|
||||||
+BigDecimal balance
|
classE o-- classF : aggregation
|
||||||
+deposit(amount) bool
|
|
||||||
+withdrawl(amount) int
|
|
||||||
}
|
|
||||||
cssClass "BankAccount" customCss
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre class="mermaid2" style="width: 100%; height: 20%">
|
<pre class="mermaid2" style="width: 100%; height: 20%">
|
||||||
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
||||||
|
@ -117,8 +113,8 @@
|
||||||
callback Shape "callbackFunction" "This is a tooltip for a callback"
|
callback Shape "callbackFunction" "This is a tooltip for a callback"
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -125,7 +125,6 @@
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
function clickByFlow(elemName) {
|
function clickByFlow(elemName) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
|
@ -162,6 +161,9 @@
|
||||||
|
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -59,8 +59,8 @@
|
||||||
Add another diagram to demo page : 48h
|
Add another diagram to demo page : 48h
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
function clickByFlow(elemName) {
|
function clickByFlow(elemName) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'created-by-click';
|
div.className = 'created-by-click';
|
||||||
|
|
|
@ -125,8 +125,8 @@
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
function clickByFlow(elemName) {
|
function clickByFlow(elemName) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'created-by-click';
|
div.className = 'created-by-click';
|
||||||
|
|
|
@ -61,8 +61,8 @@
|
||||||
Add another diagram to demo page : 48h
|
Add another diagram to demo page : 48h
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
function clickByFlow(elemName) {
|
function clickByFlow(elemName) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'created-by-click';
|
div.className = 'created-by-click';
|
||||||
|
|
|
@ -28,8 +28,8 @@
|
||||||
end
|
end
|
||||||
A --> B
|
A --> B
|
||||||
</pre>
|
</pre>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
function showFullFirstSquad(elemName) {
|
function showFullFirstSquad(elemName) {
|
||||||
console.log('show ' + elemName);
|
console.log('show ' + elemName);
|
||||||
}
|
}
|
||||||
|
|
|
@ -107,8 +107,8 @@ Note over Alice,Bob: Looks
|
||||||
Note over Bob,Alice: Looks back
|
Note over Bob,Alice: Looks back
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,32 +1,12 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<!-- <meta charset="iso-8859-15"/> -->
|
|
||||||
<script src="./viewer.js" type="module"></script>
|
<script src="./viewer.js" type="module"></script>
|
||||||
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
|
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<style>
|
<style>
|
||||||
body {
|
|
||||||
/* font-family: 'Mansalva', cursive;*/
|
|
||||||
/* font-family: 'Mansalva', cursive; */
|
|
||||||
/* font-family: 'arial'; */
|
|
||||||
/* font-family: "trebuchet ms", verdana, arial; */
|
|
||||||
}
|
|
||||||
/* div {
|
|
||||||
font-family: 'arial';
|
|
||||||
} */
|
|
||||||
/* .mermaid-main-font {
|
|
||||||
font-family: "trebuchet ms", verdana, arial;
|
|
||||||
font-family: var(--mermaid-font-family);
|
|
||||||
} */
|
|
||||||
/* :root {
|
|
||||||
--mermaid-font-family: '"trebuchet ms", verdana, arial';
|
|
||||||
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
|
|
||||||
--mermaid-font-family: '"Lucida Console", Monaco, monospace';
|
|
||||||
} */
|
|
||||||
svg {
|
svg {
|
||||||
border: 2px solid darkred;
|
border: 2px solid darkred;
|
||||||
}
|
}
|
||||||
|
@ -36,21 +16,5 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body></body>
|
||||||
<!-- <script src="./mermaid.js"></script> -->
|
|
||||||
<script>
|
|
||||||
// Notice startOnLoad=false
|
|
||||||
// This prevents default handling in mermaid from render before the e2e logic is applied
|
|
||||||
// mermaid.initialize({
|
|
||||||
// startOnLoad: false,
|
|
||||||
// useMaxWidth: true,
|
|
||||||
// // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
|
|
||||||
// // fontFamily: '\"trebuchet ms\", verdana, arial;'
|
|
||||||
// // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
|
|
||||||
// // fontFamily: '"Mansalva", cursive',
|
|
||||||
// // fontFamily: '"Noto Sans SC", sans-serif'
|
|
||||||
// fontFamily: '"Noto Sans SC", sans-serif'
|
|
||||||
// });
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -2,34 +2,8 @@
|
||||||
<body>
|
<body>
|
||||||
<h1>Should correctly load a third-party diagram using registerDiagram</h1>
|
<h1>Should correctly load a third-party diagram using registerDiagram</h1>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
mindmap
|
example-diagram
|
||||||
root
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
E
|
|
||||||
A2
|
|
||||||
B2
|
|
||||||
C2
|
|
||||||
D2
|
|
||||||
E2
|
|
||||||
child1((Circle))
|
|
||||||
grandchild 1
|
|
||||||
grandchild 2
|
|
||||||
child2(Round rectangle)
|
|
||||||
grandchild 3
|
|
||||||
grandchild 4
|
|
||||||
child3[Square]
|
|
||||||
grandchild 5
|
|
||||||
::icon(mdi mdi-fire)
|
|
||||||
gc6((grand<br/>child 6))
|
|
||||||
::icon(mdi mdi-fire)
|
|
||||||
gc7((grand<br/>grand<br/>child 8))
|
|
||||||
</pre>
|
</pre>
|
||||||
<!-- <pre id="diagram" class="mermaid2">
|
|
||||||
example-diagram
|
|
||||||
</pre> -->
|
|
||||||
|
|
||||||
<!-- <div id="cy"></div> -->
|
<!-- <div id="cy"></div> -->
|
||||||
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
|
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
|
||||||
|
@ -37,13 +11,16 @@ mindmap
|
||||||
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
||||||
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
|
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
|
||||||
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||||
|
|
||||||
await mermaid.registerExternalDiagrams([mindmap]);
|
await mermaid.registerExternalDiagrams([exampleDiagram]);
|
||||||
await mermaid.initialize({ logLevel: 0 });
|
await mermaid.initialize({ logLevel: 0 });
|
||||||
await mermaid.initThrowsErrorsAsync();
|
await mermaid.run();
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -29,8 +29,8 @@
|
||||||
click a_a "http://www.aftonbladet.se" "apa"
|
click a_a "http://www.aftonbladet.se" "apa"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
theme: 'forest',
|
theme: 'forest',
|
||||||
// themeCSS: '.node rect { fill: red; }',
|
// themeCSS: '.node rect { fill: red; }',
|
||||||
|
|
|
@ -4,23 +4,26 @@
|
||||||
</script>
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<div id="target">
|
<div id="target">
|
||||||
<h1>This element does not belong to the SVG but we can style it</h1>
|
<h1>Background should be yellow!!!</h1>
|
||||||
</div>
|
</div>
|
||||||
<svg id="diagram"></svg>
|
<svg id="diagram"></svg>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
||||||
|
|
||||||
const graph = `
|
const graph = `
|
||||||
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
|
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
|
||||||
graph TD
|
graph TD
|
||||||
A[Goose]
|
A[Goose]
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const diagram = document.getElementById('diagram');
|
const diagram = document.getElementById('diagram');
|
||||||
const svg = mermaid.render('diagram-svg', graph);
|
const { svg } = await mermaid.render('diagram-svg', graph);
|
||||||
diagram.innerHTML = svg;
|
diagram.innerHTML = svg;
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -8,8 +8,8 @@
|
||||||
</div>
|
</div>
|
||||||
<svg id="diagram"></svg>
|
<svg id="diagram"></svg>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
||||||
|
|
||||||
const graph = `
|
const graph = `
|
||||||
|
@ -19,8 +19,11 @@
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const diagram = document.getElementById('diagram');
|
const diagram = document.getElementById('diagram');
|
||||||
const svg = mermaid.render('diagram-svg', graph);
|
const { svg } = await mermaid.render('diagram-svg', graph);
|
||||||
diagram.innerHTML = svg;
|
diagram.innerHTML = svg;
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,101 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||||
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
/* background: rgb(221, 208, 208); */
|
||||||
|
/* background:#333; */
|
||||||
|
font-family: 'Arial';
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
.mermaid2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mermaid svg {
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
}
|
||||||
|
.malware {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 150px;
|
||||||
|
background: red;
|
||||||
|
color: black;
|
||||||
|
display: flex;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>PAGE SHOULD NOT BE RED</h1>
|
||||||
|
<div class="flex">
|
||||||
|
<div id="diagram" class="mermaid"></div>
|
||||||
|
<div id="res" class=""></div>
|
||||||
|
</div>
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
// console.error('Mermaid error: ', err);
|
||||||
|
};
|
||||||
|
mermaid.initialize({
|
||||||
|
theme: 'forest',
|
||||||
|
arrowMarkerAbsolute: true,
|
||||||
|
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||||
|
logLevel: 0,
|
||||||
|
state: {
|
||||||
|
defaultRenderer: 'dagre-wrapper',
|
||||||
|
},
|
||||||
|
flowchart: {
|
||||||
|
// defaultRenderer: 'dagre-wrapper',
|
||||||
|
nodeSpacing: 10,
|
||||||
|
curve: 'cardinal',
|
||||||
|
htmlLabels: true,
|
||||||
|
},
|
||||||
|
htmlLabels: true,
|
||||||
|
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||||
|
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||||
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||||
|
// fontFamily: '"times", sans-serif',
|
||||||
|
// fontFamily: 'courier',
|
||||||
|
fontSize: 18,
|
||||||
|
curve: 'basis',
|
||||||
|
// securityLevel: 'strict',
|
||||||
|
startOnLoad: false,
|
||||||
|
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
||||||
|
// themeVariables: {relationLabelColor: 'red'}
|
||||||
|
});
|
||||||
|
function callback() {
|
||||||
|
alert('It worked');
|
||||||
|
}
|
||||||
|
|
||||||
|
let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
|
||||||
|
diagram += 'flowchart\n';
|
||||||
|
diagram += 'A["<p><sty';
|
||||||
|
diagram += 'le> * { background : red}</style>test</p>"]';
|
||||||
|
|
||||||
|
console.log(diagram);
|
||||||
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
|
document.querySelector('#res').innerHTML = svg;
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -43,8 +43,8 @@
|
||||||
cssClass "BankAccount" customCss
|
cssClass "BankAccount" customCss
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -130,8 +130,8 @@
|
||||||
commit
|
commit
|
||||||
merge main
|
merge main
|
||||||
</pre>
|
</pre>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -98,8 +98,8 @@
|
||||||
commit
|
commit
|
||||||
merge main
|
merge main
|
||||||
</pre>
|
</pre>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -7,8 +7,8 @@
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
info
|
info
|
||||||
</pre>
|
</pre>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
theme: 'forest',
|
theme: 'forest',
|
||||||
// themeCSS: '.node rect { fill: red; }',
|
// themeCSS: '.node rect { fill: red; }',
|
||||||
|
|
|
@ -87,8 +87,8 @@
|
||||||
Add another diagram to demo page : 48h
|
Add another diagram to demo page : 48h
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
function clickByFlow(elemName) {
|
function clickByFlow(elemName) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'created-by-click';
|
div.className = 'created-by-click';
|
||||||
|
|
|
@ -54,38 +54,205 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
graph LR
|
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||||
subgraph external
|
graph BT
|
||||||
inside
|
a{The cat in the hat} -- 1o --> b
|
||||||
end
|
a -- 2o --> c
|
||||||
outside --> external
|
a -- 3o --> d
|
||||||
|
g --2i--> a
|
||||||
|
d --1i--> a
|
||||||
|
h --3i -->a
|
||||||
|
b --> d(The dog in the hog)
|
||||||
|
c --> d
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart-elk TB
|
||||||
|
a --> b
|
||||||
|
a --> c
|
||||||
|
b --> d
|
||||||
|
c --> d
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||||
|
flowchart TB
|
||||||
|
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||||
|
subgraph ibm[IBM Espresso CPU]
|
||||||
|
core0[IBM PowerPC Broadway Core 0]
|
||||||
|
core1[IBM PowerPC Broadway Core 1]
|
||||||
|
core2[IBM PowerPC Broadway Core 2]
|
||||||
|
|
||||||
|
rom[16 KB ROM]
|
||||||
|
|
||||||
|
core0 --- core2
|
||||||
|
|
||||||
|
rom --> core2
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph amd[AMD Latte GPU]
|
||||||
|
mem[Memory & I/O Bridge]
|
||||||
|
dram[DRAM Controller]
|
||||||
|
edram[32 MB EDRAM MEM1]
|
||||||
|
rom[512 B SEEPROM]
|
||||||
|
|
||||||
|
sata[SATA IF]
|
||||||
|
exi[EXI]
|
||||||
|
|
||||||
|
subgraph gx[GX]
|
||||||
|
sram[3 MB 1T-SRAM]
|
||||||
|
end
|
||||||
|
|
||||||
|
radeon[AMD Radeon R7xx GX2]
|
||||||
|
|
||||||
|
mem --- gx
|
||||||
|
mem --- radeon
|
||||||
|
|
||||||
|
rom --- mem
|
||||||
|
|
||||||
|
mem --- sata
|
||||||
|
mem --- exi
|
||||||
|
|
||||||
|
dram --- sata
|
||||||
|
dram --- exi
|
||||||
|
end
|
||||||
|
|
||||||
|
ddr3[2 GB DDR3 RAM MEM2]
|
||||||
|
|
||||||
|
mem --- ddr3
|
||||||
|
dram --- ddr3
|
||||||
|
edram --- ddr3
|
||||||
|
|
||||||
|
core1 --- mem
|
||||||
|
|
||||||
|
exi --- rtc
|
||||||
|
rtc{{rtc}}
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart TB
|
||||||
|
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||||
|
subgraph ibm[IBM Espresso CPU]
|
||||||
|
core0[IBM PowerPC Broadway Core 0]
|
||||||
|
core1[IBM PowerPC Broadway Core 1]
|
||||||
|
core2[IBM PowerPC Broadway Core 2]
|
||||||
|
|
||||||
|
rom[16 KB ROM]
|
||||||
|
|
||||||
|
core0 --- core2
|
||||||
|
|
||||||
|
rom --> core2
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph amd[AMD Latte GPU]
|
||||||
|
mem[Memory & I/O Bridge]
|
||||||
|
dram[DRAM Controller]
|
||||||
|
edram[32 MB EDRAM MEM1]
|
||||||
|
rom[512 B SEEPROM]
|
||||||
|
|
||||||
|
sata[SATA IF]
|
||||||
|
exi[EXI]
|
||||||
|
|
||||||
|
subgraph gx[GX]
|
||||||
|
sram[3 MB 1T-SRAM]
|
||||||
|
end
|
||||||
|
|
||||||
|
radeon[AMD Radeon R7xx GX2]
|
||||||
|
|
||||||
|
mem --- gx
|
||||||
|
mem --- radeon
|
||||||
|
|
||||||
|
rom --- mem
|
||||||
|
|
||||||
|
mem --- sata
|
||||||
|
mem --- exi
|
||||||
|
|
||||||
|
dram --- sata
|
||||||
|
dram --- exi
|
||||||
|
end
|
||||||
|
|
||||||
|
ddr3[2 GB DDR3 RAM MEM2]
|
||||||
|
|
||||||
|
mem --- ddr3
|
||||||
|
dram --- ddr3
|
||||||
|
edram --- ddr3
|
||||||
|
|
||||||
|
core1 --- mem
|
||||||
|
|
||||||
|
exi --- rtc
|
||||||
|
rtc{{rtc}}
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart LR
|
||||||
|
B1 --be be--x B2
|
||||||
|
B1 --bo bo--o B3
|
||||||
|
subgraph Ugge
|
||||||
|
B2
|
||||||
|
B3
|
||||||
|
subgraph inner
|
||||||
|
B4
|
||||||
|
B5
|
||||||
|
end
|
||||||
|
subgraph inner2
|
||||||
|
subgraph deeper
|
||||||
|
C4
|
||||||
|
C5
|
||||||
|
end
|
||||||
|
C6
|
||||||
|
end
|
||||||
|
|
||||||
|
B4 --> C4
|
||||||
|
|
||||||
|
B3 -- X --> B4
|
||||||
|
B2 --> inner
|
||||||
|
|
||||||
|
C4 --> C5
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph outer
|
||||||
|
B6
|
||||||
|
end
|
||||||
|
B6 --> B5
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
sequenceDiagram
|
||||||
|
Customer->>+Stripe: Makes a payment request
|
||||||
|
Stripe->>+Bank: Forwards the payment request to the bank
|
||||||
|
Bank->>+Customer: Asks for authorization
|
||||||
|
Customer->>+Bank: Provides authorization
|
||||||
|
Bank->>+Stripe: Sends a response with payment details
|
||||||
|
Stripe->>+Merchant: Sends a notification of payment receipt
|
||||||
|
Merchant->>+Stripe: Confirms the payment
|
||||||
|
Stripe->>+Customer: Sends a confirmation of payment
|
||||||
|
Customer->>+Merchant: Receives goods or services
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
mindmap
|
mindmap
|
||||||
root
|
root((mindmap))
|
||||||
child1((Circle))
|
Origins
|
||||||
grandchild 1
|
Long history
|
||||||
grandchild 2
|
::icon(fa fa-book)
|
||||||
child2(Round rectangle)
|
Popularisation
|
||||||
grandchild 3
|
British popular psychology author Tony Buzan
|
||||||
grandchild 4
|
Research
|
||||||
child3[Square]
|
On effectiveness<br/>and features
|
||||||
grandchild 5
|
On Automatic creation
|
||||||
::icon(mdi mdi-fire)
|
Uses
|
||||||
gc6((grand<br/>child 6))
|
Creative techniques
|
||||||
::icon(mdi mdi-fire)
|
Strategic planning
|
||||||
gc7((grand<br/>grand<br/>child 8))
|
Argument mapping
|
||||||
</pre>
|
Tools
|
||||||
<pre id="diagram" class="mermaid">
|
Pen and paper
|
||||||
gantt
|
Mermaid
|
||||||
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
</pre>
|
||||||
dateFormat YYYY-MM-DD
|
<br />
|
||||||
axisFormat %d
|
<pre id="diagram" class="mermaid2">
|
||||||
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
example-diagram
|
||||||
section Section1
|
|
||||||
Today: 1, -1h
|
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<!-- <div id="cy"></div> -->
|
<!-- <div id="cy"></div> -->
|
||||||
|
@ -95,18 +262,19 @@ mindmap
|
||||||
<!-- <script src="./mermaid.js"></script> -->
|
<!-- <script src="./mermaid.js"></script> -->
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
// import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||||
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||||
await mermaid.registerExternalDiagrams([mindmap]);
|
await mermaid.registerExternalDiagrams([example]);
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
theme: 'base',
|
theme: 'forest',
|
||||||
startOnLoad: true,
|
startOnLoad: true,
|
||||||
logLevel: 0,
|
logLevel: 5,
|
||||||
flowchart: {
|
flowchart: {
|
||||||
|
// defaultRenderer: 'elk',
|
||||||
useMaxWidth: false,
|
useMaxWidth: false,
|
||||||
htmlLabels: true,
|
htmlLabels: true,
|
||||||
},
|
},
|
||||||
|
@ -114,10 +282,6 @@ mindmap
|
||||||
useMaxWidth: false,
|
useMaxWidth: false,
|
||||||
},
|
},
|
||||||
useMaxWidth: false,
|
useMaxWidth: false,
|
||||||
lazyLoadedDiagrams: [
|
|
||||||
'./mermaid-mindmap-detector.esm.mjs',
|
|
||||||
'./mermaid-example-diagram-detector.esm.mjs',
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
|
|
|
@ -1,257 +1,111 @@
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
<meta charset="utf-8" />
|
||||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<link
|
<title>Mindmap Mermaid Quick Test Page</title>
|
||||||
rel="stylesheet"
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
div.mermaid {
|
||||||
/* background: rgb(221, 208, 208); */
|
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||||
/* background:#333; */
|
font-family: 'Courier New', Courier, monospace !important;
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
/* font-size: 18px !important; */
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
color: grey;
|
|
||||||
}
|
|
||||||
.mermaid2 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.mermaid {
|
|
||||||
border: 1px solid red;
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
/* font-size: 18px !important; */
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div>info below</div>
|
<h1>Mindmap diagram demo</h1>
|
||||||
<div class="">
|
<pre class="mermaid">
|
||||||
<pre class="mermaid2" style="width: 100%; height: 400px">
|
mindmap
|
||||||
flowchart TB;subgraph "number as labels";1;end;
|
root
|
||||||
</pre>
|
child1((Circle))
|
||||||
<pre class="mermaid2" style="width: 100%; height: 400px">
|
grandchild 1
|
||||||
flowchart TB;a[APA];
|
grandchild 2
|
||||||
</pre>
|
child2(Round rectangle)
|
||||||
<pre class="mermaid2" style="margin-left: 100px">
|
grandchild 3
|
||||||
graph TD
|
grandchild 4
|
||||||
work --> sleep
|
child3[Square]
|
||||||
sleep --> work
|
grandchild 5
|
||||||
eat --> sleep
|
::icon(mdi mdi-fire)
|
||||||
work --> eat
|
gc6((grand<br/>child 6))
|
||||||
</pre>
|
::icon(mdi mdi-fire)
|
||||||
<pre class="mermaid2" style="margin-left: 100px">
|
gc7((grand<br/>grand<br/>child 8))
|
||||||
flowchart TD
|
</pre>
|
||||||
work --> sleep
|
|
||||||
sleep --> work
|
|
||||||
eat --> sleep
|
|
||||||
work --> eat
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid2" style="">
|
|
||||||
graph TB
|
|
||||||
A
|
|
||||||
B
|
|
||||||
subgraph foo[Foo SubGraph]
|
|
||||||
C
|
|
||||||
D
|
|
||||||
end
|
|
||||||
subgraph bar[Bar SubGraph]
|
|
||||||
E
|
|
||||||
F
|
|
||||||
end
|
|
||||||
G
|
|
||||||
|
|
||||||
A-->B
|
<h2>Mindmap with root wrapping text and a shape</h2>
|
||||||
B-->C
|
<pre class="mermaid">
|
||||||
C-->D
|
mindmap
|
||||||
B-->D
|
root[A root with a long text that wraps to keep the node size in check]
|
||||||
D-->E
|
</pre>
|
||||||
E-->A
|
|
||||||
E-->F
|
|
||||||
F-->D
|
|
||||||
F-->G
|
|
||||||
B-->G
|
|
||||||
G-->D
|
|
||||||
|
|
||||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
<script type="module">
|
||||||
style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
|
// import mermaid from './mermaid.esm.mjs';
|
||||||
</pre>
|
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||||
<pre class="mermaid2" style="">
|
// import mermaidMindmap from './mermaid-mindmap.esm.mjs';
|
||||||
graph TB
|
|
||||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
||||||
A
|
|
||||||
B
|
|
||||||
subgraph foo[Foo SubGraph]
|
|
||||||
C
|
|
||||||
D
|
|
||||||
end
|
|
||||||
subgraph bar[Bar SubGraph]
|
|
||||||
E
|
|
||||||
F
|
|
||||||
end
|
|
||||||
G
|
|
||||||
|
|
||||||
A-->B
|
// import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
|
||||||
B-->C
|
// await mermaid.registerExternalDiagrams([mermaidMindmap]);
|
||||||
C-->D
|
|
||||||
B-->D
|
|
||||||
D-->E
|
|
||||||
E-->A
|
|
||||||
E-->F
|
|
||||||
F-->D
|
|
||||||
F-->G
|
|
||||||
B-->G
|
|
||||||
G-->D
|
|
||||||
|
|
||||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
const ALLOWED_TAGS = [
|
||||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
'a',
|
||||||
</pre>
|
'b',
|
||||||
<pre class="mermaid2" style="">
|
'blockquote',
|
||||||
graph TD
|
'br',
|
||||||
A[Christmas] ==> D
|
'dd',
|
||||||
A[Christmas] -->|Get money| B(Go shopping)
|
'div',
|
||||||
A[Christmas] ==> C
|
'dl',
|
||||||
</pre>
|
'dt',
|
||||||
<pre class="mermaid2" style="">
|
'em',
|
||||||
graph TD
|
'foreignObject',
|
||||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
'h1',
|
||||||
A[Christmas] ==> D
|
'h2',
|
||||||
A[Christmas] -->|Get money| B(Go shopping)
|
'h3',
|
||||||
A[Christmas] ==> C
|
'h4',
|
||||||
</pre>
|
'h5',
|
||||||
<pre class="mermaid2" style="">
|
'h6',
|
||||||
flowchart TD
|
'h7',
|
||||||
A[Christmas] ==> D
|
'h8',
|
||||||
A[Christmas] -->|Get money| B(Go shopping)
|
'hr',
|
||||||
A[Christmas] ==> C
|
'i',
|
||||||
</pre>
|
'li',
|
||||||
<pre class="mermaid2" style="">
|
'ul',
|
||||||
flowchart TD
|
'ol',
|
||||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
'p',
|
||||||
A[Christmas] ==> D
|
'pre',
|
||||||
A[Christmas] -->|Get money| B(Go shopping)
|
'span',
|
||||||
A[Christmas] ==> C
|
'strike',
|
||||||
</pre>
|
'strong',
|
||||||
<pre class="mermaid2" style="">
|
'table',
|
||||||
flowchart LR
|
'tbody',
|
||||||
a["<strong>Haiya</strong>"]---->b
|
'td',
|
||||||
</pre>
|
'tfoot',
|
||||||
<pre class="mermaid" style="">
|
'th',
|
||||||
flowchart LR
|
'thead',
|
||||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
'tr',
|
||||||
a["<strong>Haiya</strong>"]---->b
|
];
|
||||||
</pre>
|
|
||||||
<pre class="mermaid2" style="">
|
|
||||||
flowchart TD
|
|
||||||
A[Christmas] ==> D
|
|
||||||
A[Christmas] -->|Get money| B(Go shopping)
|
|
||||||
A[Christmas] ==> C
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid2" style="">
|
|
||||||
flowchart TD
|
|
||||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
||||||
A[Christmas] ==> D
|
|
||||||
A[Christmas] -->|Get money| B(Go shopping)
|
|
||||||
A[Christmas] ==> C
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid2" style="">
|
|
||||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
||||||
classDiagram-v2
|
|
||||||
Class01 <|-- AveryLongClass : Cool
|
|
||||||
<<interface>> Class01
|
|
||||||
Class03 *-- Class04
|
|
||||||
Class05 o-- Class06
|
|
||||||
Class07 .. Class08
|
|
||||||
Class09 --> C2 : Where am i?
|
|
||||||
Class09 --* C3
|
|
||||||
Class09 --|> Class07
|
|
||||||
Class12 <|.. Class08
|
|
||||||
Class11 ..>Class12
|
|
||||||
Class07 : equals()
|
|
||||||
Class07 : Object[] elementData
|
|
||||||
Class01 : size()
|
|
||||||
Class01 : int chimp
|
|
||||||
Class01 : int gorilla
|
|
||||||
Class01 : -int privateChimp
|
|
||||||
Class01 : +int publicGorilla
|
|
||||||
Class01 : #int protectedMarmoset
|
|
||||||
Class08 <--> C2: Cool label
|
|
||||||
class Class10 {
|
|
||||||
<<service>>
|
|
||||||
int id
|
|
||||||
test()
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid2" style="">
|
|
||||||
classDiagram-v2
|
|
||||||
Class01 <|-- AveryLongClass : Cool
|
|
||||||
<<interface>> Class01
|
|
||||||
Class03 *-- Class04
|
|
||||||
Class05 o-- Class06
|
|
||||||
Class07 .. Class08
|
|
||||||
Class09 --> C2 : Where am i?
|
|
||||||
Class09 --* C3
|
|
||||||
Class09 --|> Class07
|
|
||||||
Class12 <|.. Class08
|
|
||||||
Class11 ..>Class12
|
|
||||||
Class07 : equals()
|
|
||||||
Class07 : Object[] elementData
|
|
||||||
Class01 : size()
|
|
||||||
Class01 : int chimp
|
|
||||||
Class01 : int gorilla
|
|
||||||
Class01 : -int privateChimp
|
|
||||||
Class01 : +int publicGorilla
|
|
||||||
Class01 : #int protectedMarmoset
|
|
||||||
Class08 <--> C2: Cool label
|
|
||||||
class Class10 {
|
|
||||||
<<service>>
|
|
||||||
int id
|
|
||||||
test()
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid" style="">
|
|
||||||
flowchart BT
|
|
||||||
subgraph S1
|
|
||||||
sub1 -->sub2
|
|
||||||
end
|
|
||||||
subgraph S2
|
|
||||||
sub4
|
|
||||||
end
|
|
||||||
S1 --> S2
|
|
||||||
sub1 --> sub4
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
<script src="./mermaid.js"></script>
|
|
||||||
<script>
|
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
// theme: 'neutral',
|
theme: 'base',
|
||||||
// arrowMarkerAbsolute: true,
|
startOnLoad: true,
|
||||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
|
||||||
logLevel: 0,
|
logLevel: 0,
|
||||||
flowchart: { curve: 'cardinal', htmlLabels: false },
|
flowchart: {
|
||||||
// htmlLabels: true,
|
useMaxWidth: false,
|
||||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
htmlLabels: true,
|
||||||
// sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
},
|
||||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
gantt: {
|
||||||
// fontFamily: '"times", sans-serif',
|
useMaxWidth: false,
|
||||||
fontFamily: 'courier',
|
},
|
||||||
// fontSize: 18,
|
useMaxWidth: false,
|
||||||
// curve: 'cardinal',
|
|
||||||
securityLevel: 'loose',
|
|
||||||
// themeVariables: {relationLabelColor: 'red'}
|
|
||||||
});
|
});
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
}
|
}
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
console.error('In parse error:');
|
||||||
|
console.error(err);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -59,7 +59,7 @@ A-->B
|
||||||
>
|
>
|
||||||
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
|
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
|
||||||
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
|
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
|
||||||
<script src="./packages/mermaid/dist/mermaid.js"></script>
|
<script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
|
||||||
<script>
|
<script>
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
|
|
|
@ -1,14 +1,4 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<script src="http://localhost:9000/mermaid.js"></script>
|
|
||||||
<script>
|
|
||||||
mermaid.initialize({
|
|
||||||
theme: 'base',
|
|
||||||
themeVariables: {},
|
|
||||||
startOnLoad: true,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Example</h1>
|
<h1>Example</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -26,4 +16,12 @@ sequenceDiagram
|
||||||
Note left of Ernie: Cookies are good
|
Note left of Ernie: Cookies are good
|
||||||
</pre>
|
</pre>
|
||||||
</body>
|
</body>
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from '/mermaid.esm.mjs';
|
||||||
|
mermaid.initialize({
|
||||||
|
theme: 'base',
|
||||||
|
themeVariables: {},
|
||||||
|
startOnLoad: true,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -9,19 +9,19 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="graph"></div>
|
<div id="graph"></div>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.init({ startOnLoad: false });
|
await mermaid.initialize({ startOnLoad: false });
|
||||||
|
await mermaid.run();
|
||||||
|
|
||||||
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
|
await mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
|
||||||
try {
|
try {
|
||||||
console.log('rendering');
|
console.log('rendering');
|
||||||
mermaid.mermaidAPI.render('graphDiv', `>`);
|
await mermaid.mermaidAPI.render('graphDiv', `>`);
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
|
||||||
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
|
const { svg } = await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`);
|
||||||
document.getElementById('graph').innerHTML = html;
|
document.getElementById('graph').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -9,20 +9,20 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="graph"></div>
|
<div id="graph"></div>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.init({ startOnLoad: false });
|
mermaid.initialize({ startOnLoad: false });
|
||||||
mermaid.mermaidAPI.initialize();
|
mermaid.mermaidAPI.initialize();
|
||||||
|
|
||||||
rerender('XMas');
|
async function rerender(text) {
|
||||||
|
|
||||||
function rerender(text) {
|
|
||||||
const graphText = `graph TD
|
const graphText = `graph TD
|
||||||
A[${text}] -->|Get money| B(Go shopping)`;
|
A[${text}] -->|Get money| B(Go shopping)`;
|
||||||
const graph = mermaid.mermaidAPI.render('id', graphText);
|
const { svg } = await mermaid.mermaidAPI.render('id', graphText);
|
||||||
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
|
console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
|
||||||
document.getElementById('graph').innerHTML = graph;
|
document.getElementById('graph').innerHTML = svg;
|
||||||
}
|
}
|
||||||
|
window.rerender = rerender;
|
||||||
|
await rerender('XMas');
|
||||||
</script>
|
</script>
|
||||||
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
|
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -313,8 +313,8 @@ requirementDiagram
|
||||||
merge release
|
merge release
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -308,8 +308,8 @@ gitGraph
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -308,8 +308,8 @@ gitGraph
|
||||||
merge release
|
merge release
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -301,8 +301,8 @@ requirementDiagram
|
||||||
merge release
|
merge release
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -305,8 +305,8 @@ requirementDiagram
|
||||||
merge release
|
merge release
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -305,8 +305,8 @@ requirementDiagram
|
||||||
merge release
|
merge release
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,14 +1,274 @@
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||||
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
/* background: rgb(221, 208, 208); */
|
||||||
|
/* background:#333; */
|
||||||
|
font-family: 'Arial';
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
.mermaid2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mermaid svg {
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
background-color: #eee;
|
||||||
|
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||||
|
radial-gradient(#fff 1%, transparent 11%);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position: 0 0, 10px 10px;
|
||||||
|
background-repeat: repeat;
|
||||||
|
}
|
||||||
|
.malware {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 150px;
|
||||||
|
background: red;
|
||||||
|
color: black;
|
||||||
|
display: flex;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<pre class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
none
|
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||||
hello world
|
graph TB
|
||||||
|
a --> b
|
||||||
|
a --> c
|
||||||
|
b --> d
|
||||||
|
c --> d
|
||||||
</pre>
|
</pre>
|
||||||
<script src="./mermaid.js"></script>
|
<pre id="diagram" class="mermaid">
|
||||||
<script>
|
flowchart-elk LR
|
||||||
|
subgraph A
|
||||||
|
a --> b
|
||||||
|
end
|
||||||
|
subgraph B
|
||||||
|
b
|
||||||
|
end
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
|
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||||
|
flowchart TB
|
||||||
|
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||||
|
subgraph ibm[IBM Espresso CPU]
|
||||||
|
core0[IBM PowerPC Broadway Core 0]
|
||||||
|
core1[IBM PowerPC Broadway Core 1]
|
||||||
|
core2[IBM PowerPC Broadway Core 2]
|
||||||
|
|
||||||
|
rom[16 KB ROM]
|
||||||
|
|
||||||
|
core0 --- core2
|
||||||
|
|
||||||
|
rom --> core2
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph amd[AMD Latte GPU]
|
||||||
|
mem[Memory & I/O Bridge]
|
||||||
|
dram[DRAM Controller]
|
||||||
|
edram[32 MB EDRAM MEM1]
|
||||||
|
rom[512 B SEEPROM]
|
||||||
|
|
||||||
|
sata[SATA IF]
|
||||||
|
exi[EXI]
|
||||||
|
|
||||||
|
subgraph gx[GX]
|
||||||
|
sram[3 MB 1T-SRAM]
|
||||||
|
end
|
||||||
|
|
||||||
|
radeon[AMD Radeon R7xx GX2]
|
||||||
|
|
||||||
|
mem --- gx
|
||||||
|
mem --- radeon
|
||||||
|
|
||||||
|
rom --- mem
|
||||||
|
|
||||||
|
mem --- sata
|
||||||
|
mem --- exi
|
||||||
|
|
||||||
|
dram --- sata
|
||||||
|
dram --- exi
|
||||||
|
end
|
||||||
|
|
||||||
|
ddr3[2 GB DDR3 RAM MEM2]
|
||||||
|
|
||||||
|
mem --- ddr3
|
||||||
|
dram --- ddr3
|
||||||
|
edram --- ddr3
|
||||||
|
|
||||||
|
core1 --- mem
|
||||||
|
|
||||||
|
exi --- rtc
|
||||||
|
rtc{{rtc}}
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
|
flowchart TB
|
||||||
|
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||||
|
subgraph ibm[IBM Espresso CPU]
|
||||||
|
core0[IBM PowerPC Broadway Core 0]
|
||||||
|
core1[IBM PowerPC Broadway Core 1]
|
||||||
|
core2[IBM PowerPC Broadway Core 2]
|
||||||
|
|
||||||
|
rom[16 KB ROM]
|
||||||
|
|
||||||
|
core0 --- core2
|
||||||
|
|
||||||
|
rom --> core2
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph amd[AMD Latte GPU]
|
||||||
|
mem[Memory & I/O Bridge]
|
||||||
|
dram[DRAM Controller]
|
||||||
|
edram[32 MB EDRAM MEM1]
|
||||||
|
rom[512 B SEEPROM]
|
||||||
|
|
||||||
|
sata[SATA IF]
|
||||||
|
exi[EXI]
|
||||||
|
|
||||||
|
subgraph gx[GX]
|
||||||
|
sram[3 MB 1T-SRAM]
|
||||||
|
end
|
||||||
|
|
||||||
|
radeon[AMD Radeon R7xx GX2]
|
||||||
|
|
||||||
|
mem --- gx
|
||||||
|
mem --- radeon
|
||||||
|
|
||||||
|
rom --- mem
|
||||||
|
|
||||||
|
mem --- sata
|
||||||
|
mem --- exi
|
||||||
|
|
||||||
|
dram --- sata
|
||||||
|
dram --- exi
|
||||||
|
end
|
||||||
|
|
||||||
|
ddr3[2 GB DDR3 RAM MEM2]
|
||||||
|
|
||||||
|
mem --- ddr3
|
||||||
|
dram --- ddr3
|
||||||
|
edram --- ddr3
|
||||||
|
|
||||||
|
core1 --- mem
|
||||||
|
|
||||||
|
exi --- rtc
|
||||||
|
rtc{{rtc}}
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart LR
|
||||||
|
B1 --be be--x B2
|
||||||
|
B1 --bo bo--o B3
|
||||||
|
subgraph Ugge
|
||||||
|
B2
|
||||||
|
B3
|
||||||
|
subgraph inner
|
||||||
|
B4
|
||||||
|
B5
|
||||||
|
end
|
||||||
|
subgraph inner2
|
||||||
|
subgraph deeper
|
||||||
|
C4
|
||||||
|
C5
|
||||||
|
end
|
||||||
|
C6
|
||||||
|
end
|
||||||
|
|
||||||
|
B4 --> C4
|
||||||
|
|
||||||
|
B3 -- X --> B4
|
||||||
|
B2 --> inner
|
||||||
|
|
||||||
|
C4 --> C5
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph outer
|
||||||
|
B6
|
||||||
|
end
|
||||||
|
B6 --> B5
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
sequenceDiagram
|
||||||
|
Customer->>+Stripe: Makes a payment request
|
||||||
|
Stripe->>+Bank: Forwards the payment request to the bank
|
||||||
|
Bank->>+Customer: Asks for authorization
|
||||||
|
Customer->>+Bank: Provides authorization
|
||||||
|
Bank->>+Stripe: Sends a response with payment details
|
||||||
|
Stripe->>+Merchant: Sends a notification of payment receipt
|
||||||
|
Merchant->>+Stripe: Confirms the payment
|
||||||
|
Stripe->>+Customer: Sends a confirmation of payment
|
||||||
|
Customer->>+Merchant: Receives goods or services
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
gantt
|
||||||
|
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %d
|
||||||
|
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
||||||
|
section Section1
|
||||||
|
Today: 1, -1h
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
// console.error('Mermaid error: ', err);
|
||||||
|
};
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
logLevel: 1,
|
// theme: 'forest',
|
||||||
|
startOnLoad: true,
|
||||||
|
logLevel: 0,
|
||||||
|
flowchart: {
|
||||||
|
// defaultRenderer: 'elk',
|
||||||
|
useMaxWidth: false,
|
||||||
|
htmlLabels: true,
|
||||||
|
},
|
||||||
|
gantt: {
|
||||||
|
useMaxWidth: false,
|
||||||
|
},
|
||||||
|
useMaxWidth: false,
|
||||||
});
|
});
|
||||||
|
function callback() {
|
||||||
|
alert('It worked');
|
||||||
|
}
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
console.error('In parse error:');
|
||||||
|
console.error(err);
|
||||||
|
};
|
||||||
|
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -34,8 +34,8 @@
|
||||||
9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
|
9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
|
||||||
style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
|
style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
|
||||||
</pre>
|
</pre>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
function showFullFirstSquad(elemName) {
|
function showFullFirstSquad(elemName) {
|
||||||
console.log('show ' + elemName);
|
console.log('show ' + elemName);
|
||||||
}
|
}
|
||||||
|
|
|
@ -120,8 +120,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
|
|
@ -25,8 +25,8 @@
|
||||||
Get into car:4: Dad, Mum, Child 1, Child 2
|
Get into car:4: Dad, Mum, Child 1, Child 2
|
||||||
Drive home:3: Dad
|
Drive home:3: Dad
|
||||||
</pre>
|
</pre>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
theme: 'forest',
|
theme: 'forest',
|
||||||
logLevel: 3,
|
logLevel: 3,
|
||||||
|
|
|
@ -26,8 +26,8 @@
|
||||||
A --> B --> C
|
A --> B --> C
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
function showFullFirstSquad(elemName) {
|
function showFullFirstSquad(elemName) {
|
||||||
console.log('show ' + elemName);
|
console.log('show ' + elemName);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,17 @@
|
||||||
import mermaid2 from '../../packages/mermaid/src/mermaid';
|
import mermaid2 from '../../packages/mermaid/src/mermaid';
|
||||||
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
import externalExample from '../../packages/mermaid-example-diagram/src/detector';
|
||||||
|
|
||||||
function b64ToUtf8(str) {
|
function b64ToUtf8(str) {
|
||||||
return decodeURIComponent(escape(window.atob(str)));
|
return decodeURIComponent(escape(window.atob(str)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Adds a rendered flag to window when rendering is done, so cypress can wait for it.
|
||||||
|
function markRendered() {
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ##contentLoaded Callback function that is called when page is loaded. This functions fetches
|
* ##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
|
* configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
|
||||||
|
@ -37,9 +44,10 @@ const contentLoaded = async function () {
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
}
|
}
|
||||||
|
|
||||||
await mermaid2.registerExternalDiagrams([mindmap]);
|
await mermaid2.registerExternalDiagrams([externalExample]);
|
||||||
mermaid2.initialize(graphObj.mermaid);
|
mermaid2.initialize(graphObj.mermaid);
|
||||||
mermaid2.init();
|
await mermaid2.init();
|
||||||
|
markRendered();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -67,7 +75,7 @@ function merge(current, update) {
|
||||||
return current;
|
return current;
|
||||||
}
|
}
|
||||||
|
|
||||||
const contentLoadedApi = function () {
|
const contentLoadedApi = async function () {
|
||||||
let pos = document.location.href.indexOf('?graph=');
|
let pos = document.location.href.indexOf('?graph=');
|
||||||
if (pos > 0) {
|
if (pos > 0) {
|
||||||
pos = pos + 7;
|
pos = pos + 7;
|
||||||
|
@ -94,40 +102,28 @@ const contentLoadedApi = function () {
|
||||||
mermaid2.initialize(cnf);
|
mermaid2.initialize(cnf);
|
||||||
|
|
||||||
for (let i = 0; i < numCodes; i++) {
|
for (let i = 0; i < numCodes; i++) {
|
||||||
mermaid2.render(
|
const { svg, bindFunctions } = await mermaid2.render(
|
||||||
'newid' + i,
|
'newid' + i,
|
||||||
graphObj.code[i],
|
graphObj.code[i],
|
||||||
(svgCode, bindFunctions) => {
|
|
||||||
div.innerHTML = svgCode;
|
|
||||||
|
|
||||||
bindFunctions(div);
|
|
||||||
},
|
|
||||||
divs[i]
|
divs[i]
|
||||||
);
|
);
|
||||||
|
div.innerHTML = svg;
|
||||||
|
bindFunctions(div);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.id = 'block';
|
div.id = 'block';
|
||||||
div.className = 'mermaid';
|
div.className = 'mermaid';
|
||||||
// div.innerHTML = graphObj.code
|
|
||||||
console.warn('graphObj.mermaid', graphObj.mermaid);
|
console.warn('graphObj.mermaid', graphObj.mermaid);
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
mermaid2.initialize(graphObj.mermaid);
|
mermaid2.initialize(graphObj.mermaid);
|
||||||
|
|
||||||
mermaid2.render(
|
const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div);
|
||||||
'newid',
|
div.innerHTML = svg;
|
||||||
graphObj.code,
|
bindFunctions(div);
|
||||||
(svgCode, bindFunctions) => {
|
|
||||||
div.innerHTML = svgCode;
|
|
||||||
|
|
||||||
if (bindFunctions) {
|
|
||||||
bindFunctions(div);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
div
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
markRendered();
|
||||||
};
|
};
|
||||||
|
|
||||||
if (typeof document !== 'undefined') {
|
if (typeof document !== 'undefined') {
|
||||||
|
@ -139,10 +135,10 @@ if (typeof document !== 'undefined') {
|
||||||
function () {
|
function () {
|
||||||
if (this.location.href.match('xss.html')) {
|
if (this.location.href.match('xss.html')) {
|
||||||
this.console.log('Using api');
|
this.console.log('Using api');
|
||||||
contentLoadedApi();
|
void contentLoadedApi();
|
||||||
} else {
|
} else {
|
||||||
this.console.log('Not using api');
|
this.console.log('Not using api');
|
||||||
contentLoaded();
|
void contentLoaded();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
|
|
|
@ -33,8 +33,8 @@
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
startOnLoad: false,
|
startOnLoad: false,
|
||||||
useMaxWidth: true,
|
useMaxWidth: true,
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -104,10 +104,9 @@
|
||||||
// diagram += "=xssAttack()> --> B";
|
// diagram += "=xssAttack()> --> B";
|
||||||
console.log(diagram);
|
console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -102,10 +102,9 @@
|
||||||
// diagram += "=xssAttack()> --> B";
|
// diagram += "=xssAttack()> --> B";
|
||||||
console.log(diagram);
|
console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -102,10 +102,9 @@
|
||||||
// diagram += "=xssAttack()> --> B";
|
// diagram += "=xssAttack()> --> B";
|
||||||
console.log(diagram);
|
console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -102,10 +102,9 @@
|
||||||
// diagram += "=xssAttack()> --> B";
|
// diagram += "=xssAttack()> --> B";
|
||||||
console.log(diagram);
|
console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -104,10 +104,9 @@
|
||||||
// diagram += "=xssAttack()> --> B";
|
// diagram += "=xssAttack()> --> B";
|
||||||
console.log(diagram);
|
console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -103,10 +103,9 @@
|
||||||
// diagram += "=xssAttack()> --> B";
|
// diagram += "=xssAttack()> --> B";
|
||||||
console.log(diagram);
|
console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -102,10 +102,9 @@
|
||||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||||
// console.log(diagram);
|
// console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -102,10 +102,9 @@
|
||||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||||
// console.log(diagram);
|
// console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
<div id="diagram" class="mermaid"></div>
|
<div id="diagram" class="mermaid"></div>
|
||||||
<div id="res" class=""></div>
|
<div id="res" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script type="module">
|
||||||
<script>
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
|
@ -101,10 +101,9 @@
|
||||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||||
// console.log(diagram);
|
// console.log(diagram);
|
||||||
// document.querySelector('#diagram').innerHTML = diagram;
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
mermaid.render('diagram', diagram, (res) => {
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
console.log(res);
|
console.log(res);
|
||||||
document.querySelector('#res').innerHTML = res;
|
document.querySelector('#res').innerHTML = svg;
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue