GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into sidv/contributors

Browse Source 
* develop: (309 commits)
  Update docs
  fix Lint
  Update CHANGELOG.md
  Update CHANGELOG.md
  fix: fix exports
  Doc (typo): remove duplicate "be"
  Fix readme link
  Regenerate mermaid docs
  Add deepdwn to cspell
  Add Deepdwn to native integrations list
  docs: Fix changelog
  docs: v10 breaking changes
  Remove `null` from diagrams before render
  fix docs diagram
  Updated version
  Minor cleanup to trigger build.
  Fix spellings
  Wrap option working in test case
  Fix typos
  Minor cleanup
  ...
This commit is contained in:
Sidharth Vinod 2023-02-24 21:14:55 +05:30
commit 8c2dbafdb5
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
298 changed files with 11598 additions and 4666 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintignore
View File

@ -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

150
.eslintrc.cjs Normal file
View File

@ -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
View File

@ -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"
}
}
]
}

4
.github/FUNDING.yml vendored
View File

@ -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

2
.github/ISSUE_TEMPLATE/config.yml vendored
View File

@ -1,4 +1,4 @@
blank_issues_enabled: false blank_issues_enabled: true
contact_links: contact_links:
- name: GitHub Discussions - name: GitHub Discussions
url: https://github.com/mermaid-js/mermaid/discussions url: https://github.com/mermaid-js/mermaid/discussions

1
.github/pull_request_template.md vendored
View File

@ -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

2
.github/workflows/dependency-review.yml vendored
View File

@ -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

8
.github/workflows/e2e.yml vendored
View File

@ -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__/*

3
.github/workflows/link-checker.yml vendored
View File

@ -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:

16
.github/workflows/lint.yml vendored
View File

@ -7,6 +7,7 @@ on:
- opened - opened
- synchronize - synchronize
- ready_for_review - ready_for_review
workflow_dispatch:
permissions: permissions:
contents: write contents: write
@ -36,7 +37,20 @@ 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 id: verifyDocs

2
.github/workflows/pr-labeler.yml vendored
View File

@ -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 }}

4
.github/workflows/publish-docs.yml vendored
View File

@ -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

19
.github/workflows/release-publish.yml vendored
View File

@ -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

8
.lintstagedrc.mjs
View File

@ -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'],
}; };

3
.lycheeignore
View File

@ -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/*

6
.percy.yml
View File

@ -1,6 +0,0 @@
version: 2
snapshot:
widths:
- 1280
discovery:
disable-cache: true

15
.tern-project
View File

@ -1,15 +0,0 @@
{
"ecmaVersion": 6,
"libs": ["browser"],
"loadEagerly": [],
"dontLoad": ["node_modules/**"],
"plugins": {
"modules": {},
"es_modules": {},
"node": {},
"doc_comment": {
"fullDocs": true,
"strong": true
}
}
}

51
.vite/build.ts
View File

@ -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' }));

17
.vite/server.ts
View File

@ -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();
@ -16,14 +8,14 @@ async function createServer() {
// Create Vite server in middleware mode // Create Vite server in middleware mode
const vite = await createViteServer({ const vite = await createViteServer({
configFile: './vite.config.ts', configFile: './vite.config.ts',
mode: 'production',
server: { middlewareMode: true }, server: { middlewareMode: true },
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'));
@ -33,5 +25,4 @@ async function createServer() {
}); });
} }
// build(getBuildConfig({ minify: false, watch: true }));
createServer(); createServer();

103
CHANGELOG.md
View File

@ -1,6 +1,105 @@
# Change Log # Changelog
// TODO: Populate changelog ## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
### Mermaid is ESM only!
We've dropped CJS support. So, you will have to update your import scripts as follows.
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
```
You can keep using v9 by adding the `@9` in the CDN URL.
```diff
- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>
```
### mermaid.render is async and doesn't accept callbacks
```js
// < v10
mermaid.render('id', 'graph TD;\nA-->B', (svg, bindFunctions) => {
element.innerHTML = svg;
if (bindFunctions) {
bindFunctions(element);
}
});
// Shorter syntax
if (bindFunctions) {
bindFunctions(element);
}
// can be replaced with the `?.` shorthand
bindFunctions?.(element);
// >= v10 with async/await
const { svg, bindFunctions } = await mermaid.render('id', 'graph TD;\nA-->B');
element.innerHTML = svg;
bindFunctions?.(element);
// >= v10 with promise.then
mermaid.render('id', 'graph TD;A-->B').then(({ svg, bindFunctions }) => {
element.innerHTML = svg;
bindFunctions?.(element);
});
```
### mermaid.parse is async and ParseError is removed
```js
// < v10
mermaid.parse(text, parseError);
//>= v10
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
mermaid.init(config, selector, cb);
//>= v10
mermaid.initialize(config);
mermaid.run({
querySelector: selector,
postRenderCallback: cb,
suppressErrors: true,
});
```
```js
// < v10
mermaid.initThrowsErrors(config, selector, cb);
//>= v10
mermaid.initialize(config);
mermaid.run({
querySelector: selector,
postRenderCallback: cb,
suppressErrors: false,
});
```
// TODO: Populate changelog pre v10
- Config has a lot of changes - Config has a lot of changes
- globalReset resets to `defaultConfig` instead of current config. Use `reset` instead. - globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.

22
CONTRIBUTING.md
View File

@ -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

41
README.md
View File

@ -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/mermaid"><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="" />
@ -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://www.jsdelivr.com/package/npm/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/">

43
README.zh-CN.md
View File

@ -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/mermaid"><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://www.jsdelivr.com/package/npm/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)，没有你们，就没有这个项目的今天！_

5
V10-BreakingChanges.md
View File

@ -1,5 +0,0 @@
# A collection of updates that change the behaviour
## Lazy loading and asynchronisity
- Invalid dates are rendered as syntax error instead of returning best guess or the current date

11
cSpell.json
View File

@ -6,6 +6,7 @@
"adamiecki", "adamiecki",
"alois", "alois",
"antiscript", "antiscript",
"appli",
"applitools", "applitools",
"asciidoctor", "asciidoctor",
"ashish", "ashish",
@ -13,6 +14,7 @@
"bbox", "bbox",
"bilkent", "bilkent",
"bisheng", "bisheng",
"blrs",
"braintree", "braintree",
"brkt", "brkt",
"brolin", "brolin",
@ -25,12 +27,14 @@
"cuzon", "cuzon",
"cytoscape", "cytoscape",
"dagre", "dagre",
"deepdwn",
"descr", "descr",
"docsify", "docsify",
"docsy", "docsy",
"doku", "doku",
"dompurify", "dompurify",
"edgechromium", "edgechromium",
"elkjs",
"faber", "faber",
"flatmap", "flatmap",
"ftplugin", "ftplugin",
@ -39,6 +43,7 @@
"gitgraph", "gitgraph",
"globby", "globby",
"graphlib", "graphlib",
"graphviz",
"grav", "grav",
"greywolf", "greywolf",
"inkdrop", "inkdrop",
@ -52,8 +57,10 @@
"knut", "knut",
"laganeckas", "laganeckas",
"lintstagedrc", "lintstagedrc",
"logmsg",
"lucida", "lucida",
"matthieu", "matthieu",
"mdast",
"mdbook", "mdbook",
"mermerd", "mermerd",
"mindaugas", "mindaugas",
@ -70,6 +77,7 @@
"pnpm", "pnpm",
"podlite", "podlite",
"quence", "quence",
"radious",
"ranksep", "ranksep",
"rect", "rect",
"rects", "rects",
@ -79,17 +87,20 @@
"setupgraphviewbox", "setupgraphviewbox",
"shiki", "shiki",
"sidharth", "sidharth",
"sidharthv",
"sphinxcontrib", "sphinxcontrib",
"statediagram", "statediagram",
"stylis", "stylis",
"substate", "substate",
"sveidqvist", "sveidqvist",
"swimm",
"techn", "techn",
"teststr", "teststr",
"textlength", "textlength",
"treemap", "treemap",
"ts-nocheck", "ts-nocheck",
"tuleap", "tuleap",
"ugge",
"unist", "unist",
"verdana", "verdana",
"viewports", "viewports",

88
cypress/helpers/util.js
View File

@ -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);
};

4
cypress/integration/other/external-diagrams.spec.js
View File

@ -2,8 +2,8 @@ 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';
urlSnapshotTest(url, {}, false, false); urlSnapshotTest(url, {}, false, false);
}); });
}); });

122
cypress/integration/rendering/c4.spec.js Normal file
View File

@ -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');
});
});

14
cypress/integration/rendering/erDiagram.spec.js
View File

@ -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(
` `

687
cypress/integration/rendering/flowchart-elk.spec.js Normal file
View File

@ -0,0 +1,687 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe.skip('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('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('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 }
);
});
});

11
cypress/integration/rendering/flowchart-v2.spec.js
View File

@ -670,6 +670,17 @@ title: Simple flowchart
--- ---
flowchart TD flowchart TD
A --> B A --> B
`,
{ titleTopMargin: 0 }
);
});
it('3192: It should be possieble to render flowcharts with invisible edges', () => {
imgSnapshotTest(
`---
title: Simple flowchart with invisible edges
---
flowchart TD
A ~~~ B
`, `,
{ titleTopMargin: 0 } { titleTopMargin: 0 }
); );

8
cypress/integration/rendering/mindmap.spec.ts
View File

@ -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 */
}); });

42
cypress/integration/rendering/sequencediagram.spec.js
View File

@ -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(
` `
@ -80,7 +116,11 @@ context('Sequence diagram', () => {
loop Loopy loop Loopy
Bob->>Alice: Pasten Bob->>Alice: Pasten
end `, end `,
{ wrap: true } {
sequence: {
wrap: true,
},
}
); );
}); });
context('font settings', () => { context('font settings', () => {

164
cypress/integration/rendering/timeline.spec.ts Normal file
View File

@ -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
`,
{}
);
});
});

231
cypress/platform/ashish2.html Normal file
View File

@ -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>

16
cypress/platform/bundle-test.js
View File

@ -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')
);

14
cypress/platform/class.html
View File

@ -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);
}; };

4
cypress/platform/click_security_loose.html
View File

@ -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>

4
cypress/platform/click_security_other.html
View File

@ -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';

4
cypress/platform/click_security_sandbox.html
View File

@ -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';

4
cypress/platform/click_security_strict.html
View File

@ -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';

4
cypress/platform/css1.html
View File

@ -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);
} }

4
cypress/platform/current2.html
View File

@ -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);
}; };

38
cypress/platform/e2e.html
View File

@ -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>

37
cypress/platform/external-diagrams-mindmap.html → cypress/platform/external-diagrams-example-diagram.html
View File

@ -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>

4
cypress/platform/flow.html
View File

@ -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; }',

46
cypress/platform/flow2.html Normal file
View File

@ -0,0 +1,46 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<style>
body {
font-family: 'trebuchet ms', verdana, arial;
}
</style>
</head>
<body>
<pre class="mermaid">
graph TB
subgraph One
a1-->a2-->a3
end
</pre>
<pre class="mermaid">
graph TB
a_a --> b_b:::apa --> c_c:::apa
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
</pre>
<pre class="mermaid">
graph TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
click a_a "http://www.aftonbladet.se" "apa"
</pre>
<script type="module">
import mermaid from '../../packages/mermaid/src/mermaid';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
flowchart: { curve: 'linear' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html>

17
cypress/platform/ghsa1.html
View File

@ -8,19 +8,22 @@
</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>

9
cypress/platform/ghsa2.html
View File

@ -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>

13
cypress/platform/ghsa3.html
View File

@ -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);
}; };
@ -91,10 +91,11 @@
diagram += 'le> * { background : red}</style>test</p>"]'; diagram += 'le> * { background : red}</style>test</p>"]';
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; const { svg } = await mermaid.render('diagram', diagram);
mermaid.render('diagram', diagram, (res) => { document.querySelector('#res').innerHTML = svg;
document.querySelector('#res').innerHTML = res; if (window.Cypress) {
}); window.rendered = true;
}
</script> </script>
</body> </body>
</html> </html>

4
cypress/platform/git-graph.html
View File

@ -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);
}; };

4
cypress/platform/gitgraph.html
View File

@ -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);
}; };

4
cypress/platform/gitgraph2.html
View File

@ -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);
}; };

4
cypress/platform/huge.html
View File

File diff suppressed because one or more lines are too long

4
cypress/platform/info.html
View File

@ -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; }',

4
cypress/platform/interaction.html
View File

@ -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';

237
cypress/platform/knsv2.html
View File

@ -54,39 +54,205 @@
</style> </style>
</head> </head>
<body> <body>
<div>Security check</div>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
flowchart LR %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
%% Actors graph BT
A a{The cat in the hat} -- 1o --> b
subgraph Sub a -- 2o --> c
B --> C a -- 3o --> d
end g --2i--> a
d --1i--> a
%% Accusations h --3i -->a
A --L --> Sub b --> d(The dog in the hog)
c --> d
%% Offense
B --> A
</pre>
<pre id="diagram" class="mermaid">
stateDiagram-v2
[*] --> S1
S1 --> S2: long line using<br/>should work
S1 --> S3: long line using <br>should work
S1 --> S4: long line using \\nshould work
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
gantt flowchart-elk TB
title Style today marker (vertical line should be 5px wide and half-transparent blue) a --> b
dateFormat YYYY-MM-DD a --> c
axisFormat %d b --> d
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5 c --> d
section Section1 </pre>
Today: 1, -1h <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 />
&nbsp;
<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
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
</pre>
<br />
<pre id="diagram" class="mermaid2">
example-diagram
</pre> </pre>
<!-- <div id="cy"></div> --> <!-- <div id="cy"></div> -->
@ -96,18 +262,19 @@ flowchart LR
<!-- <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: 'default', theme: 'forest',
startOnLoad: true, startOnLoad: true,
logLevel: 0, logLevel: 5,
flowchart: { flowchart: {
// defaultRenderer: 'elk',
useMaxWidth: false, useMaxWidth: false,
htmlLabels: true, htmlLabels: true,
}, },

142
cypress/platform/knsv3.html
View File

@ -1,81 +1,93 @@
<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://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> <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: '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> </style>
</head> </head>
<body> <body>
<div>Security check</div> <h1>Mindmap diagram demo</h1>
<pre id="diagram" class="mermaid"> <pre class="mermaid">
graph TD mindmap
A["test"] --"<p><style> * { display : none}</style>test</p>"--> B 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>
<!-- <div id="cy"></div> --> <h2>Mindmap with root wrapping text and a shape</h2>
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> --> <pre class="mermaid">
<!-- <script src="./mermaid-example-diagram-detector.js"></script> --> mindmap
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> --> root[A root with a long text that wraps to keep the node size in check]
<!-- <script src="./mermaid.js"></script> --> </pre>
<script type="module"> <script type="module">
import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import mermaid from './mermaid.esm.mjs';
// 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]); // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
// import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
// await mermaid.registerExternalDiagrams([mermaidMindmap]);
const ALLOWED_TAGS = [
'a',
'b',
'blockquote',
'br',
'dd',
'div',
'dl',
'dt',
'em',
'foreignObject',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'h7',
'h8',
'hr',
'i',
'li',
'ul',
'ol',
'p',
'pre',
'span',
'strike',
'strong',
'table',
'tbody',
'td',
'tfoot',
'th',
'thead',
'tr',
];
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: 'default', theme: 'base',
startOnLoad: true, startOnLoad: true,
logLevel: 0, logLevel: 0,
flowchart: { flowchart: {
@ -94,10 +106,6 @@
console.error('In parse error:'); console.error('In parse error:');
console.error(err); 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>

2
cypress/platform/per.html
View File

@ -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);

18
cypress/platform/regression/issue-1874.html
View File

@ -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>

16
cypress/platform/render-after-error.html
View File

@ -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>

18
cypress/platform/rerender.html
View File

@ -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>

4
cypress/platform/showcase_base.html
View File

@ -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);
}; };

4
cypress/platform/showcase_base_dark.html
View File

@ -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);
}; };

4
cypress/platform/showcase_dark.html
View File

@ -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);
}; };

4
cypress/platform/showcase_default.html
View File

@ -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);
}; };

4
cypress/platform/showcase_forest.html
View File

@ -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);
}; };

4
cypress/platform/showcase_neutral.html
View File

@ -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);
}; };

272
cypress/platform/sidv.html
View File

@ -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 />
&nbsp;
<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>

4
cypress/platform/subgraph.html
View File

@ -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);
} }

4
cypress/platform/theme-directives.html
View File

@ -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);
}; };

4
cypress/platform/user-journey.html
View File

@ -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,

4
cypress/platform/vertices.html
View File

@ -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);
} }

46
cypress/platform/viewer.js
View File

@ -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.run();
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

4
cypress/platform/xss.html
View File

@ -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,

11
cypress/platform/xss10.html
View File

@ -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>

11
cypress/platform/xss11.html
View File

@ -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>

11
cypress/platform/xss12.html
View File

@ -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>

11
cypress/platform/xss13.html
View File

@ -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>

11
cypress/platform/xss14.html
View File

@ -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>

11
cypress/platform/xss15.html
View File

@ -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>

11
cypress/platform/xss16.html
View File

@ -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>

11
cypress/platform/xss17.html
View File

@ -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>

11
cypress/platform/xss18.html
View File

@ -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>

11
cypress/platform/xss19.html
View File

@ -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 @@ class Shape{
// 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>

6
cypress/platform/xss2.html
View File

@ -48,8 +48,8 @@
Alice->>Bob: Hi Bob Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice Bob->>Alice: Hi Alice
</pre> </pre>
<script src="./mermaid.js"></script> <script type="module">
<script> import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({
startOnLoad: true, startOnLoad: true,
useMaxWidth: true, useMaxWidth: true,
@ -59,7 +59,7 @@
const handler = setInterval(() => { const handler = setInterval(() => {
cnt++; cnt++;
a = {}; a = {};
if (typeof a.polluted !== 'undefined') { if (a.polluted !== undefined) {
clearInterval(handler); clearInterval(handler);
xssAttack(); xssAttack();
} }

10
cypress/platform/xss20.html
View File

@ -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,8 @@ A --> B["<a href='javasc`;
diagram += `ript#colon;xssAttack()'>AAA</a>"]`; diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
// diagram += '//via.placeholder.com/64\' width=64 />"]'; // diagram += '//via.placeholder.com/64\' width=64 />"]';
// 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); document.querySelector('#res').innerHTML = svg;
document.querySelector('#res').innerHTML = res;
});
</script> </script>
</body> </body>
</html> </html>

12
cypress/platform/xss21.html
View File

@ -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);
}; };
@ -97,14 +97,12 @@
// A --> B["&lt;a href='javascript`; // A --> B["&lt;a href='javascript`;
// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`; // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
let diagram = ` graph TD let diagram = ` graph TD
A --> B["<a href='javasc`; A --> B["<a href='javasc`;
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`; diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
// diagram += '//via.placeholder.com/64\' width=64 />"]'; // diagram += '//via.placeholder.com/64\' width=64 />"]';
// 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); document.querySelector('#res').innerHTML = svg;
document.querySelector('#res').innerHTML = res;
});
</script> </script>
</body> </body>
</html> </html>

4
cypress/platform/xss22.html
View File

@ -8,8 +8,8 @@
graph TD graph TD
A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"] A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"]
</pre> </pre>
<script src="./mermaid.js"></script> <script type="module">
<script> import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });
</script> </script>
</body> </body>

4
cypress/platform/xss3.html
View File

@ -36,8 +36,8 @@
graph LR graph LR
A --> B A --> B
</pre> </pre>
<script src="./mermaid.js"></script> <script type="module">
<script> import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({
startOnLoad: true, startOnLoad: true,
useMaxWidth: true, useMaxWidth: true,

9
cypress/platform/xss4.html
View File

@ -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);
}; };
@ -95,9 +95,8 @@
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);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = svg;
});
</script> </script>
</body> </body>
</html> </html>

11
cypress/platform/xss5.html
View File

@ -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);
}; };
@ -99,10 +99,9 @@
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>

11
cypress/platform/xss6.html
View File

@ -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);
}; };
@ -97,10 +97,9 @@
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
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>

11
cypress/platform/xss7.html
View File

@ -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);
}; };
@ -99,10 +99,9 @@
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
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>

11
cypress/platform/xss8.html
View File

@ -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);
}; };
@ -98,10 +98,9 @@
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
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>

11
cypress/platform/xss9.html
View File

@ -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);
}; };
@ -98,10 +98,9 @@
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
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>

22
demos/c4context.html
View File

@ -217,8 +217,8 @@
</pre> </pre>
<hr /> <hr />
<script src="./mermaid.js"></script> <script type="module">
<script> import mermaid from './mermaid.esm.mjs';
const ALLOWED_TAGS = [ const ALLOWED_TAGS = [
'a', 'a',
'b', 'b',
@ -273,8 +273,7 @@
}, },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script>
<script>
function testClick(nodeId) { function testClick(nodeId) {
console.log('clicked', nodeId); console.log('clicked', nodeId);
let originalBgColor = document.querySelector('body').style.backgroundColor; let originalBgColor = document.querySelector('body').style.backgroundColor;
@ -283,21 +282,18 @@
document.querySelector('body').style.backgroundColor = originalBgColor; document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100); }, 100);
} }
</script>
<script> const testLineEndings = async (test, input) => {
const testLineEndings = (test, input) => {
try { try {
mermaid.render(test, input, () => { await mermaid.render(test, input);
//no-op
});
} catch (err) { } catch (err) {
console.error('Error in %s:\n\n%s', test, err); console.error('Error in %s:\n\n%s', test, err);
} }
}; };
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend'); await testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend'); await testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend'); await testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script> </script>
</body> </body>
</html> </html>

27
demos/classchart.html
View File

@ -17,10 +17,10 @@
<h1>Class diagram demos</h1> <h1>Class diagram demos</h1>
<pre class="mermaid"> <pre class="mermaid">
--- ---
title: Demo Class Diagram title: Demo Class Diagram
--- ---
classDiagram classDiagram
accTitle: Demo Class Diagram accTitle: Demo Class Diagram
accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra. accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
@ -138,11 +138,24 @@ title: Demo Class Diagram
Pineapple : -int leafCount() Pineapple : -int leafCount()
Pineapple : -int spikeCount() Pineapple : -int spikeCount()
</pre> </pre>
<hr /> <hr />
<script src="./mermaid.js"></script> <pre class="mermaid">
<script> classDiagram
class Person {
+Id : Guid
+FirstName : string
+LastName : string
-privateProperty : string
#ProtectedProperty : string
~InternalProperty : string
~AnotherInternalProperty : List~List~string~~
}
</pre>
<hr />
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({
theme: 'default', theme: 'default',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',

4
demos/dataflowchart.html
View File

@ -34,8 +34,8 @@
noSide[|borders:no| stroke no side ]; noSide[|borders:no| stroke no side ];
</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,

111
demos/er.html
View File

@ -19,47 +19,98 @@
<body> <body>
<pre class="mermaid"> <pre class="mermaid">
---
title: This is a title
---
erDiagram
%% title This is a title
%% accDescription Test a description
--- "Person . CUSTOMER"||--o{ ORDER : places
title: This is a title
---
erDiagram
%% title This is a title
%% accDescription Test a description
"Person . CUSTOMER"||--o{ ORDER : places ORDER ||--|{ "€£LINE_ITEM ¥" : contains
ORDER ||--|{ "€£LINE_ITEM ¥" : contains "Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses
"Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses "Address//StreetAddress::[DELIVERY ADDRESS]" {
int customerID FK
string line1 "this is the first address line comment"
string line2
string city
string region
string state
string(5) postal_code
string country
}
"Address//StreetAddress::[DELIVERY ADDRESS]" { "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
int customerID FK string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
string line1 "this is the first address line comment" }
string line2
string city
string region
string state
string postal_code
string country
}
"a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" { "€£LINE_ITEM ¥" {
string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes" int orderID FK
} int currencyId FK
number price
number quantity
number adjustment
number final_price
}
</pre>
<hr />
"€£LINE_ITEM ¥" { <pre class="mermaid">
int orderID FK erDiagram
int currencyId FK "HOSPITAL" {
number price int id PK
number quantity int doctor_id FK
number adjustment string address UK
number final_price string name
string phone_number
string fax_number
} }
</pre> </pre>
<hr />
<pre class="mermaid">
erDiagram
"HOSPITAL" {
int id PK
int doctor_id PK, FK
string address UK
string name
string phone_number
string fax_number
}
</pre
>
<hr />
<pre class="mermaid">
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber PK
string make
string model
string[] parts
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string driversLicense PK "The license #"
string(99) firstName "Only 99 characters are allowed"
string lastName
string phone UK
int age
}
NAMED-DRIVER {
string carRegistrationNumber PK, FK
string driverLicence PK,FK
}
MANUFACTURER only one to zero or more CAR : makes
</pre>
<script src="./mermaid.js"></script>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({
theme: 'default', theme: 'default',

Some files were not shown because too many files have changed in this diff Show More