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:
Sidharth Vinod
commit
963a1f1eb1
106
.eslintrc.json
106
.eslintrc.json
|
|
@ -16,26 +16,27 @@
|
|||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:jsdoc/recommended",
|
||||
"plugin:json/recommended",
|
||||
"plugin:markdown/recommended",
|
||||
"plugin:@cspell/recommended",
|
||||
"prettier"
|
||||
],
|
||||
"plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
|
||||
"plugins": [
|
||||
"@typescript-eslint",
|
||||
"no-only-tests",
|
||||
"html",
|
||||
"jest",
|
||||
"jsdoc",
|
||||
"json",
|
||||
"@cspell",
|
||||
"lodash",
|
||||
"unicorn"
|
||||
],
|
||||
"rules": {
|
||||
"curly": "error",
|
||||
"no-console": "error",
|
||||
"no-prototype-builtins": "off",
|
||||
"no-unused-vars": "off",
|
||||
"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",
|
||||
"@typescript-eslint/ban-ts-comment": [
|
||||
"error",
|
||||
|
|
@ -48,28 +49,89 @@
|
|||
}
|
||||
],
|
||||
"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": [
|
||||
{
|
||||
"files": "./**/*.html",
|
||||
"rules": {
|
||||
"no-undef": "off",
|
||||
"jsdoc/require-jsdoc": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": ["./cypress/**", "./demos/**"],
|
||||
"files": ["cypress/**", "demos/**"],
|
||||
"rules": {
|
||||
"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": {
|
||||
"jsdoc/require-jsdoc": "off",
|
||||
"@typescript-eslint/no-unused-vars": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": ["*.html", "*.md", "**/*.md/*"],
|
||||
"rules": {
|
||||
"no-var": "error",
|
||||
"no-undef": "off",
|
||||
"@typescript-eslint/no-unused-vars": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,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
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [16.x]
|
||||
node-version: [18.x]
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ jobs:
|
|||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [16.x]
|
||||
node-version: [18.x]
|
||||
steps:
|
||||
- if: ${{ ! env.USE_APPLI }}
|
||||
name: Warn if not using Applitools
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ jobs:
|
|||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
node-version: [16.x]
|
||||
node-version: [18.x]
|
||||
containers: [1, 2, 3, 4]
|
||||
steps:
|
||||
- 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
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [16.x]
|
||||
node-version: [18.x]
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
|
|
@ -39,4 +39,5 @@ jobs:
|
|||
run: pnpm run lint
|
||||
|
||||
- name: Verify Docs
|
||||
working-directory: ./packages/mermaid
|
||||
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
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.x
|
||||
- name: Install Yarn
|
||||
run: npm i yarn --global
|
||||
cache: pnpm
|
||||
node-version: 18.x
|
||||
|
||||
- name: Install Packages
|
||||
run: |
|
||||
pnpm install --frozen-lockfile
|
||||
env:
|
||||
CYPRESS_CACHE_FOLDER: .cache/Cypress
|
||||
|
||||
- name: Install Json
|
||||
run: npm i json --global
|
||||
|
||||
- name: Install Packages
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- name: Publish
|
||||
working-directory: ./packages/mermaid
|
||||
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
|
||||
echo $VERSION
|
||||
npm version --no-git-tag-version --allow-same-version $VERSION
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ jobs:
|
|||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.x
|
||||
node-version: 18.x
|
||||
- name: Install Yarn
|
||||
run: npm i yarn --global
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ jobs:
|
|||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [16.x]
|
||||
node-version: [18.x]
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
|
|
|
|||
|
|
@ -32,3 +32,7 @@ cypress/snapshots/
|
|||
.eslintcache
|
||||
.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
|
||||
|
|
@ -3,4 +3,5 @@ cypress/platform/xss3.html
|
|||
.cache
|
||||
coverage
|
||||
# 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 { fileURLToPath } from 'url';
|
||||
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 mermaidOnly = process.argv.includes('--mermaid');
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
||||
|
||||
type OutputOptions = Exclude<
|
||||
|
|
@ -13,6 +16,20 @@ type OutputOptions = Exclude<
|
|||
undefined
|
||||
>['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 = {
|
||||
mermaid: {
|
||||
name: 'mermaid',
|
||||
|
|
@ -22,23 +39,13 @@ const packageOptions = {
|
|||
'mermaid-mindmap': {
|
||||
name: 'mermaid-mindmap',
|
||||
packageName: 'mermaid-mindmap',
|
||||
file: 'add-diagram.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',
|
||||
file: 'detector.ts',
|
||||
},
|
||||
// 'mermaid-example-diagram-detector': {
|
||||
// name: 'mermaid-example-diagram-detector',
|
||||
// packageName: 'mermaid-example-diagram',
|
||||
// file: 'detector.ts',
|
||||
// },
|
||||
};
|
||||
|
||||
interface BuildOptions {
|
||||
|
|
@ -49,7 +56,7 @@ interface BuildOptions {
|
|||
}
|
||||
|
||||
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]);
|
||||
const { name, file, packageName } = packageOptions[entryName];
|
||||
let output: OutputOptions = [
|
||||
|
|
@ -68,9 +75,14 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||
];
|
||||
|
||||
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.
|
||||
// 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.
|
||||
output = [
|
||||
{
|
||||
|
|
@ -102,7 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||
resolve: {
|
||||
extensions: ['.jison', '.js', '.ts', '.json'],
|
||||
},
|
||||
plugins: [jisonPlugin()],
|
||||
plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
|
||||
};
|
||||
|
||||
if (watch && config.build) {
|
||||
|
|
@ -110,7 +122,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||
include: [
|
||||
'packages/mermaid-mindmap/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 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);
|
||||
}
|
||||
};
|
||||
|
||||
if (watch) {
|
||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
|
||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
|
||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
||||
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-example-diagram' }));
|
||||
}
|
||||
} else if (visualize) {
|
||||
await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
|
||||
await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
|
||||
} else {
|
||||
void main();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
import express from 'express';
|
||||
import express, { NextFunction, Request, Response } from 'express';
|
||||
import { createServer as createViteServer } from 'vite';
|
||||
// import { getBuildConfig } from './build';
|
||||
|
||||
const cors = (req: Request, res: Response, next: NextFunction) => {
|
||||
res.header('Access-Control-Allow-Origin', '*');
|
||||
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
|
||||
res.header('Access-Control-Allow-Headers', 'Content-Type');
|
||||
|
||||
next();
|
||||
};
|
||||
|
||||
async function createServer() {
|
||||
const app = express();
|
||||
|
||||
|
|
@ -12,8 +20,11 @@ async function createServer() {
|
|||
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-example-diagram/dist'));
|
||||
app.use(express.static('./packages/mermaid-mindmap/dist'));
|
||||
app.use(vite.middlewares);
|
||||
app.use(express.static('demos'));
|
||||
app.use(express.static('cypress/platform'));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"module": "ES2022"
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,17 @@
|
|||
"args": ["run", "${relativeFile}"],
|
||||
"smartStep": true,
|
||||
"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.
|
||||
|
||||
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
|
||||
|
||||
```bash
|
||||
git clone git@github.com:mermaid-js/mermaid.git
|
||||
cd mermaid
|
||||
pnpm install
|
||||
# npx is required for first install as volta support for pnpm is not added yet.
|
||||
npx pnpm install
|
||||
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
|
||||
- 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.
|
||||
|
||||
|
|
@ -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).
|
||||
|
||||
### 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 files under `/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
|
||||
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 `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
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 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
|
||||
$ 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
|
||||
$ 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
|
||||
|
||||
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?
|
||||
|
||||
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
|
||||
|
||||
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/
|
||||
|
||||
|
|
|
|||
33
README.md
33
README.md
|
|
@ -1,21 +1,6 @@
|
|||
# mermaid [](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||
# mermaid
|
||||
|
||||
# Whoa, whats going on here?
|
||||
|
||||
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.
|
||||
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
|
||||
|
||||
English | [简体中文](./README.zh-CN.md)
|
||||
|
||||
|
|
@ -41,12 +26,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
|
|||
<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.
|
||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
|
||||
[Tutorials](./docs/config/Tutorials.md) has video tutorials.
|
||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
|
||||
|
||||
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)
|
||||
|
||||
|
|
@ -352,7 +337,11 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
|
|||
|
||||
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!_
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
# mermaid [](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||
# mermaid
|
||||
|
||||
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
|
||||
|
||||
[English](./README.md) | 简体中文
|
||||
|
||||
|
|
@ -22,9 +24,9 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
|
|||
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
|
||||
<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)
|
||||
|
||||
|
|
@ -37,7 +39,7 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma
|
|||
<table>
|
||||
<!-- <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
|
||||
|
|
@ -55,7 +57,7 @@ C -->|One| D[Result 1]
|
|||
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
|
||||
|
|
@ -81,7 +83,7 @@ John->>Bob: How about you?
|
|||
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
|
||||
|
|
@ -105,7 +107,7 @@ gantt
|
|||
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
|
||||
|
|
@ -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
|
||||
|
|
@ -167,7 +169,7 @@ Moving --> 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
|
||||
|
|
@ -183,9 +185,9 @@ pie
|
|||
"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
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
return parent;
|
||||
},
|
||||
node() {
|
||||
return {
|
||||
getBBox() {
|
||||
return {
|
||||
x: 5,
|
||||
y: 10,
|
||||
height: 15,
|
||||
width: 20,
|
||||
};
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
elem.append = (name) => {
|
||||
const mockElem = MockD3(name, elem);
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
import { vi } from 'vitest';
|
||||
|
||||
// export const render = vi.fn();
|
||||
// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.
|
||||
|
|
|
|||
|
|
@ -15,5 +15,5 @@ module.exports = defineConfig({
|
|||
// { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
|
||||
],
|
||||
// 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)));
|
||||
};
|
||||
|
||||
const batchId = 'mermid-batch' + new Date().getTime();
|
||||
|
||||
export const mermaidUrl = (graphStr, options, api) => {
|
||||
const obj = {
|
||||
code: graphStr,
|
||||
|
|
@ -45,26 +47,32 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
|
|||
options.fontSize = '16px';
|
||||
}
|
||||
const useAppli = Cypress.env('useAppli');
|
||||
//const useAppli = false;
|
||||
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
|
||||
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
||||
|
||||
if (useAppli) {
|
||||
cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
|
||||
cy.eyesOpen({
|
||||
appName: 'Mermaid',
|
||||
testName: name,
|
||||
batchName: Cypress.spec.name,
|
||||
batchId: batchId + Cypress.spec.name,
|
||||
});
|
||||
}
|
||||
|
||||
const url = mermaidUrl(graphStr, options, api);
|
||||
|
||||
cy.visit(url);
|
||||
if (validation) cy.get('svg').should(validation);
|
||||
if (validation) {
|
||||
cy.get('svg').should(validation);
|
||||
}
|
||||
cy.get('svg');
|
||||
// Default name to test title
|
||||
|
||||
if (useAppli) {
|
||||
cy.log('Check eyes' + Cypress.spec.name);
|
||||
cy.eyesCheckWindow('Click!');
|
||||
cy.log('Closing eyes: ' + Cypress.spec.name);
|
||||
cy.eyesClose();
|
||||
} else {
|
||||
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, '-');
|
||||
|
||||
if (useAppli) {
|
||||
cy.log('Opening eyes 2' + Cypress.spec.name);
|
||||
cy.eyesOpen({
|
||||
appName: 'Mermaid',
|
||||
testName: name,
|
||||
batchName: Cypress.spec.name,
|
||||
batchId: batchId + Cypress.spec.name,
|
||||
});
|
||||
}
|
||||
|
||||
cy.visit(url);
|
||||
if (validation) cy.get('svg').should(validation);
|
||||
if (validation) {
|
||||
cy.get('svg').should(validation);
|
||||
}
|
||||
cy.get('body');
|
||||
// Default name to test title
|
||||
|
||||
if (useAppli) {
|
||||
cy.log('Check eyes 2' + Cypress.spec.name);
|
||||
cy.eyesCheckWindow('Click!');
|
||||
cy.log('Closing eyes 2' + Cypress.spec.name);
|
||||
cy.eyesClose();
|
||||
} else {
|
||||
cy.matchImageSnapshot(name);
|
||||
|
|
|
|||
|
|
@ -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 - security level loose', () => {
|
||||
it('Graph: should handle a click on a node with a bound function', () => {
|
||||
const url = 'http://localhost:9000/click_security_loose.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('g#flowchart-Function-4').click();
|
||||
describe('Security level loose', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('http://localhost:9000/click_security_loose.html');
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
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.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('g#flowchart-FunctionArg-28').click();
|
||||
|
||||
cy.contains('FunctionArgTest2').parents('.node').click();
|
||||
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', () => {
|
||||
const url = 'http://localhost:9000/click_security_loose.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
|
||||
|
||||
cy.contains('2FunctionArg').parents('.node').click();
|
||||
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', () => {
|
||||
const url = 'http://localhost:9000/click_security_loose.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('#flowchart-URL-5').click();
|
||||
|
||||
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', () => {
|
||||
// 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.contains('URLTest1').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
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.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
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('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
|
||||
cy.contains('2URL').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
|
||||
it('Flowchart-v2: should handle a click on a node with a bound function', () => {
|
||||
const url = 'http://localhost:9000/click_security_loose.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('g#flowchart-Function-16').click();
|
||||
|
||||
cy.contains('FunctionTest2').parents('.node').click();
|
||||
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', () => {
|
||||
const url = 'http://localhost:9000/click_security_loose.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('g[id="flowchart-1Function-22"]').click();
|
||||
|
||||
cy.contains('10Function').parents('.node').click();
|
||||
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', () => {
|
||||
const url = 'http://localhost:9000/click_security_loose.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
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', () => {
|
||||
cy.contains('URLTest2').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
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.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
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('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
|
||||
cy.contains('20URL').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
|
||||
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.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('rect#cl1').click({ force: true });
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
||||
cy.get('rect#cl1').click({ force: true });
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
|
||||
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.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('text#cl1-text').click({ force: true });
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
||||
cy.get('text#cl1-text').click({ force: true });
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
it('should handle a click on a task with a bound function without args', () => {
|
||||
const url = 'http://localhost:9000/click_security_loose.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('rect#cl2').click({ force: true });
|
||||
|
||||
it('should handle a click on a task with a bound function without args', () => {
|
||||
cy.get('rect#cl2').click({ force: true });
|
||||
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');
|
||||
});
|
||||
|
||||
it('should handle a click on a task with a bound function without args', () => {
|
||||
const url = 'http://localhost:9000/click_security_loose.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('text#cl2-text').click({ force: true });
|
||||
|
||||
cy.get('text#cl2-text').click({ force: true });
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
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', () => {
|
||||
const url = 'http://localhost:9000/click_security_strict.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('g#flowchart-Function-4').click();
|
||||
|
||||
cy.contains('Function1').parents('.node').click();
|
||||
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', () => {
|
||||
const url = 'http://localhost:9000/click_security_strict.html';
|
||||
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.contains('1Function').parents('.node').click();
|
||||
cy.get('.created-by-click').should('not.exist');
|
||||
});
|
||||
it('should handle a click on a node with a bound url', () => {
|
||||
const url = 'http://localhost:9000/click_security_strict.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
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', () => {
|
||||
cy.contains('URL1').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
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.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
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 node with a bound url where the node starts with a number', () => {
|
||||
cy.contains('2URL').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
|
||||
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.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('rect#cl1').click({ force: true });
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
||||
cy.get('rect#cl1').click({ force: true });
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
|
||||
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.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('text#cl1-text').click({ force: true });
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
|
||||
cy.get('text#cl1-text').click({ force: true });
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
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('rect#cl2').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('rect#cl2').click({ force: true });
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
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', () => {
|
||||
const url = 'http://localhost:9000/click_security_other.html';
|
||||
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.contains('Function1').parents('.node').click();
|
||||
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', () => {
|
||||
const url = 'http://localhost:9000/click_security_other.html';
|
||||
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.contains('1Function').parents('.node').click();
|
||||
cy.get('.created-by-click').should('not.exist');
|
||||
});
|
||||
it('should handle a click on a node with a bound url', () => {
|
||||
const url = 'http://localhost:9000/click_security_other.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
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', () => {
|
||||
cy.contains('URL1').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle a click on a task with a bound function', () => {
|
||||
const url = 'http://localhost:9000/click_security_other.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('rect#cl2').click({ force: true });
|
||||
|
||||
cy.get('rect#cl2').click({ force: true });
|
||||
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_other.html';
|
||||
cy.viewport(1440, 1024);
|
||||
cy.visit(url);
|
||||
cy.get('body').find('text#cl2-text').click({ force: true });
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ describe('Git Graph diagram', () => {
|
|||
// // Call Open on eyes to initialize a test session
|
||||
// cy.eyesOpen({
|
||||
// appName: 'Demo App',
|
||||
// testName: 'Ultrafast grid demo',
|
||||
// testName: 'UltraFast grid demo',
|
||||
// });
|
||||
|
||||
// // check the login page with fluent api, see more info here
|
||||
|
|
|
|||
|
|
@ -478,4 +478,34 @@ describe('Class diagram V2', () => {
|
|||
);
|
||||
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');
|
||||
// });
|
||||
// });
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
it.only('should render entities with generic and array attributes', () => {
|
||||
it('should render entities with generic and array attributes', () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
|
|
@ -255,4 +255,35 @@ describe('Entity Relationship Diagram', () => {
|
|||
);
|
||||
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' }
|
||||
);
|
||||
});
|
||||
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(
|
||||
`
|
||||
gantt
|
||||
|
|
@ -326,7 +326,7 @@ describe('Gantt diagram', () => {
|
|||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
const el = svg.get(0);
|
||||
const children = Array.from(el.children);
|
||||
const children = [...el.children];
|
||||
|
||||
const titleEl = children.find(function (node) {
|
||||
return node.tagName === 'title';
|
||||
|
|
@ -341,4 +341,130 @@ describe('Gantt diagram', () => {
|
|||
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) => {
|
||||
const el = svg.get(0);
|
||||
const children = Array.from(el.children);
|
||||
const children = [...el.children];
|
||||
|
||||
const titleEl = children.find(function (node) {
|
||||
return node.tagName === 'title';
|
||||
|
|
|
|||
|
|
@ -521,4 +521,54 @@ stateDiagram-v2
|
|||
{ 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', () => {
|
||||
// beforeEach(()=>{
|
||||
// cy.clock((new Date('2014-06-09')).getTime());
|
||||
|
|
|
|||
|
|
@ -13,42 +13,42 @@
|
|||
</head>
|
||||
<body>
|
||||
<div style="display: flex">
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
FunctionTest1-->URLTest1
|
||||
click FunctionTest1 clickByFlow "Add a div"
|
||||
click URLTest1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
1Function--->2URL
|
||||
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 id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
flowchart TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
|
||||
FunctionTest2-->URLTest2
|
||||
click FunctionTest2 clickByFlow "Add a div"
|
||||
click URLTest2 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
flowchart TB
|
||||
1Function--->2URL
|
||||
click 1Function clickByFlow "Add a div"
|
||||
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
|
||||
10Function--->20URL
|
||||
click 10Function clickByFlow "Add a div"
|
||||
click 20URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
|
||||
</pre>
|
||||
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
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
|
||||
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram-v2
|
||||
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
|
||||
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
|
||||
</pre>
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
Calling a Callback (look at the console log) :cl2, 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 cl3 call clickByGantt("test1", test2, test3)
|
||||
|
||||
|
|
@ -95,31 +95,31 @@
|
|||
Add another diagram to demo page : 48h
|
||||
</pre>
|
||||
<div style="display: flex">
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
FunctionArg-->URL
|
||||
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
FunctionArgTest2-->URL
|
||||
click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
|
||||
click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
flowchart TB
|
||||
FunctionArg-->URL
|
||||
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
2FunctionArg-->URL
|
||||
click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
||||
click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||
</pre>
|
||||
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
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
|
||||
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
|
||||
</pre>
|
||||
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram-v2
|
||||
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
|
||||
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@
|
|||
<body>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
Function1-->URL1
|
||||
click Function1 clickByFlow "Add a div"
|
||||
click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
1Function-->2URL
|
||||
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 class="mermaid">
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
|
||||
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)
|
||||
|
||||
section Last section
|
||||
|
|
|
|||
|
|
@ -17,38 +17,38 @@
|
|||
graph TB
|
||||
Function-->URL
|
||||
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 id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
1Function--->2URL
|
||||
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 id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
Function-->URL
|
||||
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 id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
1Function--->2URL
|
||||
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 id="FirstLine" class="mermaid">
|
||||
classDiagram
|
||||
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
|
||||
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
classDiagram-v2
|
||||
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
|
||||
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
|
||||
</pre>
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
Calling a Callback (look at the console log) :cl2, 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 cl3 call clickByGantt("test1", test2, test3)
|
||||
|
||||
|
|
@ -99,19 +99,19 @@
|
|||
graph TB
|
||||
FunctionArg-->URL
|
||||
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 id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
FunctionArg-->URL
|
||||
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 id="FirstLine" class="mermaid">
|
||||
classDiagram
|
||||
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
|
||||
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
|
||||
</pre>
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
<pre id="FirstLine" class="mermaid">
|
||||
classDiagram-v2
|
||||
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
|
||||
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@
|
|||
<body>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
Function1-->URL1
|
||||
click Function1 clickByFlow "Add a div"
|
||||
click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
1Function-->2URL
|
||||
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 class="mermaid">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
Calling a Callback (look at the console log) :cl2, 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 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"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
|
|
@ -38,7 +42,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid" style="width: 50%">
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart LR
|
||||
subgraph one
|
||||
direction LR
|
||||
|
|
@ -364,8 +368,7 @@ flowchart TD
|
|||
</pre>
|
||||
|
||||
<!-- <script src="./mermaid.js"></script> -->
|
||||
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
|
||||
<script src="./packages/mermaid/dist/mermaid.js"></script>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
|
|
@ -382,6 +385,7 @@ flowchart TD
|
|||
htmlLabels: false,
|
||||
fontFamily: 'courier',
|
||||
},
|
||||
lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
|
|
@ -25,6 +29,12 @@
|
|||
}
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
background-color: #eee;
|
||||
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||
radial-gradient(#fff 1%, transparent 11%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
|
|
@ -46,28 +56,65 @@
|
|||
<body>
|
||||
<div>Security check</div>
|
||||
<pre id="diagram" class="mermaid">
|
||||
info
|
||||
</pre
|
||||
>
|
||||
flowchart LR
|
||||
%% 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">
|
||||
mindmap
|
||||
root
|
||||
ch1
|
||||
ch2
|
||||
</pre
|
||||
>
|
||||
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
|
||||
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
|
||||
<script src="./packages/mermaid/dist/mermaid.js"></script>
|
||||
<script>
|
||||
gantt
|
||||
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d
|
||||
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
||||
section Section1
|
||||
Today: 1, -1h
|
||||
</pre>
|
||||
|
||||
<!-- <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) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
startOnLoad: true,
|
||||
logLevel: 0,
|
||||
basePath: './packages/',
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
flowchart: {
|
||||
useMaxWidth: false,
|
||||
htmlLabels: true,
|
||||
},
|
||||
gantt: {
|
||||
useMaxWidth: false,
|
||||
},
|
||||
useMaxWidth: false,
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
|
|
@ -76,6 +123,10 @@ info
|
|||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
|
||||
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
|
||||
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
|
||||
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
mermaid.init({ startOnLoad: false });
|
||||
|
||||
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
|
||||
|
||||
try {
|
||||
console.log('rendering');
|
||||
mermaid.mermaidAPI.render('graphDiv', `>`);
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
rerender('XMas');
|
||||
|
||||
function rerender(text) {
|
||||
var graphText = `graph TD
|
||||
const graphText = `graph TD
|
||||
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);
|
||||
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 mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
|
||||
function b64ToUtf8(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
|
||||
* page.
|
||||
*/
|
||||
const contentLoaded = function () {
|
||||
const contentLoaded = async function () {
|
||||
let pos = document.location.href.indexOf('?graph=');
|
||||
if (pos > 0) {
|
||||
pos = pos + 7;
|
||||
|
|
@ -36,6 +37,7 @@ const contentLoaded = function () {
|
|||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
|
||||
await mermaid2.registerExternalDiagrams([mindmap]);
|
||||
mermaid2.initialize(graphObj.mermaid);
|
||||
mermaid2.init();
|
||||
}
|
||||
|
|
@ -52,7 +54,7 @@ function merge(current, update) {
|
|||
if (
|
||||
current.hasOwnProperty(key) &&
|
||||
typeof current[key] === 'object' &&
|
||||
!(current[key] instanceof Array)
|
||||
!Array.isArray(current[key])
|
||||
) {
|
||||
merge(current[key], update[key]);
|
||||
|
||||
|
|
@ -118,7 +120,9 @@ const contentLoadedApi = function () {
|
|||
(svgCode, bindFunctions) => {
|
||||
div.innerHTML = svgCode;
|
||||
|
||||
if (bindFunctions) bindFunctions(div);
|
||||
if (bindFunctions) {
|
||||
bindFunctions(div);
|
||||
}
|
||||
},
|
||||
div
|
||||
);
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'classDiagram\n';
|
||||
let diagram = 'classDiagram\n';
|
||||
diagram += 'class Square~<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>~{\n";
|
||||
diagram += 'id A\n';
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
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 += "='1'/onerror=xssAttack()>";
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
let diagram = 'stateDiagram-v2\n';
|
||||
diagram += 's2 : A<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
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 += "='1'/onerror=xssAttack()>";
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'classDiagram\n';
|
||||
let diagram = 'classDiagram\n';
|
||||
diagram += 'classA <-- classB : <ifr';
|
||||
diagram += "ame/srcdoc='<scr";
|
||||
diagram += 'ipt>parent.xssAttack(`XSS`)</';
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = `sequenceDiagram
|
||||
let diagram = `sequenceDiagram
|
||||
participant John
|
||||
links John: {"XSS": "javas`;
|
||||
diagram += `cript:alert('AudioParam')"}`;
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = `sequenceDiagram
|
||||
let diagram = `sequenceDiagram
|
||||
participant Alice
|
||||
links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = `sequenceDiagram
|
||||
let diagram = `sequenceDiagram
|
||||
participant Alice
|
||||
link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
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`;
|
||||
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = `classDiagram
|
||||
let diagram = `classDiagram
|
||||
class Shape{
|
||||
<<<img/src='1'/`;
|
||||
|
||||
|
|
|
|||
|
|
@ -54,9 +54,9 @@
|
|||
startOnLoad: true,
|
||||
useMaxWidth: true,
|
||||
});
|
||||
var cnt = 0;
|
||||
var a;
|
||||
var handler = setInterval(() => {
|
||||
let cnt = 0;
|
||||
let a;
|
||||
const handler = setInterval(() => {
|
||||
cnt++;
|
||||
a = {};
|
||||
if (typeof a.polluted !== 'undefined') {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
// var diagram = ` graph TD
|
||||
// A --> B["<a href='javasc`;
|
||||
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
var diagram = ` graph TD
|
||||
let diagram = ` graph TD
|
||||
A --> B["<a href='javasc`;
|
||||
diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
|
|
|
|||
|
|
@ -94,9 +94,9 @@
|
|||
}
|
||||
|
||||
// var diagram = ` graph TD
|
||||
// A --> B["<a href='javasc`;
|
||||
// A --> B["<a href='javascript`;
|
||||
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
var diagram = ` graph TD
|
||||
let diagram = ` graph TD
|
||||
A --> B["<a href='javasc`;
|
||||
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
|
|
|
|||
|
|
@ -42,9 +42,9 @@
|
|||
startOnLoad: true,
|
||||
useMaxWidth: true,
|
||||
});
|
||||
var cnt = 0;
|
||||
var a;
|
||||
var handler = setInterval(() => {
|
||||
let cnt = 0;
|
||||
let a;
|
||||
const handler = setInterval(() => {
|
||||
cnt++;
|
||||
a = {};
|
||||
if (typeof a.polluted !== 'undefined') {
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
alert('It worked');
|
||||
}
|
||||
|
||||
var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
|
||||
let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
|
||||
diagram += 'flowchart\n';
|
||||
diagram += 'A["<ifra';
|
||||
diagram += "me srcdoc='<scrip";
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
var diagram = 'graph LR\n';
|
||||
let diagram = 'graph LR\n';
|
||||
diagram += 'B-->D("<img onerror=location=`java';
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
var diagram = 'graph LR\n';
|
||||
let diagram = 'graph LR\n';
|
||||
diagram += 'A(<img/src/onerror=xssAttack`1`>)';
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
var diagram = 'graph LR\n';
|
||||
let diagram = 'graph LR\n';
|
||||
diagram += " B(<a href='<";
|
||||
diagram += 'script></';
|
||||
diagram += "script>Javascript:xssAttack`1`'>Click)";
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
let diagram = 'stateDiagram-v2\n';
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
let diagram = 'stateDiagram-v2\n';
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2020",
|
||||
"lib": ["es2020", "dom"],
|
||||
"types": ["cypress", "node"]
|
||||
},
|
||||
"include": ["**/*.ts"]
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>C4 context diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
C4Context
|
||||
accTitle: C4 context demo
|
||||
|
|
@ -62,6 +63,7 @@
|
|||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
C4Container
|
||||
|
|
@ -101,6 +103,7 @@
|
|||
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
|
||||
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
C4Component
|
||||
|
|
@ -140,6 +143,7 @@
|
|||
UpdateRelStyle(security, db, $offsetY="-40")
|
||||
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
C4Dynamic
|
||||
|
|
@ -159,6 +163,7 @@
|
|||
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
|
||||
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
C4Deployment
|
||||
|
|
@ -210,7 +215,6 @@
|
|||
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
|
||||
UpdateRelStyle(db, db2, $offsetY="-10")
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
|
|
@ -273,7 +277,7 @@
|
|||
<script>
|
||||
function testClick(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';
|
||||
setTimeout(function () {
|
||||
document.querySelector('body').style.backgroundColor = originalBgColor;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,7 +14,12 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Class diagram demos</h1>
|
||||
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Demo Class Diagram
|
||||
---
|
||||
classDiagram
|
||||
accTitle: Demo Class Diagram
|
||||
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>
|
||||
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
|
|
@ -68,6 +73,7 @@
|
|||
}
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
class Class01~T~
|
||||
|
|
@ -81,6 +87,7 @@
|
|||
}
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Class01~T~ <|-- AveryLongClass : Cool
|
||||
|
|
@ -104,11 +111,13 @@
|
|||
}
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Interface1 ()-- Interface1Impl
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
direction LR
|
||||
|
|
@ -117,6 +126,7 @@
|
|||
Dog : species()
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
direction RL
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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=" />
|
||||
<style>
|
||||
div.mermaid {
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Data Flow Diagram Example</h2>
|
||||
<h1>Data Flow Diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
accTitle: A simple linear flowchart.
|
||||
|
|
@ -21,6 +21,8 @@
|
|||
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Borders Example</h2>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
|
|
@ -44,7 +46,7 @@
|
|||
<script>
|
||||
function testClick(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';
|
||||
setTimeout(function () {
|
||||
document.querySelector('body').style.backgroundColor = originalBgColor;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -10,12 +10,19 @@
|
|||
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||
font-family: 'Courier New', Courier, monospace !important;
|
||||
}
|
||||
.diagram-title {
|
||||
fill: red;
|
||||
font-size: 24pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
|
||||
---
|
||||
title: This is a title
|
||||
---
|
||||
erDiagram
|
||||
%% title This is a title
|
||||
%% accDescription Test a description
|
||||
|
|
@ -51,8 +58,8 @@ erDiagram
|
|||
}
|
||||
</pre>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script type="module">
|
||||
import mermaid from '../src/mermaid';
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -15,9 +15,11 @@
|
|||
<body>
|
||||
<h1>Comparison "graph vs. flowchart"</h1>
|
||||
<h2>Sample 1</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: This is a complicated flow
|
||||
---
|
||||
graph LR
|
||||
accTitle: This is a 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-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<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-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 2</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: What to buy
|
||||
---
|
||||
graph TD
|
||||
accTitle: What to buy
|
||||
accDescr: Options of what to buy with Christmas money
|
||||
|
|
@ -231,6 +236,7 @@
|
|||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -243,10 +249,9 @@
|
|||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 3</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -257,6 +262,7 @@
|
|||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -268,10 +274,9 @@
|
|||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 4</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -296,6 +301,7 @@
|
|||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -321,10 +327,9 @@
|
|||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 5</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -391,6 +396,7 @@
|
|||
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -458,10 +464,9 @@
|
|||
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 6</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
|
|
@ -469,6 +474,7 @@
|
|||
a1-->a2
|
||||
end
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -477,10 +483,9 @@
|
|||
a1-->a2
|
||||
end
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 7</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
|
|
@ -511,6 +516,7 @@
|
|||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -542,10 +548,9 @@
|
|||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 8</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -562,6 +567,7 @@
|
|||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -579,10 +585,9 @@
|
|||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 9</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -597,6 +602,7 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -612,10 +618,9 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 10</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -631,6 +636,7 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -647,10 +653,9 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 11</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -666,6 +671,7 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -682,10 +688,9 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 12</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -705,6 +710,7 @@
|
|||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -725,10 +731,9 @@
|
|||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 13</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -742,6 +747,7 @@
|
|||
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -756,10 +762,9 @@
|
|||
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 14</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -769,6 +774,7 @@
|
|||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -779,10 +785,9 @@
|
|||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 15</h2>
|
||||
|
||||
<h2>Sample 15</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
|
|
@ -801,6 +806,7 @@
|
|||
click E "notes://do-your-thing/id" "other protocol test"
|
||||
click F "javascript:alert('test')" "script test"
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -820,10 +826,9 @@
|
|||
click E "notes://do-your-thing/id" "other protocol test"
|
||||
click F "javascript:alert('test')" "script test"
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 16</h2>
|
||||
|
||||
<h2>Sample 16</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -840,6 +845,7 @@
|
|||
click B "flowchart.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -857,10 +863,9 @@
|
|||
click B "flowchart.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 17</h2>
|
||||
|
||||
<h2>Sample 17</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -873,6 +878,7 @@
|
|||
class A myClass1
|
||||
class D myClass2
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -886,10 +892,9 @@
|
|||
class A myClass1
|
||||
class D myClass2
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 18</h2>
|
||||
|
||||
<h2>Sample 18</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -937,6 +942,7 @@
|
|||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -985,10 +991,9 @@
|
|||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 19</h2>
|
||||
|
||||
<h2>Sample 19</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
|
|
@ -1036,6 +1041,7 @@
|
|||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -1087,7 +1093,6 @@
|
|||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</pre>
|
||||
|
||||
<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-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
|
|
@ -1197,6 +1204,8 @@
|
|||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[/Christmas\]
|
||||
|
|
@ -1206,6 +1215,8 @@
|
|||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||
|
|
@ -1229,6 +1240,8 @@
|
|||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
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-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
subgraph One
|
||||
a1-->a2
|
||||
end
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
A
|
||||
|
|
@ -1329,6 +1346,8 @@
|
|||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
||||
|
|
@ -1344,6 +1363,8 @@
|
|||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
|
|
@ -1357,6 +1378,8 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A([stadium shape test])
|
||||
|
|
@ -1371,6 +1394,8 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[[subroutine shape test]]
|
||||
|
|
@ -1385,6 +1410,8 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[(cylindrical<br />shape<br />test)]
|
||||
|
|
@ -1403,6 +1430,8 @@
|
|||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
|
||||
|
|
@ -1415,6 +1444,8 @@
|
|||
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A(( )) -->|step 1| B(( ))
|
||||
|
|
@ -1423,6 +1454,8 @@
|
|||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
TITLE["Link Click Events<br>(click the nodes below)"]
|
||||
|
|
@ -1441,6 +1474,7 @@
|
|||
click F "javascript:alert('test')" "script test"
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[red<br>text] -->|red<br>text| B(blue<br>text)
|
||||
|
|
@ -1456,6 +1490,8 @@
|
|||
click B "index.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[myClass1] --> B[default] & C[default]
|
||||
|
|
@ -1467,6 +1503,7 @@
|
|||
class A myClass1
|
||||
class D myClass2
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
|
||||
|
||||
|
|
@ -1482,7 +1519,7 @@
|
|||
<script>
|
||||
function testClick(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';
|
||||
setTimeout(function () {
|
||||
document.querySelector('body').style.backgroundColor = originalBgColor;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Gantt chart diagram demos</h1>
|
||||
<!-- accDescription Tasks for Q4 -->
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
|
|
@ -44,6 +46,8 @@
|
|||
开发 :a, 2021-10-09, 4d
|
||||
测试 :after a, 4d
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Exclusive end dates (Manual date should end on 3d)
|
||||
|
|
@ -53,6 +57,8 @@
|
|||
2 Days: 1, 2019-01-01,2d
|
||||
Manual Date: 2, 2019-01-01,2019-01-03
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Inclusive end dates (Manual date should end on 4th)
|
||||
|
|
@ -63,24 +69,29 @@
|
|||
2 Days: 1, 2019-01-01,2d
|
||||
Manual Date: 2, 2019-01-01,2019-01-03
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Hide today marker (vertical line should not be visible)
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d
|
||||
dateFormat Z
|
||||
axisFormat %d/%m
|
||||
todayMarker off
|
||||
section Section1
|
||||
Today: 1, -1h
|
||||
Today: 1, -01:00, 5min
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d
|
||||
dateFormat Z
|
||||
axisFormat %d/%m
|
||||
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
||||
section Section1
|
||||
Today: 1, -1h
|
||||
Today: 1, -01:00, 5min
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
|
|
@ -120,6 +131,8 @@
|
|||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
|
|
@ -151,6 +164,7 @@
|
|||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<script>
|
||||
function ganttTestClick(a, b, c) {
|
||||
|
|
@ -160,13 +174,14 @@
|
|||
}
|
||||
function testClick(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';
|
||||
setTimeout(function () {
|
||||
document.querySelector('body').style.backgroundColor = originalBgColor;
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,7 +14,11 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Git diagram demo</h1>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
title: Simple Git diagram
|
||||
---
|
||||
gitGraph:
|
||||
options
|
||||
{
|
||||
|
|
|
|||
103
demos/index.html
103
demos/index.html
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -15,6 +15,13 @@
|
|||
|
||||
<body>
|
||||
<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>
|
||||
<li>
|
||||
|
|
@ -26,6 +33,9 @@
|
|||
<li>
|
||||
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./er.html">Entity Relation diagram</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./flowchart.html">Flow charts</a></h2>
|
||||
</li>
|
||||
|
|
@ -38,6 +48,9 @@
|
|||
<li>
|
||||
<h2><a href="./journey.html">Journey</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./mindmap.html">Mindmap</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./pie.html">Pie</a></h2>
|
||||
</li>
|
||||
|
|
@ -51,93 +64,5 @@
|
|||
<h2><a href="./state.html">State</a></h2>
|
||||
</li>
|
||||
</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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,9 +14,12 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Journey diagram demo</h1>
|
||||
<pre class="mermaid">
|
||||
journey
|
||||
title My working day
|
||||
---
|
||||
title: My working day
|
||||
---
|
||||
journey
|
||||
accTitle: Very simple journey demo
|
||||
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>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Pie chart demos</h1>
|
||||
<pre class="mermaid">
|
||||
pie title Pets adopted by volunteers
|
||||
accTitle: simple pie char demo
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
"Rats" : 15
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
pie
|
||||
title Key elements in Product X
|
||||
|
|
@ -35,7 +37,7 @@
|
|||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from '../src/mermaid';
|
||||
import mermaid from '../packages/mermaid';
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// themeCSS: '.node rect { fill: red; }',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Requirement diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
requirementDiagram
|
||||
accTitle: Requirments demo in black and white
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Sequence diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
accTitle: test the accTitle
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
Alice -->> John: Parallel message 2
|
||||
end
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
accTitle: Sequence diagram title is here
|
||||
|
|
@ -96,6 +97,8 @@
|
|||
Alice -->> John: Parallel message 2
|
||||
end
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
participant 1 as multiline<br>using #lt;br#gt;
|
||||
|
|
@ -111,6 +114,8 @@
|
|||
4->>1: multiline<br />using #lt;br /#gt;
|
||||
note right of 1: multiline<br />using #lt;br /#gt;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
|
|
@ -121,6 +126,7 @@
|
|||
autonumber off
|
||||
John-->>Alice: I feel great!
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue