Merge remote-tracking branch 'origin/develop' into sidv/autoBuildDocs
* origin/develop: (564 commits) chore: Format Mermaid.vue Made mermaidConfig a local variable so that it cannot be shared cross rendering. Fix for issue #3882 moving the label when the path has been modified Small fix for issue #3881 Fixed an issue that diagrams disappear from docs pages when switching themes or reloading pages Fixed the issue that theme-switch does not work on docs. chore: Fix mindmap link chore: Switch back from unpkg to jsdelivr delete functions not used in diagrams/c4 code (dead code) Minor change feat: Add @include support to docs feat: Add @include example to docs feat: Add @include support to docs cleanup fix lines fix Async rendering Revert "sync" chore(deps): update pnpm to v7.17.1 chore(deps): remove dependency on `graphlib` test(e2e): make gitgraph snapshots consistent ...
This commit is contained in:
commit
963a1f1eb1
106
.eslintrc.json
106
.eslintrc.json
|
@ -16,26 +16,27 @@
|
||||||
"extends": [
|
"extends": [
|
||||||
"eslint:recommended",
|
"eslint:recommended",
|
||||||
"plugin:@typescript-eslint/recommended",
|
"plugin:@typescript-eslint/recommended",
|
||||||
"plugin:jsdoc/recommended",
|
|
||||||
"plugin:json/recommended",
|
"plugin:json/recommended",
|
||||||
"plugin:markdown/recommended",
|
"plugin:markdown/recommended",
|
||||||
|
"plugin:@cspell/recommended",
|
||||||
"prettier"
|
"prettier"
|
||||||
],
|
],
|
||||||
"plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
|
"plugins": [
|
||||||
|
"@typescript-eslint",
|
||||||
|
"no-only-tests",
|
||||||
|
"html",
|
||||||
|
"jest",
|
||||||
|
"jsdoc",
|
||||||
|
"json",
|
||||||
|
"@cspell",
|
||||||
|
"lodash",
|
||||||
|
"unicorn"
|
||||||
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
|
"curly": "error",
|
||||||
"no-console": "error",
|
"no-console": "error",
|
||||||
"no-prototype-builtins": "off",
|
"no-prototype-builtins": "off",
|
||||||
"no-unused-vars": "off",
|
"no-unused-vars": "off",
|
||||||
"jsdoc/check-indentation": "off",
|
|
||||||
"jsdoc/check-alignment": "off",
|
|
||||||
"jsdoc/check-line-alignment": "off",
|
|
||||||
"jsdoc/multiline-blocks": "off",
|
|
||||||
"jsdoc/newline-after-description": "off",
|
|
||||||
"jsdoc/tag-lines": "off",
|
|
||||||
"jsdoc/require-param-description": "off",
|
|
||||||
"jsdoc/require-param-type": "off",
|
|
||||||
"jsdoc/require-returns": "off",
|
|
||||||
"jsdoc/require-returns-description": "off",
|
|
||||||
"cypress/no-async-tests": "off",
|
"cypress/no-async-tests": "off",
|
||||||
"@typescript-eslint/ban-ts-comment": [
|
"@typescript-eslint/ban-ts-comment": [
|
||||||
"error",
|
"error",
|
||||||
|
@ -48,28 +49,89 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"json/*": ["error", "allowComments"],
|
"json/*": ["error", "allowComments"],
|
||||||
"no-empty": ["error", { "allowEmptyCatch": true }]
|
"@cspell/spellchecker": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"checkIdentifiers": false,
|
||||||
|
"checkStrings": false,
|
||||||
|
"checkStringTemplates": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-empty": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"allowEmptyCatch": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-only-tests/no-only-tests": "error",
|
||||||
|
"lodash/import-scope": ["error", "method"],
|
||||||
|
"unicorn/better-regex": "error",
|
||||||
|
"unicorn/no-abusive-eslint-disable": "error",
|
||||||
|
"unicorn/no-array-push-push": "error",
|
||||||
|
"unicorn/no-for-loop": "error",
|
||||||
|
"unicorn/no-instanceof-array": "error",
|
||||||
|
"unicorn/no-typeof-undefined": "error",
|
||||||
|
"unicorn/no-unnecessary-await": "error",
|
||||||
|
"unicorn/no-unsafe-regex": "warn",
|
||||||
|
"unicorn/no-useless-promise-resolve-reject": "error",
|
||||||
|
"unicorn/prefer-array-find": "error",
|
||||||
|
"unicorn/prefer-array-flat-map": "error",
|
||||||
|
"unicorn/prefer-array-index-of": "error",
|
||||||
|
"unicorn/prefer-array-some": "error",
|
||||||
|
"unicorn/prefer-default-parameters": "error",
|
||||||
|
"unicorn/prefer-includes": "error",
|
||||||
|
"unicorn/prefer-negative-index": "error",
|
||||||
|
"unicorn/prefer-object-from-entries": "error",
|
||||||
|
"unicorn/prefer-string-starts-ends-with": "error",
|
||||||
|
"unicorn/prefer-string-trim-start-end": "error",
|
||||||
|
"unicorn/string-content": "error",
|
||||||
|
"unicorn/prefer-spread": "error",
|
||||||
|
"unicorn/no-lonely-if": "error"
|
||||||
},
|
},
|
||||||
"overrides": [
|
"overrides": [
|
||||||
{
|
{
|
||||||
"files": "./**/*.html",
|
"files": ["cypress/**", "demos/**"],
|
||||||
"rules": {
|
|
||||||
"no-undef": "off",
|
|
||||||
"jsdoc/require-jsdoc": "off"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"files": ["./cypress/**", "./demos/**"],
|
|
||||||
"rules": {
|
"rules": {
|
||||||
"no-console": "off"
|
"no-console": "off"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": ["./**/*.spec.{ts,js}", "./cypress/**", "./demos/**", "./**/docs/**"],
|
"files": ["*.{js,jsx,mjs,cjs}"],
|
||||||
|
"extends": ["plugin:jsdoc/recommended"],
|
||||||
|
"rules": {
|
||||||
|
"jsdoc/check-indentation": "off",
|
||||||
|
"jsdoc/check-alignment": "off",
|
||||||
|
"jsdoc/check-line-alignment": "off",
|
||||||
|
"jsdoc/multiline-blocks": "off",
|
||||||
|
"jsdoc/newline-after-description": "off",
|
||||||
|
"jsdoc/tag-lines": "off",
|
||||||
|
"jsdoc/require-param-description": "off",
|
||||||
|
"jsdoc/require-param-type": "off",
|
||||||
|
"jsdoc/require-returns": "off",
|
||||||
|
"jsdoc/require-returns-description": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["*.{ts,tsx}"],
|
||||||
|
"plugins": ["tsdoc"],
|
||||||
|
"rules": {
|
||||||
|
"tsdoc/syntax": "error"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
|
||||||
"rules": {
|
"rules": {
|
||||||
"jsdoc/require-jsdoc": "off",
|
"jsdoc/require-jsdoc": "off",
|
||||||
"@typescript-eslint/no-unused-vars": "off"
|
"@typescript-eslint/no-unused-vars": "off"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["*.html", "*.md", "**/*.md/*"],
|
||||||
|
"rules": {
|
||||||
|
"no-var": "error",
|
||||||
|
"no-undef": "off",
|
||||||
|
"@typescript-eslint/no-unused-vars": "off"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,43 +0,0 @@
|
||||||
---
|
|
||||||
name: Bug report
|
|
||||||
about: Create a report to help us improve
|
|
||||||
title: ''
|
|
||||||
labels: 'Status: Triage, Type: Bug / Error'
|
|
||||||
assignees: ''
|
|
||||||
---
|
|
||||||
|
|
||||||
**Describe the bug**
|
|
||||||
A clear and concise description of what the bug is.
|
|
||||||
|
|
||||||
**To Reproduce**
|
|
||||||
Steps to reproduce the behavior:
|
|
||||||
|
|
||||||
1. Go to '...'
|
|
||||||
2. Click on '....'
|
|
||||||
3. Scroll down to '....'
|
|
||||||
4. See error
|
|
||||||
|
|
||||||
**Expected behavior**
|
|
||||||
A clear and concise description of what you expected to happen.
|
|
||||||
|
|
||||||
**Screenshots**
|
|
||||||
If applicable, add screenshots to help explain your problem.
|
|
||||||
|
|
||||||
**Code Sample**
|
|
||||||
If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
|
|
||||||
|
|
||||||
**Desktop (please complete the following information):**
|
|
||||||
|
|
||||||
- OS: [e.g. iOS]
|
|
||||||
- Browser [e.g. chrome, safari]
|
|
||||||
- Version [e.g. 22]
|
|
||||||
|
|
||||||
**Smartphone (please complete the following information):**
|
|
||||||
|
|
||||||
- Device: [e.g. iPhone6]
|
|
||||||
- OS: [e.g. iOS8.1]
|
|
||||||
- Browser [e.g. stock browser, safari]
|
|
||||||
- Version [e.g. 22]
|
|
||||||
|
|
||||||
**Additional context**
|
|
||||||
Add any other context about the problem here.
|
|
|
@ -0,0 +1,69 @@
|
||||||
|
name: Bug Report
|
||||||
|
description: Create a report to help us improve
|
||||||
|
labels:
|
||||||
|
- 'Status: Triage'
|
||||||
|
- 'Type: Bug / Error'
|
||||||
|
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |-
|
||||||
|
## Security vulnerabilities
|
||||||
|
Please refer our [Security Policy](https://github.com/mermaid-js/.github/blob/main/SECURITY.md) and report to keep vulnerabilities confidential so we can release fixes first.
|
||||||
|
|
||||||
|
## Before you submit...
|
||||||
|
We like to help you, but in order to do that should you make a few things first:
|
||||||
|
|
||||||
|
- Use a clear and concise title
|
||||||
|
- Fill out the text fields with as much detail as possible.
|
||||||
|
- Never be shy to give us screenshots and/or code samples. It will help!
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Description
|
||||||
|
description: Give a clear and concise description of what the bug is.
|
||||||
|
placeholder: When I do ... does ... happen.
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Steps to reproduce
|
||||||
|
description: Give a step-by-step example on how to reproduce the bug.
|
||||||
|
placeholder: |-
|
||||||
|
1. Do this
|
||||||
|
2. Do that
|
||||||
|
3. ...
|
||||||
|
4. Bug!
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Screenshots
|
||||||
|
description: If applicable, add screenshots to help explain your issue.
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Code Sample
|
||||||
|
description: |-
|
||||||
|
If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
|
||||||
|
Any text pasted here will be rendered as a Code block.
|
||||||
|
render: text
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Setup
|
||||||
|
description: |-
|
||||||
|
Please fill out the below info.
|
||||||
|
Note that you only need to fill out one and not both sections.
|
||||||
|
value: |-
|
||||||
|
**Desktop**
|
||||||
|
|
||||||
|
- OS and Version: [Windows, Linux, Mac, ...]
|
||||||
|
- Browser and Version: [Chrome, Edge, Firefox]
|
||||||
|
|
||||||
|
**Smartphone**
|
||||||
|
|
||||||
|
- Device: [Samsung, iPhone, ...]
|
||||||
|
- OS and Version: [Android, iOS, ...]
|
||||||
|
- Browser and Version: [Chrome, Safari, ...]
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Additional Context
|
||||||
|
description: Anything else to add?
|
|
@ -0,0 +1,14 @@
|
||||||
|
blank_issues_enabled: false
|
||||||
|
contact_links:
|
||||||
|
- name: GitHub Discussions
|
||||||
|
url: https://github.com/mermaid-js/mermaid/discussions
|
||||||
|
about: Ask the Community questions or share your own graphs in our discussions.
|
||||||
|
- name: Slack
|
||||||
|
url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
|
||||||
|
about: Join our Community on Slack for Help and a casual chat.
|
||||||
|
- name: Documentation
|
||||||
|
url: https://mermaid-js.github.io
|
||||||
|
about: Read our documentation for all that Mermaid.js can offer.
|
||||||
|
- name: Live Editor
|
||||||
|
url: https://mermaid.live
|
||||||
|
about: Try the live editor to preview graphs in no time.
|
|
@ -0,0 +1,42 @@
|
||||||
|
name: Diagram Proposal
|
||||||
|
description: Suggest a new Diagram Type to add to Mermaid.
|
||||||
|
labels:
|
||||||
|
- 'Status: Triage'
|
||||||
|
- 'Type: Enhancement'
|
||||||
|
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |-
|
||||||
|
## Before you submit...
|
||||||
|
First of all, thank you for proposing a new Diagram to us.
|
||||||
|
We are always happy about new ideas to improve Mermaid.js wherever possible.
|
||||||
|
|
||||||
|
To get the fastest and best response possible, make sure you do the following:
|
||||||
|
|
||||||
|
- Use a clear and concise title
|
||||||
|
- Fill out the text fields with as much detail as possible.
|
||||||
|
- Never be shy to give us screenshots and/or code samples. It will help!
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Proposal
|
||||||
|
description: A clear and concise description of what should be added to Mermaid.js.
|
||||||
|
placeholder: Mermaid.js should add ... because ...
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Use Cases
|
||||||
|
description: If applicable, give some use cases for where this diagram would be useful.
|
||||||
|
placeholder: The Diagram could be used for ...
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Screenshots
|
||||||
|
description: If applicable, add screenshots to show possible examples of how the diagram may look like.
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Code Sample
|
||||||
|
description: |-
|
||||||
|
If applicable, add a code sample for how to implement this new diagram.
|
||||||
|
The text will automatically be rendered as JavaScript code.
|
||||||
|
render: javascript
|
|
@ -1,19 +0,0 @@
|
||||||
---
|
|
||||||
name: Feature request
|
|
||||||
about: Suggest an idea for this project
|
|
||||||
title: ''
|
|
||||||
labels: 'Status: Triage, Type: Enhancement'
|
|
||||||
assignees: ''
|
|
||||||
---
|
|
||||||
|
|
||||||
**Is your feature request related to a problem? Please describe.**
|
|
||||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
|
||||||
|
|
||||||
**Describe the solution you'd like**
|
|
||||||
A clear and concise description of what you want to happen.
|
|
||||||
|
|
||||||
**Describe alternatives you've considered**
|
|
||||||
A clear and concise description of any alternative solutions or features you've considered.
|
|
||||||
|
|
||||||
**Additional context**
|
|
||||||
Add any other context or screenshots about the feature request here.
|
|
|
@ -1,16 +0,0 @@
|
||||||
---
|
|
||||||
name: Question
|
|
||||||
about: Get some help from the community.
|
|
||||||
title: ''
|
|
||||||
labels: 'Help wanted!, Type: Other'
|
|
||||||
assignees: ''
|
|
||||||
---
|
|
||||||
|
|
||||||
## Help us help you!
|
|
||||||
|
|
||||||
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.
|
|
||||||
- Include as much, or as little, code as necessary.
|
|
||||||
- Don't be shy to give us some screenshots, if it helps!
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
name: Syntax Proposal
|
||||||
|
description: Suggest a new Syntax to add to Mermaid.js.
|
||||||
|
labels:
|
||||||
|
- 'Status: Triage'
|
||||||
|
- 'Type: Enhancement'
|
||||||
|
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |-
|
||||||
|
## Before you submit...
|
||||||
|
First of all, thank you for proposing a new Syntax to us.
|
||||||
|
We are always happy about new ideas to improve Mermaid.js wherever possible.
|
||||||
|
|
||||||
|
To get the fastest and best response possible, make sure you do the following:
|
||||||
|
|
||||||
|
- Use a clear and concise title
|
||||||
|
- Fill out the text fields with as much detail as possible. Examples are always welcome.
|
||||||
|
- Never be shy to give us screenshots and/or code samples. It will help!
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Proposal
|
||||||
|
description: A clear and concise description of what Syntax should be added to Mermaid.js.
|
||||||
|
placeholder: Mermaid.js should add ... because ...
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Example
|
||||||
|
description: If applicable, provide an example of the new Syntax.
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Screenshots
|
||||||
|
description: If applicable, add screenshots to show possible examples of how the theme may look like.
|
|
@ -0,0 +1,42 @@
|
||||||
|
name: Theme Proposal
|
||||||
|
description: Suggest a new theme to add to Mermaid.js.
|
||||||
|
labels:
|
||||||
|
- 'Status: Triage'
|
||||||
|
- 'Type: Enhancement'
|
||||||
|
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |-
|
||||||
|
## Before you submit...
|
||||||
|
First of all, thank you for proposing a new Theme to us.
|
||||||
|
We are always happy about new ideas to improve Mermaid.js wherever possible.
|
||||||
|
|
||||||
|
To get the fastest and best response possible, make sure you do the following:
|
||||||
|
|
||||||
|
- Use a clear and concise title
|
||||||
|
- Fill out the text fields with as much detail as possible. Examples are always welcome!
|
||||||
|
- Never be shy to give us screenshots and/or code samples. It will help!
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Proposal
|
||||||
|
description: A clear and concise description of what theme should be added to Mermaid.js.
|
||||||
|
placeholder: Mermaid.js should add ... because ...
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Colors
|
||||||
|
description: |-
|
||||||
|
A detailed list of the different colour values to use.
|
||||||
|
A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
|
||||||
|
placeholder: |-
|
||||||
|
- background: #f4f4f4
|
||||||
|
- primaryColor: #fff4dd
|
||||||
|
- ...
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
attributes:
|
||||||
|
label: Screenshots
|
||||||
|
description: If applicable, add screenshots to show possible examples of how the theme may look like.
|
|
@ -1,18 +0,0 @@
|
||||||
version: 2
|
|
||||||
updates:
|
|
||||||
- package-ecosystem: npm
|
|
||||||
open-pull-requests-limit: 10
|
|
||||||
directory: /
|
|
||||||
target-branch: develop
|
|
||||||
versioning-strategy: increase
|
|
||||||
schedule:
|
|
||||||
interval: weekly
|
|
||||||
day: monday
|
|
||||||
time: '07:00'
|
|
||||||
- package-ecosystem: github-actions
|
|
||||||
directory: /
|
|
||||||
target-branch: develop
|
|
||||||
schedule:
|
|
||||||
interval: weekly
|
|
||||||
day: monday
|
|
||||||
time: '07:00'
|
|
|
@ -16,7 +16,7 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
strategy:
|
strategy:
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [16.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
strategy:
|
strategy:
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [16.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- if: ${{ ! env.USE_APPLI }}
|
- if: ${{ ! env.USE_APPLI }}
|
||||||
name: Warn if not using Applitools
|
name: Warn if not using Applitools
|
||||||
|
|
|
@ -11,7 +11,7 @@ jobs:
|
||||||
strategy:
|
strategy:
|
||||||
fail-fast: false
|
fail-fast: false
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [16.x]
|
node-version: [18.x]
|
||||||
containers: [1, 2, 3, 4]
|
containers: [1, 2, 3, 4]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v3
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
# This Link Checker is run on all documentation files once per week.
|
||||||
|
|
||||||
|
# references:
|
||||||
|
# - https://github.com/lycheeverse/lychee-action
|
||||||
|
# - https://github.com/lycheeverse/lychee
|
||||||
|
|
||||||
|
name: Link Checker
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- develop
|
||||||
|
- master
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- develop
|
||||||
|
- master
|
||||||
|
schedule:
|
||||||
|
# * is a special character in YAML so you have to quote this string
|
||||||
|
- cron: '30 8 * * 5'
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
linkChecker:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
permissions:
|
||||||
|
# lychee only uses the GITHUB_TOKEN to avoid rate-limiting
|
||||||
|
contents: read
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Restore lychee cache
|
||||||
|
uses: actions/cache@v3
|
||||||
|
with:
|
||||||
|
path: .lycheecache
|
||||||
|
key: cache-lychee-${{ github.sha }}
|
||||||
|
restore-keys: cache-lychee-
|
||||||
|
|
||||||
|
- name: Link Checker
|
||||||
|
uses: lycheeverse/lychee-action@v1.5.4
|
||||||
|
with:
|
||||||
|
args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
|
||||||
|
fail: true
|
||||||
|
jobSummary: true
|
||||||
|
env:
|
||||||
|
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
|
|
@ -16,7 +16,7 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
strategy:
|
strategy:
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [16.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
@ -39,4 +39,5 @@ jobs:
|
||||||
run: pnpm run lint
|
run: pnpm run lint
|
||||||
|
|
||||||
- name: Verify Docs
|
- name: Verify Docs
|
||||||
|
working-directory: ./packages/mermaid
|
||||||
run: pnpm run docs:verify
|
run: pnpm run docs:verify
|
||||||
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
name: Deploy Vitepress docs to Pages
|
||||||
|
|
||||||
|
on:
|
||||||
|
# Runs on pushes targeting the default branch
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
|
||||||
|
# Allows you to run this workflow manually from the Actions tab
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
pages: write
|
||||||
|
id-token: write
|
||||||
|
|
||||||
|
# Allow one concurrent deployment
|
||||||
|
concurrency:
|
||||||
|
group: 'pages'
|
||||||
|
cancel-in-progress: true
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
# Build job
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- uses: pnpm/action-setup@v2
|
||||||
|
|
||||||
|
- name: Setup Node.js
|
||||||
|
uses: actions/setup-node@v3
|
||||||
|
with:
|
||||||
|
cache: pnpm
|
||||||
|
node-version: 18
|
||||||
|
|
||||||
|
- name: Install Packages
|
||||||
|
run: pnpm install --frozen-lockfile
|
||||||
|
|
||||||
|
- name: Setup Pages
|
||||||
|
uses: actions/configure-pages@v2
|
||||||
|
|
||||||
|
- name: Run Build
|
||||||
|
run: pnpm --filter mermaid run docs:build:vitepress
|
||||||
|
|
||||||
|
- name: Upload artifact
|
||||||
|
uses: actions/upload-pages-artifact@v1
|
||||||
|
with:
|
||||||
|
path: packages/mermaid/src/vitepress/.vitepress/dist
|
||||||
|
|
||||||
|
# Deployment job
|
||||||
|
deploy:
|
||||||
|
environment:
|
||||||
|
name: github-pages
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
needs: build
|
||||||
|
steps:
|
||||||
|
- name: Deploy to GitHub Pages
|
||||||
|
id: deployment
|
||||||
|
uses: actions/deploy-pages@v1
|
|
@ -10,22 +10,30 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v3
|
||||||
|
with:
|
||||||
|
fetch-depth: 0
|
||||||
|
|
||||||
|
- uses: pnpm/action-setup@v2
|
||||||
|
|
||||||
- name: Setup Node.js
|
- name: Setup Node.js
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16.x
|
cache: pnpm
|
||||||
- name: Install Yarn
|
node-version: 18.x
|
||||||
run: npm i yarn --global
|
|
||||||
|
- name: Install Packages
|
||||||
|
run: |
|
||||||
|
pnpm install --frozen-lockfile
|
||||||
|
env:
|
||||||
|
CYPRESS_CACHE_FOLDER: .cache/Cypress
|
||||||
|
|
||||||
- name: Install Json
|
- name: Install Json
|
||||||
run: npm i json --global
|
run: npm i json --global
|
||||||
|
|
||||||
- name: Install Packages
|
|
||||||
run: yarn install --frozen-lockfile
|
|
||||||
|
|
||||||
- name: Publish
|
- name: Publish
|
||||||
|
working-directory: ./packages/mermaid
|
||||||
run: |
|
run: |
|
||||||
PREVIEW_VERSION=8
|
PREVIEW_VERSION=$(git log --oneline "origin/$GITHUB_REF_NAME" ^"origin/master" | wc -l)
|
||||||
VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
|
VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
|
||||||
echo $VERSION
|
echo $VERSION
|
||||||
npm version --no-git-tag-version --allow-same-version $VERSION
|
npm version --no-git-tag-version --allow-same-version $VERSION
|
||||||
|
|
|
@ -14,7 +14,7 @@ jobs:
|
||||||
- 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: 18.x
|
||||||
- name: Install Yarn
|
- name: Install Yarn
|
||||||
run: npm i yarn --global
|
run: npm i yarn --global
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,7 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
strategy:
|
strategy:
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [16.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
|
|
@ -32,3 +32,7 @@ cypress/snapshots/
|
||||||
.eslintcache
|
.eslintcache
|
||||||
.tsbuildinfo
|
.tsbuildinfo
|
||||||
tsconfig.tsbuildinfo
|
tsconfig.tsbuildinfo
|
||||||
|
|
||||||
|
knsv*.html
|
||||||
|
local*.html
|
||||||
|
stats/
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"packages/mermaid/src/docs/**": ["pnpm run docs:build --git"],
|
|
||||||
"packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"],
|
|
||||||
"*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
|
|
||||||
"*.jison": ["pnpm run lint:jison"]
|
|
||||||
}
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
export default {
|
||||||
|
'!(docs/**/*)*.{ts,js,json,html,md,mts}': ['eslint --fix', 'prettier --write'],
|
||||||
|
'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
|
||||||
|
'**/*.jison': ['pnpm -w run lint:jison'],
|
||||||
|
};
|
|
@ -0,0 +1,13 @@
|
||||||
|
# These links are ignored by our link checker https://github.com/lycheeverse/lychee
|
||||||
|
# The file allows you to list multiple regular expressions for exclusion (one pattern per line).
|
||||||
|
|
||||||
|
# Network error: Forbidden
|
||||||
|
https://codepen.io
|
||||||
|
|
||||||
|
# Network error: The certificate was not trusted
|
||||||
|
https://mkdocs.org/
|
||||||
|
https://osawards.com/javascript/#nominees
|
||||||
|
https://osawards.com/javascript/2019
|
||||||
|
|
||||||
|
# Don't check files that are generated during the build via `pnpm docs:code`
|
||||||
|
packages/mermaid/src/docs/config/setup/*
|
|
@ -0,0 +1,3 @@
|
||||||
|
auto-install-peers=true
|
||||||
|
strict-peer-dependencies=false
|
||||||
|
use-inline-specifiers-lockfile-format=true
|
|
@ -4,3 +4,4 @@ cypress/platform/xss3.html
|
||||||
coverage
|
coverage
|
||||||
# Autogenerated by PNPM
|
# Autogenerated by PNPM
|
||||||
pnpm-lock.yaml
|
pnpm-lock.yaml
|
||||||
|
stats
|
|
@ -1,11 +1,14 @@
|
||||||
import { build, InlineConfig } from 'vite';
|
import { build, InlineConfig, type PluginOption } from 'vite';
|
||||||
import { resolve } from 'path';
|
import { resolve } from 'path';
|
||||||
import { fileURLToPath } from 'url';
|
import { fileURLToPath } from 'url';
|
||||||
import jisonPlugin from './jisonPlugin.js';
|
import jisonPlugin from './jisonPlugin.js';
|
||||||
import pkg from '../package.json' assert { type: 'json' };
|
import { readFileSync } from 'fs';
|
||||||
|
import { visualizer } from 'rollup-plugin-visualizer';
|
||||||
|
import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
|
||||||
|
|
||||||
const { dependencies } = pkg;
|
const visualize = process.argv.includes('--visualize');
|
||||||
const watch = process.argv.includes('--watch');
|
const watch = process.argv.includes('--watch');
|
||||||
|
const mermaidOnly = process.argv.includes('--mermaid');
|
||||||
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
||||||
|
|
||||||
type OutputOptions = Exclude<
|
type OutputOptions = Exclude<
|
||||||
|
@ -13,6 +16,20 @@ type OutputOptions = Exclude<
|
||||||
undefined
|
undefined
|
||||||
>['output'];
|
>['output'];
|
||||||
|
|
||||||
|
const visualizerOptions = (packageName: string, core = false): PluginOption[] => {
|
||||||
|
if (packageName !== 'mermaid' || !visualize) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return ['network', 'treemap', 'sunburst'].map((chartType) =>
|
||||||
|
visualizer({
|
||||||
|
filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
|
||||||
|
template: chartType as TemplateType,
|
||||||
|
gzipSize: true,
|
||||||
|
brotliSize: true,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const packageOptions = {
|
const packageOptions = {
|
||||||
mermaid: {
|
mermaid: {
|
||||||
name: 'mermaid',
|
name: 'mermaid',
|
||||||
|
@ -22,23 +39,13 @@ const packageOptions = {
|
||||||
'mermaid-mindmap': {
|
'mermaid-mindmap': {
|
||||||
name: 'mermaid-mindmap',
|
name: 'mermaid-mindmap',
|
||||||
packageName: 'mermaid-mindmap',
|
packageName: 'mermaid-mindmap',
|
||||||
file: 'add-diagram.ts',
|
file: 'detector.ts',
|
||||||
},
|
|
||||||
'mermaid-mindmap-detector': {
|
|
||||||
name: 'mermaid-mindmap-detector',
|
|
||||||
packageName: 'mermaid-mindmap',
|
|
||||||
file: 'registry.ts',
|
|
||||||
},
|
|
||||||
'mermaid-example-diagram': {
|
|
||||||
name: 'mermaid-example-diagram',
|
|
||||||
packageName: 'mermaid-example-diagram',
|
|
||||||
file: 'add-diagram.ts',
|
|
||||||
},
|
|
||||||
'mermaid-example-diagram-detector': {
|
|
||||||
name: 'mermaid-example-diagram-detector',
|
|
||||||
packageName: 'mermaid-example-diagram',
|
|
||||||
file: 'registry.ts',
|
|
||||||
},
|
},
|
||||||
|
// 'mermaid-example-diagram-detector': {
|
||||||
|
// name: 'mermaid-example-diagram-detector',
|
||||||
|
// packageName: 'mermaid-example-diagram',
|
||||||
|
// file: 'detector.ts',
|
||||||
|
// },
|
||||||
};
|
};
|
||||||
|
|
||||||
interface BuildOptions {
|
interface BuildOptions {
|
||||||
|
@ -49,7 +56,7 @@ interface BuildOptions {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
|
export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
|
||||||
const external = ['require', 'fs', 'path'];
|
const external: (string | RegExp)[] = ['require', 'fs', 'path'];
|
||||||
console.log(entryName, packageOptions[entryName]);
|
console.log(entryName, packageOptions[entryName]);
|
||||||
const { name, file, packageName } = packageOptions[entryName];
|
const { name, file, packageName } = packageOptions[entryName];
|
||||||
let output: OutputOptions = [
|
let output: OutputOptions = [
|
||||||
|
@ -68,9 +75,14 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
];
|
];
|
||||||
|
|
||||||
if (core) {
|
if (core) {
|
||||||
|
const { dependencies } = JSON.parse(
|
||||||
|
readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
|
||||||
|
);
|
||||||
// Core build is used to generate file without bundled dependencies.
|
// Core build is used to generate file without bundled dependencies.
|
||||||
// This is used by downstream projects to bundle dependencies themselves.
|
// This is used by downstream projects to bundle dependencies themselves.
|
||||||
external.push(...Object.keys(dependencies));
|
// Ignore dependencies and any dependencies of dependencies
|
||||||
|
// Adapted from the RegEx used by `rollup-plugin-node`
|
||||||
|
external.push(new RegExp('^(?:' + Object.keys(dependencies).join('|') + ')(?:/.+)?$'));
|
||||||
// This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
|
// This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
|
||||||
output = [
|
output = [
|
||||||
{
|
{
|
||||||
|
@ -102,7 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.jison', '.js', '.ts', '.json'],
|
extensions: ['.jison', '.js', '.ts', '.json'],
|
||||||
},
|
},
|
||||||
plugins: [jisonPlugin()],
|
plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
|
||||||
};
|
};
|
||||||
|
|
||||||
if (watch && config.build) {
|
if (watch && config.build) {
|
||||||
|
@ -110,7 +122,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
include: [
|
include: [
|
||||||
'packages/mermaid-mindmap/src/**',
|
'packages/mermaid-mindmap/src/**',
|
||||||
'packages/mermaid/src/**',
|
'packages/mermaid/src/**',
|
||||||
'packages/mermaid-example-diagram/src/**',
|
// 'packages/mermaid-example-diagram/src/**',
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -128,15 +140,20 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
|
||||||
|
|
||||||
const main = async () => {
|
const main = async () => {
|
||||||
const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
|
const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
|
||||||
for (const pkg of packageNames) {
|
for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) {
|
||||||
await buildPackage(pkg);
|
await buildPackage(pkg);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (watch) {
|
if (watch) {
|
||||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
|
build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
|
||||||
|
if (!mermaidOnly) {
|
||||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
|
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
|
||||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
// build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
||||||
|
}
|
||||||
|
} else if (visualize) {
|
||||||
|
await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
|
||||||
|
await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
|
||||||
} else {
|
} else {
|
||||||
void main();
|
void main();
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,15 @@
|
||||||
import express from 'express';
|
import express, { NextFunction, Request, Response } from 'express';
|
||||||
import { createServer as createViteServer } from 'vite';
|
import { createServer as createViteServer } from 'vite';
|
||||||
// import { getBuildConfig } from './build';
|
// import { getBuildConfig } from './build';
|
||||||
|
|
||||||
|
const cors = (req: Request, res: Response, next: NextFunction) => {
|
||||||
|
res.header('Access-Control-Allow-Origin', '*');
|
||||||
|
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
|
||||||
|
res.header('Access-Control-Allow-Headers', 'Content-Type');
|
||||||
|
|
||||||
|
next();
|
||||||
|
};
|
||||||
|
|
||||||
async function createServer() {
|
async function createServer() {
|
||||||
const app = express();
|
const app = express();
|
||||||
|
|
||||||
|
@ -12,8 +20,11 @@ async function createServer() {
|
||||||
appType: 'custom', // don't include Vite's default HTML handling middlewares
|
appType: 'custom', // don't include Vite's default HTML handling middlewares
|
||||||
});
|
});
|
||||||
|
|
||||||
app.use(vite.middlewares);
|
app.use(cors);
|
||||||
app.use(express.static('./packages/mermaid/dist'));
|
app.use(express.static('./packages/mermaid/dist'));
|
||||||
|
app.use(express.static('./packages/mermaid-example-diagram/dist'));
|
||||||
|
app.use(express.static('./packages/mermaid-mindmap/dist'));
|
||||||
|
app.use(vite.middlewares);
|
||||||
app.use(express.static('demos'));
|
app.use(express.static('demos'));
|
||||||
app.use(express.static('cypress/platform'));
|
app.use(express.static('cypress/platform'));
|
||||||
|
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "../tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"module": "ES2022"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -12,6 +12,17 @@
|
||||||
"args": ["run", "${relativeFile}"],
|
"args": ["run", "${relativeFile}"],
|
||||||
"smartStep": true,
|
"smartStep": true,
|
||||||
"console": "integratedTerminal"
|
"console": "integratedTerminal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Docs generation",
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"args": ["src/docs.mts"],
|
||||||
|
"runtimeArgs": ["--loader", "ts-node/esm"],
|
||||||
|
"cwd": "${workspaceRoot}/packages/mermaid",
|
||||||
|
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
|
||||||
|
"smartStep": true,
|
||||||
|
"internalConsoleOptions": "openOnSessionStart"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,128 @@
|
||||||
|
# Contributor Covenant Code of Conduct
|
||||||
|
|
||||||
|
## Our Pledge
|
||||||
|
|
||||||
|
We as members, contributors, and leaders pledge to make participation in our
|
||||||
|
community a harassment-free experience for everyone, regardless of age, body
|
||||||
|
size, visible or invisible disability, ethnicity, sex characteristics, gender
|
||||||
|
identity and expression, level of experience, education, socio-economic status,
|
||||||
|
nationality, personal appearance, race, religion, or sexual identity
|
||||||
|
and orientation.
|
||||||
|
|
||||||
|
We pledge to act and interact in ways that contribute to an open, welcoming,
|
||||||
|
diverse, inclusive, and healthy community.
|
||||||
|
|
||||||
|
## Our Standards
|
||||||
|
|
||||||
|
Examples of behavior that contributes to a positive environment for our
|
||||||
|
community include:
|
||||||
|
|
||||||
|
- Demonstrating empathy and kindness toward other people
|
||||||
|
- Being respectful of differing opinions, viewpoints, and experiences
|
||||||
|
- Giving and gracefully accepting constructive feedback
|
||||||
|
- Accepting responsibility and apologizing to those affected by our mistakes,
|
||||||
|
and learning from the experience
|
||||||
|
- Focusing on what is best not just for us as individuals, but for the
|
||||||
|
overall community
|
||||||
|
|
||||||
|
Examples of unacceptable behavior include:
|
||||||
|
|
||||||
|
- The use of sexualized language or imagery, and sexual attention or
|
||||||
|
advances of any kind
|
||||||
|
- Trolling, insulting or derogatory comments, and personal or political attacks
|
||||||
|
- Public or private harassment
|
||||||
|
- Publishing others' private information, such as a physical or email
|
||||||
|
address, without their explicit permission
|
||||||
|
- Other conduct which could reasonably be considered inappropriate in a
|
||||||
|
professional setting
|
||||||
|
|
||||||
|
## Enforcement Responsibilities
|
||||||
|
|
||||||
|
Community leaders are responsible for clarifying and enforcing our standards of
|
||||||
|
acceptable behavior and will take appropriate and fair corrective action in
|
||||||
|
response to any behavior that they deem inappropriate, threatening, offensive,
|
||||||
|
or harmful.
|
||||||
|
|
||||||
|
Community leaders have the right and responsibility to remove, edit, or reject
|
||||||
|
comments, commits, code, wiki edits, issues, and other contributions that are
|
||||||
|
not aligned to this Code of Conduct, and will communicate reasons for moderation
|
||||||
|
decisions when appropriate.
|
||||||
|
|
||||||
|
## Scope
|
||||||
|
|
||||||
|
This Code of Conduct applies within all community spaces, and also applies when
|
||||||
|
an individual is officially representing the community in public spaces.
|
||||||
|
Examples of representing our community include using an official e-mail address,
|
||||||
|
posting via an official social media account, or acting as an appointed
|
||||||
|
representative at an online or offline event.
|
||||||
|
|
||||||
|
## Enforcement
|
||||||
|
|
||||||
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||||
|
reported to the community leaders responsible for enforcement at security@mermaid.live
|
||||||
|
.
|
||||||
|
All complaints will be reviewed and investigated promptly and fairly.
|
||||||
|
|
||||||
|
All community leaders are obligated to respect the privacy and security of the
|
||||||
|
reporter of any incident.
|
||||||
|
|
||||||
|
## Enforcement Guidelines
|
||||||
|
|
||||||
|
Community leaders will follow these Community Impact Guidelines in determining
|
||||||
|
the consequences for any action they deem in violation of this Code of Conduct:
|
||||||
|
|
||||||
|
### 1. Correction
|
||||||
|
|
||||||
|
**Community Impact**: Use of inappropriate language or other behavior deemed
|
||||||
|
unprofessional or unwelcome in the community.
|
||||||
|
|
||||||
|
**Consequence**: A private, written warning from community leaders, providing
|
||||||
|
clarity around the nature of the violation and an explanation of why the
|
||||||
|
behavior was inappropriate. A public apology may be requested.
|
||||||
|
|
||||||
|
### 2. Warning
|
||||||
|
|
||||||
|
**Community Impact**: A violation through a single incident or series
|
||||||
|
of actions.
|
||||||
|
|
||||||
|
**Consequence**: A warning with consequences for continued behavior. No
|
||||||
|
interaction with the people involved, including unsolicited interaction with
|
||||||
|
those enforcing the Code of Conduct, for a specified period of time. This
|
||||||
|
includes avoiding interactions in community spaces as well as external channels
|
||||||
|
like social media. Violating these terms may lead to a temporary or
|
||||||
|
permanent ban.
|
||||||
|
|
||||||
|
### 3. Temporary Ban
|
||||||
|
|
||||||
|
**Community Impact**: A serious violation of community standards, including
|
||||||
|
sustained inappropriate behavior.
|
||||||
|
|
||||||
|
**Consequence**: A temporary ban from any sort of interaction or public
|
||||||
|
communication with the community for a specified period of time. No public or
|
||||||
|
private interaction with the people involved, including unsolicited interaction
|
||||||
|
with those enforcing the Code of Conduct, is allowed during this period.
|
||||||
|
Violating these terms may lead to a permanent ban.
|
||||||
|
|
||||||
|
### 4. Permanent Ban
|
||||||
|
|
||||||
|
**Community Impact**: Demonstrating a pattern of violation of community
|
||||||
|
standards, including sustained inappropriate behavior, harassment of an
|
||||||
|
individual, or aggression toward or disparagement of classes of individuals.
|
||||||
|
|
||||||
|
**Consequence**: A permanent ban from any sort of public interaction within
|
||||||
|
the community.
|
||||||
|
|
||||||
|
## Attribution
|
||||||
|
|
||||||
|
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
|
||||||
|
version 2.0, available at
|
||||||
|
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
|
||||||
|
|
||||||
|
Community Impact Guidelines were inspired by [Mozilla's code of conduct
|
||||||
|
enforcement ladder](https://github.com/mozilla/diversity).
|
||||||
|
|
||||||
|
[homepage]: https://www.contributor-covenant.org
|
||||||
|
|
||||||
|
For answers to common questions about this code of conduct, see the FAQ at
|
||||||
|
https://www.contributor-covenant.org/faq. Translations are available at
|
||||||
|
https://www.contributor-covenant.org/translations.
|
|
@ -6,12 +6,23 @@ 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.
|
||||||
|
|
||||||
|
Below link will help you making a copy of the repository in your local system.
|
||||||
|
|
||||||
|
https://docs.github.com/en/get-started/quickstart/fork-a-repo
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
- [volta](https://volta.sh/) to manage node versions.
|
||||||
|
- [Node.js](https://nodejs.org/en/). `volta install node`
|
||||||
|
- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
|
||||||
|
|
||||||
## 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
|
||||||
pnpm install
|
# npx is required for first install as volta support for pnpm is not added yet.
|
||||||
|
npx pnpm install
|
||||||
pnpm test
|
pnpm test
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -21,7 +32,7 @@ We make all changes via pull requests. As we have many pull requests from develo
|
||||||
|
|
||||||
- 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 `src/docs` folder is also allowed via direct commits)
|
- Documentation (updates to the `package/mermaid/src/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.
|
||||||
|
|
||||||
|
@ -39,16 +50,16 @@ Less strict here, it is OK to commit directly in the `develop` branch if you are
|
||||||
|
|
||||||
The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
|
The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
|
||||||
|
|
||||||
### Documentation source files are in /src/docs
|
### Documentation source files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
|
||||||
|
|
||||||
The source files for the project documentation are located in the `/src/docs` directory. This is where you should make changes.
|
The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
|
||||||
The files under `/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
|
The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
flowchart LR
|
flowchart LR
|
||||||
classDef default fill:#fff,color:black,stroke:black
|
classDef default fill:#fff,color:black,stroke:black
|
||||||
|
|
||||||
source["files in /src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
|
source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -56,31 +67,22 @@ flowchart LR
|
||||||
|
|
||||||
### The official documentation site
|
### The official documentation site
|
||||||
|
|
||||||
**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
|
**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.**
|
||||||
|
|
||||||
If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
|
If you want to preview the whole documentation site on your machine:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
$ npm i docsify-cli -g
|
cd packages/mermaid
|
||||||
|
pnpm i
|
||||||
|
pnpm docs:dev
|
||||||
```
|
```
|
||||||
|
|
||||||
If you are more familiar with Yarn, you can use the following command:
|
You can now build and serve the documentation site:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
$ yarn global add docsify-cli
|
pnpm docs:serve
|
||||||
```
|
```
|
||||||
|
|
||||||
The above command will install `docsify-cli` globally.
|
|
||||||
If the installation is successful, the command `docsify` will be available in your `PATH`.
|
|
||||||
|
|
||||||
You can now run the following command to serve the documentation site:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ docsify serve docs
|
|
||||||
```
|
|
||||||
|
|
||||||
Once the local HTTP server is listening, you can point your browser at http://localhost:3000.
|
|
||||||
|
|
||||||
## Branching
|
## Branching
|
||||||
|
|
||||||
Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop.
|
Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop.
|
||||||
|
@ -137,11 +139,11 @@ it('should render forks and joins', () => {
|
||||||
|
|
||||||
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 source files for documentation are in `/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
|
The source files for documentation are in `/packages/mermaid/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
|
||||||
|
|
||||||
#### Adding to or changing the documentation organization
|
#### Adding to or changing the documentation organization
|
||||||
|
|
||||||
If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `src/docs/_sidebar.md`.
|
If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`.
|
||||||
|
|
||||||
When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/
|
When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/
|
||||||
|
|
||||||
|
|
33
README.md
33
README.md
|
@ -1,21 +1,6 @@
|
||||||
# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
# mermaid
|
||||||
|
|
||||||
# Whoa, whats going on here?
|
[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
|
||||||
|
|
||||||
We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
|
|
||||||
|
|
||||||
- Make it possible to select which diagrams to include on your site
|
|
||||||
- Open up for lazy loading
|
|
||||||
- Make it possible to add diagrams from outside of the Mermaid repository
|
|
||||||
- Separate the release flow between different diagrams and the Mermaid core
|
|
||||||
|
|
||||||
As such be aware of some changes..
|
|
||||||
|
|
||||||
# We use pnpm now
|
|
||||||
|
|
||||||
# The source code has moved
|
|
||||||
|
|
||||||
It is now located in the src folder for each respective package located as subfolders in packages.
|
|
||||||
|
|
||||||
English | [简体中文](./README.zh-CN.md)
|
English | [简体中文](./README.zh-CN.md)
|
||||||
|
|
||||||
|
@ -41,12 +26,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
||||||
[Tutorials](./docs/Tutorials.md) has video tutorials.
|
[Tutorials](./docs/config/Tutorials.md) has video tutorials.
|
||||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
|
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
|
||||||
|
|
||||||
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
|
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
|
||||||
|
|
||||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md).
|
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
||||||
|
|
||||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
|
🌐 [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)
|
||||||
|
|
||||||
|
@ -352,7 +337,11 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
|
||||||
|
|
||||||
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._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
|
> _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 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!_
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
# mermaid
|
||||||
|
|
||||||
|
[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
|
||||||
|
|
||||||
[English](./README.md) | 简体中文
|
[English](./README.md) | 简体中文
|
||||||
|
|
||||||
|
@ -22,9 +24,9 @@ Mermaid 是一个基于 Javascript 的图表绘制工具,通过解析类 Markd
|
||||||
Mermaid 通过允许用户创建便于修改的图表来解决这一难题,它也可以作为生产脚本(或其他代码)的一部分。<br/>
|
Mermaid 通过允许用户创建便于修改的图表来解决这一难题,它也可以作为生产脚本(或其他代码)的一部分。<br/>
|
||||||
<br/>
|
<br/>
|
||||||
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
||||||
你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程,也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程,也可以查看 [Mermaid 的集成和使用](./docs/misc/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
||||||
|
|
||||||
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式,可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).
|
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式,可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
||||||
|
|
||||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
|
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
|
||||||
|
|
||||||
|
@ -37,7 +39,7 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma
|
||||||
<table>
|
<table>
|
||||||
<!-- <Flowchart> -->
|
<!-- <Flowchart> -->
|
||||||
|
|
||||||
### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
||||||
|
|
||||||
```
|
```
|
||||||
flowchart LR
|
flowchart LR
|
||||||
|
@ -55,7 +57,7 @@ C -->|One| D[Result 1]
|
||||||
C -->|Two| E[Result 2]
|
C -->|Two| E[Result 2]
|
||||||
```
|
```
|
||||||
|
|
||||||
### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
||||||
|
|
||||||
```
|
```
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
|
@ -81,7 +83,7 @@ John->>Bob: How about you?
|
||||||
Bob-->>John: Jolly good!
|
Bob-->>John: Jolly good!
|
||||||
```
|
```
|
||||||
|
|
||||||
### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
||||||
|
|
||||||
```
|
```
|
||||||
gantt
|
gantt
|
||||||
|
@ -105,7 +107,7 @@ gantt
|
||||||
Parallel 4 : des6, after des4, 1d
|
Parallel 4 : des6, after des4, 1d
|
||||||
```
|
```
|
||||||
|
|
||||||
### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
||||||
|
|
||||||
```
|
```
|
||||||
classDiagram
|
classDiagram
|
||||||
|
@ -145,7 +147,7 @@ class Class10 {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
|
### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkLsOwjAMRX-l8ojahTEDCzB26kgYrMYtkfJAqVMJVf13QiIKqqfr44d8vUDvFYGAiZHponEMaJv5KF2V4na4V01zqjrWxhSUZYapuEetn7UbCy16P_5HzwGnR6FZfpdCDZaCRa3SWcunQQI_yJIEkaSiAaNhCdKtqRUj--7lehAcItUQn-pnBMSAZtroVWn2YYOU07b4z29Y37gJVYk">live editor</a>]
|
||||||
|
|
||||||
```
|
```
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
|
@ -167,7 +169,7 @@ Moving --> Crash
|
||||||
Crash --> [*]
|
Crash --> [*]
|
||||||
```
|
```
|
||||||
|
|
||||||
### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
||||||
|
|
||||||
```
|
```
|
||||||
pie
|
pie
|
||||||
|
@ -183,9 +185,9 @@ pie
|
||||||
"Rats" : 15
|
"Rats" : 15
|
||||||
```
|
```
|
||||||
|
|
||||||
### Git 图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
### Git 图 [实验特性 - <a href="https://mermaid.live/edit#base64: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://mermaid.live/edit#pako:eNpljzEPgkAMhf9K05nFGJdbJXFiYmVpuKIncDVHL4QQ_ruHaILaqXnf63vpjLVYRoMAd4nB81R5SKNOO4ZiglFC6_wVLL3JwLU68XARUHnhTQcoqGVQJgMnAwV_5GSMj0HJhcHAcU_y7d7AYVUzOJP-ddyk3ydZGf0n66uldPqCPxWYYc-hJ2fTj_OqVqg3Tplo0mq5odhphZVfkpWiSjn5Go2GyBnGhyXl3NE1UI-moW7g5QkSoF5m">live editor</a>]
|
||||||
|
|
||||||
```
|
```
|
||||||
journey
|
journey
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
# A collection of updates that change the behaviour
|
||||||
|
|
||||||
|
## Lazy loading and asynchronisity
|
||||||
|
|
||||||
|
- Invalid dates are rendered as syntax error instead of returning best guess or the current date
|
|
@ -53,6 +53,18 @@ export const MockD3 = (name, parent) => {
|
||||||
get __parent() {
|
get __parent() {
|
||||||
return parent;
|
return parent;
|
||||||
},
|
},
|
||||||
|
node() {
|
||||||
|
return {
|
||||||
|
getBBox() {
|
||||||
|
return {
|
||||||
|
x: 5,
|
||||||
|
y: 10,
|
||||||
|
height: 15,
|
||||||
|
width: 20,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
};
|
};
|
||||||
elem.append = (name) => {
|
elem.append = (name) => {
|
||||||
const mockElem = MockD3(name, elem);
|
const mockElem = MockD3(name, elem);
|
||||||
|
|
|
@ -1,3 +1 @@
|
||||||
import { vi } from 'vitest';
|
// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.
|
||||||
|
|
||||||
// export const render = vi.fn();
|
|
||||||
|
|
|
@ -15,5 +15,5 @@ module.exports = defineConfig({
|
||||||
// { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
|
// { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
|
||||||
],
|
],
|
||||||
// set batch name to the configuration
|
// set batch name to the configuration
|
||||||
batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
|
// batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,132 @@
|
||||||
|
{
|
||||||
|
"version": "0.2",
|
||||||
|
"language": "en",
|
||||||
|
"words": [
|
||||||
|
"acyclicer",
|
||||||
|
"adamiecki",
|
||||||
|
"alois",
|
||||||
|
"antiscript",
|
||||||
|
"applitools",
|
||||||
|
"asciidoctor",
|
||||||
|
"ashish",
|
||||||
|
"astah",
|
||||||
|
"bbox",
|
||||||
|
"bilkent",
|
||||||
|
"bisheng",
|
||||||
|
"braintree",
|
||||||
|
"brolin",
|
||||||
|
"brotli",
|
||||||
|
"classdef",
|
||||||
|
"codedoc",
|
||||||
|
"colour",
|
||||||
|
"cpettitt",
|
||||||
|
"customizability",
|
||||||
|
"cuzon",
|
||||||
|
"cytoscape",
|
||||||
|
"dagre",
|
||||||
|
"descr",
|
||||||
|
"docsify",
|
||||||
|
"docsy",
|
||||||
|
"doku",
|
||||||
|
"dompurify",
|
||||||
|
"edgechromium",
|
||||||
|
"faber",
|
||||||
|
"flatmap",
|
||||||
|
"ftplugin",
|
||||||
|
"gantt",
|
||||||
|
"gitea",
|
||||||
|
"gitgraph",
|
||||||
|
"globby",
|
||||||
|
"graphlib",
|
||||||
|
"grav",
|
||||||
|
"greywolf",
|
||||||
|
"inkdrop",
|
||||||
|
"jaoude",
|
||||||
|
"jison",
|
||||||
|
"kaufmann",
|
||||||
|
"khroma",
|
||||||
|
"klemm",
|
||||||
|
"klink",
|
||||||
|
"knsv",
|
||||||
|
"knut",
|
||||||
|
"laganeckas",
|
||||||
|
"lintstagedrc",
|
||||||
|
"lucida",
|
||||||
|
"matthieu",
|
||||||
|
"mdbook",
|
||||||
|
"mermerd",
|
||||||
|
"mindaugas",
|
||||||
|
"mindmap",
|
||||||
|
"mindmaps",
|
||||||
|
"mitigations",
|
||||||
|
"mkdocs",
|
||||||
|
"orlandoni",
|
||||||
|
"phpbb",
|
||||||
|
"plantuml",
|
||||||
|
"playfair",
|
||||||
|
"podlite",
|
||||||
|
"ranksep",
|
||||||
|
"redmine",
|
||||||
|
"sandboxed",
|
||||||
|
"setupgraphviewbox",
|
||||||
|
"shiki",
|
||||||
|
"sidharth",
|
||||||
|
"sphinxcontrib",
|
||||||
|
"statediagram",
|
||||||
|
"stylis",
|
||||||
|
"substate",
|
||||||
|
"sveidqvist",
|
||||||
|
"techn",
|
||||||
|
"treemap",
|
||||||
|
"ts-nocheck",
|
||||||
|
"tuleap",
|
||||||
|
"unist",
|
||||||
|
"verdana",
|
||||||
|
"viewports",
|
||||||
|
"vinod",
|
||||||
|
"visio",
|
||||||
|
"vitepress",
|
||||||
|
"xlink",
|
||||||
|
"yash"
|
||||||
|
],
|
||||||
|
"patterns": [
|
||||||
|
{ "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
|
||||||
|
{
|
||||||
|
"name": "Markdown code blocks",
|
||||||
|
"pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
|
||||||
|
"description": "Taken from the cSpell example at https://cspell.org/configuration/patterns/#verbose-regular-expressions"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Inline code blocks",
|
||||||
|
"pattern": "\\`([^\\`\\r\\n]+?)\\`",
|
||||||
|
"description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
|
||||||
|
},
|
||||||
|
{ "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
|
||||||
|
{ "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
|
||||||
|
{
|
||||||
|
"name": "Snippet references 2",
|
||||||
|
"pattern": "\\<\\[sample:(.*)",
|
||||||
|
"description": "another kind of snippet reference"
|
||||||
|
},
|
||||||
|
{ "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" },
|
||||||
|
{
|
||||||
|
"name": "HTML Tags",
|
||||||
|
"pattern": "<[^>]*>",
|
||||||
|
"description": "Reference: https://stackoverflow.com/questions/11229831/regular-expression-to-remove-html-tags-from-a-string"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"ignoreRegExpList": [
|
||||||
|
"Markdown links",
|
||||||
|
"Markdown code blocks",
|
||||||
|
"Inline code blocks",
|
||||||
|
"Link contents",
|
||||||
|
"Snippet references",
|
||||||
|
"Snippet references 2",
|
||||||
|
"Multi-line code blocks",
|
||||||
|
"HTML Tags"
|
||||||
|
],
|
||||||
|
"ignorePaths": [
|
||||||
|
"packages/mermaid/src/docs/CHANGELOG.md",
|
||||||
|
"packages/mermaid/src/docs/.vitepress/redirect.ts"
|
||||||
|
]
|
||||||
|
}
|
|
@ -2,6 +2,8 @@ const utf8ToB64 = (str) => {
|
||||||
return window.btoa(unescape(encodeURIComponent(str)));
|
return window.btoa(unescape(encodeURIComponent(str)));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const batchId = 'mermid-batch' + new Date().getTime();
|
||||||
|
|
||||||
export const mermaidUrl = (graphStr, options, api) => {
|
export const mermaidUrl = (graphStr, options, api) => {
|
||||||
const obj = {
|
const obj = {
|
||||||
code: graphStr,
|
code: graphStr,
|
||||||
|
@ -45,26 +47,32 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
|
||||||
options.fontSize = '16px';
|
options.fontSize = '16px';
|
||||||
}
|
}
|
||||||
const useAppli = Cypress.env('useAppli');
|
const useAppli = Cypress.env('useAppli');
|
||||||
//const useAppli = false;
|
|
||||||
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
|
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
|
||||||
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
||||||
|
|
||||||
if (useAppli) {
|
if (useAppli) {
|
||||||
|
cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
|
||||||
cy.eyesOpen({
|
cy.eyesOpen({
|
||||||
appName: 'Mermaid',
|
appName: 'Mermaid',
|
||||||
testName: name,
|
testName: name,
|
||||||
|
batchName: Cypress.spec.name,
|
||||||
|
batchId: batchId + Cypress.spec.name,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = mermaidUrl(graphStr, options, api);
|
const url = mermaidUrl(graphStr, options, api);
|
||||||
|
|
||||||
cy.visit(url);
|
cy.visit(url);
|
||||||
if (validation) cy.get('svg').should(validation);
|
if (validation) {
|
||||||
|
cy.get('svg').should(validation);
|
||||||
|
}
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
// Default name to test title
|
// Default name to test title
|
||||||
|
|
||||||
if (useAppli) {
|
if (useAppli) {
|
||||||
|
cy.log('Check eyes' + Cypress.spec.name);
|
||||||
cy.eyesCheckWindow('Click!');
|
cy.eyesCheckWindow('Click!');
|
||||||
|
cy.log('Closing eyes: ' + Cypress.spec.name);
|
||||||
cy.eyesClose();
|
cy.eyesClose();
|
||||||
} else {
|
} else {
|
||||||
cy.matchImageSnapshot(name);
|
cy.matchImageSnapshot(name);
|
||||||
|
@ -100,19 +108,26 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
|
||||||
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
||||||
|
|
||||||
if (useAppli) {
|
if (useAppli) {
|
||||||
|
cy.log('Opening eyes 2' + Cypress.spec.name);
|
||||||
cy.eyesOpen({
|
cy.eyesOpen({
|
||||||
appName: 'Mermaid',
|
appName: 'Mermaid',
|
||||||
testName: name,
|
testName: name,
|
||||||
|
batchName: Cypress.spec.name,
|
||||||
|
batchId: batchId + Cypress.spec.name,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
cy.visit(url);
|
cy.visit(url);
|
||||||
if (validation) cy.get('svg').should(validation);
|
if (validation) {
|
||||||
|
cy.get('svg').should(validation);
|
||||||
|
}
|
||||||
cy.get('body');
|
cy.get('body');
|
||||||
// Default name to test title
|
// Default name to test title
|
||||||
|
|
||||||
if (useAppli) {
|
if (useAppli) {
|
||||||
|
cy.log('Check eyes 2' + Cypress.spec.name);
|
||||||
cy.eyesCheckWindow('Click!');
|
cy.eyesCheckWindow('Click!');
|
||||||
|
cy.log('Closing eyes 2' + Cypress.spec.name);
|
||||||
cy.eyesClose();
|
cy.eyesClose();
|
||||||
} else {
|
} else {
|
||||||
cy.matchImageSnapshot(name);
|
cy.matchImageSnapshot(name);
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
describe('mermaid', () => {
|
||||||
|
describe('registerDiagram', () => {
|
||||||
|
it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
|
||||||
|
const url = 'http://localhost:9000/external-diagrams-mindmap.html';
|
||||||
|
cy.visit(url);
|
||||||
|
|
||||||
|
cy.get('svg', {
|
||||||
|
// may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
|
||||||
|
timeout: 10000,
|
||||||
|
}).matchImageSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,266 +1,180 @@
|
||||||
describe('Interaction', () => {
|
describe('Interaction', () => {
|
||||||
describe('Interaction - security level loose', () => {
|
describe('Security level loose', () => {
|
||||||
it('Graph: should handle a click on a node with a bound function', () => {
|
beforeEach(() => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.visit('http://localhost:9000/click_security_loose.html');
|
||||||
cy.viewport(1440, 1024);
|
});
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g#flowchart-Function-4').click();
|
|
||||||
|
|
||||||
|
it('Graph: should handle a click on a node with a bound function', () => {
|
||||||
|
cy.contains('FunctionTest1').parents('.node').click();
|
||||||
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
|
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Graph: should handle a click on a node with a bound function with args', () => {
|
it('Graph: should handle a click on a node with a bound function with args', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.contains('FunctionArgTest2').parents('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g#flowchart-FunctionArg-28').click();
|
|
||||||
|
|
||||||
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
|
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
|
it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.contains('2FunctionArg').parents('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
|
|
||||||
|
|
||||||
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
|
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Graph: should handle a click on a node with a bound url', () => {
|
it('Graph: should handle a click on a node with a bound url', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
// When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
|
||||||
cy.viewport(1440, 1024);
|
cy.contains('URLTest1').find('.node').click();
|
||||||
cy.visit(url);
|
cy.location().should(({ href }) => {
|
||||||
cy.get('body').find('#flowchart-URL-5').click();
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
|
it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.contains('2URL').find('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('g[id="flowchart-2URL-11"]').click();
|
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Flowchart-v2: should handle a click on a node with a bound function', () => {
|
it('Flowchart-v2: should handle a click on a node with a bound function', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.contains('FunctionTest2').parents('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g#flowchart-Function-16').click();
|
|
||||||
|
|
||||||
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
|
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
|
it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.contains('10Function').parents('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g[id="flowchart-1Function-22"]').click();
|
|
||||||
|
|
||||||
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
|
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Flowchart-v2: should handle a click on a node with a bound url', () => {
|
it('Flowchart-v2: should handle a click on a node with a bound url', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.contains('URLTest2').find('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('#flowchart-URL-17').click();
|
});
|
||||||
|
});
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
|
it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.contains('20URL').find('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('g[id="flowchart-2URL-23"]').click();
|
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a task with a bound URL clicking on the rect', () => {
|
it('should handle a click on a task with a bound URL clicking on the rect', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.get('rect#cl1').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('rect#cl1').click({ force: true });
|
});
|
||||||
|
});
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('should handle a click on a task with a bound URL clicking on the text', () => {
|
it('should handle a click on a task with a bound URL clicking on the text', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.get('text#cl1-text').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('text#cl1-text').click({ force: true });
|
});
|
||||||
|
});
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('should handle a click on a task with a bound function without args', () => {
|
it('should handle a click on a task with a bound function without args', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.get('rect#cl2').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('rect#cl2').click({ force: true });
|
|
||||||
|
|
||||||
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
|
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
|
||||||
});
|
});
|
||||||
it('should handle a click on a task with a bound function with args', () => {
|
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('rect#cl3').click({ force: true });
|
|
||||||
|
|
||||||
|
it('should handle a click on a task with a bound function with args', () => {
|
||||||
|
cy.get('rect#cl3').click({ force: true });
|
||||||
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
|
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a task with a bound function without args', () => {
|
it('should handle a click on a task with a bound function without args', () => {
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
cy.get('text#cl2-text').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('text#cl2-text').click({ force: true });
|
|
||||||
|
|
||||||
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
|
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
|
||||||
});
|
});
|
||||||
it('should handle a click on a task with a bound function with args ', () => {
|
|
||||||
const url = 'http://localhost:9000/click_security_loose.html';
|
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('text#cl3-text').click({ force: true });
|
|
||||||
|
|
||||||
|
it('should handle a click on a task with a bound function with args ', () => {
|
||||||
|
cy.get('text#cl3-text').click({ force: true });
|
||||||
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
|
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Interaction - security level tight', () => {
|
describe('Interaction - security level tight', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.visit('http://localhost:9000/click_security_strict.html');
|
||||||
|
});
|
||||||
it('should handle a click on a node without a bound function', () => {
|
it('should handle a click on a node without a bound function', () => {
|
||||||
const url = 'http://localhost:9000/click_security_strict.html';
|
cy.contains('Function1').parents('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g#flowchart-Function-4').click();
|
|
||||||
|
|
||||||
cy.get('.created-by-click').should('not.exist');
|
cy.get('.created-by-click').should('not.exist');
|
||||||
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a node with a bound function where the node starts with a number', () => {
|
it('should handle a click on a node with a bound function where the node starts with a number', () => {
|
||||||
const url = 'http://localhost:9000/click_security_strict.html';
|
cy.contains('1Function').parents('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g[id="flowchart-1Function-10"]').click();
|
|
||||||
|
|
||||||
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
|
|
||||||
cy.get('.created-by-click').should('not.exist');
|
cy.get('.created-by-click').should('not.exist');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a node with a bound url', () => {
|
it('should handle a click on a node with a bound url', () => {
|
||||||
const url = 'http://localhost:9000/click_security_strict.html';
|
cy.contains('URL1').find('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('g#flowchart-URL-5').click();
|
});
|
||||||
|
});
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('should handle a click on a node with a bound url where the node starts with a number', () => {
|
it('should handle a click on a node with a bound url where the node starts with a number', () => {
|
||||||
const url = 'http://localhost:9000/click_security_strict.html';
|
cy.contains('2URL').find('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('g[id="flowchart-2URL-11"]').click();
|
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a task with a bound URL clicking on the rect', () => {
|
it('should handle a click on a task with a bound URL clicking on the rect', () => {
|
||||||
const url = 'http://localhost:9000/click_security_strict.html';
|
cy.get('rect#cl1').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('rect#cl1').click({ force: true });
|
});
|
||||||
|
});
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('should handle a click on a task with a bound URL clicking on the text', () => {
|
it('should handle a click on a task with a bound URL clicking on the text', () => {
|
||||||
const url = 'http://localhost:9000/click_security_strict.html';
|
cy.get('text#cl1-text').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('text#cl1-text').click({ force: true });
|
});
|
||||||
|
});
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('should handle a click on a task with a bound function', () => {
|
it('should handle a click on a task with a bound function', () => {
|
||||||
const url = 'http://localhost:9000/click_security_strict.html';
|
cy.get('rect#cl2').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('rect#cl2').click({ force: true });
|
|
||||||
|
|
||||||
// cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
|
|
||||||
cy.get('.created-by-gant-click').should('not.exist');
|
cy.get('.created-by-gant-click').should('not.exist');
|
||||||
});
|
});
|
||||||
it('should handle a click on a task with a bound function', () => {
|
|
||||||
const url = 'http://localhost:9000/click_security_strict.html';
|
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('text#cl2-text').click({ force: true });
|
|
||||||
|
|
||||||
// cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
|
it('should handle a click on a task with a bound function', () => {
|
||||||
|
cy.get('text#cl2-text').click({ force: true });
|
||||||
cy.get('.created-by-gant-click').should('not.exist');
|
cy.get('.created-by-gant-click').should('not.exist');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Interaction - security level other, missspelling', () => {
|
describe('Interaction - security level other, missspelling', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.visit('http://localhost:9000/click_security_other.html');
|
||||||
|
});
|
||||||
|
|
||||||
it('should handle a click on a node with a bound function', () => {
|
it('should handle a click on a node with a bound function', () => {
|
||||||
const url = 'http://localhost:9000/click_security_other.html';
|
cy.contains('Function1').parents('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g#flowchart-Function-4').click();
|
|
||||||
|
|
||||||
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
|
|
||||||
cy.get('.created-by-click').should('not.exist');
|
cy.get('.created-by-click').should('not.exist');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a node with a bound function where the node starts with a number', () => {
|
it('should handle a click on a node with a bound function where the node starts with a number', () => {
|
||||||
const url = 'http://localhost:9000/click_security_other.html';
|
cy.contains('1Function').parents('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('g[id="flowchart-1Function-10"]').click();
|
|
||||||
|
|
||||||
cy.get('.created-by-click').should('not.exist');
|
|
||||||
cy.get('.created-by-click').should('not.exist');
|
cy.get('.created-by-click').should('not.exist');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a node with a bound url', () => {
|
it('should handle a click on a node with a bound url', () => {
|
||||||
const url = 'http://localhost:9000/click_security_other.html';
|
cy.contains('URL1').find('.node').click();
|
||||||
cy.viewport(1440, 1024);
|
cy.location().should(({ href }) => {
|
||||||
cy.visit(url);
|
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||||
cy.get('body').find('g#flowchart-URL-5').click();
|
|
||||||
|
|
||||||
cy.location().should((location) => {
|
|
||||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a task with a bound function', () => {
|
it('should handle a click on a task with a bound function', () => {
|
||||||
const url = 'http://localhost:9000/click_security_other.html';
|
cy.get('rect#cl2').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('rect#cl2').click({ force: true });
|
|
||||||
|
|
||||||
cy.get('.created-by-gant-click').should('not.exist');
|
cy.get('.created-by-gant-click').should('not.exist');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle a click on a task with a bound function', () => {
|
it('should handle a click on a task with a bound function', () => {
|
||||||
const url = 'http://localhost:9000/click_security_other.html';
|
cy.get('text#cl2-text').click({ force: true });
|
||||||
cy.viewport(1440, 1024);
|
|
||||||
cy.visit(url);
|
|
||||||
cy.get('body').find('text#cl2-text').click({ force: true });
|
|
||||||
|
|
||||||
cy.get('.created-by-gant-click').should('not.exist');
|
cy.get('.created-by-gant-click').should('not.exist');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -21,7 +21,7 @@ describe('Git Graph diagram', () => {
|
||||||
// // Call Open on eyes to initialize a test session
|
// // Call Open on eyes to initialize a test session
|
||||||
// cy.eyesOpen({
|
// cy.eyesOpen({
|
||||||
// appName: 'Demo App',
|
// appName: 'Demo App',
|
||||||
// testName: 'Ultrafast grid demo',
|
// testName: 'UltraFast grid demo',
|
||||||
// });
|
// });
|
||||||
|
|
||||||
// // check the login page with fluent api, see more info here
|
// // check the login page with fluent api, see more info here
|
||||||
|
|
|
@ -478,4 +478,34 @@ describe('Class diagram V2', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('18: should render a simple class diagram with notes', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
classDiagram-v2
|
||||||
|
note "I love this diagram!\nDo you love it?"
|
||||||
|
class Class10 {
|
||||||
|
<<service>>
|
||||||
|
int id
|
||||||
|
size()
|
||||||
|
}
|
||||||
|
note for Class10 "Cool class\nI said it's very cool class!"
|
||||||
|
|
||||||
|
`,
|
||||||
|
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('1433: should render a simple class with a title', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`---
|
||||||
|
title: simple class diagram
|
||||||
|
---
|
||||||
|
classDiagram-v2
|
||||||
|
class Class10
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -407,4 +407,21 @@ describe('Class diagram', () => {
|
||||||
// // expect(svg).to.not.have.attr('style');
|
// // expect(svg).to.not.have.attr('style');
|
||||||
// });
|
// });
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
it('19: should render a simple class diagram with notes', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
classDiagram
|
||||||
|
note "I love this diagram!\nDo you love it?"
|
||||||
|
class Class10 {
|
||||||
|
<<service>>
|
||||||
|
int id
|
||||||
|
size()
|
||||||
|
}
|
||||||
|
note for Class10 "Cool class\nI said it's very cool class!"
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -167,7 +167,7 @@ describe('Entity Relationship Diagram', () => {
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
|
|
||||||
it.only('should render entities with generic and array attributes', () => {
|
it('should render entities with generic and array attributes', () => {
|
||||||
renderGraph(
|
renderGraph(
|
||||||
`
|
`
|
||||||
erDiagram
|
erDiagram
|
||||||
|
@ -255,4 +255,35 @@ describe('Entity Relationship Diagram', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should render entities with aliases', () => {
|
||||||
|
renderGraph(
|
||||||
|
`
|
||||||
|
erDiagram
|
||||||
|
T1 one or zero to one or more T2 : test
|
||||||
|
T2 one or many optionally to zero or one T3 : test
|
||||||
|
T3 zero or more to zero or many T4 : test
|
||||||
|
T4 many(0) to many(1) T5 : test
|
||||||
|
T5 many optionally to one T6 : test
|
||||||
|
T6 only one optionally to only one T1 : test
|
||||||
|
T4 0+ to 1+ T6 : test
|
||||||
|
T1 1 to 1 T3 : test
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('1433: should render a simple ER diagram with a title', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`---
|
||||||
|
title: simple ER diagram
|
||||||
|
---
|
||||||
|
erDiagram
|
||||||
|
CUSTOMER ||--o{ ORDER : places
|
||||||
|
ORDER ||--|{ LINE-ITEM : contains
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -663,4 +663,15 @@ flowchart RL
|
||||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('1433: should render a titled flowchart with titleTopMargin set to 0', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`---
|
||||||
|
title: Simple flowchart
|
||||||
|
---
|
||||||
|
flowchart TD
|
||||||
|
A --> B
|
||||||
|
`,
|
||||||
|
{ titleTopMargin: 0 }
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -92,7 +92,7 @@ describe('Gantt diagram', () => {
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('should render a gantt chart for issue #1060', () => {
|
it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
gantt
|
gantt
|
||||||
|
@ -326,7 +326,7 @@ describe('Gantt diagram', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg').should((svg) => {
|
cy.get('svg').should((svg) => {
|
||||||
const el = svg.get(0);
|
const el = svg.get(0);
|
||||||
const children = Array.from(el.children);
|
const children = [...el.children];
|
||||||
|
|
||||||
const titleEl = children.find(function (node) {
|
const titleEl = children.find(function (node) {
|
||||||
return node.tagName === 'title';
|
return node.tagName === 'title';
|
||||||
|
@ -341,4 +341,130 @@ describe('Gantt diagram', () => {
|
||||||
expect(descriptionEl.textContent).to.equal(expectedAccDescription);
|
expect(descriptionEl.textContent).to.equal(expectedAccDescription);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should render a gantt diagram with tick is 15 minutes', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
gantt
|
||||||
|
title A Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %H:%M
|
||||||
|
tickInterval 15minute
|
||||||
|
excludes weekends
|
||||||
|
|
||||||
|
section Section
|
||||||
|
A task : a1, 2022-10-03, 6h
|
||||||
|
Another task : after a1, 6h
|
||||||
|
section Another
|
||||||
|
Task in sec : 2022-10-03, 3h
|
||||||
|
another task : 3h
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render a gantt diagram with tick is 6 hours', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
gantt
|
||||||
|
title A Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %d %H:%M
|
||||||
|
tickInterval 6hour
|
||||||
|
excludes weekends
|
||||||
|
|
||||||
|
section Section
|
||||||
|
A task : a1, 2022-10-03, 1d
|
||||||
|
Another task : after a1, 2d
|
||||||
|
section Another
|
||||||
|
Task in sec : 2022-10-04, 2d
|
||||||
|
another task : 2d
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render a gantt diagram with tick is 1 day', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
gantt
|
||||||
|
title A Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %m-%d
|
||||||
|
tickInterval 1day
|
||||||
|
excludes weekends
|
||||||
|
|
||||||
|
section Section
|
||||||
|
A task : a1, 2022-10-01, 30d
|
||||||
|
Another task : after a1, 20d
|
||||||
|
section Another
|
||||||
|
Task in sec : 2022-10-20, 12d
|
||||||
|
another task : 24d
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render a gantt diagram with tick is 1 week', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
gantt
|
||||||
|
title A Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %m-%d
|
||||||
|
tickInterval 1week
|
||||||
|
excludes weekends
|
||||||
|
|
||||||
|
section Section
|
||||||
|
A task : a1, 2022-10-01, 30d
|
||||||
|
Another task : after a1, 20d
|
||||||
|
section Another
|
||||||
|
Task in sec : 2022-10-20, 12d
|
||||||
|
another task : 24d
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render a gantt diagram with tick is 1 month', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
gantt
|
||||||
|
title A Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %m-%d
|
||||||
|
tickInterval 1month
|
||||||
|
excludes weekends
|
||||||
|
|
||||||
|
section Section
|
||||||
|
A task : a1, 2022-10-01, 30d
|
||||||
|
Another task : after a1, 20d
|
||||||
|
section Another
|
||||||
|
Task in sec : 2022-10-20, 12d
|
||||||
|
another task : 24d
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render a gantt diagram with tick is 1 day and topAxis is true', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
gantt
|
||||||
|
title A Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %m-%d
|
||||||
|
tickInterval 1day
|
||||||
|
excludes weekends
|
||||||
|
|
||||||
|
section Section
|
||||||
|
A task : a1, 2022-10-01, 30d
|
||||||
|
Another task : after a1, 20d
|
||||||
|
section Another
|
||||||
|
Task in sec : 2022-10-20, 12d
|
||||||
|
another task : 24d
|
||||||
|
`,
|
||||||
|
{ gantt: { topAxis: true } }
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -322,4 +322,15 @@ describe('Git Graph diagram', () => {
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('1433: should render a simple gitgraph with a title', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`---
|
||||||
|
title: simple gitGraph
|
||||||
|
---
|
||||||
|
gitGraph
|
||||||
|
commit id: "1-abcdefg"
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,75 +0,0 @@
|
||||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
|
||||||
|
|
||||||
describe('Mindmap', () => {
|
|
||||||
it('square shape', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
mindmap
|
|
||||||
root[
|
|
||||||
The root
|
|
||||||
]
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
cy.get('svg');
|
|
||||||
});
|
|
||||||
it('rounded rect shape', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
mindmap
|
|
||||||
root((
|
|
||||||
The root
|
|
||||||
))
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
cy.get('svg');
|
|
||||||
});
|
|
||||||
it('circle shape', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
mindmap
|
|
||||||
root(
|
|
||||||
The root
|
|
||||||
)
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
cy.get('svg');
|
|
||||||
});
|
|
||||||
it('default shape', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
mindmap
|
|
||||||
The root
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
cy.get('svg');
|
|
||||||
});
|
|
||||||
it('adding children', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
mindmap
|
|
||||||
The root
|
|
||||||
child1
|
|
||||||
child2
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
cy.get('svg');
|
|
||||||
});
|
|
||||||
it('adding grand children', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
mindmap
|
|
||||||
The root
|
|
||||||
child1
|
|
||||||
child2
|
|
||||||
child3
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
cy.get('svg');
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,115 +0,0 @@
|
||||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
|
||||||
|
|
||||||
describe('Mindmaps', () => {
|
|
||||||
it('Only a root', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('a root with a shape', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root[root]
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('a root with wrapping text and a shape', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root[A root with a long text that wraps to keep the node size in check]
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('a root with an icon', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root[root]
|
|
||||||
::icon(mdi mdi-fire)
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Blang and cloud shape', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root))bang((
|
|
||||||
::icon(mdi mdi-fire)
|
|
||||||
a))Another bang((
|
|
||||||
::icon(mdi mdi-fire)
|
|
||||||
a)A cloud(
|
|
||||||
::icon(mdi mdi-fire)
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Blang and cloud shape with icons', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root))bang((
|
|
||||||
|
|
||||||
a))Another bang((
|
|
||||||
a)A cloud(
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('braches', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root
|
|
||||||
child1
|
|
||||||
grandchild 1
|
|
||||||
grandchild 2
|
|
||||||
child2
|
|
||||||
grandchild 3
|
|
||||||
grandchild 4
|
|
||||||
child3
|
|
||||||
grandchild 5
|
|
||||||
grandchild 6
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('braches with shapes and labels', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root
|
|
||||||
child1((Circle))
|
|
||||||
grandchild 1
|
|
||||||
grandchild 2
|
|
||||||
child2(Round rectangle)
|
|
||||||
grandchild 3
|
|
||||||
grandchild 4
|
|
||||||
child3[Square]
|
|
||||||
grandchild 5
|
|
||||||
::icon(mdi mdi-fire)
|
|
||||||
gc6((grand<br/>child 6))
|
|
||||||
::icon(mdi mdi-fire)
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('text shouhld wrap with icon', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`mindmap
|
|
||||||
root
|
|
||||||
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
/* The end */
|
|
||||||
});
|
|
|
@ -0,0 +1,233 @@
|
||||||
|
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check whether the SVG Element has a Mindmap root
|
||||||
|
*
|
||||||
|
* Sometimes, Cypress takes a snapshot before the mermaid mindmap has finished
|
||||||
|
* generating the SVG.
|
||||||
|
*
|
||||||
|
* @param $p - The element to check.
|
||||||
|
*/
|
||||||
|
function shouldHaveRoot($p: JQuery<SVGSVGElement>) {
|
||||||
|
// get HTML Element from jquery element
|
||||||
|
const svgElement = $p[0];
|
||||||
|
expect(svgElement.nodeName).equal('svg');
|
||||||
|
|
||||||
|
const sectionRoots = svgElement.getElementsByClassName('mindmap-node section-root');
|
||||||
|
// mindmap should have at least one root section
|
||||||
|
expect(sectionRoots).to.have.lengthOf.at.least(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('Mindmaps', () => {
|
||||||
|
it('Only a root', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('a root with a shape', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root[root]
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('a root with wrapping text and a shape', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root[A root with a long text that wraps to keep the node size in check]
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('a root with an icon', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root[root]
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Blang and cloud shape', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root))bang((
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
a))Another bang((
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
a)A cloud(
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Blang and cloud shape with icons', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root))bang((
|
||||||
|
|
||||||
|
a))Another bang((
|
||||||
|
a)A cloud(
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('braches', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root
|
||||||
|
child1
|
||||||
|
grandchild 1
|
||||||
|
grandchild 2
|
||||||
|
child2
|
||||||
|
grandchild 3
|
||||||
|
grandchild 4
|
||||||
|
child3
|
||||||
|
grandchild 5
|
||||||
|
grandchild 6
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('braches with shapes and labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root
|
||||||
|
child1((Circle))
|
||||||
|
grandchild 1
|
||||||
|
grandchild 2
|
||||||
|
child2(Round rectangle)
|
||||||
|
grandchild 3
|
||||||
|
grandchild 4
|
||||||
|
child3[Square]
|
||||||
|
grandchild 5
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
gc6((grand<br/>child 6))
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('text shouhld wrap with icon', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`mindmap
|
||||||
|
root
|
||||||
|
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('square shape', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
mindmap
|
||||||
|
root[
|
||||||
|
The root
|
||||||
|
]
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('rounded rect shape', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
mindmap
|
||||||
|
root((
|
||||||
|
The root
|
||||||
|
))
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('circle shape', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
mindmap
|
||||||
|
root(
|
||||||
|
The root
|
||||||
|
)
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('default shape', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
mindmap
|
||||||
|
The root
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('adding children', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
mindmap
|
||||||
|
The root
|
||||||
|
child1
|
||||||
|
child2
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('adding grand children', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
mindmap
|
||||||
|
The root
|
||||||
|
child1
|
||||||
|
child2
|
||||||
|
child3
|
||||||
|
`,
|
||||||
|
{},
|
||||||
|
undefined,
|
||||||
|
shouldHaveRoot
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
/* The end */
|
||||||
|
});
|
|
@ -96,7 +96,7 @@ describe('Requirement diagram', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg').should((svg) => {
|
cy.get('svg').should((svg) => {
|
||||||
const el = svg.get(0);
|
const el = svg.get(0);
|
||||||
const children = Array.from(el.children);
|
const children = [...el.children];
|
||||||
|
|
||||||
const titleEl = children.find(function (node) {
|
const titleEl = children.find(function (node) {
|
||||||
return node.tagName === 'title';
|
return node.tagName === 'title';
|
||||||
|
|
|
@ -521,4 +521,54 @@ stateDiagram-v2
|
||||||
{ logLevel: 0, fontFamily: 'courier' }
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('classDefs and applying classes', () => {
|
||||||
|
it('v2 states can have a class applied', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
stateDiagram-v2
|
||||||
|
[*] --> A
|
||||||
|
A --> B: test({ foo#colon; 'far' })
|
||||||
|
B --> [*]
|
||||||
|
classDef badBadEvent fill:#f00,color:white,font-weight:bold
|
||||||
|
class B badBadEvent
|
||||||
|
`,
|
||||||
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('v2 can have multiple classes applied to multiple states', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
stateDiagram-v2
|
||||||
|
classDef notMoving fill:white
|
||||||
|
classDef movement font-style:italic;
|
||||||
|
classDef badBadEvent fill:#f00,color:white,font-weight:bold
|
||||||
|
|
||||||
|
[*] --> Still
|
||||||
|
Still --> [*]
|
||||||
|
Still --> Moving
|
||||||
|
Moving --> Still
|
||||||
|
Moving --> Crash
|
||||||
|
Crash --> [*]
|
||||||
|
|
||||||
|
class Still notMoving
|
||||||
|
class Moving, Crash movement
|
||||||
|
class Crash badBadEvent
|
||||||
|
`,
|
||||||
|
{ logLevel: 0, fontFamily: 'courier' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
it('1433: should render a simple state diagram with a title', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`---
|
||||||
|
title: simple state diagram
|
||||||
|
---
|
||||||
|
stateDiagram-v2
|
||||||
|
[*] --> State1
|
||||||
|
State1 --> [*]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -25,6 +25,7 @@ describe('themeCSS balancing, it', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// TODO: Delete/Rename this describe, keeping the inner contents.
|
||||||
describe('Pie Chart', () => {
|
describe('Pie Chart', () => {
|
||||||
// beforeEach(()=>{
|
// beforeEach(()=>{
|
||||||
// cy.clock((new Date('2014-06-09')).getTime());
|
// cy.clock((new Date('2014-06-09')).getTime());
|
||||||
|
|
|
@ -13,42 +13,42 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
Function-->URL
|
FunctionTest1-->URLTest1
|
||||||
click Function clickByFlow "Add a div"
|
click FunctionTest1 clickByFlow "Add a div"
|
||||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
click URLTest1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre 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/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre class="mermaid">
|
||||||
flowchart TB
|
flowchart TB
|
||||||
Function-->URL
|
FunctionTest2-->URLTest2
|
||||||
click Function clickByFlow "Add a div"
|
click FunctionTest2 clickByFlow "Add a div"
|
||||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
|
click URLTest2 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre class="mermaid">
|
||||||
flowchart TB
|
flowchart TB
|
||||||
1Function--->2URL
|
10Function--->20URL
|
||||||
click 1Function clickByFlow "Add a div"
|
click 10Function clickByFlow "Add a div"
|
||||||
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
|
click 20URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre 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/empty.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"
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre 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/empty.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"
|
||||||
</pre>
|
</pre>
|
||||||
|
@ -85,7 +85,7 @@
|
||||||
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
||||||
Calling a Callback with args :cl3, after cl1, 3d
|
Calling a Callback with args :cl3, after cl1, 3d
|
||||||
|
|
||||||
click cl1 href "http://localhost:9000/webpackUsage.html"
|
click cl1 href "http://localhost:9000/empty.html"
|
||||||
click cl2 call clickByGantt()
|
click cl2 call clickByGantt()
|
||||||
click cl3 call clickByGantt("test1", test2, test3)
|
click cl3 call clickByGantt("test1", test2, test3)
|
||||||
|
|
||||||
|
@ -95,31 +95,31 @@
|
||||||
Add another diagram to demo page : 48h
|
Add another diagram to demo page : 48h
|
||||||
</pre>
|
</pre>
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
FunctionArg-->URL
|
FunctionArgTest2-->URL
|
||||||
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
|
||||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre class="mermaid">
|
||||||
flowchart TB
|
flowchart TB
|
||||||
FunctionArg-->URL
|
2FunctionArg-->URL
|
||||||
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
||||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre 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/empty.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"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre 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/empty.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>
|
</pre>
|
||||||
|
|
|
@ -9,15 +9,15 @@
|
||||||
<body>
|
<body>
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre id="FirstLine" class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
Function-->URL
|
Function1-->URL1
|
||||||
click Function clickByFlow "Add a div"
|
click Function1 clickByFlow "Add a div"
|
||||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre 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/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
|
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
|
||||||
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
||||||
|
|
||||||
click cl1 href "http://localhost:9000/webpackUsage.html"
|
click cl1 href "http://localhost:9000/empty.html"
|
||||||
click cl2 call clickByGantt("test", test, test)
|
click cl2 call clickByGantt("test", test, test)
|
||||||
|
|
||||||
section Last section
|
section Last section
|
||||||
|
|
|
@ -17,38 +17,38 @@
|
||||||
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/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre 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/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre 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/empty.html" "Visit <strong>mermaid docs</strong>" _self
|
||||||
</pre>
|
</pre>
|
||||||
<pre 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/empty.html" "Visit <strong>mermaid docs</strong>" _self
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre 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/empty.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"
|
||||||
</pre>
|
</pre>
|
||||||
<pre 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/empty.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"
|
||||||
</pre>
|
</pre>
|
||||||
|
@ -85,7 +85,7 @@
|
||||||
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
||||||
Calling a Callback with args :cl3, after cl1, 3d
|
Calling a Callback with args :cl3, after cl1, 3d
|
||||||
|
|
||||||
click cl1 href "http://localhost:9000/webpackUsage.html"
|
click cl1 href "http://localhost:9000/empty.html"
|
||||||
click cl2 call clickByGantt()
|
click cl2 call clickByGantt()
|
||||||
click cl3 call clickByGantt("test1", test2, test3)
|
click cl3 call clickByGantt("test1", test2, test3)
|
||||||
|
|
||||||
|
@ -99,19 +99,19 @@
|
||||||
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/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre 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/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre 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/empty.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"
|
||||||
</pre>
|
</pre>
|
||||||
|
@ -119,7 +119,7 @@
|
||||||
<pre 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/empty.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>
|
</pre>
|
||||||
|
|
|
@ -9,15 +9,15 @@
|
||||||
<body>
|
<body>
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre id="FirstLine" class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
Function-->URL
|
Function1-->URL1
|
||||||
click Function clickByFlow "Add a div"
|
click Function1 clickByFlow "Add a div"
|
||||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre 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/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
||||||
Calling a Callback with args :cl3, after cl1, 3d
|
Calling a Callback with args :cl3, after cl1, 3d
|
||||||
|
|
||||||
click cl1 href "http://localhost:9000/webpackUsage.html"
|
click cl1 href "http://localhost:9000/empty.html"
|
||||||
click cl2 call clickByGantt()
|
click cl2 call clickByGantt()
|
||||||
click cl3 call clickByGantt("test1", test2, test3)
|
click cl3 call clickByGantt("test1", test2, test3)
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Empty</title>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
|
@ -0,0 +1,49 @@
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<h1>Should correctly load a third-party diagram using registerDiagram</h1>
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
|
mindmap
|
||||||
|
root
|
||||||
|
A
|
||||||
|
B
|
||||||
|
C
|
||||||
|
D
|
||||||
|
E
|
||||||
|
A2
|
||||||
|
B2
|
||||||
|
C2
|
||||||
|
D2
|
||||||
|
E2
|
||||||
|
child1((Circle))
|
||||||
|
grandchild 1
|
||||||
|
grandchild 2
|
||||||
|
child2(Round rectangle)
|
||||||
|
grandchild 3
|
||||||
|
grandchild 4
|
||||||
|
child3[Square]
|
||||||
|
grandchild 5
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
gc6((grand<br/>child 6))
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
gc7((grand<br/>grand<br/>child 8))
|
||||||
|
</pre>
|
||||||
|
<!-- <pre id="diagram" class="mermaid2">
|
||||||
|
example-diagram
|
||||||
|
</pre> -->
|
||||||
|
|
||||||
|
<!-- <div id="cy"></div> -->
|
||||||
|
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
|
||||||
|
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
|
||||||
|
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
||||||
|
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
|
||||||
|
<script type="module">
|
||||||
|
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||||
|
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||||
|
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||||
|
|
||||||
|
await mermaid.registerExternalDiagrams([mindmap]);
|
||||||
|
await mermaid.initialize({ logLevel: 0 });
|
||||||
|
await mermaid.initThrowsErrorsAsync();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -6,6 +6,10 @@
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||||
/>
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
@ -38,7 +42,7 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<pre class="mermaid" style="width: 50%">
|
<pre class="mermaid2" style="width: 50%">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
subgraph one
|
subgraph one
|
||||||
direction LR
|
direction LR
|
||||||
|
@ -364,8 +368,7 @@ flowchart TD
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<!-- <script src="./mermaid.js"></script> -->
|
<!-- <script src="./mermaid.js"></script> -->
|
||||||
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
|
<script src="./mermaid.js"></script>
|
||||||
<script src="./packages/mermaid/dist/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);
|
||||||
|
@ -382,6 +385,7 @@ flowchart TD
|
||||||
htmlLabels: false,
|
htmlLabels: false,
|
||||||
fontFamily: 'courier',
|
fontFamily: 'courier',
|
||||||
},
|
},
|
||||||
|
lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
|
||||||
});
|
});
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
|
|
|
@ -6,6 +6,10 @@
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||||
/>
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
@ -25,6 +29,12 @@
|
||||||
}
|
}
|
||||||
.mermaid svg {
|
.mermaid svg {
|
||||||
/* font-size: 18px !important; */
|
/* font-size: 18px !important; */
|
||||||
|
background-color: #eee;
|
||||||
|
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||||
|
radial-gradient(#fff 1%, transparent 11%);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position: 0 0, 10px 10px;
|
||||||
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
.malware {
|
.malware {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -46,28 +56,65 @@
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
info
|
flowchart LR
|
||||||
</pre
|
%% Actors
|
||||||
>
|
A
|
||||||
|
subgraph Sub
|
||||||
|
B --> C
|
||||||
|
end
|
||||||
|
|
||||||
|
%% Accusations
|
||||||
|
A --L --> Sub
|
||||||
|
|
||||||
|
%% Offense
|
||||||
|
B --> A
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
|
stateDiagram-v2
|
||||||
|
|
||||||
|
[*] --> S1
|
||||||
|
S1 --> S2: long line using<br/>should work
|
||||||
|
S1 --> S3: long line using <br>should work
|
||||||
|
S1 --> S4: long line using \\nshould work
|
||||||
|
|
||||||
|
</pre>
|
||||||
<pre id="diagram" class="mermaid2">
|
<pre id="diagram" class="mermaid2">
|
||||||
mindmap
|
gantt
|
||||||
root
|
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
||||||
ch1
|
dateFormat YYYY-MM-DD
|
||||||
ch2
|
axisFormat %d
|
||||||
</pre
|
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
||||||
>
|
section Section1
|
||||||
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
|
Today: 1, -1h
|
||||||
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
|
</pre>
|
||||||
<script src="./packages/mermaid/dist/mermaid.js"></script>
|
|
||||||
<script>
|
<!-- <div id="cy"></div> -->
|
||||||
|
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
|
||||||
|
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
|
||||||
|
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
||||||
|
<!-- <script src="./mermaid.js"></script> -->
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||||
|
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||||
|
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||||
|
await mermaid.registerExternalDiagrams([mindmap]);
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
// console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
|
theme: 'default',
|
||||||
startOnLoad: true,
|
startOnLoad: true,
|
||||||
logLevel: 0,
|
logLevel: 0,
|
||||||
basePath: './packages/',
|
flowchart: {
|
||||||
// themeVariables: {relationLabelColor: 'red'}
|
useMaxWidth: false,
|
||||||
|
htmlLabels: true,
|
||||||
|
},
|
||||||
|
gantt: {
|
||||||
|
useMaxWidth: false,
|
||||||
|
},
|
||||||
|
useMaxWidth: false,
|
||||||
});
|
});
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
|
@ -76,6 +123,10 @@ info
|
||||||
console.error('In parse error:');
|
console.error('In parse error:');
|
||||||
console.error(err);
|
console.error(err);
|
||||||
};
|
};
|
||||||
|
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
|
||||||
|
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -14,7 +14,6 @@
|
||||||
mermaid.init({ startOnLoad: false });
|
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', `>`);
|
||||||
|
|
|
@ -17,9 +17,9 @@
|
||||||
rerender('XMas');
|
rerender('XMas');
|
||||||
|
|
||||||
function rerender(text) {
|
function rerender(text) {
|
||||||
var graphText = `graph TD
|
const graphText = `graph TD
|
||||||
A[${text}] -->|Get money| B(Go shopping)`;
|
A[${text}] -->|Get money| B(Go shopping)`;
|
||||||
var graph = mermaid.mermaidAPI.render('id', graphText);
|
const 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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<pre class="mermaid">
|
||||||
|
none
|
||||||
|
hello world
|
||||||
|
</pre>
|
||||||
|
<script src="./mermaid.js"></script>
|
||||||
|
<script>
|
||||||
|
mermaid.initialize({
|
||||||
|
logLevel: 1,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,4 +1,5 @@
|
||||||
import mermaid2 from '../../packages/mermaid/src/mermaid';
|
import mermaid2 from '../../packages/mermaid/src/mermaid';
|
||||||
|
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||||
|
|
||||||
function b64ToUtf8(str) {
|
function b64ToUtf8(str) {
|
||||||
return decodeURIComponent(escape(window.atob(str)));
|
return decodeURIComponent(escape(window.atob(str)));
|
||||||
|
@ -9,7 +10,7 @@ function b64ToUtf8(str) {
|
||||||
* configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
|
* configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
|
||||||
* page.
|
* page.
|
||||||
*/
|
*/
|
||||||
const contentLoaded = function () {
|
const contentLoaded = async function () {
|
||||||
let pos = document.location.href.indexOf('?graph=');
|
let pos = document.location.href.indexOf('?graph=');
|
||||||
if (pos > 0) {
|
if (pos > 0) {
|
||||||
pos = pos + 7;
|
pos = pos + 7;
|
||||||
|
@ -36,6 +37,7 @@ const contentLoaded = function () {
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
await mermaid2.registerExternalDiagrams([mindmap]);
|
||||||
mermaid2.initialize(graphObj.mermaid);
|
mermaid2.initialize(graphObj.mermaid);
|
||||||
mermaid2.init();
|
mermaid2.init();
|
||||||
}
|
}
|
||||||
|
@ -52,7 +54,7 @@ function merge(current, update) {
|
||||||
if (
|
if (
|
||||||
current.hasOwnProperty(key) &&
|
current.hasOwnProperty(key) &&
|
||||||
typeof current[key] === 'object' &&
|
typeof current[key] === 'object' &&
|
||||||
!(current[key] instanceof Array)
|
!Array.isArray(current[key])
|
||||||
) {
|
) {
|
||||||
merge(current[key], update[key]);
|
merge(current[key], update[key]);
|
||||||
|
|
||||||
|
@ -118,7 +120,9 @@ const contentLoadedApi = function () {
|
||||||
(svgCode, bindFunctions) => {
|
(svgCode, bindFunctions) => {
|
||||||
div.innerHTML = svgCode;
|
div.innerHTML = svgCode;
|
||||||
|
|
||||||
if (bindFunctions) bindFunctions(div);
|
if (bindFunctions) {
|
||||||
|
bindFunctions(div);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
div
|
div
|
||||||
);
|
);
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = 'classDiagram\n';
|
let 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';
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = 'stateDiagram-v2\n';
|
let 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()>";
|
||||||
|
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = 'stateDiagram-v2\n';
|
let diagram = 'stateDiagram-v2\n';
|
||||||
diagram += 's2 : A<img/src';
|
diagram += 's2 : A<img/src';
|
||||||
diagram += "='1'/onerror=xssAttack()>";
|
diagram += "='1'/onerror=xssAttack()>";
|
||||||
|
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = 'stateDiagram-v2\n';
|
let 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()>";
|
||||||
|
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = 'classDiagram\n';
|
let 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`)</';
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = `sequenceDiagram
|
let diagram = `sequenceDiagram
|
||||||
participant John
|
participant John
|
||||||
links John: {"XSS": "javas`;
|
links John: {"XSS": "javas`;
|
||||||
diagram += `cript:alert('AudioParam')"}`;
|
diagram += `cript:alert('AudioParam')"}`;
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = `sequenceDiagram
|
let diagram = `sequenceDiagram
|
||||||
participant Alice
|
participant Alice
|
||||||
links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
|
links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
|
||||||
|
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = `sequenceDiagram
|
let diagram = `sequenceDiagram
|
||||||
participant Alice
|
participant Alice
|
||||||
link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
|
link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
|
||||||
|
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = `classDiagram
|
let 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";
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = `classDiagram
|
let diagram = `classDiagram
|
||||||
class Shape{
|
class Shape{
|
||||||
<<<img/src='1'/`;
|
<<<img/src='1'/`;
|
||||||
|
|
||||||
|
|
|
@ -54,9 +54,9 @@
|
||||||
startOnLoad: true,
|
startOnLoad: true,
|
||||||
useMaxWidth: true,
|
useMaxWidth: true,
|
||||||
});
|
});
|
||||||
var cnt = 0;
|
let cnt = 0;
|
||||||
var a;
|
let a;
|
||||||
var handler = setInterval(() => {
|
const handler = setInterval(() => {
|
||||||
cnt++;
|
cnt++;
|
||||||
a = {};
|
a = {};
|
||||||
if (typeof a.polluted !== 'undefined') {
|
if (typeof a.polluted !== 'undefined') {
|
||||||
|
|
|
@ -96,7 +96,7 @@
|
||||||
// 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>"]`;
|
||||||
var diagram = ` graph TD
|
let 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 />"]';
|
||||||
|
|
|
@ -94,9 +94,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// var diagram = ` graph TD
|
// var diagram = ` graph TD
|
||||||
// A --> B["<a href='javasc`;
|
// A --> B["<a href='javascript`;
|
||||||
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||||
var diagram = ` graph TD
|
let diagram = ` graph TD
|
||||||
A --> B["<a href='javasc`;
|
A --> B["<a href='javasc`;
|
||||||
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
|
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
|
||||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||||
|
|
|
@ -42,9 +42,9 @@
|
||||||
startOnLoad: true,
|
startOnLoad: true,
|
||||||
useMaxWidth: true,
|
useMaxWidth: true,
|
||||||
});
|
});
|
||||||
var cnt = 0;
|
let cnt = 0;
|
||||||
var a;
|
let a;
|
||||||
var handler = setInterval(() => {
|
const handler = setInterval(() => {
|
||||||
cnt++;
|
cnt++;
|
||||||
a = {};
|
a = {};
|
||||||
if (typeof a.polluted !== 'undefined') {
|
if (typeof a.polluted !== 'undefined') {
|
||||||
|
|
|
@ -85,7 +85,7 @@
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
|
let 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";
|
||||||
|
|
|
@ -92,7 +92,7 @@
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
var diagram = 'graph LR\n';
|
let diagram = 'graph LR\n';
|
||||||
diagram += 'B-->D("<img onerror=location=`java';
|
diagram += 'B-->D("<img onerror=location=`java';
|
||||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||||
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
|
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
|
||||||
|
|
|
@ -92,7 +92,7 @@
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
var diagram = 'graph LR\n';
|
let 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);
|
||||||
|
|
|
@ -92,7 +92,7 @@
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
var diagram = 'graph LR\n';
|
let 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)";
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = 'stateDiagram-v2\n';
|
let 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);
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
throw new Error('XSS Succeeded');
|
throw new Error('XSS Succeeded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var diagram = 'stateDiagram-v2\n';
|
let 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);
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es2020",
|
||||||
|
"lib": ["es2020", "dom"],
|
||||||
|
"types": ["cypress", "node"]
|
||||||
|
},
|
||||||
|
"include": ["**/*.ts"]
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -14,6 +14,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1>C4 context diagram demos</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
C4Context
|
C4Context
|
||||||
accTitle: C4 context demo
|
accTitle: C4 context demo
|
||||||
|
@ -62,6 +63,7 @@
|
||||||
|
|
||||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
C4Container
|
C4Container
|
||||||
|
@ -101,6 +103,7 @@
|
||||||
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>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
C4Component
|
C4Component
|
||||||
|
@ -140,6 +143,7 @@
|
||||||
UpdateRelStyle(security, db, $offsetY="-40")
|
UpdateRelStyle(security, db, $offsetY="-40")
|
||||||
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
|
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
C4Dynamic
|
C4Dynamic
|
||||||
|
@ -159,6 +163,7 @@
|
||||||
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")
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
C4Deployment
|
C4Deployment
|
||||||
|
@ -210,7 +215,6 @@
|
||||||
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
|
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
|
||||||
UpdateRelStyle(db, db2, $offsetY="-10")
|
UpdateRelStyle(db, db2, $offsetY="-10")
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script src="./mermaid.js"></script>
|
||||||
|
@ -273,7 +277,7 @@
|
||||||
<script>
|
<script>
|
||||||
function testClick(nodeId) {
|
function testClick(nodeId) {
|
||||||
console.log('clicked', nodeId);
|
console.log('clicked', nodeId);
|
||||||
var originalBgColor = document.querySelector('body').style.backgroundColor;
|
let 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;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -14,7 +14,12 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1>Class diagram demos</h1>
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Demo Class Diagram
|
||||||
|
---
|
||||||
classDiagram
|
classDiagram
|
||||||
accTitle: Demo Class Diagram
|
accTitle: Demo Class Diagram
|
||||||
accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
|
accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
|
||||||
|
@ -42,8 +47,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
classDiagram
|
classDiagram
|
||||||
Class01 <|-- AveryLongClass : Cool
|
Class01 <|-- AveryLongClass : Cool
|
||||||
|
@ -68,6 +73,7 @@
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
classDiagram
|
classDiagram
|
||||||
class Class01~T~
|
class Class01~T~
|
||||||
|
@ -81,6 +87,7 @@
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
classDiagram
|
classDiagram
|
||||||
Class01~T~ <|-- AveryLongClass : Cool
|
Class01~T~ <|-- AveryLongClass : Cool
|
||||||
|
@ -104,11 +111,13 @@
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
classDiagram
|
classDiagram
|
||||||
Interface1 ()-- Interface1Impl
|
Interface1 ()-- Interface1Impl
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
classDiagram
|
classDiagram
|
||||||
direction LR
|
direction LR
|
||||||
|
@ -117,6 +126,7 @@
|
||||||
Dog : species()
|
Dog : species()
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
classDiagram
|
classDiagram
|
||||||
direction RL
|
direction RL
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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>Data Flow 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 {
|
||||||
|
@ -13,7 +13,7 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h2>Data Flow Diagram Example</h2>
|
<h1>Data Flow Diagram demos</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
accTitle: A simple linear flowchart.
|
accTitle: A simple linear flowchart.
|
||||||
|
@ -21,6 +21,8 @@
|
||||||
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
|
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h2>Borders Example</h2>
|
<h2>Borders Example</h2>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
flowchart TD
|
flowchart TD
|
||||||
|
@ -44,7 +46,7 @@
|
||||||
<script>
|
<script>
|
||||||
function testClick(nodeId) {
|
function testClick(nodeId) {
|
||||||
console.log('clicked', nodeId);
|
console.log('clicked', nodeId);
|
||||||
var originalBgColor = document.querySelector('body').style.backgroundColor;
|
let 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;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -10,12 +10,19 @@
|
||||||
/* 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;
|
||||||
}
|
}
|
||||||
|
.diagram-title {
|
||||||
|
fill: red;
|
||||||
|
font-size: 24pt;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
|
||||||
|
---
|
||||||
|
title: This is a title
|
||||||
|
---
|
||||||
erDiagram
|
erDiagram
|
||||||
%% title This is a title
|
%% title This is a title
|
||||||
%% accDescription Test a description
|
%% accDescription Test a description
|
||||||
|
@ -51,8 +58,8 @@ erDiagram
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<script src="./mermaid.js"></script>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from '../src/mermaid';
|
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
theme: 'default',
|
theme: 'default',
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -15,9 +15,11 @@
|
||||||
<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>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: This is a complicated flow
|
||||||
|
---
|
||||||
graph LR
|
graph LR
|
||||||
accTitle: This is a complicated flow
|
accTitle: This is a complicated flow
|
||||||
accDescr: This is the descriptoin for the complicated flow.
|
accDescr: This is the descriptoin for the complicated flow.
|
||||||
|
@ -117,6 +119,7 @@
|
||||||
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;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -216,12 +219,14 @@
|
||||||
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;
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 2</h2>
|
<h2>Sample 2</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: What to buy
|
||||||
|
---
|
||||||
graph TD
|
graph TD
|
||||||
accTitle: What to buy
|
accTitle: What to buy
|
||||||
accDescr: Options of what to buy with Christmas money
|
accDescr: Options of what to buy with Christmas money
|
||||||
|
@ -231,6 +236,7 @@
|
||||||
C -->|Two| E[iPhone]
|
C -->|Two| E[iPhone]
|
||||||
C -->|Three| F[Car]
|
C -->|Three| F[Car]
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -243,10 +249,9 @@
|
||||||
C -->|Two| E[iPhone]
|
C -->|Two| E[iPhone]
|
||||||
C -->|Three| F[Car]
|
C -->|Three| F[Car]
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 3</h2>
|
<h2>Sample 3</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
|
@ -257,6 +262,7 @@
|
||||||
C -->|Two| E[\iPhone\]
|
C -->|Two| E[\iPhone\]
|
||||||
C -->|Three| F[Car]
|
C -->|Three| F[Car]
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -268,10 +274,9 @@
|
||||||
C -->|Two| E[\iPhone\]
|
C -->|Two| E[\iPhone\]
|
||||||
C -->|Three| F[Car]
|
C -->|Three| F[Car]
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 4</h2>
|
<h2>Sample 4</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
@ -296,6 +301,7 @@
|
||||||
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)
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -321,10 +327,9 @@
|
||||||
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)
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 5</h2>
|
<h2>Sample 5</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
|
@ -391,6 +396,7 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -458,10 +464,9 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 6</h2>
|
<h2>Sample 6</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
|
@ -469,6 +474,7 @@
|
||||||
a1-->a2
|
a1-->a2
|
||||||
end
|
end
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -477,10 +483,9 @@
|
||||||
a1-->a2
|
a1-->a2
|
||||||
end
|
end
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 7</h2>
|
<h2>Sample 7</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
|
@ -511,6 +516,7 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -542,10 +548,9 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 8</h2>
|
<h2>Sample 8</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
@ -562,6 +567,7 @@
|
||||||
3000"
|
3000"
|
||||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -579,10 +585,9 @@
|
||||||
3000"
|
3000"
|
||||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 9</h2>
|
<h2>Sample 9</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
|
@ -597,6 +602,7 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -612,10 +618,9 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 10</h2>
|
<h2>Sample 10</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
|
@ -631,6 +636,7 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -647,10 +653,9 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 11</h2>
|
<h2>Sample 11</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
@ -666,6 +671,7 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -682,10 +688,9 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 12</h2>
|
<h2>Sample 12</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
@ -705,6 +710,7 @@
|
||||||
classDef someclass fill:#f96;
|
classDef someclass fill:#f96;
|
||||||
class A someclass;
|
class A someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -725,10 +731,9 @@
|
||||||
classDef someclass fill:#f96;
|
classDef someclass fill:#f96;
|
||||||
class A someclass;
|
class A someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 13</h2>
|
<h2>Sample 13</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
@ -742,6 +747,7 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -756,10 +762,9 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h2>Sample 14</h2>
|
<h2>Sample 14</h2>
|
||||||
|
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
@ -769,6 +774,7 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -779,10 +785,9 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Sample 15</h2>
|
|
||||||
|
|
||||||
|
<h2>Sample 15</h2>
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
|
@ -801,6 +806,7 @@
|
||||||
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"
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -820,10 +826,9 @@
|
||||||
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"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Sample 16</h2>
|
|
||||||
|
|
||||||
|
<h2>Sample 16</h2>
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
@ -840,6 +845,7 @@
|
||||||
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"
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -857,10 +863,9 @@
|
||||||
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"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Sample 17</h2>
|
|
||||||
|
|
||||||
|
<h2>Sample 17</h2>
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
|
@ -873,6 +878,7 @@
|
||||||
class A myClass1
|
class A myClass1
|
||||||
class D myClass2
|
class D myClass2
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -886,10 +892,9 @@
|
||||||
class A myClass1
|
class A myClass1
|
||||||
class D myClass2
|
class D myClass2
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Sample 18</h2>
|
|
||||||
|
|
||||||
|
<h2>Sample 18</h2>
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
@ -937,6 +942,7 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -985,10 +991,9 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Sample 19</h2>
|
|
||||||
|
|
||||||
|
<h2>Sample 19</h2>
|
||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
|
@ -1036,6 +1041,7 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
@ -1087,7 +1093,6 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
@ -1189,6 +1194,8 @@
|
||||||
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;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
A[Christmas] -->|Get money| B(Go shopping)
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
@ -1197,6 +1204,8 @@
|
||||||
C -->|Two| E[iPhone]
|
C -->|Two| E[iPhone]
|
||||||
C -->|Three| F[Car]
|
C -->|Three| F[Car]
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
A[/Christmas\]
|
A[/Christmas\]
|
||||||
|
@ -1206,6 +1215,8 @@
|
||||||
C -->|Two| E[\iPhone\]
|
C -->|Two| E[\iPhone\]
|
||||||
C -->|Three| F[Car]
|
C -->|Three| F[Car]
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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)
|
||||||
|
@ -1229,6 +1240,8 @@
|
||||||
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)
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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")
|
||||||
|
@ -1294,12 +1307,16 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
subgraph One
|
subgraph One
|
||||||
a1-->a2
|
a1-->a2
|
||||||
end
|
end
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
A
|
A
|
||||||
|
@ -1329,6 +1346,8 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
||||||
|
@ -1344,6 +1363,8 @@
|
||||||
3000"
|
3000"
|
||||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
A[Christmas] -->|Get money| B(Go shopping)
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
@ -1357,6 +1378,8 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
A([stadium shape test])
|
A([stadium shape test])
|
||||||
|
@ -1371,6 +1394,8 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
A[[subroutine shape test]]
|
A[[subroutine shape test]]
|
||||||
|
@ -1385,6 +1410,8 @@
|
||||||
class A someclass;
|
class A someclass;
|
||||||
class C someclass;
|
class C someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
A[(cylindrical<br />shape<br />test)]
|
A[(cylindrical<br />shape<br />test)]
|
||||||
|
@ -1403,6 +1430,8 @@
|
||||||
classDef someclass fill:#f96;
|
classDef someclass fill:#f96;
|
||||||
class A someclass;
|
class A someclass;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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)
|
||||||
|
@ -1415,6 +1444,8 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
A(( )) -->|step 1| B(( ))
|
A(( )) -->|step 1| B(( ))
|
||||||
|
@ -1423,6 +1454,8 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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)"]
|
||||||
|
@ -1441,6 +1474,7 @@
|
||||||
click F "javascript:alert('test')" "script test"
|
click F "javascript:alert('test')" "script test"
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<pre 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)
|
||||||
|
@ -1456,6 +1490,8 @@
|
||||||
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"
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
graph TD
|
graph TD
|
||||||
A[myClass1] --> B[default] & C[default]
|
A[myClass1] --> B[default] & C[default]
|
||||||
|
@ -1467,6 +1503,7 @@
|
||||||
class A myClass1
|
class A myClass1
|
||||||
class D myClass2
|
class D myClass2
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
|
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
|
||||||
|
|
||||||
|
@ -1482,7 +1519,7 @@
|
||||||
<script>
|
<script>
|
||||||
function testClick(nodeId) {
|
function testClick(nodeId) {
|
||||||
console.log('clicked', nodeId);
|
console.log('clicked', nodeId);
|
||||||
var originalBgColor = document.querySelector('body').style.backgroundColor;
|
let 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;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -13,6 +13,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1>Gantt chart diagram demos</h1>
|
||||||
<!-- accDescription Tasks for Q4 -->
|
<!-- accDescription Tasks for Q4 -->
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
gantt
|
gantt
|
||||||
|
@ -27,6 +28,7 @@
|
||||||
Task in sec :2014-01-12 , 12d
|
Task in sec :2014-01-12 , 12d
|
||||||
another task : 24d
|
another task : 24d
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
gantt
|
gantt
|
||||||
|
@ -44,6 +46,8 @@
|
||||||
开发 :a, 2021-10-09, 4d
|
开发 :a, 2021-10-09, 4d
|
||||||
测试 :after a, 4d
|
测试 :after a, 4d
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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)
|
||||||
|
@ -53,6 +57,8 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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)
|
||||||
|
@ -63,24 +69,29 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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 Z
|
||||||
axisFormat %d
|
axisFormat %d/%m
|
||||||
todayMarker off
|
todayMarker off
|
||||||
section Section1
|
section Section1
|
||||||
Today: 1, -1h
|
Today: 1, -01:00, 5min
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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 Z
|
||||||
axisFormat %d
|
axisFormat %d/%m
|
||||||
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, -01:00, 5min
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
gantt
|
gantt
|
||||||
|
@ -120,6 +131,8 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
gantt
|
gantt
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
|
@ -151,6 +164,7 @@
|
||||||
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
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function ganttTestClick(a, b, c) {
|
function ganttTestClick(a, b, c) {
|
||||||
|
@ -160,13 +174,14 @@
|
||||||
}
|
}
|
||||||
function testClick(nodeId) {
|
function testClick(nodeId) {
|
||||||
console.log('clicked', nodeId);
|
console.log('clicked', nodeId);
|
||||||
var originalBgColor = document.querySelector('body').style.backgroundColor;
|
let 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>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script src="./mermaid.js"></script>
|
||||||
<script>
|
<script>
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -14,7 +14,11 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1>Git diagram demo</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Simple Git diagram
|
||||||
|
---
|
||||||
gitGraph:
|
gitGraph:
|
||||||
options
|
options
|
||||||
{
|
{
|
||||||
|
|
103
demos/index.html
103
demos/index.html
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -15,6 +15,13 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Mermaid quick test and demo pages</h1>
|
<h1>Mermaid quick test and demo pages</h1>
|
||||||
|
<p>
|
||||||
|
Some of these pages have duplicates; some are slow to load because they have so many graphs.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If you'd like to clean up one of the pages, please feel free to
|
||||||
|
<a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
@ -26,6 +33,9 @@
|
||||||
<li>
|
<li>
|
||||||
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
|
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<h2><a href="./er.html">Entity Relation diagram</a></h2>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<h2><a href="./flowchart.html">Flow charts</a></h2>
|
<h2><a href="./flowchart.html">Flow charts</a></h2>
|
||||||
</li>
|
</li>
|
||||||
|
@ -38,6 +48,9 @@
|
||||||
<li>
|
<li>
|
||||||
<h2><a href="./journey.html">Journey</a></h2>
|
<h2><a href="./journey.html">Journey</a></h2>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<h2><a href="./mindmap.html">Mindmap</a></h2>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<h2><a href="./pie.html">Pie</a></h2>
|
<h2><a href="./pie.html">Pie</a></h2>
|
||||||
</li>
|
</li>
|
||||||
|
@ -51,93 +64,5 @@
|
||||||
<h2><a href="./state.html">State</a></h2>
|
<h2><a href="./state.html">State</a></h2>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
|
||||||
<script>
|
|
||||||
const ALLOWED_TAGS = [
|
|
||||||
'a',
|
|
||||||
'b',
|
|
||||||
'blockquote',
|
|
||||||
'br',
|
|
||||||
'dd',
|
|
||||||
'div',
|
|
||||||
'dl',
|
|
||||||
'dt',
|
|
||||||
'em',
|
|
||||||
'foreignObject',
|
|
||||||
'h1',
|
|
||||||
'h2',
|
|
||||||
'h3',
|
|
||||||
'h4',
|
|
||||||
'h5',
|
|
||||||
'h6',
|
|
||||||
'h7',
|
|
||||||
'h8',
|
|
||||||
'hr',
|
|
||||||
'i',
|
|
||||||
'li',
|
|
||||||
'ul',
|
|
||||||
'ol',
|
|
||||||
'p',
|
|
||||||
'pre',
|
|
||||||
'span',
|
|
||||||
'strike',
|
|
||||||
'strong',
|
|
||||||
'table',
|
|
||||||
'tbody',
|
|
||||||
'td',
|
|
||||||
'tfoot',
|
|
||||||
'th',
|
|
||||||
'thead',
|
|
||||||
'tr',
|
|
||||||
];
|
|
||||||
mermaid.initialize({
|
|
||||||
theme: 'forest',
|
|
||||||
// themeCSS: '.node rect { fill: red; }',
|
|
||||||
logLevel: 3,
|
|
||||||
securityLevel: 'loose',
|
|
||||||
flowchart: { curve: 'basis' },
|
|
||||||
gantt: { axisFormat: '%m/%d/%Y' },
|
|
||||||
sequence: { actorMargin: 50 },
|
|
||||||
dompurifyConfig: {
|
|
||||||
USE_PROFILES: {
|
|
||||||
svg: true,
|
|
||||||
},
|
|
||||||
ADD_TAGS: ALLOWED_TAGS,
|
|
||||||
ADD_ATTR: ['transform-origin'],
|
|
||||||
},
|
|
||||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
function ganttTestClick(a, b, 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, () => {
|
|
||||||
//no-op
|
|
||||||
});
|
|
||||||
} 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -14,9 +14,12 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1>Journey diagram demo</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: My working day
|
||||||
|
---
|
||||||
journey
|
journey
|
||||||
title My working day
|
|
||||||
accTitle: Very simple journey demo
|
accTitle: Very simple journey demo
|
||||||
accDescr: 2 main sections: work and home, each with just a few tasks
|
accDescr: 2 main sections: work and home, each with just a few tasks
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,108 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<title>Mindmap Mermaid Quick Test Page</title>
|
||||||
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||||
|
<style>
|
||||||
|
div.mermaid {
|
||||||
|
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||||
|
font-family: 'Courier New', Courier, monospace !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Mindmap diagram demo</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
mindmap
|
||||||
|
root
|
||||||
|
child1((Circle))
|
||||||
|
grandchild 1
|
||||||
|
grandchild 2
|
||||||
|
child2(Round rectangle)
|
||||||
|
grandchild 3
|
||||||
|
grandchild 4
|
||||||
|
child3[Square]
|
||||||
|
grandchild 5
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
gc6((grand<br/>child 6))
|
||||||
|
::icon(mdi mdi-fire)
|
||||||
|
gc7((grand<br/>grand<br/>child 8))
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h2>Mindmap with root wrapping text and a shape</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
mindmap
|
||||||
|
root[A root with a long text that wraps to keep the node size in check]
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
import mermaidMindmap from './mermaid-mindmap.esm.mjs';
|
||||||
|
|
||||||
|
const ALLOWED_TAGS = [
|
||||||
|
'a',
|
||||||
|
'b',
|
||||||
|
'blockquote',
|
||||||
|
'br',
|
||||||
|
'dd',
|
||||||
|
'div',
|
||||||
|
'dl',
|
||||||
|
'dt',
|
||||||
|
'em',
|
||||||
|
'foreignObject',
|
||||||
|
'h1',
|
||||||
|
'h2',
|
||||||
|
'h3',
|
||||||
|
'h4',
|
||||||
|
'h5',
|
||||||
|
'h6',
|
||||||
|
'h7',
|
||||||
|
'h8',
|
||||||
|
'hr',
|
||||||
|
'i',
|
||||||
|
'li',
|
||||||
|
'ul',
|
||||||
|
'ol',
|
||||||
|
'p',
|
||||||
|
'pre',
|
||||||
|
'span',
|
||||||
|
'strike',
|
||||||
|
'strong',
|
||||||
|
'table',
|
||||||
|
'tbody',
|
||||||
|
'td',
|
||||||
|
'tfoot',
|
||||||
|
'th',
|
||||||
|
'thead',
|
||||||
|
'tr',
|
||||||
|
];
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
// console.error('Mermaid error: ', err);
|
||||||
|
};
|
||||||
|
await mermaid.registerExternalDiagrams([mermaidMindmap]);
|
||||||
|
mermaid.initialize({
|
||||||
|
theme: 'base',
|
||||||
|
startOnLoad: true,
|
||||||
|
logLevel: 0,
|
||||||
|
flowchart: {
|
||||||
|
useMaxWidth: false,
|
||||||
|
htmlLabels: true,
|
||||||
|
},
|
||||||
|
gantt: {
|
||||||
|
useMaxWidth: false,
|
||||||
|
},
|
||||||
|
useMaxWidth: false,
|
||||||
|
});
|
||||||
|
function callback() {
|
||||||
|
alert('It worked');
|
||||||
|
}
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
console.error('In parse error:');
|
||||||
|
console.error(err);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -14,6 +14,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1>Pie chart demos</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
pie title Pets adopted by volunteers
|
pie title Pets adopted by volunteers
|
||||||
accTitle: simple pie char demo
|
accTitle: simple pie char demo
|
||||||
|
@ -23,6 +24,7 @@
|
||||||
"Rats" : 15
|
"Rats" : 15
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<hr />
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
pie
|
pie
|
||||||
title Key elements in Product X
|
title Key elements in Product X
|
||||||
|
@ -35,7 +37,7 @@
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from '../src/mermaid';
|
import mermaid from '../packages/mermaid';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
theme: 'forest',
|
theme: 'forest',
|
||||||
// themeCSS: '.node rect { fill: red; }',
|
// themeCSS: '.node rect { fill: red; }',
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -14,6 +14,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1>Requirement diagram demos</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
requirementDiagram
|
requirementDiagram
|
||||||
accTitle: Requirments demo in black and white
|
accTitle: Requirments demo in black and white
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<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" />
|
||||||
|
@ -14,6 +14,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1>Sequence diagram demos</h1>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
accTitle: test the accTitle
|
accTitle: test the accTitle
|
||||||
|
@ -59,7 +60,7 @@
|
||||||
Alice -->> John: Parallel message 2
|
Alice -->> John: Parallel message 2
|
||||||
end
|
end
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
accTitle: Sequence diagram title is here
|
accTitle: Sequence diagram title is here
|
||||||
|
@ -96,6 +97,8 @@
|
||||||
Alice -->> John: Parallel message 2
|
Alice -->> John: Parallel message 2
|
||||||
end
|
end
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre 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;
|
||||||
|
@ -111,6 +114,8 @@
|
||||||
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;
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
autonumber
|
autonumber
|
||||||
|
@ -121,6 +126,7 @@
|
||||||
autonumber off
|
autonumber off
|
||||||
John-->>Alice: I feel great!
|
John-->>Alice: I feel great!
|
||||||
</pre>
|
</pre>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<script src="./mermaid.js"></script>
|
<script src="./mermaid.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue