GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Merged typescript changes

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-09-05 11:22:17 +02:00
parent 047b7023a2
commit 01106caa59
202 changed files with 8325 additions and 4777 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.commitlintrc.json
View File

@ -1,5 +1,3 @@
{ {
"extends": [ "extends": ["@commitlint/config-conventional"]
"@commitlint/config-conventional" }
]
}

12
.eslintrc.json
View File

@ -5,7 +5,7 @@
"jest/globals": true, "jest/globals": true,
"node": true "node": true
}, },
"parser": "@babel/eslint-parser", "parser": "@typescript-eslint/parser",
"parserOptions": { "parserOptions": {
"ecmaFeatures": { "ecmaFeatures": {
"experimentalObjectRestSpread": true, "experimentalObjectRestSpread": true,
@ -18,9 +18,9 @@
"plugin:jsdoc/recommended", "plugin:jsdoc/recommended",
"plugin:json/recommended", "plugin:json/recommended",
"plugin:markdown/recommended", "plugin:markdown/recommended",
"plugin:prettier/recommended" "prettier"
], ],
"plugins": ["html", "jest", "jsdoc", "json", "prettier"], "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
"rules": { "rules": {
"no-prototype-builtins": "off", "no-prototype-builtins": "off",
"no-unused-vars": "off", "no-unused-vars": "off",
@ -41,12 +41,6 @@
"no-undef": "off", "no-undef": "off",
"jsdoc/require-jsdoc": "off" "jsdoc/require-jsdoc": "off"
} }
},
{
"files": "./**/*.md/*.html",
"rules": {
"prettier/prettier": "off"
}
} }
] ]
} }

18
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@ -4,7 +4,6 @@ about: Create a report to help us improve
title: '' title: ''
labels: 'Status: Triage, Type: Bug / Error' labels: 'Status: Triage, Type: Bug / Error'
assignees: '' assignees: ''
--- ---
**Describe the bug** **Describe the bug**
@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
**To Reproduce** **To Reproduce**
Steps to reproduce the behavior: Steps to reproduce the behavior:
1. Go to '...' 1. Go to '...'
2. Click on '....' 2. Click on '....'
3. Scroll down to '....' 3. Scroll down to '....'
@ -27,15 +27,17 @@ If applicable, add screenshots to help explain your problem.
If applicable, add the code sample or a link to the [live editor](https://mermaid.live). If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
**Desktop (please complete the following information):** **Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari] - OS: [e.g. iOS]
- Version [e.g. 22] - Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):** **Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1] - Device: [e.g. iPhone6]
- Browser [e.g. stock browser, safari] - OS: [e.g. iOS8.1]
- Version [e.g. 22] - Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context** **Additional context**
Add any other context about the problem here. Add any other context about the problem here.

1
.github/ISSUE_TEMPLATE/feature_request.md vendored
View File

@ -4,7 +4,6 @@ about: Suggest an idea for this project
title: '' title: ''
labels: 'Status: Triage, Type: Enhancement' labels: 'Status: Triage, Type: Enhancement'
assignees: '' assignees: ''
--- ---
**Is your feature request related to a problem? Please describe.** **Is your feature request related to a problem? Please describe.**

11
.github/ISSUE_TEMPLATE/question.md vendored
View File

@ -4,12 +4,13 @@ about: Get some help from the community.
title: '' title: ''
labels: 'Help wanted!, Type: Other' labels: 'Help wanted!, Type: Other'
assignees: '' assignees: ''
--- ---
## Help us help you! ## Help us help you!
You want an answer. Here are some ways to get it quicker: You want an answer. Here are some ways to get it quicker:
* Use a clear and concise title.
* Try to pose a clear and concise question. - Use a clear and concise title.
* Include as much, or as little, code as necessary. - Try to pose a clear and concise question.
* Don't be shy to give us some screenshots, if it helps! - Include as much, or as little, code as necessary.
- Don't be shy to give us some screenshots, if it helps!

2
.github/codeql/codeql-config.yml vendored
View File

@ -1,4 +1,4 @@
name: "CodeQL config" name: 'CodeQL config'
paths-ignore: paths-ignore:
- dist - dist
- cypress - cypress

32
.github/dependabot.yml vendored
View File

@ -1,18 +1,18 @@
version: 2 version: 2
updates: updates:
- package-ecosystem: npm - package-ecosystem: npm
open-pull-requests-limit: 10 open-pull-requests-limit: 10
directory: / directory: /
target-branch: develop target-branch: develop
versioning-strategy: increase versioning-strategy: increase
schedule: schedule:
interval: weekly interval: weekly
day: monday day: monday
time: "07:00" time: '07:00'
- package-ecosystem: github-actions - package-ecosystem: github-actions
directory: / directory: /
target-branch: develop target-branch: develop
schedule: schedule:
interval: weekly interval: weekly
day: monday day: monday
time: "07:00" time: '07:00'

10
.github/pull_request_template.md vendored
View File

@ -1,13 +1,17 @@
## :bookmark_tabs: Summary ## :bookmark_tabs: Summary
Brief description about the content of your PR. Brief description about the content of your PR.
Resolves #<your issue id here> Resolves #<your issue id here>
## :straight_ruler: Design Decisions ## :straight_ruler: Design Decisions
Describe the way your implementation works or what design decisions you made if applicable. Describe the way your implementation works or what design decisions you made if applicable.
### :clipboard: Tasks ### :clipboard: Tasks
Make sure you Make sure you
- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
- [ ] :computer: have added unit/e2e tests (if appropriate) - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
- [ ] :bookmark: targeted `develop` branch - [ ] :computer: have added unit/e2e tests (if appropriate)
- [ ] :bookmark: targeted `develop` branch

2
.github/stale.yml vendored
View File

@ -16,4 +16,4 @@ markComment: >
# Comment to post when closing a stale issue. Set to `false` to disable # Comment to post when closing a stale issue. Set to `false` to disable
closeComment: > closeComment: >
This issue has been been automatically closed due to a lack of activity. This issue has been been automatically closed due to a lack of activity.
This is done to maintain a clean list of issues that the community is interested in developing. This is done to maintain a clean list of issues that the community is interested in developing.

40
.github/workflows/build.yml vendored
View File

@ -18,28 +18,28 @@ jobs:
matrix: matrix:
node-version: [16.x] node-version: [16.x]
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v3
- name: Setup Node.js ${{ matrix.node-version }} - name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
cache: yarn cache: yarn
node-version: ${{ matrix.node-version }} node-version: ${{ matrix.node-version }}
- name: Install Yarn - name: Install Yarn
run: npm i yarn --global run: npm i yarn --global
- name: Install Packages - name: Install Packages
run: | run: |
yarn install --frozen-lockfile yarn install --frozen-lockfile
env: env:
CYPRESS_CACHE_FOLDER: .cache/Cypress CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Run Build - name: Run Build
run: yarn build run: yarn build
- name: Upload Build as Artifact - name: Upload Build as Artifact
uses: actions/upload-artifact@v3 uses: actions/upload-artifact@v3
with: with:
name: dist name: dist
path: dist path: dist

18
.github/workflows/checks.yml vendored
View File

@ -14,12 +14,12 @@ jobs:
name: check tests name: check tests
if: github.repository_owner == 'mermaid-js' if: github.repository_owner == 'mermaid-js'
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v2
with: with:
fetch-depth: 0 fetch-depth: 0
- uses: testomatio/check-tests@stable - uses: testomatio/check-tests@stable
with: with:
framework: cypress framework: cypress
tests: "./cypress/e2e/**/**.spec.js" tests: './cypress/e2e/**/**.spec.js'
token: ${{ secrets.GITHUB_TOKEN }} token: ${{ secrets.GITHUB_TOKEN }}
has-tests-label: true has-tests-label: true

61
.github/workflows/codeql.yml vendored
View File

@ -1,12 +1,11 @@
name: 'CodeQL'
name: "CodeQL"
on: on:
push: push:
branches: [ develop ] branches: [develop]
pull_request: pull_request:
# The branches below must be a subset of the branches above # The branches below must be a subset of the branches above
branches: [ develop ] branches: [develop]
types: types:
- opened - opened
- synchronize - synchronize
@ -24,40 +23,40 @@ jobs:
strategy: strategy:
fail-fast: false fail-fast: false
matrix: matrix:
language: [ 'javascript' ] language: ['javascript']
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
steps: steps:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@v3 uses: actions/checkout@v3
# Initializes the CodeQL tools for scanning. # Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL - name: Initialize CodeQL
uses: github/codeql-action/init@v2 uses: github/codeql-action/init@v2
with: with:
config-file: ./.github/codeql/codeql-config.yml config-file: ./.github/codeql/codeql-config.yml
languages: ${{ matrix.language }} languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file. # If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file. # By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file. # Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main # queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java). # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below) # If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild - name: Autobuild
uses: github/codeql-action/autobuild@v2 uses: github/codeql-action/autobuild@v2
# ℹ️ Command-line programs to run using the OS shell. # ℹ️ Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project # and modify them (or add more) to build your code if your project
# uses a compiled language # uses a compiled language
#- run: | #- run: |
# make bootstrap # make bootstrap
# make release # make release
- name: Perform CodeQL Analysis - name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2 uses: github/codeql-action/analyze@v2

10
.github/workflows/issue-triage.yml vendored
View File

@ -1,6 +1,6 @@
name: Apply triage label to new issue name: Apply triage label to new issue
on: on:
issues: issues:
types: [opened] types: [opened]
@ -8,7 +8,7 @@ jobs:
triage: triage:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: andymckay/labeler@1.0.4 - uses: andymckay/labeler@1.0.4
with: with:
repo-token: "${{ secrets.GITHUB_TOKEN }}" repo-token: '${{ secrets.GITHUB_TOKEN }}'
add-labels: "Status: Triage" add-labels: 'Status: Triage'

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

@ -18,22 +18,22 @@ jobs:
matrix: matrix:
node-version: [16.x] node-version: [16.x]
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v3
- name: Setup Node.js ${{ matrix.node-version }} - name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
cache: yarn cache: yarn
node-version: ${{ matrix.node-version }} node-version: ${{ matrix.node-version }}
- name: Install Yarn - name: Install Yarn
run: npm i yarn --global run: npm i yarn --global
- name: Install Packages - name: Install Packages
run: | run: |
yarn install --frozen-lockfile yarn install --frozen-lockfile
env: env:
CYPRESS_CACHE_FOLDER: .cache/Cypress CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Run Linting - name: Run Linting
run: yarn lint run: yarn lint

45
.github/workflows/release-preview-publish.yml vendored
View File

@ -9,29 +9,28 @@ jobs:
publish: publish:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v3
- name: Setup Node.js - name: Setup Node.js
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 16.x node-version: 16.x
- name: Install Yarn - name: Install Yarn
run: npm i yarn --global run: npm i yarn --global
- name: Install Json - name: Install Json
run: npm i json --global run: npm i json --global
- name: Install Packages - name: Install Packages
run: yarn install --frozen-lockfile run: yarn install --frozen-lockfile
- name: Publish
run: |
PREVIEW_VERSION=8
VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
echo $VERSION
npm version --no-git-tag-version --allow-same-version $VERSION
npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
npm set registry https://npm.pkg.github.com/mermaid-js
json -I -f package.json -e 'this.name="@mermaid-js/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
json -I -f package.json -e 'this.repository="git://github.com/mermaid-js/mermaid"' # Repo url needs to have a specific format too
npm publish
- name: Publish
run: |
PREVIEW_VERSION=8
VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
echo $VERSION
npm version --no-git-tag-version --allow-same-version $VERSION
npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
npm set registry https://npm.pkg.github.com/mermaid-js
json -I -f package.json -e 'this.name="@mermaid-js/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
json -I -f package.json -e 'this.repository="git://github.com/mermaid-js/mermaid"' # Repo url needs to have a specific format too
npm publish

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

@ -8,37 +8,37 @@ jobs:
publish: publish:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v3
- uses: fregante/setup-git-user@v1 - uses: fregante/setup-git-user@v1
- name: Setup Node.js - name: Setup Node.js
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 16.x node-version: 16.x
- name: Install Yarn - name: Install Yarn
run: npm i yarn --global run: npm i yarn --global
- name: Install Json - name: Install Json
run: npm i json --global run: npm i json --global
- name: Install Packages - name: Install Packages
run: yarn install --frozen-lockfile run: yarn install --frozen-lockfile
- name: Prepare release - name: Prepare release
run: | run: |
VERSION=${GITHUB_REF:10} VERSION=${GITHUB_REF:10}
echo "Preparing release $VERSION" echo "Preparing release $VERSION"
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 -m "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
- name: Publish - name: Publish
run: | run: |
npm set //registry.npmjs.org/:_authToken $NPM_TOKEN npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
npm publish npm publish
env: env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

32
.github/workflows/test.yml vendored
View File

@ -12,23 +12,23 @@ jobs:
matrix: matrix:
node-version: [16.x] node-version: [16.x]
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v3
- name: Setup Node.js ${{ matrix.node-version }} - name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
cache: yarn cache: yarn
node-version: ${{ matrix.node-version }} node-version: ${{ matrix.node-version }}
- name: Install Yarn - name: Install Yarn
run: npm i yarn --global run: npm i yarn --global
- name: Install Packages - name: Install Packages
run: | run: |
yarn install --frozen-lockfile yarn install --frozen-lockfile
env: env:
CYPRESS_CACHE_FOLDER: .cache/Cypress CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Run Unit Tests - name: Run Unit Tests
run: | run: |
yarn ci --coverage yarn ci --coverage

8
.github/workflows/unlock-reopened-issues.yml vendored
View File

@ -1,6 +1,6 @@
name: Unlock reopened issue name: Unlock reopened issue
on: on:
issues: issues:
types: [reopened] types: [reopened]
@ -8,6 +8,6 @@ jobs:
triage: triage:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: Dunning-Kruger/unlock-issues@v1 - uses: Dunning-Kruger/unlock-issues@v1
with: with:
repo-token: "${{ secrets.GITHUB_TOKEN }}" repo-token: '${{ secrets.GITHUB_TOKEN }}'

6
.lintstagedrc.json
View File

@ -1,5 +1,3 @@
{ {
"*.{js,json,html,md}": [ "*.{ts,js,json,html,md}": ["eslint --fix", "prettier --write"]
"yarn lint:fix" }
]
}

3
.prettierignore Normal file
View File

@ -0,0 +1,3 @@
dist
cypress/platform/xss3.html
.cache

6
.prettierrc.json
View File

@ -1,5 +1,7 @@
{ {
"endOfLine": "auto", "endOfLine": "auto",
"printWidth": 100, "printWidth": 100,
"singleQuote": true "singleQuote": true,
} "useTabs": false,
"tabWidth": 2
}

10
.tern-project
View File

@ -1,12 +1,8 @@
{ {
"ecmaVersion": 6, "ecmaVersion": 6,
"libs": [ "libs": ["browser"],
"browser"
],
"loadEagerly": [], "loadEagerly": [],
"dontLoad": [ "dontLoad": ["node_modules/**"],
"node_modules/**"
],
"plugins": { "plugins": {
"modules": {}, "modules": {},
"es_modules": {}, "es_modules": {},
@ -16,4 +12,4 @@
"strong": true "strong": true
} }
} }
} }

10
.webpack/webpack.config.base.js
View File

@ -1,15 +1,14 @@
import path from 'path'; import path from 'path';
export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath); export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
export default { export default {
amd: false, // https://github.com/lodash/lodash/issues/3052 amd: false, // https://github.com/lodash/lodash/issues/3052
target: 'web', target: 'web',
entry: { entry: {
mermaid: './src/mermaid.js', mermaid: './src/mermaid',
}, },
resolve: { resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'], extensions: ['.wasm', '.mjs', '.js', '.ts', '.json', '.jison'],
fallback: { fallback: {
fs: false, // jison generated code requires 'fs' fs: false, // jison generated code requires 'fs'
path: require.resolve('path-browserify'), path: require.resolve('path-browserify'),
@ -27,6 +26,11 @@ export default {
}, },
module: { module: {
rules: [ rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{ {
test: /\.js$/, test: /\.js$/,
include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')], include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],

2
.webpack/webpack.config.e2e.babel.js
View File

@ -4,7 +4,7 @@ import { merge } from 'webpack-merge';
export default merge(baseConfig, { export default merge(baseConfig, {
mode: 'development', mode: 'development',
entry: { entry: {
mermaid: './src/mermaid.js', mermaid: './src/mermaid',
e2e: './cypress/platform/viewer.js', e2e: './cypress/platform/viewer.js',
'bundle-test': './cypress/platform/bundle-test.js', 'bundle-test': './cypress/platform/bundle-test.js',
}, },

93
CHANGELOG.md
View File

@ -1,5 +1,10 @@
# Change Log # Change Log
// TODO: Populate changelog
- Config has a lot of changes
- globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.
## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD) ## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD)
[Full Changelog](https://github.com/knsv/mermaid/compare/8.2.0...HEAD) [Full Changelog](https://github.com/knsv/mermaid/compare/8.2.0...HEAD)
@ -9,6 +14,7 @@
- Cross-Site Scripting:DOM - Issue [\#847](https://github.com/knsv/mermaid/issues/847) - Cross-Site Scripting:DOM - Issue [\#847](https://github.com/knsv/mermaid/issues/847)
## [8.2.0](https://github.com/knsv/mermaid/tree/8.2.0) (2019-07-17) ## [8.2.0](https://github.com/knsv/mermaid/tree/8.2.0) (2019-07-17)
[Full Changelog](https://github.com/knsv/mermaid/compare/8.1.0...8.2.0) [Full Changelog](https://github.com/knsv/mermaid/compare/8.1.0...8.2.0)
**Closed issues:** **Closed issues:**
@ -26,15 +32,15 @@
- typora [\#823](https://github.com/knsv/mermaid/issues/823) - typora [\#823](https://github.com/knsv/mermaid/issues/823)
- Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815) - Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
- Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814) - Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
- How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813) - How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813)
- How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812) - How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812)
- no triming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809) - no triming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809)
- uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807) - uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807)
- Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806) - Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806)
- how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805) - how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805)
- UOEProcessShow [\#801](https://github.com/knsv/mermaid/issues/801) - UOEProcessShow [\#801](https://github.com/knsv/mermaid/issues/801)
- Why the use of code blocks? [\#799](https://github.com/knsv/mermaid/issues/799) - Why the use of code blocks? [\#799](https://github.com/knsv/mermaid/issues/799)
- fixing class diagram [\#794](https://github.com/knsv/mermaid/issues/794) - fixing class diagram [\#794](https://github.com/knsv/mermaid/issues/794)
- Autonumber support in sequence diagrams [\#782](https://github.com/knsv/mermaid/issues/782) - Autonumber support in sequence diagrams [\#782](https://github.com/knsv/mermaid/issues/782)
- MomentJS dependency [\#781](https://github.com/knsv/mermaid/issues/781) - MomentJS dependency [\#781](https://github.com/knsv/mermaid/issues/781)
- Feature : Can we color code the flow/arrows [\#766](https://github.com/knsv/mermaid/issues/766) - Feature : Can we color code the flow/arrows [\#766](https://github.com/knsv/mermaid/issues/766)
@ -60,6 +66,7 @@
- Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf)) - Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
## [8.1.0](https://github.com/knsv/mermaid/tree/8.1.0) (2019-06-25) ## [8.1.0](https://github.com/knsv/mermaid/tree/8.1.0) (2019-06-25)
[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.5...8.1.0) [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.5...8.1.0)
**Closed issues:** **Closed issues:**
@ -68,9 +75,9 @@
- margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852) - margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
- Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843) - Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
- unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776) - unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
- Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775) - Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
- SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773) - SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
- Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772) - Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
- FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754) - FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
- Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748) - Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
- Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744) - Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
@ -83,18 +90,18 @@
- Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690) - Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
- `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689) - `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
- Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687) - Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
- \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681) - \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
- Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668) - Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
- mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649) - mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647) - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646) - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639) - How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638) - The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634) - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633) - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630) - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
- Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628) - Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
- Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626) - Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
- Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623) - Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
- Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622) - Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
- mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621) - mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
@ -129,7 +136,7 @@
- TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563) - TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
- A little bug [\#557](https://github.com/knsv/mermaid/issues/557) - A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
- Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554) - Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
- classdiagram not works in mermaid live\_editor [\#553](https://github.com/knsv/mermaid/issues/553) - classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
- font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546) - font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
- q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545) - q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
- Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544) - Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
@ -156,7 +163,7 @@
- Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490) - Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
- Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489) - Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
- New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488) - New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
- Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486) - Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
- ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485) - ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
- Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484) - Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
- Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482) - Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
@ -180,7 +187,7 @@
- Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415) - Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
- Live editor sticky sidebar [\#414](https://github.com/knsv/mermaid/issues/414) - Live editor sticky sidebar [\#414](https://github.com/knsv/mermaid/issues/414)
- Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410) - Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
- flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408) - flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407) - Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
- Some chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405) - Some chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
- Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397) - Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
@ -191,7 +198,7 @@
- sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385) - sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
- How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384) - How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
- PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380) - PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
- Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377) - Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
- mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374) - mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
- Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372) - Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
- when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370) - when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
@ -226,7 +233,7 @@
- \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269) - \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269)
- Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268) - Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268)
- npm run watch doesn’t work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266) - npm run watch doesn’t work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
- label out of node [\#262](https://github.com/knsv/mermaid/issues/262) - label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
- IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261) - IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
- mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260) - mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
- Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226) - Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
@ -263,13 +270,14 @@
- Sequence numbers [\#722](https://github.com/knsv/mermaid/pull/722) ([paulbland](https://github.com/paulbland)) - Sequence numbers [\#722](https://github.com/knsv/mermaid/pull/722) ([paulbland](https://github.com/paulbland))
- Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland)) - Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
- Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland)) - Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
- wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz)) - wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
- add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90)) - add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
- SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel)) - SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
- fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil)) - fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
- Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt)) - Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01) ## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5) [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5)
**Closed issues:** **Closed issues:**
@ -293,6 +301,7 @@
- New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216) - New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)
## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04) ## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04)
[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3) [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3)
**Closed issues:** **Closed issues:**
@ -301,6 +310,7 @@
- Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514) - Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)
## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01) ## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01)
[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2) [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2)
**Closed issues:** **Closed issues:**
@ -337,6 +347,7 @@
- add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor)) - add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))
## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29) ## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29)
[Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0) [Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0)
**Closed issues:** **Closed issues:**
@ -345,7 +356,7 @@
- Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451) - Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
- Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443) - Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
- webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440) - webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
- String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432) - String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
- text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422) - text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
- Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402) - Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
- uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401) - uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
@ -372,7 +383,7 @@
- fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev)) - fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
- Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick)) - Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
- use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev)) - use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
- \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev)) - \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
- Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb)) - Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
- Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied)) - Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
- update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance)) - update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
@ -387,6 +398,7 @@
- Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino)) - Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29) ## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0)
**Closed issues:** **Closed issues:**
@ -425,9 +437,11 @@
- Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur)) - Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))
## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27) ## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8)
## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25) ## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7)
**Closed issues:** **Closed issues:**
@ -449,6 +463,7 @@
- Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042)) - Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))
## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22) ## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6)
**Closed issues:** **Closed issues:**
@ -479,6 +494,7 @@
- Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger)) - Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))
## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21) ## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5)
**Closed issues:** **Closed issues:**
@ -490,6 +506,7 @@
- Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong)) - Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))
## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19) ## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4)
**Closed issues:** **Closed issues:**
@ -513,9 +530,11 @@
- Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88)) - Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))
## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04) ## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3)
## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04) ## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2)
**Closed issues:** **Closed issues:**
@ -526,7 +545,7 @@
- node feature request [\#211](https://github.com/knsv/mermaid/issues/211) - node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
- Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208) - Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
- Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207) - Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
- please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203) - please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
- allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201) - allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
- syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200) - syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
- Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196) - Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
@ -555,7 +574,7 @@
- Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195) - Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
- Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193) - Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
- SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180) - SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
- IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179) - IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
- inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127) - inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
- \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74) - \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
- Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34) - Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34)
@ -569,6 +588,7 @@
- Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow)) - Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))
## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21) ## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1) [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1)
**Closed issues:** **Closed issues:**
@ -600,6 +620,7 @@
- Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche)) - Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))
## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07) ## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0) [Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0)
**Closed issues:** **Closed issues:**
@ -634,6 +655,7 @@
- Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl)) - Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))
## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01) ## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0) [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0)
**Closed issues:** **Closed issues:**
@ -646,9 +668,11 @@
- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3) - Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15) ## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5) [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5)
## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15) ## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4) [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4)
**Closed issues:** **Closed issues:**
@ -676,6 +700,7 @@
- Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy)) - Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))
## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25) ## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3) [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3)
**Closed issues:** **Closed issues:**
@ -693,6 +718,7 @@
- fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin)) - fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))
## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11) ## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2) [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2)
**Closed issues:** **Closed issues:**
@ -712,6 +738,7 @@
- Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic)) - Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05) ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1) [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1)
**Closed issues:** **Closed issues:**
@ -732,6 +759,7 @@
- Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki)) - Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))
## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22) ## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0)
**Closed issues:** **Closed issues:**
@ -750,6 +778,7 @@
- Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40)) - Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))
## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15) ## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16)
**Closed issues:** **Closed issues:**
@ -768,11 +797,12 @@
- New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40)) - New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
- Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes)) - Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
- Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino)) - Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
- Included .DS\_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq)) - Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
- Improves readablity discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40)) - Improves readablity discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
- Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv)) - Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05) ## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15)
**Closed issues:** **Closed issues:**
@ -785,13 +815,15 @@
**Merged pull requests:** **Merged pull requests:**
- Include bower\_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv)) - Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
- Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis)) - Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03) ## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14)
## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03) ## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13)
**Closed issues:** **Closed issues:**
@ -805,9 +837,11 @@
- Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7) - Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7)
## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01) ## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10)
## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01) ## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9)
**Closed issues:** **Closed issues:**
@ -820,9 +854,11 @@
- Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige)) - Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))
## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01) ## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8)
## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01) ## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7)
**Closed issues:** **Closed issues:**
@ -830,9 +866,11 @@
- Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4) - Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)
## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27) ## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6)
## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27) ## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5)
**Merged pull requests:** **Merged pull requests:**
@ -840,24 +878,29 @@
- Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes)) - Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))
## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25) ## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4)
## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24) ## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3)
## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22) ## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2)
## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22) ## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1) [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1)
## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22) ## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0) [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0)
## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17) ## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17)
[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1) [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1)
## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16) ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)_
\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*

30
CONTRIBUTING.md
View File

@ -7,6 +7,7 @@ So you want to help? That's great!
Here are a few things to know to get you started on the right path. Here are a few things to know to get you started on the right path.
## Development Installation ## Development Installation
```bash ```bash
git clone git@github.com:mermaid-js/mermaid.git git clone git@github.com:mermaid-js/mermaid.git
cd mermaid cd mermaid
@ -16,11 +17,11 @@ yarn test
## Committing code ## Committing code
We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this: We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have _knsv, Knut Sveidqvist_ as a main reviewer of changes and merging pull requests. More precisely like this:
* Large changes reviewed by knsv or other developer asked to review by knsv - Large changes reviewed by knsv or other developer asked to review by knsv
* Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators - Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
* documentation (updates to the docs folder is also allowed via direct commits) - documentation (updates to the docs folder is also allowed via direct commits)
To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text. To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
@ -93,10 +94,11 @@ The rendering tests are very straightforward to create. There is a function imgS
When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs. When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs.
This is what a rendering test looks like: This is what a rendering test looks like:
```javascript ```javascript
it('should render forks and joins', () => { it('should render forks and joins', () => {
imgSnapshotTest( imgSnapshotTest(
` `
stateDiagram stateDiagram
state fork_state &lt;&lt;fork&gt;&gt; state fork_state &lt;&lt;fork&gt;&gt;
[*] --> fork_state [*] --> fork_state
@ -109,18 +111,17 @@ This is what a rendering test looks like:
join_state --> State4 join_state --> State4
State4 --> [*] State4 --> [*]
`, `,
{ logLevel: 0 } { logLevel: 0 }
); );
cy.get('svg'); cy.get('svg');
}); });
``` ```
### **Add documentation for it** ### **Add documentation for it**
Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature? Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md. The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the \_navbar.md.
The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/ The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
@ -130,5 +131,4 @@ Don't get daunted if it is hard in the beginning. We have a great community with
[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
![A superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif) ![A superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)

44
README.md
View File

@ -6,8 +6,6 @@ English | [简体中文](./README.zh-CN.md)
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!** :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
**Thanks to all involved, people committing pull requests, people answering questions! 🙏** **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a> <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/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>
@ -15,14 +13,15 @@ English | [简体中文](./README.zh-CN.md)
## About ## About
<!-- <Main description> --> <!-- <Main description> -->
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
> Doc-Rot is a Catch-22 that Mermaid helps to solve. > Doc-Rot is a Catch-22 that Mermaid helps to solve.
Diagramming and documentation costs precious developer time and gets outdated quickly. Diagramming and documentation costs precious developer time and gets outdated quickly.
But not having diagrams or docs ruins productivity and hurts organizational learning.<br/> But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
Mermaid addresses this problem by enabling users to create easily modifiable diagrams. It can also be made part of production scripts (and other pieces of code).<br/> Mermaid addresses this problem by enabling users to create easily modifiable diagrams. It can also be made part of production scripts (and other pieces of code).<br/>
<br/> <br/>
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/> Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
[Tutorials](./docs/Tutorials.md) has video tutorials. [Tutorials](./docs/Tutorials.md) has video tutorials.
@ -34,21 +33,18 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md) 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests. In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
<a href="https://applitools.com/"> <a href="https://applitools.com/">
<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg> <svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
</a> </a>
<!-- </Main description> --> <!-- </Main description> -->
## Examples ## Examples
__The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__ **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).**
<!-- <Flowchart> --> <!-- <Flowchart> -->
### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>] ### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>]
@ -61,6 +57,7 @@ B --> C{Decision}
C -->|One| D[Result 1] C -->|One| D[Result 1]
C -->|Two| E[Result 2] C -->|Two| E[Result 2]
``` ```
```mermaid ```mermaid
flowchart LR flowchart LR
@ -70,7 +67,6 @@ C -->|One| D[Result 1]
C -->|Two| E[Result 2] C -->|Two| E[Result 2]
``` ```
### Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>] ### Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>]
``` ```
@ -84,6 +80,7 @@ John-->>Alice: Great!
John->>Bob: How about you? John->>Bob: How about you?
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
``` ```
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
@ -108,6 +105,7 @@ gantt
Parallel 3 : des5, after des3, 1d Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d Parallel 4 : des6, after des4, 1d
``` ```
```mermaid ```mermaid
gantt gantt
section Section section Section
@ -139,6 +137,7 @@ class Class10 {
size() size()
} }
``` ```
```mermaid ```mermaid
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@ -159,6 +158,7 @@ class Class10 {
``` ```
### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>] ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
``` ```
stateDiagram-v2 stateDiagram-v2
[*] --> Still [*] --> Still
@ -168,6 +168,7 @@ Moving --> Still
Moving --> Crash Moving --> Crash
Crash --> [*] Crash --> [*]
``` ```
```mermaid ```mermaid
stateDiagram-v2 stateDiagram-v2
[*] --> Still [*] --> Still
@ -186,6 +187,7 @@ pie
"Cats" : 85.9 "Cats" : 85.9
"Rats" : 15 "Rats" : 15
``` ```
```mermaid ```mermaid
pie pie
"Dogs" : 386 "Dogs" : 386
@ -196,6 +198,7 @@ pie
### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>] ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>] ### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
``` ```
journey journey
title My working day title My working day
@ -207,6 +210,7 @@ pie
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 3: Me Sit down: 3: Me
``` ```
```mermaid ```mermaid
journey journey
title My working day title My working day
@ -255,6 +259,7 @@ BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") Rel(SystemC, customerA, "Sends e-mails to")
``` ```
```mermaid ```mermaid
C4Context C4Context
title System Context diagram for Internet Banking System title System Context diagram for Internet Banking System
@ -316,23 +321,24 @@ Detailed information about how to contribute can be found in the [contribution g
## Security and safe diagrams ## Security and safe diagrams
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes. For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security. As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.* _Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
## Reporting vulnerabilities ## Reporting vulnerabilities
To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue. To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
## Appreciation ## Appreciation
A quick note from Knut Sveidqvist: A quick note from Knut Sveidqvist:
>*Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
>*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.* > _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
>*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
> >
>*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!* > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
--- ---
*Mermaid was created by Knut Sveidqvist for easier documentation.* _Mermaid was created by Knut Sveidqvist for easier documentation._

26
README.zh-CN.md
View File

@ -13,6 +13,7 @@
## 关于 Mermaid ## 关于 Mermaid
<!-- <Main description> --> <!-- <Main description> -->
Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。 Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
> Doc-Rot 是 Mermaid 致力于解决的一个难题。 > Doc-Rot 是 Mermaid 致力于解决的一个难题。
@ -31,7 +32,8 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma
## 示例 ## 示例
__下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。__ **下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。**
<table> <table>
<!-- <Flowchart> --> <!-- <Flowchart> -->
@ -44,6 +46,7 @@ B --> C{Decision}
C -->|One| D[Result 1] C -->|One| D[Result 1]
C -->|Two| E[Result 2] C -->|Two| E[Result 2]
``` ```
```mermaid ```mermaid
flowchart LR flowchart LR
A[Hard] -->|Text| B(Round) A[Hard] -->|Text| B(Round)
@ -65,6 +68,7 @@ John-->>Alice: Great!
John->>Bob: How about you? John->>Bob: How about you?
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
``` ```
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
@ -89,6 +93,7 @@ gantt
Parallel 3 : des5, after des3, 1d Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d Parallel 4 : des6, after des4, 1d
``` ```
```mermaid ```mermaid
gantt gantt
section Section section Section
@ -120,6 +125,7 @@ class Class10 {
size() size()
} }
``` ```
```mermaid ```mermaid
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@ -150,6 +156,7 @@ Moving --> Still
Moving --> Crash Moving --> Crash
Crash --> [*] Crash --> [*]
``` ```
```mermaid ```mermaid
stateDiagram-v2 stateDiagram-v2
[*] --> Still [*] --> Still
@ -168,6 +175,7 @@ pie
"Cats" : 85 "Cats" : 85
"Rats" : 15 "Rats" : 15
``` ```
```mermaid ```mermaid
pie pie
"Dogs" : 386 "Dogs" : 386
@ -175,7 +183,7 @@ pie
"Rats" : 15 "Rats" : 15
``` ```
### Git图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>] ### Git 图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>] ### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
@ -190,6 +198,7 @@ pie
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 3: Me Sit down: 3: Me
``` ```
```mermaid ```mermaid
journey journey
title My working day title My working day
@ -238,6 +247,7 @@ BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") Rel(SystemC, customerA, "Sends e-mails to")
``` ```
```mermaid ```mermaid
C4Context C4Context
title System Context diagram for Internet Banking System title System Context diagram for Internet Banking System
@ -303,20 +313,20 @@ Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。
作为拥有外部用户的网站的额外安全级别，我们很高兴推出一个新的安全级别，其中的图表在沙盒 iframe 中渲染，防止代码中的 javascript 被执行，这是在安全性方面迈出的一大步。 作为拥有外部用户的网站的额外安全级别，我们很高兴推出一个新的安全级别，其中的图表在沙盒 iframe 中渲染，防止代码中的 javascript 被执行，这是在安全性方面迈出的一大步。
*很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力*。 _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力_。
## 报告漏洞 ## 报告漏洞
如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。 如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。
## 鸣谢 ## 鸣谢
来自 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 提供了甘特图渲染的灵感。* > _特别感谢 [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 年四月开始成为了项目的合作者。_
>*感谢 [Tyler Long](https://github.com/tylerlong) 从 2017年四月开始成为了项目的合作者。*
> >
>*感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！* > _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
--- ---
*Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。* _Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。_

3
__mocks__/d3.js vendored
View File

@ -1,4 +1,7 @@
let NewD3 = function () { let NewD3 = function () {
/**
*
*/
function returnThis() { function returnThis() {
return this; return this;
} }

16
cypress/.eslintrc.json
View File

@ -1,10 +1,10 @@
{ {
"env": { "env": {
"cypress/globals": true "cypress/globals": true
}, },
"extends": ["plugin:cypress/recommended"], "extends": ["plugin:cypress/recommended"],
"plugins": ["cypress"], "plugins": ["cypress"],
"rules":{ "rules": {
"cypress/no-unnecessary-waiting": 0 "cypress/no-unnecessary-waiting": 0
} }
} }

2
cypress/integration/rendering/gantt.spec.js
View File

@ -175,7 +175,7 @@ describe('Gantt diagram', () => {
Another task :after a1, 20ms Another task :after a1, 20ms
section Another section Another
Another another task :b1, 20, 12ms Another another task :b1, 20, 12ms
Another another another task :after b1, 24ms Another another another task :after b1, 0.024s
`, `,
{} {}
); );

28
cypress/integration/rendering/gitGraph.spec.js
View File

@ -253,4 +253,32 @@ describe('Git Graph diagram', () => {
{} {}
); );
}); });
it('13: should render a simple gitgraph with three branches,custom merge commit id,tag,type', () => {
imgSnapshotTest(
`gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "customID" tag: "customTag" type: REVERSE
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
`,
{}
);
});
}); });

55
cypress/platform/class.html
View File

@ -1,31 +1,37 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
background: rgb(221, 208, 208); background: rgb(221, 208, 208);
/*background:#333;*/ /*background:#333;*/
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: white;} h1 {
color: white;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{ .customCss > rect,
fill:#FF0000 !important; .customCss {
stroke:#FFFF00 !important; fill: #ff0000 !important;
stroke-width:4px !important; stroke: #ffff00 !important;
} stroke-width: 4px !important;
}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div 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 classDiagram
class BankAccount{ class BankAccount{
@ -36,8 +42,8 @@
} }
cssClass "BankAccount" customCss cssClass "BankAccount" customCss
</div> </pre>
<div 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{ class BankAccount{
@ -47,9 +53,8 @@
+withdrawl(amount) int +withdrawl(amount) int
} }
cssClass "BankAccount" customCss cssClass "BankAccount" customCss
</pre>
</div> <pre class="mermaid2" style="width: 100%; height: 20%">
<div class="mermaid2" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram classDiagram
class BankAccount{ class BankAccount{
@ -71,8 +76,8 @@
} }
callback Class01 "callback" "A Tooltip" callback Class01 "callback" "A Tooltip"
</div> </pre>
<div class="mermaid2" style="width: 100%; height: 20%;"> <pre class="mermaid2" style="width: 100%; height: 20%">
flowchart TB flowchart TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c a_a --> c --> d_d --> c_c
@ -80,9 +85,9 @@
class a_a apa; class a_a apa;
click a_a "https://www.aftonbladet.se" "apa" click a_a "https://www.aftonbladet.se" "apa"
</div> </pre>
<div class="mermaid2" style="width: 100%; height: 20%;"> <pre class="mermaid2" style="width: 100%; height: 20%">
classDiagram-v2 classDiagram-v2
classA -- classB : Inheritance classA -- classB : Inheritance
@ -97,7 +102,7 @@
classK ..> classL : Dependency classK ..> classL : Dependency
classM ..|> classN : Realization classM ..|> classN : Realization
classO .. classP : Link(Dashed) classO .. classP : Link(Dashed)
classA : +attr1 classA : +attr1
classA : attr2 classA : attr2
classA : method1() classA : method1()
&lt;&lt;interface&gt;&gt; classB &lt;&lt;interface&gt;&gt; classB
@ -111,8 +116,8 @@
class Shape class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback" callback Shape "callbackFunction" "This is a tooltip for a callback"
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -134,8 +139,8 @@
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

152
cypress/platform/click_security_loose.html
View File

@ -1,61 +1,60 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback" callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</div> </pre>
</div>
</div> <pre class="mermaid">
<div class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@ -94,77 +93,76 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
</pre>
</div> </div>
</div>
<script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div); <script src="./mermaid.js"></script>
} <script>
function clickByFlowArg(argument) { function clickByFlow(elemName) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-click-2'; div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow: ' + argument; div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByGantt(arg1, arg2, arg3) { function clickByFlowArg(argument) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-click-2';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Flow: ' + argument;
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByClass(arg) { function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-class-click'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: purple; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Class' + (arg ? arg : ''); div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); function clickByClass(arg) {
</script> const div = document.createElement('div');
</body> div.className = 'created-by-class-click';
div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Class' + (arg ? arg : '');
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script>
</body>
</html> </html>

64
cypress/platform/click_security_other.html
View File

@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head> </head>
<body> <body>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function-->2URL 1Function-->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@ -57,27 +57,27 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
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';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow'; div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByGantt(elemName) { function clickByGantt(elemName) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Gant';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

148
cypress/platform/click_security_sandbox.html
View File

@ -1,61 +1,60 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback" callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</div> </pre>
</div>
</div> <pre class="mermaid">
<div class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@ -94,77 +93,76 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
</pre>
</div> </div>
</div> <script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow';
<script src="./mermaid.js"></script> document.getElementsByTagName('body')[0].appendChild(div);
<script> }
function clickByFlow(elemName) { function clickByFlowArg(argument) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-click'; div.className = 'created-by-click-2';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow'; div.innerText = 'Clicked By Flow: ' + argument;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByFlowArg(argument) { function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-click-2'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow: ' + argument; div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByGantt(arg1, arg2, arg3) { function clickByClass(arg) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-class-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Class' + (arg ? arg : '');
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByClass(arg) { mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
const div = document.createElement('div'); </script>
div.className = 'created-by-class-click'; </body>
div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Class' + (arg ? arg : '');
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
</script>
</body>
</html> </html>

70
cypress/platform/click_security_strict.html
View File

@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head> </head>
<body> <body>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function-->2URL 1Function-->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@ -59,30 +59,30 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
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';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow'; div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByGantt(arg1, arg2, arg3) { function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1; if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2; if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3; if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

48
cypress/platform/css1.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
body { body {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid2"> <pre class="mermaid2">
%%{init: { 'themeCSS': '} * { background: lightblue }' } }%% %%{init: { 'themeCSS': '} * { background: lightblue }' } }%%
flowchart TD flowchart TD
a --> b a --> b
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
flowchart LR flowchart LR
subgraph A subgraph A
@ -27,13 +27,13 @@
i -->f i -->f
end end
A --> B A --> B
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
function showFullFirstSquad(elemName) { function showFullFirstSquad(elemName) {
console.log('show ' + elemName); console.log('show ' + elemName);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
</script> </script>
</body> </body>
</html> </html>

193
cypress/platform/current.html
View File

@ -1,19 +1,24 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -22,137 +27,55 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%">
flowchart BT flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
subgraph S1
sub1 -->sub2
end
subgraph S2
sub4
end
S1 --> S2
sub1 --> sub4
</div> </div>
<div class="mermaid2" style="width: 50%; height: 200px;"> <div class="mermaid2" style="width: 50%; height: 200px">
sequenceDiagram sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
Bob->>Alice: I'm short though though
</div> </div>
<div class="mermaid2" style="width: 50%; height: 200px;"> <div class="mermaid2" style="width: 50%; height: 200px">
%%{init: {'securityLevel': 'loose'}}%% %%{init: {'securityLevel': 'loose'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B
graph TD --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free
A[Christmas] -->|Get money| B(Go shopping) second with,<br />or something to get around?}} C -->|One| D[Laptop] C -->|Two| E[iPhone] C
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?}} -->|Three| F[Car] click A "index.html#link-clicked" "link test" click B callback "click
C -->|One| D[Laptop] test" classDef someclass fill:#f96; class A someclass; class C someclass;
C -->|Two| E[iPhone]
C -->|Three| F[Car]
click A "index.html#link-clicked" "link test"
click B callback "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
</div> </div>
<div class="mermaid2" style="width: 50%; height: 200px;"> <div class="mermaid2" style="width: 50%; height: 200px">
flowchart BT subgraph a b1 -- ok --> b2 end a -- sert --> c c --> d b1 --> d a --asd123 -->
d
</div>
<div class="mermaid2" style="width: 50%; height: 20%">
stateDiagram-v2 state A { B1 --> B2: ok } A --> C: sert C --> D B1 --> D A --> D: asd123
</div>
</div>
<div class="mermaid2" style="width: 50%; height: 40%">
%% this does not produce the desired result flowchart 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
</div>
<div class="mermaid" style="width: 50%; height: 40%">
flowchart 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;."}}
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart 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
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
_two end sub_one --> two
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart 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
</div>
flowchart BT <script src="./mermaid.js"></script>
subgraph a
b1 -- ok --> b2
end
a -- sert --> c
c --> d
b1 --> d
a --asd123 --> d
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
stateDiagram-v2
state A {
B1 --> B2: ok
}
A --> C: sert
C --> D
B1 --> D
A --> D: asd123
</div>
</div>
<div class="mermaid2" style="width: 50%; height: 40%;">
%% this does not produce the desired result
flowchart 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
</div>
<div class="mermaid" style="width: 50%; height: 40%;">
flowchart 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;."}}
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart 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
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TD
subgraph one[One]
subgraph sub_one[Sub One]
_sub_one
end
end
subgraph two[Two]
_two
end
sub_one --> two
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart 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
</div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -172,8 +95,8 @@ _one --> b
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

59
cypress/platform/current2.html
View File

@ -1,19 +1,24 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -22,7 +27,7 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid2" style="width: 50%; height: 20%;"> <pre class="mermaid2" style="width: 50%; height: 20%">
flowchart BT flowchart BT
subgraph two subgraph two
b1 b1
@ -32,13 +37,13 @@ flowchart BT
end end
c1 --apa apa apa--> b1 c1 --apa apa apa--> b1
two --> c2 two --> c2
</div> </pre>
<div class="mermaid2" style="width: 50%; height: 200px;"> <pre class="mermaid2" style="width: 50%; height: 200px">
sequenceDiagram sequenceDiagram
Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
</div> </pre>
<div class="mermaid2" style="width: 50%; height: 200px;"> <pre class="mermaid2" style="width: 50%; height: 200px">
%%{init: {'securityLevel': 'loose'}}%% %%{init: {'securityLevel': 'loose'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@ -51,8 +56,8 @@ sequenceDiagram
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid2" style="width: 50%; height: 200px;"> <pre class="mermaid2" style="width: 50%; height: 200px">
flowchart BT flowchart BT
subgraph a subgraph a
@ -62,8 +67,8 @@ sequenceDiagram
c --> d c --> d
b1 --> d b1 --> d
a --asd123 --> d a --asd123 --> d
</div> </pre>
<div class="mermaid2" style="width: 50%; height: 20%;"> <pre class="mermaid2" style="width: 50%; height: 20%">
stateDiagram-v2 stateDiagram-v2
state A { state A {
B1 --> B2: ok B1 --> B2: ok
@ -72,9 +77,9 @@ stateDiagram-v2
C --> D C --> D
B1 --> D B1 --> D
A --> D: asd123 A --> D: asd123
</div> </pre>
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <pre class="mermaid2" style="width: 50%; height: 20%">
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
flowchart LR flowchart LR
a -->b a -->b
@ -84,9 +89,8 @@ flowchart LR
subgraph B subgraph B
b b
end end
</pre>
</div> <pre class="mermaid" style="width: 50%; height: 20%">
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart TB flowchart TB
subgraph A subgraph A
b-->B b-->B
@ -95,16 +99,15 @@ flowchart TB
subgraph B subgraph B
c c
end end
</pre>
</div> <pre class="mermaid2" style="width: 50%; height: 20%">
<div class="mermaid2" style="width: 50%; height: 20%;">
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Note over Alice,Bob: Looks Note over Alice,Bob: Looks
Note over Bob,Alice: Looks back Note over Bob,Alice: Looks back
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -124,8 +127,8 @@ Note over Bob,Alice: Looks back
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

13
cypress/platform/e2e.html
View File

@ -1,11 +1,13 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<!-- <meta charset="iso-8859-15"/> --> <!-- <meta charset="iso-8859-15"/> -->
<script src="/e2e.js"></script> <script src="/e2e.js"></script>
<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=Mansalva&display=swap" rel="stylesheet" /> -->
<link
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet"> href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
/* font-family: 'Mansalva', cursive;*/ /* font-family: 'Mansalva', cursive;*/
@ -28,7 +30,8 @@
svg { svg {
border: 2px solid darkred; border: 2px solid darkred;
} }
.exClass2 > rect, .exClass { .exClass2 > rect,
.exClass {
fill: greenyellow !important; fill: greenyellow !important;
} }
</style> </style>

27
cypress/platform/flow.html
View File

@ -1,34 +1,34 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" <style>
rel="stylesheet" body {
/> font-family: 'trebuchet ms', verdana, arial;
<style>body { }
font-family: 'trebuchet ms', verdana, arial; </style>
}</style>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
subgraph One subgraph One
a1-->a2-->a3 a1-->a2-->a3
end end
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
a_a --> b_b:::apa --> c_c:::apa a_a --> b_b:::apa --> c_c:::apa
classDef apa fill:#f9f,stroke:#333,stroke-width:4px; classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa; class a_a apa;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c a_a --> c --> d_d --> c_c
classDef apa fill:#f9f,stroke:#333,stroke-width:4px; classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa; class a_a apa;
click a_a "http://www.aftonbladet.se" "apa" click a_a "http://www.aftonbladet.se" "apa"
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
@ -41,6 +41,5 @@
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</script>
</body> </body>
</html> </html>

24
cypress/platform/ghsa1.html
View File

@ -1,28 +1,26 @@
<html> <html>
<script> <script>
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%% // %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
</script> </script>
<body> <body>
<div id="target"> <div id="target">
<h1>This element does not belong to the SVG but we can style it</h1> <h1>This element does not belong to the SVG but we can style it</h1>
</div> </div>
<svg id="diagram"> <svg id="diagram"></svg>
</svg>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
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 = mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg; diagram.innerHTML = svg;
</script> </script>
</body> </body>
</html> </html>

24
cypress/platform/ghsa2.html
View File

@ -1,28 +1,26 @@
<html> <html>
<script> <script>
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%% // %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
</script> </script>
<body> <body>
<div id="target"> <div id="target">
<h1>This element does not belong to the SVG but we can style it</h1> <h1>This element does not belong to the SVG but we can style it</h1>
</div> </div>
<svg id="diagram"> <svg id="diagram"></svg>
</svg>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: false, logLevel: 0 }); mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = ` const graph = `
%%{ init: { "fontFamily" : "&125; * { background: red }" } }%% %%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
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 = mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg; diagram.innerHTML = svg;
</script> </script>
</body> </body>
</html> </html>

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

@ -1,31 +1,37 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
background: rgb(221, 208, 208); background: rgb(221, 208, 208);
/*background:#333;*/ /*background:#333;*/
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: white;} h1 {
color: white;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{ .customCss > rect,
fill:#FF0000 !important; .customCss {
stroke:#FFFF00 !important; fill: #ff0000 !important;
stroke-width:4px !important; stroke: #ffff00 !important;
} stroke-width: 4px !important;
}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
gitGraph gitGraph
class BankAccount{ class BankAccount{
@ -35,10 +41,9 @@
+withdrawl(amount) int +withdrawl(amount) int
} }
cssClass "BankAccount" customCss cssClass "BankAccount" customCss
</pre>
</div> <script src="./mermaid.js"></script>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -60,8 +65,8 @@
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

62
cypress/platform/gitgraph.html
View File

@ -1,32 +1,36 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#111; */ /* background:#111; */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
} }
/* h1 { color: white;} */ /* h1 { color: white;} */
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{ .customCss > rect,
fill:#FF0000 !important; .customCss {
stroke:#FFFF00 !important; fill: #ff0000 !important;
stroke-width:4px !important; stroke: #ffff00 !important;
} stroke-width: 4px !important;
}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
%%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": { %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": {
"gitBranchLabel0": "#ff0000", "gitBranchLabel0": "#ff0000",
"gitBranchLabel1": "#00ff00", "gitBranchLabel1": "#00ff00",
@ -50,9 +54,8 @@
commit commit
branch featureA branch featureA
commit commit
</pre>
</div> <pre class="mermaid2" style="width: 100%; height: 20%">
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph gitGraph
commit type:HIGHLIGHT commit type:HIGHLIGHT
branch hotfix branch hotfix
@ -94,17 +97,16 @@
merge main merge main
checkout develop checkout develop
merge release merge release
</pre>
</div> <pre class="mermaid2" style="width: 100%; height: 20%">
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph: gitGraph:
commit commit
commit commit
branch newbranch branch newbranch
commit commit
merge main merge main
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -112,17 +114,17 @@
mermaid.initialize({ mermaid.initialize({
//theme: 'dark', //theme: 'dark',
themeVariables: { themeVariables: {
commitLabelColor: '#9400D3', commitLabelColor: '#9400D3',
commitLabelBackground: '#FFFFFF', commitLabelBackground: '#FFFFFF',
// darkMode: true, // darkMode: true,
// background: '#222', // background: '#222',
// // textColor: 'white', // // textColor: 'white',
// // primaryTextColor: '#f4f4f4', // // primaryTextColor: '#f4f4f4',
// // // nodeBkg: '#ff0000', // // // nodeBkg: '#ff0000',
// // // mainBkg: '#0000ff', // // // mainBkg: '#0000ff',
// // // tertiaryColor: '#ffffcc', // // // tertiaryColor: '#ffffcc',
}, },
// theme: 'forest', // theme: 'forest',
// theme: 'neutral', // theme: 'neutral',
// theme: 'dark', // theme: 'dark',
@ -141,8 +143,8 @@
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

42
cypress/platform/gitgraph2.html
View File

@ -1,32 +1,36 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#111; */ /* background:#111; */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
} }
/* h1 { color: white;} */ /* h1 { color: white;} */
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{ .customCss > rect,
fill:#FF0000 !important; .customCss {
stroke:#FFFF00 !important; fill: #ff0000 !important;
stroke-width:4px !important; stroke: #ffff00 !important;
} stroke-width: 4px !important;
}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid2" style="width: 100%; height: 20%;"> <pre class="mermaid2" style="width: 100%; height: 20%">
gitGraph: gitGraph:
commit "Ashish" commit "Ashish"
branch newbranch branch newbranch
@ -40,9 +44,8 @@
commit commit
branch b2 branch b2
commit commit
</pre>
</div> <pre class="mermaid" style="width: 100%; height: 20%">
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: { "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%% %%{init: { "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%%
gitGraph gitGraph
commit commit
@ -86,17 +89,16 @@
merge APA merge APA
checkout develop checkout develop
merge release merge release
</pre>
</div> <pre class="mermaid2" style="width: 100%; height: 20%">
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph: gitGraph:
commit commit
commit commit
branch newbranch branch newbranch
commit commit
merge main merge main
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -132,8 +134,8 @@
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

33
cypress/platform/huge.html
View File

File diff suppressed because one or more lines are too long

11
cypress/platform/info.html
View File

@ -1,14 +1,12 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid">info</div> <pre class="mermaid">
info
</pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
@ -21,6 +19,5 @@
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</script>
</body> </body>
</html> </html>

110
cypress/platform/interaction.html
View File

@ -1,52 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid2"> <pre id="FirstLine" class="mermaid2">
graph TB graph TB
1Function-->2URL 1Function-->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid2"> <pre id="FirstLine" class="mermaid2">
classDiagram classDiagram
class Test class Test
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
</div> </pre>
</div> </div>
<div class="mermaid2"> <pre class="mermaid2">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@ -85,38 +85,38 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
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';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow'; div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByGantt(arg1, arg2, arg3) { function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1; if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2; if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3; if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByClass() { function clickByClass() {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-class-click'; div.className = 'created-by-class-click';
div.style = 'padding: 20px; background: purple; color: white;'; div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Class'; div.innerText = 'Clicked By Class';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

237
cypress/platform/knsv.html
View File

@ -1,13 +1,19 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@ -18,25 +24,26 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 20px; margin-left: 20px;
} }
h1 { color: grey;} h1 {
.mermaid2,.mermaid3 { color: grey;
}
.mermaid2,
.mermaid3 {
display: none; display: none;
} }
.mermaid {
}
.mermaid svg { .mermaid svg {
border: 1px solid purple; border: 1px solid purple;
/* font-size: 18px !important; */ /* font-size: 18px !important; */
fontFamily: 'courier' fontfamily: 'courier';
} }
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid2" style="width: 50%">
<div class="mermaid2" style="width: 50%;">
flowchart LR flowchart LR
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px; classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px; classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@ -54,8 +61,8 @@ flowchart LR
click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line." click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
O0 -- has type -->O2["Bug"] O0 -- has type -->O2["Bug"]
click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred"; click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
flowchart TD flowchart TD
subgraph test subgraph test
direction TB direction TB
@ -68,116 +75,23 @@ flowchart TD
G --> H G --> H
end end
end end
</div>
<div class="mermaid2" style="width: 50%;">
mindmap
The root
C1
c2
c3
C4
c5
c6
C7
c8
c9
C8
c10
c11
</div>
<div class="mermaid2" style="width: 50%;">
mindmap
root[
The root where the things
hap<br/>
hap<br/>
pen!
]
Child1
</div>
<div class="mermaid2" style="width: 50%;">
mindmap
root))
The root where the things
hap<br/>
hap<br/>
pen!
((
::icon(mdi mdi-alarm)
Child1
child2)
Child2<br/>
The second<br/>
The second<br/>
The second<br/>
The second<br/>
The second<br/>
The second<br/>
The second<br/>
(
Other
Child3
GrandChild1
sc1
sc2
sc3
GrandChild2
%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%%
</div>
<div class="mermaid" style="width: 100%;">
mindmap
root))I am a bang((
::icon(mdi mdi-alarm)
Child1)"Bang"(
::icon(mdi mdi-alarm)
</div>
<div class="mermaid2" style="width: 100%;">
mindmap
root((
The root<br>
where<br>
things<br>
happen!
))
::icon(mdi mdi-numeric-8-circle)
Child2
:::disabled
GrandChild1
GrandChild2
Child3(Child 3 has a long text that wraps to keep the node width)
::icon(mdi mdi-alarm)
GrandChild3
GrandChild4
Child4((Child Num 4<br>with<br>wrap text))
::icon(mdi mdi-alarm)
GrandChild5[With<br>icon<br>one<br>two<br>three]
::icon(mdi mdi-numeric-8-circle)
GrandChild6 with wrapping text
::icon(mdi mdi-numeric-8-circle)
</div> </div>
<div class="mermaid2" style="width: 50%;"> <div class="mermaid" style="width: 50%;">
flowchart TD flowchart TD
id id
</div> </div>
<div class="mermaid2" style="width: 50%;"> <div class="mermaid2" style="width: 50%;">
flowchart LR flowchart LR
a["<strong>Haiya</strong>"]===>b a["<strong>Haiya</strong>"]===>b
</div> </div>
<div class="mermaid2" style="width: 50%;"> <div class="mermaid2" style="width: 50%;">
flowchart TD flowchart TD
</div>
<div class="mermaid2" style="width: 50%;">
pie
accTitle: My Pie Chart Accessibility Title
accDescr: My Pie Chart Accessibility Description
A --> B A --> B
A --> C A --> C
B --> C B --> C
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
flowchart TD flowchart TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@ -190,16 +104,6 @@ flowchart TD
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
gitGraph TB
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
</div> </div>
<div class="mermaid2" style="width: 50%;"> <div class="mermaid2" style="width: 50%;">
sequenceDiagram sequenceDiagram
@ -210,15 +114,15 @@ flowchart TD
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
John-->>Alice: Great! John-->>Alice: Great!
Alice-)John: See you later! Alice-)John: See you later!
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
graph TD graph TD
A -->|000| B A -->|000| B
B -->|111| C B -->|111| C
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red; linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
journey journey
accTitle: My User Journey Diagram accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description accDescr: My User Journey Diagram Description
@ -231,11 +135,11 @@ graph TD
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
info info
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
requirementDiagram requirementDiagram
accTitle: My req Diagram accTitle: My req Diagram
accDescr: My req Diagram Description accDescr: My req Diagram Description
@ -275,9 +179,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</pre>
</div> <pre class="mermaid2" style="width: 100%">
<div class="mermaid2" style="width: 100%;">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -308,24 +211,24 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
stateDiagram stateDiagram
state Active { state Active {
Idle Idle
} }
Inactive --> Idle: ACT Inactive --> Idle: ACT
Active --> Active: LOG Active --> Active: LOG
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
flowchart TB flowchart TB
accTitle: My flowchart accTitle: My flowchart
accDescr: My flowchart Description accDescr: My flowchart Description
subgraph One subgraph One
a1-->a2-->a3 a1-->a2-->a3
end end
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
sequenceDiagram sequenceDiagram
A ->> B: 1 A ->> B: 1
rect rgb(204, 0, 102) rect rgb(204, 0, 102)
@ -335,8 +238,9 @@ stateDiagram
end end
end end
end end
B ->> A: Return</div> B ->> A: Return
<div class="mermaid2" style="width: 100%;"> </pre>
<pre class="mermaid2" style="width: 100%">
classDiagram classDiagram
accTitle: My class diagram accTitle: My class diagram
accDescr: My class diagram Description accDescr: My class diagram Description
@ -353,15 +257,15 @@ class Class10 {
int id int id
size() size()
} }
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
%%{init: {'config': {'wrap': true }}}%% %%{init: {'config': {'wrap': true }}}%%
sequenceDiagram sequenceDiagram
participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
A->>Bob: Hola A->>Bob: Hola
Bob-->A: Pasten ! Bob-->A: Pasten !
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
gitGraph gitGraph
commit id: "ZERO" commit id: "ZERO"
branch develop branch develop
@ -381,15 +285,16 @@ class Class10 {
checkout develop checkout develop
commit id:"C" commit id:"C"
merge featureA merge featureA
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
</div> <div class="mermaid2" style="width: 100%;"> </pre>
<pre class="mermaid2" style="width: 100%">
classDiagram classDiagram
Animal "1" <|-- Duck Animal "1" <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@ -411,8 +316,8 @@ flowchart TD
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
erDiagram erDiagram
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
CAR { CAR {
@ -426,9 +331,9 @@ flowchart TD
string lastName string lastName
int age int age
} }
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -453,17 +358,17 @@ flowchart TD
wrap: true, wrap: true,
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
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';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow'; div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
</script> </script>
</body> </body>
</html> </html>

47
cypress/platform/knsv2.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -41,12 +46,13 @@
<body> <body>
<div>Security check</div> <div>Security check</div>
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
sequenceDiagram sequenceDiagram
Nothing:Valid; Nothing:Valid;
</div> </pre>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -56,16 +62,15 @@ sequenceDiagram
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
try { try {
mermaid.initThrowsErrors(undefined, '#diagram'); mermaid.initThrowsErrors(undefined, '#diagram');
} catch (err) { } catch (err) {
console.log('Caught error:', err); console.log('Caught error:', err);
} }
</script> </script>
</body> </body>
</html> </html>

92
cypress/platform/knsv3.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -28,27 +33,27 @@
<body> <body>
<div>info below</div> <div>info below</div>
<div class=""> <div class="">
<div class="mermaid2" style="width: 100%; height: 400px;"> <pre class="mermaid2" style="width: 100%; height: 400px">
flowchart TB;subgraph "number as labels";1;end; flowchart TB;subgraph "number as labels";1;end;
</div> </pre>
<div class="mermaid2" style="width: 100%; height: 400px;"> <pre class="mermaid2" style="width: 100%; height: 400px">
flowchart TB;a[APA]; flowchart TB;a[APA];
</div> </pre>
<div class="mermaid2" style="margin-left:100px;"> <pre class="mermaid2" style="margin-left: 100px">
graph TD graph TD
work --> sleep work --> sleep
sleep --> work sleep --> work
eat --> sleep eat --> sleep
work --> eat work --> eat
</div> </pre>
<div class="mermaid2" style="margin-left:100px;"> <pre class="mermaid2" style="margin-left: 100px">
flowchart TD flowchart TD
work --> sleep work --> sleep
sleep --> work sleep --> work
eat --> sleep eat --> sleep
work --> eat work --> eat
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
graph TB graph TB
A A
B B
@ -76,8 +81,8 @@ flowchart TD
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
graph TB graph TB
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A A
@ -106,56 +111,56 @@ flowchart TD
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
graph TD graph TD
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
graph TD graph TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart TD flowchart TD
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart TD flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart LR flowchart LR
a["<strong>Haiya</strong>"]---->b a["<strong>Haiya</strong>"]---->b
</div> </pre>
<div class="mermaid" style=""> <pre class="mermaid" style="">
flowchart LR flowchart LR
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
a["<strong>Haiya</strong>"]---->b a["<strong>Haiya</strong>"]---->b
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart TD flowchart TD
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart TD flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
classDiagram-v2 classDiagram-v2
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@ -182,8 +187,8 @@ classDiagram-v2
int id int id
test() test()
} }
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
classDiagram-v2 classDiagram-v2
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01 &lt;&lt;interface&gt;&gt; Class01
@ -209,8 +214,8 @@ classDiagram-v2
int id int id
test() test()
} }
</div> </pre>
<div class="mermaid" style=""> <pre class="mermaid" style="">
flowchart BT flowchart BT
subgraph S1 subgraph S1
sub1 -->sub2 sub1 -->sub2
@ -220,8 +225,9 @@ flowchart BT
end end
S1 --> S2 S1 --> S2
sub1 --> sub4 sub1 --> sub4
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -244,8 +250,8 @@ flowchart BT
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

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

@ -1,30 +1,29 @@
<html> <html>
<head> <head>
<script src="http://localhost:9000/mermaid.js"></script> <script src="http://localhost:9000/mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'base', theme: 'base',
themeVariables: {}, themeVariables: {},
startOnLoad: true, startOnLoad: true,
}); });
</script> </script>
</head> </head>
<body> <body>
<h1>Example</h1> <h1>Example</h1>
<div class="mermaid"> <pre class="mermaid">
%%{init:{"theme":"base", "sequence": {"mirrorActors":false},"themeVariables": {"actorBkg":"red"}}}%% %%{init:{"theme":"base", "sequence": {"mirrorActors":false},"themeVariables": {"actorBkg":"red"}}}%%
sequenceDiagram sequenceDiagram
Bert->>+Ernie: Start looking for the cookie! Bert->>+Ernie: Start looking for the cookie!
Ernie-->>-Bert: Found it! Ernie-->>-Bert: Found it!
Note left of Ernie: Cookies are good Note left of Ernie: Cookies are good
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {}}}%% %%{init:{"theme":"base", "themeVariables": {}}}%%
sequenceDiagram sequenceDiagram
Bert->>+Ernie: Start looking for the cookie! Bert->>+Ernie: Start looking for the cookie!
Ernie-->>-Bert: Found it! Ernie-->>-Bert: Found it!
Note left of Ernie: Cookies are good Note left of Ernie: Cookies are good
</div> </pre>
</body> </body>
</html> </html>

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

@ -1,29 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head> </head>
<body> <body>
<div id="graph"> <div id="graph"></div>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script>mermaid.init({ startOnLoad: false }); <script>
mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' }); mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
try { try {
console.log('rendering'); console.log('rendering');
mermaid.mermaidAPI.render('graphDiv', `>`); mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {} } catch (e) {}
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => { mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html; document.getElementById('graph').innerHTML = html;
}); });
</script> </script>
</body>
</body>
</html> </html>

45
cypress/platform/rerender.html
View File

@ -1,30 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head> </head>
<body> <body>
<div id="graph"> <div id="graph"></div>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script>mermaid.init({ startOnLoad: false }); <script>
mermaid.mermaidAPI.initialize(); mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
rerender('XMas'); rerender('XMas');
function rerender(text) { function rerender(text) {
var graphText = `graph TD var graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`; A[${text}] -->|Get money| B(Go shopping)`;
var graph = mermaid.mermaidAPI.render('id', graphText); var graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph); console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
document.getElementById('graph').innerHTML = graph; document.getElementById('graph').innerHTML = graph;
} }
</script> </script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button> <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
</body>
</body>
</html> </html>

69
cypress/platform/showcase_base.html
View File

@ -1,12 +1,15 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@ -16,8 +19,10 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@ -72,8 +77,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram sequenceDiagram
@ -91,8 +96,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
classDiagram classDiagram
@ -116,8 +121,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -145,8 +150,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@ -173,9 +178,8 @@ gantt
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
SomethingElse --> [*] SomethingElse --> [*]
</pre>
</div> <pre class="mermaid width height2">
<div class="mermaid width height2">
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@ -202,8 +206,8 @@ stateDiagram-v2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*] SomethingElse2 --> [*]
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@ -213,8 +217,8 @@ stateDiagram-v2
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@ -224,8 +228,8 @@ journey
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@ -263,8 +267,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
gitGraph: gitGraph:
commit commit
branch hotfix branch hotfix
@ -307,8 +311,9 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -328,8 +333,8 @@ requirementDiagram
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

68
cypress/platform/showcase_base_dark.html
View File

@ -1,12 +1,15 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@ -17,8 +20,10 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -40,7 +45,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@ -72,8 +77,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@ -89,8 +94,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
classDiagram classDiagram
Animal "1" <|-- Duck Animal "1" <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@ -112,8 +117,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -141,8 +146,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@ -168,9 +173,8 @@ gantt
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
SomethingElse --> [*] SomethingElse --> [*]
</pre>
</div> <pre class="mermaid width height2">
<div class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@ -196,8 +200,8 @@ stateDiagram-v2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*] SomethingElse2 --> [*]
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@ -207,8 +211,8 @@ stateDiagram-v2
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@ -218,8 +222,8 @@ journey
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@ -257,8 +261,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" class="width height"> <pre class="mermaid" class="width height">
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@ -301,7 +305,9 @@ gitGraph
merge main merge main
checkout develop checkout develop
merge release merge release
</div>
</pre>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@ -331,8 +337,8 @@ gitGraph
// securityLevel: 'strict' // securityLevel: 'strict'
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

72
cypress/platform/showcase_dark.html
View File

@ -1,23 +1,28 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
background:#333; background: #333;
font-family: 'Arial'; font-family: 'Arial';
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%% %%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@ -71,8 +76,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@ -88,8 +93,9 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
%%{init: {'theme':'dark'}}%% %%{init: {'theme':'dark'}}%%
classDiagram classDiagram
@ -113,8 +119,9 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div>
<div class="mermaid width height"> </pre>
<pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -142,8 +149,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@ -168,8 +175,8 @@ gantt
Active --> SomethingElse Active --> SomethingElse
SomethingElse --> [*] SomethingElse --> [*]
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@ -194,8 +201,8 @@ gantt
Active --> SomethingElse2 Active --> SomethingElse2
SomethingElse2 --> [*] SomethingElse2 --> [*]
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@ -205,8 +212,8 @@ gantt
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@ -216,8 +223,8 @@ gantt
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@ -255,8 +262,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" class="width height"> <pre class="mermaid" class="width height">
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@ -299,8 +306,9 @@ gitGraph
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -319,8 +327,8 @@ gitGraph
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

68
cypress/platform/showcase_default.html
View File

@ -1,12 +1,15 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@ -16,8 +19,10 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@ -54,8 +59,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@ -70,8 +75,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@ -87,8 +92,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
classDiagram classDiagram
Animal "1" <|-- Duck Animal "1" <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@ -110,8 +115,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -139,8 +144,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@ -164,8 +169,8 @@ gantt
Active --> SomethingElse Active --> SomethingElse
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@ -189,8 +194,8 @@ gantt
Active --> SomethingElse2 Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@ -200,8 +205,8 @@ gantt
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@ -211,8 +216,8 @@ gantt
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@ -250,8 +255,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@ -294,8 +299,9 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -314,8 +320,8 @@ requirementDiagram
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

68
cypress/platform/showcase_forest.html
View File

@ -1,12 +1,15 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@ -16,8 +19,10 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init: {'theme': 'forest'}}%% %%{init: {'theme': 'forest'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@ -71,8 +76,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@ -88,8 +93,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
%%{init: {'theme':'forest'}}%% %%{init: {'theme':'forest'}}%%
classDiagram classDiagram
@ -113,8 +118,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -142,8 +147,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@ -168,8 +173,8 @@ gantt
Active --> SomethingElse Active --> SomethingElse
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
SomethingElse --> [*] SomethingElse --> [*]
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@ -193,8 +198,8 @@ gantt
Active --> SomethingElse2 Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@ -204,8 +209,8 @@ gantt
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@ -215,8 +220,8 @@ gantt
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@ -254,8 +259,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" class="width height"> <pre class="mermaid" class="width height">
gitGraph: gitGraph:
commit commit
branch hotfix branch hotfix
@ -298,8 +303,9 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -318,8 +324,8 @@ requirementDiagram
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

69
cypress/platform/showcase_neutral.html
View File

@ -1,12 +1,15 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@ -16,8 +19,10 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init: {'theme': 'neutral'}}%% %%{init: {'theme': 'neutral'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@ -71,8 +76,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@ -88,8 +93,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
%%{init: {'theme':'neutral'}}%% %%{init: {'theme':'neutral'}}%%
classDiagram classDiagram
@ -113,8 +118,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -142,8 +147,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@ -167,8 +172,8 @@ gantt
Active --> SomethingElse Active --> SomethingElse
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@ -192,8 +197,8 @@ gantt
Active --> SomethingElse2 Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@ -203,8 +208,8 @@ gantt
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@ -214,8 +219,8 @@ gantt
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@ -253,9 +258,9 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" class="width height"> <pre class="mermaid" class="width height">
gitGraph: gitGraph:
commit commit
branch hotfix branch hotfix
@ -298,9 +303,9 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -319,8 +324,8 @@ requirementDiagram
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/subgraph.html
View File

@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
body { body {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
subgraph 1test["id starting with number"] subgraph 1test["id starting with number"]
A A
end end
style 1test fill:#F99,stroke-width:2px,stroke:#F0F style 1test fill:#F99,stroke-width:2px,stroke:#F0F
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
subgraph test["id starting with number"] subgraph test["id starting with number"]
@ -28,18 +28,18 @@
end end
style test fill:#F99,stroke-width:2px,stroke:#F0F style test fill:#F99,stroke-width:2px,stroke:#F0F
classDef someclass fill:#f96; classDef someclass fill:#f96;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
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
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
function showFullFirstSquad(elemName) { function showFullFirstSquad(elemName) {
console.log('show ' + elemName); console.log('show ' + elemName);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

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

@ -1,18 +1,21 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { h1 {
color: #333; color: #333;
font-size: 20px; font-size: 20px;
@ -37,7 +40,7 @@
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="size"> <div class="size">
<h1>Default</h1> <h1>Default</h1>
<div class="mermaid" > <pre class="mermaid">
%%{init: { 'logLevel': 0, 'theme': 'default'} }%% %%{init: { 'logLevel': 0, 'theme': 'default'} }%%
graph TD graph TD
A(Start) --> B[/Another/] A(Start) --> B[/Another/]
@ -46,11 +49,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size"> <div class="size">
<h1>Forest</h1> <h1>Forest</h1>
<div class="mermaid" > <pre class="mermaid">
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%% %%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
graph TD graph TD
A(Start) --> B[/Another/] A(Start) --> B[/Another/]
@ -59,11 +62,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size"> <div class="size">
<h1>Neutral</h1> <h1>Neutral</h1>
<div class="mermaid" > <pre class="mermaid">
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%% %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
graph TD graph TD
A(Start) --> B[/Another/] A(Start) --> B[/Another/]
@ -72,11 +75,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size dark"> <div class="size dark">
<h1>Dark</h1> <h1>Dark</h1>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%% %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
graph TD graph TD
A(Start) --> B[/Another/] A(Start) --> B[/Another/]
@ -85,11 +88,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size"> <div class="size">
<h1>Base with overriding themeVariable</h1> <h1>Base with overriding themeVariable</h1>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%% %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD graph TD
@ -99,11 +102,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size"> <div class="size">
<h1>Nothing set, should be Default</h1> <h1>Nothing set, should be Default</h1>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'logLevel': 1} }%% %%{init: { 'logLevel': 1} }%%
graph TD graph TD
@ -113,11 +116,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -138,8 +141,8 @@
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

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

@ -1,14 +1,10 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<h1>User Journey</h1> <h1>User Journey</h1>
<div class="mermaid"> <pre class="mermaid">
journey journey
title Go shopping title Go shopping
@ -28,7 +24,7 @@
Find keys:4: Mum Find keys:4: Mum
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
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({

52
cypress/platform/vertices.html
View File

@ -1,37 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
body { body {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
info info
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
subgraph one subgraph one
1 1
end end
</div> </pre>
<!-- <div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A --> B --> C A --> B --> C
</div> --> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
function showFullFirstSquad(elemName) { function showFullFirstSquad(elemName) {
console.log('show ' + elemName); console.log('show ' + elemName);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

2
cypress/platform/viewer.js
View File

@ -46,7 +46,7 @@ function merge(current, update) {
// if update[key] exist, and it's not a string or array, // if update[key] exist, and it's not a string or array,
// we go in one level deeper // we go in one level deeper
if ( if (
current.hasOwnProperty(key) && // eslint-disable-line current.hasOwnProperty(key) &&
typeof current[key] === 'object' && typeof current[key] === 'object' &&
!(current[key] instanceof Array) !(current[key] instanceof Array)
) { ) {

25
cypress/platform/webpackUsage.html
View File

@ -1,18 +1,17 @@
<!doctype html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
/* .mermaid { /* .mermaid {
font-family: "trebuchet ms", verdana, arial;; font-family: "trebuchet ms", verdana, arial;;
} */ } */
/* .mermaid { /* .mermaid {
font-family: 'arial'; font-family: 'arial';
} */ } */
</style> </style>
</head> </head>
<body> <body>
<div id="graph-to-be"></div> <div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script> <script src="./bundle-test.js" charset="utf-8"></script>
</body> </body>
</html>
</html>

11
cypress/platform/xss.html
View File

@ -1,16 +1,13 @@
<html> <html>
<head> <head>
<script src="/e2e.js"></script> <script src="/e2e.js"></script>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style> <style>
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;

60
cypress/platform/xss10.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -88,20 +94,20 @@
} }
var diagram = 'classDiagram\n'; var diagram = 'classDiagram\n';
diagram += 'class Square~<img/src'; diagram += 'class Square~<img/src';
diagram += "='1'/onerror=xssAttack()>~{\n"; diagram += "='1'/onerror=xssAttack()>~{\n";
diagram += 'id A\n'; diagram += 'id A\n';
diagram += '}'; diagram += '}';
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

58
cypress/platform/xss11.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,19 +93,19 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += 's2 : This is a state description<img/src'; diagram += 's2 : This is a state description<img/src';
diagram += "='1'/onerror=xssAttack()>"; diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

58
cypress/platform/xss12.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,19 +93,19 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += 's2 : A<img/src'; diagram += 's2 : A<img/src';
diagram += "='1'/onerror=xssAttack()>"; diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

58
cypress/platform/xss13.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,19 +93,19 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += 'if_state --> False: if n < 0<img/src'; diagram += 'if_state --> False: if n < 0<img/src';
diagram += "='1'/onerror=xssAttack()>"; diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

60
cypress/platform/xss14.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -88,20 +94,20 @@
} }
var diagram = 'classDiagram\n'; var diagram = 'classDiagram\n';
diagram += 'classA <-- classB : <ifr'; diagram += 'classA <-- classB : <ifr';
diagram += "ame/srcdoc='<scr"; diagram += "ame/srcdoc='<scr";
diagram += 'ipt>parent.xssAttack(`XSS`)</'; diagram += 'ipt>parent.xssAttack(`XSS`)</';
diagram += "script>'>"; diagram += "script>'>";
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

54
cypress/platform/xss15.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -90,17 +96,17 @@
var diagram = `sequenceDiagram var diagram = `sequenceDiagram
participant John participant John
links John: {"XSS": "javas`; links John: {"XSS": "javas`;
diagram += `cript:alert('AudioParam')"}`; diagram += `cript:alert('AudioParam')"}`;
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss16.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -91,15 +97,15 @@
participant Alice participant Alice
links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`; links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
// // var diagram = "stateDiagram-v2\n"; // // var diagram = "stateDiagram-v2\n";
// // diagram += "<img/src='1'/onerror" // // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss17.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -91,15 +97,15 @@
participant Alice participant Alice
link Alice: Click Me!@javasjavascript:cript:alert("goose")`; link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
// // var diagram = "stateDiagram-v2\n"; // // var diagram = "stateDiagram-v2\n";
// // diagram += "<img/src='1'/onerror" // // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss18.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -90,15 +96,15 @@
var diagram = `classDiagram var diagram = `classDiagram
Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`; Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`;
// // var diagram = "stateDiagram-v2\n"; // // var diagram = "stateDiagram-v2\n";
// // diagram += "<img/src='1'/onerror" // // diagram += "<img/src='1'/onerror"
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss19.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -91,16 +97,16 @@
class Shape{ class Shape{
<<<img/src='1'/`; <<<img/src='1'/`;
// // var diagram = "stateDiagram-v2\n"; // // var diagram = "stateDiagram-v2\n";
diagram += `onerror=xssAttack()>>> diagram += `onerror=xssAttack()>>>
}`; }`;
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

23
cypress/platform/xss2.html
View File

@ -1,15 +1,12 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style> <style>
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -33,24 +30,24 @@
</script> </script>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%% %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
graph LR graph LR
A --> B A --> B
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%% %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%% %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
graph LR graph LR
A --> B A --> B
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%% %%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
%%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%% %%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
sequenceDiagram sequenceDiagram
Alice->>Bob: Hi Bob Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice Bob->>Alice: Hi Alice
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({

54
cypress/platform/xss20.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,18 +93,18 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
// var diagram = ` graph TD // var diagram = ` graph TD
// A --> B["&lt;a href='javasc`; // A --> B["&lt;a href='javasc`;
// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`; // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
var diagram = ` graph TD var diagram = ` graph TD
A --> B["<a href='javasc`; 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) => { mermaid.render('diagram', diagram, (res) => {
// console.log(res); // console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

54
cypress/platform/xss21.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,18 +93,18 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
// var diagram = ` graph TD // var diagram = ` graph TD
// A --> B["&lt;a href='javasc`; // A --> B["&lt;a href='javasc`;
// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`; // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
var diagram = ` graph TD var 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

24
cypress/platform/xss22.html
View File

@ -1,16 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
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;"]
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script>mermaid.initialize({ startOnLoad: true }); <script>
</script> mermaid.initialize({ startOnLoad: true });
</body> </script>
</html> </body>
</html>

16
cypress/platform/xss3.html
View File

@ -1,15 +1,12 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style> <style>
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -33,11 +30,12 @@
</script> </script>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
<!-- prettier-ignore -->
%%{init: { 'fontFamily': '\"></style><img src=x onerror=xssAttack()>'} }%% %%{init: { 'fontFamily': '\"></style><img src=x onerror=xssAttack()>'} }%%
graph LR graph LR
A --> B A --> B
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({

57
cypress/platform/xss4.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: false, htmlLabels: false,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,23 +82,22 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n'; var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
diagram += 'flowchart\n'; diagram += 'flowchart\n';
diagram += 'A["<ifra'; diagram += 'A["<ifra';
diagram += "me srcdoc='<scrip"; diagram += "me srcdoc='<scrip";
diagram += 't src=http://localhost:9000/exploit.js>'; diagram += 't src=http://localhost:9000/exploit.js>';
diagram += '</scr'; diagram += '</scr';
diagram += 'ipt>\'></iframe>"]'; diagram += 'ipt>\'></iframe>"]';
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss5.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,16 +93,16 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'graph LR\n'; var diagram = 'graph LR\n';
diagram += 'B-->D("<img onerror=location=`java'; diagram += 'B-->D("<img onerror=location=`java';
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n'; diagram += 'script\x3a;xssAttack\u0028\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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

50
cypress/platform/xss6.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,14 +93,14 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'graph LR\n'; var diagram = 'graph LR\n';
diagram += 'A(<img/src/onerror=xssAttack`1`>)'; diagram += 'A(<img/src/onerror=xssAttack`1`>)';
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

54
cypress/platform/xss7.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,16 +93,16 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'graph LR\n'; var diagram = 'graph LR\n';
diagram += " B(<a href='<"; diagram += " B(<a href='<";
diagram += 'script></'; diagram += 'script></';
diagram += "script>Javascript:xssAttack`1`'>Click)"; diagram += "script>Javascript:xssAttack`1`'>Click)";
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss8.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,15 +93,15 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += "<img/src='1'/onerror=xssAttack()> --> B"; diagram += "<img/src='1'/onerror=xssAttack()> --> B";
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss9.html
View File

@ -1,20 +1,25 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@ -87,15 +93,15 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += "<img/src='1'/onerror=xssAttack()> --> B"; diagram += "<img/src='1'/onerror=xssAttack()> --> B";
// 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) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

2
cypress/support/eyes-index.d.ts vendored
View File

@ -1 +1 @@
import "@applitools/eyes-cypress" import '@applitools/eyes-cypress';

65
demos/classchart.html
View File

@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
classDiagram classDiagram
title Animal Diagram title Animal Diagram
accDescription The animal class diagram accDescription The animal class diagram
@ -41,22 +38,20 @@
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body>
</body> </html>
</html>

70
demos/dataflowchart.html
View File

@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<h2>Data Flow Diagram Example</h2> <h2>Data Flow Diagram Example</h2>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer]; DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
</div> </pre>
<h2>Borders Example</h2> <h2>Borders Example</h2>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
allSides[ stroke all sides ]; allSides[ stroke all sides ];
allSides2[|borders:ltrb| stroke all sides ]; allSides2[|borders:ltrb| stroke all sides ];
@ -28,26 +28,26 @@
ltSides[|borders:lt| stroke left and top sides ]; ltSides[|borders:lt| stroke left and top sides ];
lrSides[|borders:lr| stroke left and right sides ]; lrSides[|borders:lr| stroke left and right sides ];
noSide[|borders:no| stroke no side ]; noSide[|borders:no| stroke no side ];
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
}); });
</script> </script>
<script> <script>
function testClick(nodeId) { function testClick(nodeId) {
console.log('clicked', nodeId); console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor; var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow'; document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () { setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor; document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100); }, 100);
} }
</script> </script>
</body> </body>
</html> </html>

65
demos/er.html
View File

@ -1,45 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
erDiagram erDiagram
title This is a title title This is a title
accDescription Test a description accDescription Test a description
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body>
</body> </html>
</html>

366
demos/flowchart.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Flowchart Test Page</title> <title>Mermaid Quick Flowchart Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Comparison "graph vs. flowchart"</h1> <h1>Comparison "graph vs. flowchart"</h1>
<h2>Sample 1</h2> <h2>Sample 1</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@ -113,10 +113,10 @@
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4; sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@ -212,13 +212,13 @@
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4; sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</div> </pre>
<hr/> <hr />
<h2>Sample 2</h2> <h2>Sample 2</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
title What to buy title What to buy
accDescription Options of what to buy with Christmas money accDescription Options of what to buy with Christmas money
@ -227,10 +227,10 @@
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
title What to buy title What to buy
accDescription Options of what to buy with Christmas money accDescription Options of what to buy with Christmas money
@ -239,13 +239,13 @@
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<hr/> <hr />
<h2>Sample 3</h2> <h2>Sample 3</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[/Christmas\] A[/Christmas\]
A -->|Get money| B[\Go shopping/] A -->|Get money| B[\Go shopping/]
@ -253,10 +253,10 @@
C -->|One| D[/Laptop/] C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
A -->|Get money| B[\Go shopping/] A -->|Get money| B[\Go shopping/]
@ -264,13 +264,13 @@
C -->|One| D[/Laptop/] C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<hr/> <hr />
<h2>Sample 4</h2> <h2>Sample 4</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@ -292,10 +292,10 @@
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits) 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@ -317,13 +317,13 @@
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits) 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</div> </pre>
<hr/> <hr />
<h2>Sample 5</h2> <h2>Sample 5</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment") 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1") 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@ -387,10 +387,10 @@
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment") 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1") 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@ -454,32 +454,32 @@
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</div> </pre>
<hr/> <hr />
<h2>Sample 6</h2> <h2>Sample 6</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
subgraph One subgraph One
a1-->a2 a1-->a2
end end
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
subgraph One subgraph One
a1-->a2 a1-->a2
end end
</div> </pre>
<hr/> <hr />
<h2>Sample 7</h2> <h2>Sample 7</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
A A
B B
@ -507,10 +507,10 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
A A
B B
@ -538,13 +538,13 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </pre>
<hr/> <hr />
<h2>Sample 8</h2> <h2>Sample 8</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check] 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check] f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@ -558,10 +558,10 @@
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check] 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check] f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@ -575,13 +575,13 @@
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</div> </pre>
<hr/> <hr />
<h2>Sample 9</h2> <h2>Sample 9</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|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?}} 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?}}
@ -593,10 +593,10 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|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?}} 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?}}
@ -608,13 +608,13 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<hr/> <hr />
<h2>Sample 10</h2> <h2>Sample 10</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@ -627,10 +627,10 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@ -643,13 +643,13 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<hr/> <hr />
<h2>Sample 11</h2> <h2>Sample 11</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[[subroutine shape test]] A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]] A -->|Get money| B[[Go shopping]]
@ -662,10 +662,10 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A[[subroutine shape test]] A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]] A -->|Get money| B[[Go shopping]]
@ -678,13 +678,13 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<hr/> <hr />
<h2>Sample 12</h2> <h2>Sample 12</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[(cylindrical<br />shape<br />test)] A[(cylindrical<br />shape<br />test)]
A -->|Get money| B1[(Go shopping 1)] A -->|Get money| B1[(Go shopping 1)]
@ -701,10 +701,10 @@
click B testClick "click test" click B testClick "click test"
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A[(cylindrical<br />shape<br />test)] A[(cylindrical<br />shape<br />test)]
A -->|Get money| B1[(Go shopping 1)] A -->|Get money| B1[(Go shopping 1)]
@ -721,13 +721,13 @@
click B testClick "click test" click B testClick "click test"
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</div> </pre>
<hr/> <hr />
<h2>Sample 13</h2> <h2>Sample 13</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line) A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line) C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
@ -738,10 +738,10 @@
linkStyle 0 stroke:DarkGray,stroke-width:2px linkStyle 0 stroke:DarkGray,stroke-width:2px
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line) A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line) C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
@ -752,36 +752,36 @@
linkStyle 0 stroke:DarkGray,stroke-width:2px linkStyle 0 stroke:DarkGray,stroke-width:2px
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</div> </pre>
<hr/> <hr />
<h2>Sample 14</h2> <h2>Sample 14</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A(( )) -->|step 1| B(( )) A(( )) -->|step 1| B(( ))
B(( )) -->|step 2| C(( )) B(( )) -->|step 2| C(( ))
C(( )) -->|step 3| D(( )) C(( )) -->|step 3| D(( ))
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A(( )) -->|step 1| B(( )) A(( )) -->|step 1| B(( ))
B(( )) -->|step 2| C(( )) B(( )) -->|step 2| C(( ))
C(( )) -->|step 3| D(( )) C(( )) -->|step 3| D(( ))
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</div> </pre>
<hr/> <hr />
<h2>Sample 15</h2> <h2>Sample 15</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
TITLE["Link Click Events<br>(click the nodes below)"] TITLE["Link Click Events<br>(click the nodes below)"]
A["link test (open in same tab)"] A["link test (open in same tab)"]
@ -797,10 +797,10 @@
click D "mailto:user@user.user" "mailto test" click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
TITLE["Link Click Events<br>(click the nodes below)"] TITLE["Link Click Events<br>(click the nodes below)"]
A["link test (open in same tab)"] A["link test (open in same tab)"]
@ -816,13 +816,13 @@
click D "mailto:user@user.user" "mailto test" click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</div> </pre>
<hr/> <hr />
<h2>Sample 16</h2> <h2>Sample 16</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[red<br>text] -->|red<br>text| B(blue<br>text) A[red<br>text] -->|red<br>text| B(blue<br>text)
C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text} C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
@ -836,10 +836,10 @@
style D stroke:#0000ff,fill:#ccccff,color:#0000ff style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "flowchart.html#link-clicked" "link test" click B "flowchart.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A[red<br>text] -->|red<br>text| B(blue<br>text) A[red<br>text] -->|red<br>text| B(blue<br>text)
C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text} C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
@ -853,13 +853,13 @@
style D stroke:#0000ff,fill:#ccccff,color:#0000ff style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "flowchart.html#link-clicked" "link test" click B "flowchart.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</div> </pre>
<hr/> <hr />
<h2>Sample 17</h2> <h2>Sample 17</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[myClass1] --> B[default] & C[default] A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2] B[default] & C[default] --> D[myClass2]
@ -869,10 +869,10 @@
classDef myClass2 stroke:#0000ff,fill:#ccccff classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
A[myClass1] --> B[default] & C[default] A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2] B[default] & C[default] --> D[myClass2]
@ -882,13 +882,13 @@
classDef myClass2 stroke:#0000ff,fill:#ccccff classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</div> </pre>
<hr/> <hr />
<h2>Sample 18</h2> <h2>Sample 18</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A1[red text] -->|default style| A2[blue text] A1[red text] -->|default style| A2[blue text]
B1(red text) -->|default style| B2(blue text) B1(red text) -->|default style| B2(blue text)
@ -933,10 +933,10 @@
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A1[red text] <-->|default style| A2[blue text] A1[red text] <-->|default style| A2[blue text]
B1(red text) <-->|default style| B2(blue text) B1(red text) <-->|default style| B2(blue text)
@ -981,13 +981,13 @@
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</div> </pre>
<hr/> <hr />
<h2>Sample 19</h2> <h2>Sample 19</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
A1[red text] -->|default style| A2[blue text] A1[red text] -->|default style| A2[blue text]
B1(red text) -->|default style| B2(blue text) B1(red text) -->|default style| B2(blue text)
@ -1032,10 +1032,10 @@
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
A1[red text] <-->|default style| A2[blue text] A1[red text] <-->|default style| A2[blue text]
B1(red text) <-->|default style| B2(blue text) B1(red text) <-->|default style| B2(blue text)
@ -1083,30 +1083,30 @@
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</div> </pre>
<hr/> <hr />
<h1 id="link-clicked">Anchor for "link-clicked" test</h1> <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
}); });
</script> </script>
<script> <script>
function testClick(nodeId) { function testClick(nodeId) {
console.log('clicked', nodeId); console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor; var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow'; document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () { setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor; document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100); }, 100);
} }
</script> </script>
</body> </body>
</html> </html>

51
demos/gantt.html
View File

@ -1,22 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <!-- accDescription Tasks for Q4 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <pre class="mermaid">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<!-- accDescription Tasks for Q4 -->
<div class="mermaid">
gantt gantt
title A Gantt Diagram title A Gantt Diagram
accDescription Remaining Q4 Tasks accDescription Remaining Q4 Tasks
@ -27,17 +25,18 @@ gantt
section Another section Another
Task in sec :2014-01-12 , 12d Task in sec :2014-01-12 , 12d
another task : 24d another task : 24d
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',
gantt: { axisFormat: '%m/%d/%Y' },
});
</script>
</body> </pre
>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',
gantt: { axisFormat: '%m/%d/%Y' },
});
</script>
</body>
</html> </html>

407
demos/index.html
View File

@ -1,27 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
info info
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
C4Context C4Context
title System Context diagram for Internet Banking System title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") { Enterprise_Boundary(b0, "BankBoundary0") {
@ -64,9 +63,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
C4Container C4Container
title Container diagram for Internet Banking System title Container diagram for Internet Banking System
@ -102,12 +101,10 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP") Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60") UpdateRelStyle(backend_api, email_system, $offsetY="-60")
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
</pre>
<pre class="mermaid">
</div>
<div class="mermaid">
C4Component C4Component
title Component diagram for Internet Banking System - API Application title Component diagram for Internet Banking System - API Application
@ -144,10 +141,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10") UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40") UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40") UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
</pre>
</div> <pre class="mermaid">
<div class="mermaid">
C4Dynamic C4Dynamic
title Dynamic diagram for Internet Banking System - API Application title Dynamic diagram for Internet Banking System - API Application
@ -164,9 +160,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40") UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60") UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10") UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
C4Deployment C4Deployment
title Deployment Diagram for Internet Banking System - Live title Deployment Diagram for Internet Banking System - Live
@ -215,11 +211,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5") UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20") UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
UpdateRelStyle(db, db2, $offsetY="-10") UpdateRelStyle(db, db2, $offsetY="-10")
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
pie pie
title Key elements in Product X title Key elements in Product X
accDescription This is a pie chart showing the key elements in Product X. accDescription This is a pie chart showing the key elements in Product X.
@ -227,9 +223,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
"Potassium" : 50.05 "Potassium" : 50.05
"Magnesium" : 10.01 "Magnesium" : 10.01
"Iron" : 5 "Iron" : 5
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Airworks roadmap title Airworks roadmap
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@ -244,8 +240,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
section Airworks 3.4.2 section Airworks 3.4.2
开发 :a, 2021-10-09, 4d 开发 :a, 2021-10-09, 4d
测试 :after a, 4d 测试 :after a, 4d
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Exclusive end dates (Manual date should end on 3d) title Exclusive end dates (Manual date should end on 3d)
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@ -253,8 +249,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
section Section1 section Section1
2 Days: 1, 2019-01-01,2d 2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03 Manual Date: 2, 2019-01-01,2019-01-03
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Inclusive end dates (Manual date should end on 4th) title Inclusive end dates (Manual date should end on 4th)
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@ -263,8 +259,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
section Section1 section Section1
2 Days: 1, 2019-01-01,2d 2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03 Manual Date: 2, 2019-01-01,2019-01-03
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Hide today marker (vertical line should not be visible) title Hide today marker (vertical line should not be visible)
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@ -272,8 +268,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
todayMarker off todayMarker off
section Section1 section Section1
Today: 1, -1h Today: 1, -1h
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue) title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@ -281,11 +277,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5 todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1 section Section1
Today: 1, -1h Today: 1, -1h
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@ -381,16 +377,16 @@ Enterprise_Boundary(b0, "BankBoundary0") {
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4; sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss} B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[/Christmas\] A[/Christmas\]
A -->|Get money| B[\Go shopping/] A -->|Get money| B[\Go shopping/]
@ -398,8 +394,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
C -->|One| D[/Laptop/] C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@ -421,8 +417,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits) 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment") 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1") 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@ -486,14 +482,14 @@ Enterprise_Boundary(b0, "BankBoundary0") {
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
subgraph One subgraph One
a1-->a2 a1-->a2
end end
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
A A
B B
@ -521,8 +517,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check] 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check] f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@ -536,8 +532,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|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?}} 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?}}
@ -549,8 +545,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@ -563,8 +559,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[[subroutine shape test]] A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]] A -->|Get money| B[[Go shopping]]
@ -577,8 +573,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[(cylindrical<br />shape<br />test)] A[(cylindrical<br />shape<br />test)]
A -->|Get money| B1[(Go shopping 1)] A -->|Get money| B1[(Go shopping 1)]
@ -595,8 +591,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
click B testClick "click test" click B testClick "click test"
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line) A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line) C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line)
@ -607,16 +603,16 @@ Enterprise_Boundary(b0, "BankBoundary0") {
linkStyle 0 stroke:DarkGray,stroke-width:2px linkStyle 0 stroke:DarkGray,stroke-width:2px
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A(( )) -->|step 1| B(( )) A(( )) -->|step 1| B(( ))
B(( )) -->|step 2| C(( )) B(( )) -->|step 2| C(( ))
C(( )) -->|step 3| D(( )) C(( )) -->|step 3| D(( ))
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
TITLE["Link Click Events<br>(click the nodes below)"] TITLE["Link Click Events<br>(click the nodes below)"]
A["link test (open in same tab)"] A["link test (open in same tab)"]
@ -632,9 +628,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
click D "mailto:user@user.user" "mailto test" click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[red<br>text] -->|red<br>text| B(blue<br>text) A[red<br>text] -->|red<br>text| B(blue<br>text)
C[/red<br />text/] -->|blue<br />text| D{blue<br />text} C[/red<br />text/] -->|blue<br />text| D{blue<br />text}
@ -648,8 +644,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
style D stroke:#0000ff,fill:#ccccff,color:#0000ff style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "index.html#link-clicked" "link test" click B "index.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[myClass1] --> B[default] & C[default] A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2] B[default] & C[default] --> D[myClass2]
@ -659,11 +655,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
classDef myClass2 stroke:#0000ff,fill:#ccccff classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
accDescription Hello friends accDescription Hello friends
participant Alice participant Alice
@ -696,8 +692,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
and and
Alice -->> John: Parallel message 2 Alice -->> John: Parallel message 2
end end
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
participant 1 as multiline<br>using #lt;br#gt; participant 1 as multiline<br>using #lt;br#gt;
participant 2 as multiline<br />using #lt;br/#gt; participant 2 as multiline<br />using #lt;br/#gt;
@ -711,8 +707,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
note right of 4: multiline<br />using #lt;br /#gt; note right of 4: multiline<br />using #lt;br /#gt;
4->>1: multiline<br />using #lt;br /#gt; 4->>1: multiline<br />using #lt;br /#gt;
note right of 1: multiline<br />using #lt;br /#gt; note right of 1: multiline<br />using #lt;br /#gt;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
autonumber autonumber
Alice->>John: Hello John,<br>how are you? Alice->>John: Hello John,<br>how are you?
@ -721,11 +717,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
John-->>Alice: Hi Alice,<br />I can hear you! John-->>Alice: Hi Alice,<br />I can hear you!
autonumber off autonumber off
John-->>Alice: I feel great! John-->>Alice: I feel great!
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@ -762,8 +758,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@ -793,11 +789,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Describe gantt syntax : after doc1, 3d Describe gantt syntax : after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
gitGraph: gitGraph:
options options
{ {
@ -815,11 +811,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
commit commit
commit commit
merge newbranch merge newbranch
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@ -841,9 +837,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
int id int id
size() size()
} }
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
class Class01~T~ class Class01~T~
Class01 : #size() Class01 : #size()
@ -854,9 +850,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
int id int id
size() size()
} }
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Class01~T~ <|-- AveryLongClass : Cool Class01~T~ <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01 &lt;&lt;interface&gt;&gt; Class01
@ -877,22 +873,22 @@ Enterprise_Boundary(b0, "BankBoundary0") {
int id int id
size() size()
} }
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Interface1 ()-- Interface1Impl Interface1 ()-- Interface1Impl
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
direction LR direction LR
Animal ()-- Dog Animal ()-- Dog
Dog : bark() Dog : bark()
Dog : species() Dog : species()
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
direction RL direction RL
Fruit ()-- Apple Fruit ()-- Apple
@ -902,25 +898,25 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Pineapple : color() Pineapple : color()
Pineapple : -int leafCount() Pineapple : -int leafCount()
Pineapple : -int spikeCount() Pineapple : -int spikeCount()
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
accDescription This is a state diagram showing one state accDescription This is a state diagram showing one state
State1 State1
</div> </pre>
<hr> <hr />
<div class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
[*] --> First [*] --> First
state First { state First {
[*] --> second [*] --> second
second --> [*] second --> [*]
} }
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
State1: The state with a note State1: The state with a note
note right of State1 note right of State1
@ -929,18 +925,18 @@ Enterprise_Boundary(b0, "BankBoundary0") {
end note end note
State1 --> State2 State1 --> State2
note left of State2 : This is the note to the left. note left of State2 : This is the note to the left.
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
State1 State1
note right of State1 note right of State1
Line1<br>Line2<br />Line3<br />Line4<br />Line5 Line1<br>Line2<br />Line3<br />Line4<br />Line5
end note end note
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
requirementDiagram requirementDiagram
requirement An Example { requirement An Example {
@ -1007,96 +1003,95 @@ Enterprise_Boundary(b0, "BankBoundary0") {
test_req4 - derives -> test_req5 test_req4 - derives -> test_req5
test_req5 - refines -> test_req6 test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5 test_entity3 - verifies -> test_req5
An Example <- copies - test_entity2 </div> An Example <- copies - test_entity2
</div> </pre>
<h1 id="link-clicked">Anchor for "link-clicked" test</h1> <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
const ALLOWED_TAGS = [ const ALLOWED_TAGS = [
'a', 'a',
'b', 'b',
'blockquote', 'blockquote',
'br', 'br',
'dd', 'dd',
'div', 'div',
'dl', 'dl',
'dt', 'dt',
'em', 'em',
'foreignObject', 'foreignObject',
'h1', 'h1',
'h2', 'h2',
'h3', 'h3',
'h4', 'h4',
'h5', 'h5',
'h6', 'h6',
'h7', 'h7',
'h8', 'h8',
'hr', 'hr',
'i', 'i',
'li', 'li',
'ul', 'ul',
'ol', 'ol',
'p', 'p',
'pre', 'pre',
'span', 'span',
'strike', 'strike',
'strong', 'strong',
'table', 'table',
'tbody', 'tbody',
'td', 'td',
'tfoot', 'tfoot',
'th', 'th',
'thead', 'thead',
'tr', 'tr',
]; ];
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
dompurifyConfig: { dompurifyConfig: {
USE_PROFILES: { USE_PROFILES: {
svg: true, svg: true,
},
ADD_TAGS: ALLOWED_TAGS,
ADD_ATTR: ['transform-origin'],
}, },
ADD_TAGS: ALLOWED_TAGS, // sequenceDiagram: { actorMargin: 300 } // deprecated
ADD_ATTR: ['transform-origin'], });
}, </script>
// sequenceDiagram: { actorMargin: 300 } // deprecated <script>
}); function ganttTestClick(a, b, c) {
</script> console.log('a:', a);
<script> console.log('b:', b);
function ganttTestClick(a, b, c) { console.log('c:', c);
console.log('a:', a);
console.log('b:', b);
console.log('c:', c);
}
function testClick(nodeId) {
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
try {
mermaid.render(test, input, () => {});
} catch (err) {
console.error('Error in %s:\n\n%s', test, err);
} }
}; function testClick(nodeId) {
console.log('clicked', nodeId);
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend'); var originalBgColor = document.querySelector('body').style.backgroundColor;
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend'); document.querySelector('body').style.backgroundColor = 'yellow';
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend'); setTimeout(function () {
</script> document.querySelector('body').style.backgroundColor = originalBgColor;
</body> }, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
try {
mermaid.render(test, input, () => {});
} catch (err) {
console.error('Error in %s:\n\n%s', test, err);
}
};
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script>
</body>
</html> </html>

59
demos/journey.html
View File

@ -1,21 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
journey journey
title My day title My day
accDescription A user journey diagram of a typical day in my life accDescription A user journey diagram of a typical day in my life
@ -26,20 +25,18 @@
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
}); });
</script> </script>
</body>
</body> </html>
</html>

66
demos/requirements.html
View File

@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
requirementDiagram requirementDiagram
title This is a title title This is a title
requirement test_req { requirement test_req {
@ -85,22 +82,21 @@
test_req5 - refines -> test_req6 test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5 test_entity3 - verifies -> test_req5
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre
>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body>
</body> </html>
</html>

63
demos/sequence.html
View File

@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
sequenceDiagram sequenceDiagram
title: FancySequenceDiagram title: FancySequenceDiagram
accDescription Test a description accDescription Test a description
@ -56,22 +53,20 @@
and and
Alice -->> John: Parallel message 2 Alice -->> John: Parallel message 2
end end
</div> </pre>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html> </html>

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