mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-09 15:24:13 +01:00
Compare commits
1 Commits
feat/seque
...
demo/useca
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
89b29898d2 |
@@ -33,11 +33,6 @@ export const packageOptions = {
|
|||||||
packageName: 'mermaid-layout-elk',
|
packageName: 'mermaid-layout-elk',
|
||||||
file: 'layouts.ts',
|
file: 'layouts.ts',
|
||||||
},
|
},
|
||||||
'mermaid-layout-tidy-tree': {
|
|
||||||
name: 'mermaid-layout-tidy-tree',
|
|
||||||
packageName: 'mermaid-layout-tidy-tree',
|
|
||||||
file: 'index.ts',
|
|
||||||
},
|
|
||||||
examples: {
|
examples: {
|
||||||
name: 'mermaid-examples',
|
name: 'mermaid-examples',
|
||||||
packageName: 'examples',
|
packageName: 'examples',
|
||||||
|
|||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix: Support edge animation in hand drawn look
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix: Resolved parsing error where direction TD was not recognized within subgraphs
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix: Correct viewBox casing and make SVGs responsive
|
|
||||||
5
.changeset/clean-wolves-turn.md
Normal file
5
.changeset/clean-wolves-turn.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: Render newlines as spaces in class diagrams
|
||||||
5
.changeset/crazy-loops-matter.md
Normal file
5
.changeset/crazy-loops-matter.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: Handle arrows correctly when auto number is enabled
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix: Improve participant parsing and prevent recursive loops on invalid syntax
|
|
||||||
5
.changeset/hungry-baths-glow.md
Normal file
5
.changeset/hungry-baths-glow.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
feat: add alias support for new participant syntax of sequence diagrams
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': minor
|
|
||||||
---
|
|
||||||
|
|
||||||
feat: Add half-arrowheads (solid & stick) and central connection support
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': minor
|
|
||||||
---
|
|
||||||
|
|
||||||
feat: allow to put notes in namespaces on classDiagram
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'@mermaid': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix: Mindmap breaking in ELK layout
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names
|
|
||||||
@@ -1,5 +1,3 @@
|
|||||||
!viewbox
|
|
||||||
# It should be viewBox
|
|
||||||
# This file contains coding related terms
|
# This file contains coding related terms
|
||||||
ALPHANUM
|
ALPHANUM
|
||||||
antiscript
|
antiscript
|
||||||
|
|||||||
@@ -64,7 +64,6 @@ rscratch
|
|||||||
shiki
|
shiki
|
||||||
Slidev
|
Slidev
|
||||||
sparkline
|
sparkline
|
||||||
speccharts
|
|
||||||
sphinxcontrib
|
sphinxcontrib
|
||||||
ssim
|
ssim
|
||||||
stylis
|
stylis
|
||||||
|
|||||||
@@ -5,10 +5,8 @@ bmatrix
|
|||||||
braintree
|
braintree
|
||||||
catmull
|
catmull
|
||||||
compositTitleSize
|
compositTitleSize
|
||||||
cose
|
|
||||||
curv
|
curv
|
||||||
doublecircle
|
doublecircle
|
||||||
elem
|
|
||||||
elems
|
elems
|
||||||
gantt
|
gantt
|
||||||
gitgraph
|
gitgraph
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
BRANDES
|
BRANDES
|
||||||
Buzan
|
|
||||||
circo
|
circo
|
||||||
handDrawn
|
handDrawn
|
||||||
KOEPF
|
KOEPF
|
||||||
|
|||||||
@@ -71,9 +71,6 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
|
|||||||
|
|
||||||
const external: string[] = ['require', 'fs', 'path'];
|
const external: string[] = ['require', 'fs', 'path'];
|
||||||
const outFileName = getFileName(name, options);
|
const outFileName = getFileName(name, options);
|
||||||
const { dependencies, version } = JSON.parse(
|
|
||||||
readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
|
|
||||||
);
|
|
||||||
const output: BuildOptions = buildOptions({
|
const output: BuildOptions = buildOptions({
|
||||||
...rest,
|
...rest,
|
||||||
absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
|
absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
|
||||||
@@ -85,13 +82,15 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
|
|||||||
chunkNames: `chunks/${outFileName}/[name]-[hash]`,
|
chunkNames: `chunks/${outFileName}/[name]-[hash]`,
|
||||||
define: {
|
define: {
|
||||||
// This needs to be stringified for esbuild
|
// This needs to be stringified for esbuild
|
||||||
'injected.includeLargeFeatures': `${includeLargeFeatures}`,
|
includeLargeFeatures: `${includeLargeFeatures}`,
|
||||||
'injected.version': `'${version}'`,
|
|
||||||
'import.meta.vitest': 'undefined',
|
'import.meta.vitest': 'undefined',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (core) {
|
if (core) {
|
||||||
|
const { dependencies } = JSON.parse(
|
||||||
|
readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
|
||||||
|
);
|
||||||
// Core build is used to generate file without bundled dependencies.
|
// Core build is used to generate file without bundled dependencies.
|
||||||
// This is used by downstream projects to bundle dependencies themselves.
|
// This is used by downstream projects to bundle dependencies themselves.
|
||||||
// Ignore dependencies and any dependencies of dependencies
|
// Ignore dependencies and any dependencies of dependencies
|
||||||
|
|||||||
10
.github/workflows/codeql.yml
vendored
10
.github/workflows/codeql.yml
vendored
@@ -26,8 +26,8 @@ jobs:
|
|||||||
strategy:
|
strategy:
|
||||||
fail-fast: false
|
fail-fast: false
|
||||||
matrix:
|
matrix:
|
||||||
language: ['javascript', 'actions']
|
language: ['javascript']
|
||||||
# CodeQL supports [ 'actions', 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
|
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
|
||||||
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
|
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
@@ -36,7 +36,7 @@ jobs:
|
|||||||
|
|
||||||
# Initializes the CodeQL tools for scanning.
|
# Initializes the CodeQL tools for scanning.
|
||||||
- name: Initialize CodeQL
|
- name: Initialize CodeQL
|
||||||
uses: github/codeql-action/init@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
|
uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
|
||||||
with:
|
with:
|
||||||
config-file: ./.github/codeql/codeql-config.yml
|
config-file: ./.github/codeql/codeql-config.yml
|
||||||
languages: ${{ matrix.language }}
|
languages: ${{ matrix.language }}
|
||||||
@@ -48,7 +48,7 @@ jobs:
|
|||||||
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
||||||
# If this step fails, then you should remove it and run the build manually (see below)
|
# If this step fails, then you should remove it and run the build manually (see below)
|
||||||
- name: Autobuild
|
- name: Autobuild
|
||||||
uses: github/codeql-action/autobuild@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
|
uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
|
||||||
|
|
||||||
# ℹ️ Command-line programs to run using the OS shell.
|
# ℹ️ Command-line programs to run using the OS shell.
|
||||||
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
|
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
|
||||||
@@ -62,4 +62,4 @@ jobs:
|
|||||||
# make release
|
# make release
|
||||||
|
|
||||||
- name: Perform CodeQL Analysis
|
- name: Perform CodeQL Analysis
|
||||||
uses: github/codeql-action/analyze@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
|
uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
|
||||||
|
|||||||
2
.github/workflows/e2e-applitools.yml
vendored
2
.github/workflows/e2e-applitools.yml
vendored
@@ -53,7 +53,7 @@ jobs:
|
|||||||
args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
|
args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
|
||||||
|
|
||||||
- name: Cypress run
|
- name: Cypress run
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
id: cypress
|
id: cypress
|
||||||
with:
|
with:
|
||||||
start: pnpm run dev
|
start: pnpm run dev
|
||||||
|
|||||||
6
.github/workflows/e2e-timings.yml
vendored
6
.github/workflows/e2e-timings.yml
vendored
@@ -27,12 +27,12 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
node-version-file: '.node-version'
|
node-version-file: '.node-version'
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
with:
|
with:
|
||||||
runTests: false
|
runTests: false
|
||||||
|
|
||||||
- name: Cypress run
|
- name: Cypress run
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
id: cypress
|
id: cypress
|
||||||
with:
|
with:
|
||||||
install: false
|
install: false
|
||||||
@@ -58,7 +58,7 @@ jobs:
|
|||||||
echo "EOF" >> $GITHUB_OUTPUT
|
echo "EOF" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
- name: Commit and create pull request
|
- name: Commit and create pull request
|
||||||
uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
|
uses: peter-evans/create-pull-request@18e469570b1cf0dfc11d60ec121099f8ff3e617a
|
||||||
with:
|
with:
|
||||||
add-paths: |
|
add-paths: |
|
||||||
cypress/timings.json
|
cypress/timings.json
|
||||||
|
|||||||
10
.github/workflows/e2e.yml
vendored
10
.github/workflows/e2e.yml
vendored
@@ -45,7 +45,7 @@ jobs:
|
|||||||
node-version-file: '.node-version'
|
node-version-file: '.node-version'
|
||||||
- name: Cache snapshots
|
- name: Cache snapshots
|
||||||
id: cache-snapshot
|
id: cache-snapshot
|
||||||
uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
|
uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
|
||||||
with:
|
with:
|
||||||
path: ./cypress/snapshots
|
path: ./cypress/snapshots
|
||||||
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
|
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
|
||||||
@@ -59,7 +59,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
|
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
with:
|
with:
|
||||||
# just perform install
|
# just perform install
|
||||||
runTests: false
|
runTests: false
|
||||||
@@ -95,13 +95,13 @@ jobs:
|
|||||||
# These cached snapshots are downloaded, providing the reference snapshots.
|
# These cached snapshots are downloaded, providing the reference snapshots.
|
||||||
- name: Cache snapshots
|
- name: Cache snapshots
|
||||||
id: cache-snapshot
|
id: cache-snapshot
|
||||||
uses: actions/cache/restore@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
|
uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
|
||||||
with:
|
with:
|
||||||
path: ./cypress/snapshots
|
path: ./cypress/snapshots
|
||||||
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
|
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
with:
|
with:
|
||||||
runTests: false
|
runTests: false
|
||||||
|
|
||||||
@@ -117,7 +117,7 @@ jobs:
|
|||||||
# Install NPM dependencies, cache them correctly
|
# Install NPM dependencies, cache them correctly
|
||||||
# and run all Cypress tests
|
# and run all Cypress tests
|
||||||
- name: Cypress run
|
- name: Cypress run
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
id: cypress
|
id: cypress
|
||||||
with:
|
with:
|
||||||
install: false
|
install: false
|
||||||
|
|||||||
2
.github/workflows/link-checker.yml
vendored
2
.github/workflows/link-checker.yml
vendored
@@ -32,7 +32,7 @@ jobs:
|
|||||||
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
|
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
|
||||||
|
|
||||||
- name: Restore lychee cache
|
- name: Restore lychee cache
|
||||||
uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
|
uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
|
||||||
with:
|
with:
|
||||||
path: .lycheecache
|
path: .lycheecache
|
||||||
key: cache-lychee-${{ github.sha }}
|
key: cache-lychee-${{ github.sha }}
|
||||||
|
|||||||
3
.github/workflows/release.yml
vendored
3
.github/workflows/release.yml
vendored
@@ -36,10 +36,11 @@ jobs:
|
|||||||
|
|
||||||
- name: Create Release Pull Request or Publish to npm
|
- name: Create Release Pull Request or Publish to npm
|
||||||
id: changesets
|
id: changesets
|
||||||
uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
|
uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
|
||||||
with:
|
with:
|
||||||
version: pnpm changeset:version
|
version: pnpm changeset:version
|
||||||
publish: pnpm changeset:publish
|
publish: pnpm changeset:publish
|
||||||
env:
|
env:
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||||
NPM_CONFIG_PROVENANCE: true
|
NPM_CONFIG_PROVENANCE: true
|
||||||
|
|||||||
6
.github/workflows/scorecard.yml
vendored
6
.github/workflows/scorecard.yml
vendored
@@ -20,18 +20,18 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
persist-credentials: false
|
persist-credentials: false
|
||||||
- name: Run analysis
|
- name: Run analysis
|
||||||
uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
|
uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
|
||||||
with:
|
with:
|
||||||
results_file: results.sarif
|
results_file: results.sarif
|
||||||
results_format: sarif
|
results_format: sarif
|
||||||
publish_results: true
|
publish_results: true
|
||||||
- name: Upload artifact
|
- name: Upload artifact
|
||||||
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
|
uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
|
||||||
with:
|
with:
|
||||||
name: SARIF file
|
name: SARIF file
|
||||||
path: results.sarif
|
path: results.sarif
|
||||||
retention-days: 5
|
retention-days: 5
|
||||||
- name: Upload to code-scanning
|
- name: Upload to code-scanning
|
||||||
uses: github/codeql-action/upload-sarif@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
|
uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
|
||||||
with:
|
with:
|
||||||
sarif_file: results.sarif
|
sarif_file: results.sarif
|
||||||
|
|||||||
2
.github/workflows/update-browserlist.yml
vendored
2
.github/workflows/update-browserlist.yml
vendored
@@ -19,7 +19,7 @@ jobs:
|
|||||||
message: 'chore: update browsers list'
|
message: 'chore: update browsers list'
|
||||||
push: false
|
push: false
|
||||||
- name: Create Pull Request
|
- name: Create Pull Request
|
||||||
uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
|
uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
|
||||||
with:
|
with:
|
||||||
branch: update-browserslist
|
branch: update-browserslist
|
||||||
title: Update Browserslist
|
title: Update Browserslist
|
||||||
|
|||||||
40
.github/workflows/validate-lockfile.yml
vendored
40
.github/workflows/validate-lockfile.yml
vendored
@@ -1,7 +1,7 @@
|
|||||||
name: Validate pnpm-lock.yaml
|
name: Validate pnpm-lock.yaml
|
||||||
|
|
||||||
on:
|
on:
|
||||||
pull_request_target:
|
pull_request:
|
||||||
paths:
|
paths:
|
||||||
- 'pnpm-lock.yaml'
|
- 'pnpm-lock.yaml'
|
||||||
- '**/package.json'
|
- '**/package.json'
|
||||||
@@ -15,8 +15,13 @@ jobs:
|
|||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
with:
|
with:
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
ref: ${{ github.event.pull_request.head.sha }}
|
|
||||||
repository: ${{ github.event.pull_request.head.repo.full_name }}
|
- name: Set up Node.js
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: 20
|
||||||
|
|
||||||
|
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
|
||||||
|
|
||||||
- name: Validate pnpm-lock.yaml entries
|
- name: Validate pnpm-lock.yaml entries
|
||||||
id: validate # give this step an ID so we can reference its outputs
|
id: validate # give this step an ID so we can reference its outputs
|
||||||
@@ -30,7 +35,7 @@ jobs:
|
|||||||
|
|
||||||
# 2) No unwanted vitepress paths
|
# 2) No unwanted vitepress paths
|
||||||
if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
|
if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
|
||||||
issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run \`rm -rf packages/mermaid/src/vitepress && pnpm install\` to regenerate.")
|
issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# 3) Lockfile only changes when package.json changes
|
# 3) Lockfile only changes when package.json changes
|
||||||
@@ -50,41 +55,16 @@ jobs:
|
|||||||
exit 1
|
exit 1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
- name: Find existing lockfile validation comment
|
|
||||||
if: always()
|
|
||||||
uses: peter-evans/find-comment@v3
|
|
||||||
id: find-comment
|
|
||||||
with:
|
|
||||||
issue-number: ${{ github.event.pull_request.number }}
|
|
||||||
comment-author: 'github-actions[bot]'
|
|
||||||
body-includes: 'Lockfile Validation Failed'
|
|
||||||
|
|
||||||
- name: Comment on PR if validation failed
|
- name: Comment on PR if validation failed
|
||||||
if: failure()
|
if: failure()
|
||||||
uses: peter-evans/create-or-update-comment@v5
|
uses: peter-evans/create-or-update-comment@v4
|
||||||
with:
|
with:
|
||||||
token: ${{ secrets.GITHUB_TOKEN }}
|
token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
issue-number: ${{ github.event.pull_request.number }}
|
issue-number: ${{ github.event.pull_request.number }}
|
||||||
comment-id: ${{ steps.find-comment.outputs.comment-id }}
|
|
||||||
edit-mode: replace
|
|
||||||
body: |
|
body: |
|
||||||
❌ **Lockfile Validation Failed**
|
|
||||||
|
|
||||||
The following issue(s) were detected:
|
The following issue(s) were detected:
|
||||||
${{ steps.validate.outputs.errors }}
|
${{ steps.validate.outputs.errors }}
|
||||||
|
|
||||||
Please address these and push an update.
|
Please address these and push an update.
|
||||||
|
|
||||||
_Posted automatically by GitHub Actions_
|
_Posted automatically by GitHub Actions_
|
||||||
|
|
||||||
- name: Delete comment if validation passed
|
|
||||||
if: success() && steps.find-comment.outputs.comment-id != ''
|
|
||||||
uses: actions/github-script@v7
|
|
||||||
with:
|
|
||||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
script: |
|
|
||||||
await github.rest.issues.deleteComment({
|
|
||||||
owner: context.repo.owner,
|
|
||||||
repo: context.repo.repo,
|
|
||||||
comment_id: ${{ steps.find-comment.outputs.comment-id }},
|
|
||||||
});
|
|
||||||
|
|||||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -4,7 +4,6 @@ node_modules/
|
|||||||
coverage/
|
coverage/
|
||||||
.idea/
|
.idea/
|
||||||
.pnpm-store/
|
.pnpm-store/
|
||||||
.instructions/
|
|
||||||
|
|
||||||
dist
|
dist
|
||||||
v8-compile-cache-0
|
v8-compile-cache-0
|
||||||
|
|||||||
@@ -78,8 +78,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||||||
},
|
},
|
||||||
define: {
|
define: {
|
||||||
'import.meta.vitest': 'undefined',
|
'import.meta.vitest': 'undefined',
|
||||||
'injected.includeLargeFeatures': 'true',
|
|
||||||
'injected.version': `'0.0.0'`,
|
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: [],
|
extensions: [],
|
||||||
@@ -96,6 +94,10 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||||||
}),
|
}),
|
||||||
...visualizerOptions(packageName, core),
|
...visualizerOptions(packageName, core),
|
||||||
],
|
],
|
||||||
|
define: {
|
||||||
|
// Needs to be string
|
||||||
|
includeLargeFeatures: 'true',
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
if (watch && config.build) {
|
if (watch && config.build) {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ USER 0:0
|
|||||||
RUN corepack enable \
|
RUN corepack enable \
|
||||||
&& corepack enable pnpm
|
&& corepack enable pnpm
|
||||||
|
|
||||||
RUN apk add --no-cache git~=2.43 \
|
RUN apk add --no-cache git~=2.43.4 \
|
||||||
&& git config --add --system safe.directory /mermaid
|
&& git config --add --system safe.directory /mermaid
|
||||||
|
|
||||||
ENV NODE_OPTIONS="--max_old_space_size=8192"
|
ENV NODE_OPTIONS="--max_old_space_size=8192"
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ interface CypressConfig {
|
|||||||
listUrl?: boolean;
|
listUrl?: boolean;
|
||||||
listId?: string;
|
listId?: string;
|
||||||
name?: string;
|
name?: string;
|
||||||
screenshot?: boolean;
|
|
||||||
}
|
}
|
||||||
type CypressMermaidConfig = MermaidConfig & CypressConfig;
|
type CypressMermaidConfig = MermaidConfig & CypressConfig;
|
||||||
|
|
||||||
@@ -91,7 +90,7 @@ export const renderGraph = (
|
|||||||
|
|
||||||
export const openURLAndVerifyRendering = (
|
export const openURLAndVerifyRendering = (
|
||||||
url: string,
|
url: string,
|
||||||
{ screenshot = true, ...options }: CypressMermaidConfig,
|
options: CypressMermaidConfig,
|
||||||
validation?: any
|
validation?: any
|
||||||
): void => {
|
): void => {
|
||||||
const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
||||||
@@ -99,16 +98,12 @@ export const openURLAndVerifyRendering = (
|
|||||||
cy.visit(url);
|
cy.visit(url);
|
||||||
cy.window().should('have.property', 'rendered', true);
|
cy.window().should('have.property', 'rendered', true);
|
||||||
cy.get('svg').should('be.visible');
|
cy.get('svg').should('be.visible');
|
||||||
// cspell:ignore viewbox
|
|
||||||
cy.get('svg').should('not.have.attr', 'viewbox');
|
|
||||||
|
|
||||||
if (validation) {
|
if (validation) {
|
||||||
cy.get('svg').should(validation);
|
cy.get('svg').should(validation);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (screenshot) {
|
|
||||||
verifyScreenshot(name);
|
verifyScreenshot(name);
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const verifyScreenshot = (name: string): void => {
|
export const verifyScreenshot = (name: string): void => {
|
||||||
|
|||||||
@@ -113,7 +113,8 @@ describe('Configuration', () => {
|
|||||||
cy.get('path')
|
cy.get('path')
|
||||||
.first()
|
.first()
|
||||||
.should('have.attr', 'marker-end')
|
.should('have.attr', 'marker-end')
|
||||||
.and('include', 'url(http://localhost');
|
.should('exist')
|
||||||
|
.and('include', 'url(http\\:\\/\\/localhost');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
it('should not taint the initial configuration when using multiple directives', () => {
|
it('should not taint the initial configuration when using multiple directives', () => {
|
||||||
|
|||||||
@@ -562,20 +562,6 @@ class C13["With Città foreign language"]
|
|||||||
`
|
`
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('should add notes in namespaces', function () {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
classDiagram
|
|
||||||
note "This is a outer note"
|
|
||||||
note for C1 "This is a outer note for C1"
|
|
||||||
namespace Namespace1 {
|
|
||||||
note "This is a inner note"
|
|
||||||
note for C1 "This is a inner note for C1"
|
|
||||||
class C1
|
|
||||||
}
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('should render a simple class diagram with no members', () => {
|
it('should render a simple class diagram with no members', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|||||||
@@ -709,20 +709,6 @@ class C13["With Città foreign language"]
|
|||||||
`
|
`
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('should add notes in namespaces', function () {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
classDiagram
|
|
||||||
note "This is a outer note"
|
|
||||||
note for C1 "This is a outer note for C1"
|
|
||||||
namespace Namespace1 {
|
|
||||||
note "This is a inner note"
|
|
||||||
note for C1 "This is a inner note for C1"
|
|
||||||
class C1
|
|
||||||
}
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('should render a simple class diagram with no members', () => {
|
it('should render a simple class diagram with no members', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|||||||
@@ -369,92 +369,4 @@ ORDER ||--|{ LINE-ITEM : contains
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Special characters and numbers syntax', () => {
|
|
||||||
it('should render ER diagram with numeric entity names', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
erDiagram
|
|
||||||
1 ||--|| ORDER : places
|
|
||||||
ORDER ||--|{ 2 : contains
|
|
||||||
2 ||--o{ 3.5 : references
|
|
||||||
`,
|
|
||||||
{ logLevel: 1 }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render ER diagram with "u" character in entity names and cardinality', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
erDiagram
|
|
||||||
CUSTOMER ||--|| u : has
|
|
||||||
u ||--|| ORDER : places
|
|
||||||
PROJECT u--o{ TEAM_MEMBER : "parent"
|
|
||||||
`,
|
|
||||||
{ logLevel: 1 }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render ER diagram with decimal numbers in relationships', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
erDiagram
|
|
||||||
2.5 ||--|| 1.5 : has
|
|
||||||
CUSTOMER ||--o{ 3.14 : references
|
|
||||||
1.0 ||--|{ ORDER : contains
|
|
||||||
`,
|
|
||||||
{ logLevel: 1 }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render ER diagram with numeric entity names and attributes', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
erDiagram
|
|
||||||
1 {
|
|
||||||
string name
|
|
||||||
int value
|
|
||||||
}
|
|
||||||
1 ||--|| ORDER : places
|
|
||||||
ORDER {
|
|
||||||
float price
|
|
||||||
string description
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
{ logLevel: 1 }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render complex ER diagram with mixed special entity names', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
erDiagram
|
|
||||||
CUSTOMER ||--o{ 1 : places
|
|
||||||
1 ||--|{ u : contains
|
|
||||||
1.5
|
|
||||||
u ||--|| 2.5 : processes
|
|
||||||
2.5 {
|
|
||||||
string id
|
|
||||||
float value
|
|
||||||
}
|
|
||||||
u {
|
|
||||||
varchar(50) name
|
|
||||||
int count
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
{ logLevel: 1 }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('should render ER diagram with standalone numeric entities', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`erDiagram
|
|
||||||
PRODUCT ||--o{ ORDER-ITEM : has
|
|
||||||
1.5
|
|
||||||
u
|
|
||||||
1
|
|
||||||
`,
|
|
||||||
{ logLevel: 1 }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
|
|||||||
const style = svg.attr('style');
|
const style = svg.attr('style');
|
||||||
expect(style).to.match(/^max-width: [\d.]+px;$/);
|
expect(style).to.match(/^max-width: [\d.]+px;$/);
|
||||||
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
|
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
|
||||||
verifyNumber(maxWidthValue, 380, 15);
|
verifyNumber(maxWidthValue, 380);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
it('8-elk: should render a flowchart when useMaxWidth is false', () => {
|
it('8-elk: should render a flowchart when useMaxWidth is false', () => {
|
||||||
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
|
|||||||
const width = parseFloat(svg.attr('width'));
|
const width = parseFloat(svg.attr('width'));
|
||||||
// use within because the absolute value can be slightly different depending on the environment ±5%
|
// use within because the absolute value can be slightly different depending on the environment ±5%
|
||||||
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
|
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
|
||||||
verifyNumber(width, 380, 15);
|
verifyNumber(width, 380);
|
||||||
expect(svg).to.not.have.attr('style');
|
expect(svg).to.not.have.attr('style');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1029,19 +1029,4 @@ graph TD
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('FDH49: should add edge animation', () => {
|
|
||||||
renderGraph(
|
|
||||||
`
|
|
||||||
flowchart TD
|
|
||||||
A(["Start"]) L_A_B_0@--> B{"Decision"}
|
|
||||||
B --> C["Option A"] & D["Option B"]
|
|
||||||
style C stroke-width:4px,stroke-dasharray: 5
|
|
||||||
L_A_B_0@{ animation: slow }
|
|
||||||
L_B_D_0@{ animation: fast }`,
|
|
||||||
{ look: 'handDrawn', screenshot: false }
|
|
||||||
);
|
|
||||||
cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
|
|
||||||
cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1186,17 +1186,4 @@ end
|
|||||||
imgSnapshotTest(graph, { htmlLabels: false });
|
imgSnapshotTest(graph, { htmlLabels: false });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('V2 - 17: should apply class def colour to edge label', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
` graph LR
|
|
||||||
id1(Start) link@-- "Label" -->id2(Stop)
|
|
||||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
|
||||||
|
|
||||||
class id2 myClass
|
|
||||||
classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
|
|
||||||
class link myClass
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -774,21 +774,6 @@ describe('Graph', () => {
|
|||||||
expect(svg).to.not.have.attr('style');
|
expect(svg).to.not.have.attr('style');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
it('40: should add edge animation', () => {
|
|
||||||
renderGraph(
|
|
||||||
`
|
|
||||||
flowchart TD
|
|
||||||
A(["Start"]) L_A_B_0@--> B{"Decision"}
|
|
||||||
B --> C["Option A"] & D["Option B"]
|
|
||||||
style C stroke-width:4px,stroke-dasharray: 5
|
|
||||||
L_A_B_0@{ animation: slow }
|
|
||||||
L_B_D_0@{ animation: fast }`,
|
|
||||||
{ screenshot: false }
|
|
||||||
);
|
|
||||||
// Verify animation classes are applied to both edges
|
|
||||||
cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
|
|
||||||
cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
|
|
||||||
});
|
|
||||||
it('58: handle styling with style expressions', () => {
|
it('58: handle styling with style expressions', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
@@ -988,19 +973,4 @@ graph TD
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('70: should render a subgraph with direction TD', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
flowchart LR
|
|
||||||
subgraph A
|
|
||||||
direction TD
|
|
||||||
a --> b
|
|
||||||
end
|
|
||||||
`,
|
|
||||||
{
|
|
||||||
fontFamily: 'courier',
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -803,34 +803,4 @@ describe('Gantt diagram', () => {
|
|||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('should handle numeric timestamps with dateFormat x', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
gantt
|
|
||||||
title Process time profile (ms)
|
|
||||||
dateFormat x
|
|
||||||
axisFormat %L
|
|
||||||
tickInterval 250millisecond
|
|
||||||
|
|
||||||
section Pipeline
|
|
||||||
Parse JSON p1: 000, 120
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('should handle numeric timestamps with dateFormat X', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
gantt
|
|
||||||
title Process time profile (ms)
|
|
||||||
dateFormat X
|
|
||||||
axisFormat %L
|
|
||||||
tickInterval 250millisecond
|
|
||||||
|
|
||||||
section Pipeline
|
|
||||||
Parse JSON p1: 000, 120
|
|
||||||
`,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,79 +0,0 @@
|
|||||||
import { imgSnapshotTest } from '../../helpers/util.ts';
|
|
||||||
|
|
||||||
describe('Mindmap Tidy Tree', () => {
|
|
||||||
it('1-tidy-tree: should render a simple mindmap without children', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
` ---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('2-tidy-tree: should render a simple mindmap', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
` ---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap is a long thing))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('3-tidy-tree: should render a mindmap with different shapes', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
` ---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
id)I am a cloud(
|
|
||||||
id))I am a bang((
|
|
||||||
Tools
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('4-tidy-tree: should render a mindmap with children', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
` ---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
((This is a mindmap))
|
|
||||||
child1
|
|
||||||
grandchild 1
|
|
||||||
grandchild 2
|
|
||||||
child2
|
|
||||||
grandchild 3
|
|
||||||
grandchild 4
|
|
||||||
child3
|
|
||||||
grandchild 5
|
|
||||||
grandchild 6
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -159,10 +159,12 @@ root
|
|||||||
});
|
});
|
||||||
it('square shape', () => {
|
it('square shape', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`mindmap
|
`
|
||||||
|
mindmap
|
||||||
root[
|
root[
|
||||||
The root
|
The root
|
||||||
]`,
|
]
|
||||||
|
`,
|
||||||
{},
|
{},
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
@@ -170,10 +172,12 @@ root
|
|||||||
});
|
});
|
||||||
it('rounded rect shape', () => {
|
it('rounded rect shape', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`mindmap
|
`
|
||||||
|
mindmap
|
||||||
root((
|
root((
|
||||||
The root
|
The root
|
||||||
))`,
|
))
|
||||||
|
`,
|
||||||
{},
|
{},
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
@@ -181,10 +185,12 @@ root
|
|||||||
});
|
});
|
||||||
it('circle shape', () => {
|
it('circle shape', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`mindmap
|
`
|
||||||
|
mindmap
|
||||||
root(
|
root(
|
||||||
The root
|
The root
|
||||||
)`,
|
)
|
||||||
|
`,
|
||||||
{},
|
{},
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
@@ -192,8 +198,10 @@ root
|
|||||||
});
|
});
|
||||||
it('default shape', () => {
|
it('default shape', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`mindmap
|
`
|
||||||
The root`,
|
mindmap
|
||||||
|
The root
|
||||||
|
`,
|
||||||
{},
|
{},
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
@@ -201,10 +209,12 @@ root
|
|||||||
});
|
});
|
||||||
it('adding children', () => {
|
it('adding children', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`mindmap
|
`
|
||||||
|
mindmap
|
||||||
The root
|
The root
|
||||||
child1
|
child1
|
||||||
child2`,
|
child2
|
||||||
|
`,
|
||||||
{},
|
{},
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
@@ -212,11 +222,13 @@ root
|
|||||||
});
|
});
|
||||||
it('adding grand children', () => {
|
it('adding grand children', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`mindmap
|
`
|
||||||
|
mindmap
|
||||||
The root
|
The root
|
||||||
child1
|
child1
|
||||||
child2
|
child2
|
||||||
child3`,
|
child3
|
||||||
|
`,
|
||||||
{},
|
{},
|
||||||
undefined,
|
undefined,
|
||||||
shouldHaveRoot
|
shouldHaveRoot
|
||||||
@@ -228,21 +240,25 @@ root
|
|||||||
`mindmap
|
`mindmap
|
||||||
id1[\`**Start** with
|
id1[\`**Start** with
|
||||||
a second line 😎\`]
|
a second line 😎\`]
|
||||||
id2[\`The dog in **the** hog... a *very long text* about it Word!\`]`
|
id2[\`The dog in **the** hog... a *very long text* about it
|
||||||
|
Word!\`]
|
||||||
|
`
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
describe('Include char sequence "graph" in text (#6795)', () => {
|
describe('Include char sequence "graph" in text (#6795)', () => {
|
||||||
it('has a label with char sequence "graph"', () => {
|
it('has a label with char sequence "graph"', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
` mindmap
|
`
|
||||||
|
mindmap
|
||||||
root
|
root
|
||||||
Photograph
|
Photograph
|
||||||
Waterfall
|
Waterfall
|
||||||
Landscape
|
Landscape
|
||||||
Geography
|
Geography
|
||||||
Mountains
|
Mountains
|
||||||
Rocks`,
|
Rocks
|
||||||
|
`,
|
||||||
{ flowchart: { defaultRenderer: 'elk' } }
|
{ flowchart: { defaultRenderer: 'elk' } }
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -655,249 +655,5 @@ describe('Sequence Diagram Special Cases', () => {
|
|||||||
expect(svg).to.not.have.attr('style');
|
expect(svg).to.not.have.attr('style');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Central Connection Rendering Tests', () => {
|
|
||||||
it('should render central connection circles on actor vertical lines', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant Bob
|
|
||||||
participant Charlie
|
|
||||||
Alice ()->>() Bob: Central connection
|
|
||||||
Bob ()-->> Charlie: Reverse central connection
|
|
||||||
Charlie ()<<-->>() Alice: Dual central connection`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render central connections with different arrow types', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant Bob
|
|
||||||
Alice ()->>() Bob: Solid open arrow
|
|
||||||
Alice ()-->>() Bob: Dotted open arrow
|
|
||||||
Alice ()-x() Bob: Solid cross
|
|
||||||
Alice ()--x() Bob: Dotted cross
|
|
||||||
Alice ()->() Bob: Solid arrow`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render central connections with bidirectional arrows', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant Bob
|
|
||||||
Alice ()<<->>() Bob: Bidirectional solid
|
|
||||||
Alice ()<<-->>() Bob: Bidirectional dotted`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render central connections with activations', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant Bob
|
|
||||||
participant Charlie
|
|
||||||
Alice ()->>() Bob: Activate Bob
|
|
||||||
activate Bob
|
|
||||||
Bob ()-->> Charlie: Message to Charlie
|
|
||||||
Bob ()->>() Alice: Response to Alice
|
|
||||||
deactivate Bob`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render central connections mixed with normal messages', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant Bob
|
|
||||||
participant Charlie
|
|
||||||
Alice ->> Bob: Normal message
|
|
||||||
Bob ()->>() Charlie: Central connection
|
|
||||||
Charlie -->> Alice: Normal dotted message
|
|
||||||
Alice ()<<-->>() Bob: Dual central connection
|
|
||||||
Bob -x Charlie: Normal cross message`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render central connections with notes', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant Bob
|
|
||||||
participant Charlie
|
|
||||||
Alice ()->>() Bob: Central connection
|
|
||||||
Note over Alice,Bob: Central connection note
|
|
||||||
Bob ()-->> Charlie: Reverse central connection
|
|
||||||
Note right of Charlie: Response note
|
|
||||||
Charlie ()<<-->>() Alice: Dual central connection`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render central connections with loops and alternatives', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant Bob
|
|
||||||
participant Charlie
|
|
||||||
loop Every minute
|
|
||||||
Alice ()->>() Bob: Central heartbeat
|
|
||||||
Bob ()-->> Charlie: Forward heartbeat
|
|
||||||
end
|
|
||||||
alt Success
|
|
||||||
Charlie ()<<-->>() Alice: Success response
|
|
||||||
else Failure
|
|
||||||
Charlie ()-x() Alice: Failure response
|
|
||||||
end`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render central connections with different participant types', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
actor Bob
|
|
||||||
participant Charlie@{"type":"boundary"}
|
|
||||||
participant David@{"type":"control"}
|
|
||||||
participant Eve@{"type":"entity"}
|
|
||||||
Alice ()->>() Bob: To actor
|
|
||||||
Bob ()-->> Charlie: To boundary
|
|
||||||
Charlie ()->>() David: To control
|
|
||||||
David ()<<-->>() Eve: To entity
|
|
||||||
Eve ()-x() Alice: Back to participant`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Participant Stereotypes with Aliases', () => {
|
|
||||||
it('should render participants with stereotypes and aliases', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant API@{ "type" : "boundary" } as Public API
|
|
||||||
participant Auth@{ "type" : "control" } as Auth Controller
|
|
||||||
participant DB@{ "type" : "database" } as User Database
|
|
||||||
participant Cache@{ "type" : "entity" } as Cache Layer
|
|
||||||
API ->> Auth: Authenticate request
|
|
||||||
Auth ->> DB: Query user
|
|
||||||
DB -->> Auth: User data
|
|
||||||
Auth ->> Cache: Store session
|
|
||||||
Cache -->> Auth: Confirmed
|
|
||||||
Auth -->> API: Token`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render actors with stereotypes and aliases', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
actor U@{ "type" : "actor" } as End User
|
|
||||||
actor A@{ "type" : "boundary" } as API Gateway
|
|
||||||
actor S@{ "type" : "control" } as Service Layer
|
|
||||||
actor D@{ "type" : "database" } as Data Store
|
|
||||||
U ->> A: Send request
|
|
||||||
A ->> S: Process
|
|
||||||
S ->> D: Persist
|
|
||||||
D -->> S: Success
|
|
||||||
S -->> A: Response
|
|
||||||
A -->> U: Result`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render mixed participants and actors with stereotypes and aliases', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
actor Client@{ "type" : "actor" } AS Mobile Client
|
|
||||||
participant Gateway@{ "type" : "boundary" } as API Gateway
|
|
||||||
participant OrderSvc@{ "type" : "control" } as Order Service
|
|
||||||
participant Queue@{ "type" : "queue" } as Message Queue
|
|
||||||
participant DB@{ "type" : "database" } as Order Database
|
|
||||||
participant Logs@{ "type" : "collections" } as Audit Logs
|
|
||||||
Client ->> Gateway: Place order
|
|
||||||
Gateway ->> OrderSvc: Validate order
|
|
||||||
OrderSvc ->> Queue: Queue for processing as well
|
|
||||||
OrderSvc ->> DB: Save order
|
|
||||||
OrderSvc ->> Logs: Log transaction
|
|
||||||
Queue -->> OrderSvc: Processing started AS Well
|
|
||||||
DB -->> OrderSvc: Order saved
|
|
||||||
Logs -->> OrderSvc: Logged
|
|
||||||
OrderSvc -->> Gateway: Order confirmed
|
|
||||||
Gateway -->> Client: Confirmation`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render stereotypes with aliases in boxes', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
box rgb(200,220,255) Frontend Layer
|
|
||||||
actor User@{ "type" : "actor" } as End User
|
|
||||||
participant UI@{ "type" : "boundary" } as User Interface
|
|
||||||
end
|
|
||||||
box rgb(255,220,200) Backend Layer
|
|
||||||
participant API@{ "type" : "boundary" } as REST API
|
|
||||||
participant Svc@{ "type" : "control" } as Business Logic
|
|
||||||
end
|
|
||||||
box rgb(220,255,200) Data Layer
|
|
||||||
participant DB@{ "type" : "database" } as Primary DB
|
|
||||||
participant Cache@{ "type" : "entity" } as Cache Store
|
|
||||||
end
|
|
||||||
User ->> UI: Click button
|
|
||||||
UI ->> API: HTTP request
|
|
||||||
API ->> Svc: Process
|
|
||||||
Svc ->> Cache: Check cache
|
|
||||||
Cache -->> Svc: Cache miss
|
|
||||||
Svc ->> DB: Query data
|
|
||||||
DB -->> Svc: Data
|
|
||||||
Svc ->> Cache: Update cache
|
|
||||||
Svc -->> API: Response
|
|
||||||
API -->> UI: Data
|
|
||||||
UI -->> User: Display`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render stereotypes with aliases and complex interactions', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
participant Web@{ "type" : "boundary" } as Web Portal
|
|
||||||
participant Auth@{ "type" : "control" } as Auth Service
|
|
||||||
participant UserDB@{ "type" : "database" } as User DB
|
|
||||||
participant Queue@{ "type" : "queue" } as Event Queue
|
|
||||||
participant Audit@{ "type" : "collections" } as Audit Trail
|
|
||||||
Web ->> Auth: Login request
|
|
||||||
activate Auth
|
|
||||||
Auth ->> UserDB: Verify credentials
|
|
||||||
activate UserDB
|
|
||||||
UserDB -->> Auth: User found
|
|
||||||
deactivate UserDB
|
|
||||||
alt Valid credentials
|
|
||||||
Auth ->> Queue: Publish login event
|
|
||||||
Auth ->> Audit: Log success
|
|
||||||
par Parallel processing
|
|
||||||
Queue -->> Auth: Event queued
|
|
||||||
and
|
|
||||||
Audit -->> Auth: Logged
|
|
||||||
end
|
|
||||||
Auth -->> Web: Success token
|
|
||||||
else Invalid credentials
|
|
||||||
Auth ->> Audit: Log failure
|
|
||||||
Audit -->> Auth: Logged
|
|
||||||
Auth --x Web: Access denied
|
|
||||||
end
|
|
||||||
deactivate Auth
|
|
||||||
Note over Web,Audit: All interactions logged`,
|
|
||||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1053,167 +1053,4 @@ describe('Sequence diagram', () => {
|
|||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
describe('render new arrow type', () => {
|
|
||||||
it('should render Solid half arrow top', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice -|\\ John: Hello John, how are you?
|
|
||||||
Alice-|\\ John: Hi Alice, I can hear you!
|
|
||||||
Alice -|\\ John: Test
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('should render Solid half arrow bottom', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice-|/John: Hello John, how are you?
|
|
||||||
Alice-|/John: Hi Alice, I can hear you!
|
|
||||||
Alice-|/John: Test
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Stick half arrow top ', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice-\\\\John: Hello John, how are you?
|
|
||||||
Alice-\\\\John: Hi Alice, I can hear you!
|
|
||||||
Alice-\\\\John: Test
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('should render Stick half arrow bottom ', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice-//John: Hello John, how are you?
|
|
||||||
Alice-//John: Hi Alice, I can hear you!
|
|
||||||
Alice-//John: Test
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('should render Solid half arrow top reverse ', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice/|-John: Hello Alice, how are you?
|
|
||||||
Alice/|-John: Hi Alice, I can hear you!
|
|
||||||
Alice/|-John: Test
|
|
||||||
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Solid half arrow bottom reverse ', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`sequenceDiagram
|
|
||||||
Alice \\|- John: Hello Alice, how are you?
|
|
||||||
Alice \\|- John: Hi Alice, I can hear you!
|
|
||||||
Alice \\|- John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Stick half arrow top reverse ', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice //-John: Hello Alice, how are you?
|
|
||||||
Alice //-John: Hi Alice, I can hear you!
|
|
||||||
Alice //-John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Stick half arrow bottom reverse ', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice \\\\-John: Hello Alice, how are you?
|
|
||||||
Alice \\\\-John: Hi Alice, I can hear you!
|
|
||||||
Alice \\\\-John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Solid half arrow top dotted', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice --|\\John: Hello John, how are you?
|
|
||||||
Alice --|\\John: Hi Alice, I can hear you!
|
|
||||||
Alice --|\\John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Solid half arrow bottom dotted', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice --|/John: Hello John, how are you?
|
|
||||||
Alice --|/John: Hi Alice, I can hear you!
|
|
||||||
Alice --|/John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Stick half arrow top dotted', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice--\\\\John: Hello John, how are you?
|
|
||||||
Alice--\\\\John: Hi Alice, I can hear you!
|
|
||||||
Alice--\\\\John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Stick half arrow bottom dotted', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice--//John: Hello John, how are you?
|
|
||||||
Alice--//John: Hi Alice, I can hear you!
|
|
||||||
Alice--//John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Solid half arrow top reverse dotted', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice/|--John: Hello Alice, how are you?
|
|
||||||
Alice/|--John: Hi Alice, I can hear you!
|
|
||||||
Alice/|--John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Solid half arrow bottom reverse dotted', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice\\|--John: Hello Alice, how are you?
|
|
||||||
Alice\\|--John: Hi Alice, I can hear you!
|
|
||||||
Alice\\|--John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Stick half arrow top reverse dotted ', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice//--John: Hello Alice, how are you?
|
|
||||||
Alice//--John: Hi Alice, I can hear you!
|
|
||||||
Alice//--John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render Stick half arrow bottom reverse dotted ', () => {
|
|
||||||
imgSnapshotTest(
|
|
||||||
`
|
|
||||||
sequenceDiagram
|
|
||||||
Alice\\\\--John: Hello Alice, how are you?
|
|
||||||
Alice\\\\--John: Hi Alice, I can hear you!
|
|
||||||
Alice\\\\--John: Test`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -32,8 +32,26 @@
|
|||||||
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.recursive-mermaid {
|
||||||
|
font-family: 'Recursive', sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-variation-settings:
|
||||||
|
'slnt' 0,
|
||||||
|
'CASL' 0,
|
||||||
|
'CRSV' 0.5,
|
||||||
|
'MONO' 0;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/* background: rgb(221, 208, 208); */
|
/* background: rgb(221, 208, 208); */
|
||||||
/* background: #333; */
|
/* background: #333; */
|
||||||
@@ -45,7 +63,9 @@
|
|||||||
h1 {
|
h1 {
|
||||||
color: grey;
|
color: grey;
|
||||||
}
|
}
|
||||||
|
.mermaid {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
.mermaid2 {
|
.mermaid2 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -83,6 +103,11 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.class2 {
|
||||||
|
fill: red;
|
||||||
|
fill-opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
/* tspan {
|
/* tspan {
|
||||||
font-size: 6px !important;
|
font-size: 6px !important;
|
||||||
} */
|
} */
|
||||||
@@ -107,236 +132,6 @@
|
|||||||
<body>
|
<body>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
id)I am a cloud(
|
|
||||||
id))I am a bang((
|
|
||||||
Tools
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
flowchart
|
|
||||||
aid0
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
aid0
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: ogdc
|
|
||||||
---
|
|
||||||
flowchart-elk TB
|
|
||||||
c1-->a2
|
|
||||||
subgraph one
|
|
||||||
a1-->a2
|
|
||||||
end
|
|
||||||
subgraph two
|
|
||||||
b1-->b2
|
|
||||||
end
|
|
||||||
subgraph three
|
|
||||||
c1-->c2
|
|
||||||
end
|
|
||||||
one --> two
|
|
||||||
three --> two
|
|
||||||
two --> c2
|
|
||||||
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
flowchart TB
|
|
||||||
|
|
||||||
process_C
|
|
||||||
subgraph container_Alpha
|
|
||||||
subgraph process_B
|
|
||||||
pppB
|
|
||||||
end
|
|
||||||
subgraph process_A
|
|
||||||
pppA
|
|
||||||
end
|
|
||||||
process_B-->|via_AWSBatch|container_Beta
|
|
||||||
process_A-->|messages|container_Beta
|
|
||||||
end
|
|
||||||
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
flowchart TB
|
|
||||||
subgraph container_Beta
|
|
||||||
process_C
|
|
||||||
end
|
|
||||||
subgraph container_Alpha
|
|
||||||
subgraph process_B
|
|
||||||
pppB
|
|
||||||
end
|
|
||||||
subgraph process_A
|
|
||||||
pppA
|
|
||||||
end
|
|
||||||
process_B-->|via_AWSBatch|container_Beta
|
|
||||||
process_A-->|messages|container_Beta
|
|
||||||
end
|
|
||||||
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
flowchart TB
|
|
||||||
subgraph container_Beta
|
|
||||||
process_C
|
|
||||||
end
|
|
||||||
|
|
||||||
process_B-->|via_AWSBatch|container_Beta
|
|
||||||
|
|
||||||
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
classDiagram
|
|
||||||
note "I love this diagram!\nDo you love it?"
|
|
||||||
Class01 <|-- AveryLongClass : Cool
|
|
||||||
<<interface>> Class01
|
|
||||||
Class03 "1" *-- "*" Class04
|
|
||||||
Class05 "1" o-- "many" Class06
|
|
||||||
Class07 "1" .. "*" Class08
|
|
||||||
Class09 "1" --> "*" C2 : Where am i?
|
|
||||||
Class09 "*" --* "*" C3
|
|
||||||
Class09 "1" --|> "1" Class07
|
|
||||||
Class12 <|.. Class08
|
|
||||||
Class11 ..>Class12
|
|
||||||
Class07 : equals()
|
|
||||||
Class07 : Object[] elementData
|
|
||||||
Class01 : size()
|
|
||||||
Class01 : int chimp
|
|
||||||
Class01 : int gorilla
|
|
||||||
Class01 : -int privateChimp
|
|
||||||
Class01 : +int publicGorilla
|
|
||||||
Class01 : #int protectedMarmoset
|
|
||||||
Class08 <--> C2: Cool label
|
|
||||||
class Class10 {
|
|
||||||
<<service>>
|
|
||||||
int id
|
|
||||||
test()
|
|
||||||
}
|
|
||||||
note for Class10 "Cool class\nI said it's very cool class!"
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
requirementDiagram
|
|
||||||
requirement test_req {
|
|
||||||
id: 1
|
|
||||||
text: the test text.
|
|
||||||
risk: high
|
|
||||||
verifymethod: test
|
|
||||||
}
|
|
||||||
|
|
||||||
element test_entity {
|
|
||||||
type: simulation
|
|
||||||
}
|
|
||||||
|
|
||||||
test_entity - satisfies -> test_req
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
flowchart-elk TB
|
|
||||||
internet
|
|
||||||
nat
|
|
||||||
router
|
|
||||||
compute1
|
|
||||||
|
|
||||||
subgraph project
|
|
||||||
router
|
|
||||||
nat
|
|
||||||
subgraph subnet1
|
|
||||||
compute1
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
%% router --> subnet1
|
|
||||||
subnet1 --> nat
|
|
||||||
%% nat --> internet
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
flowchart-elk TB
|
|
||||||
internet
|
|
||||||
nat
|
|
||||||
router
|
|
||||||
lb1
|
|
||||||
lb2
|
|
||||||
compute1
|
|
||||||
compute2
|
|
||||||
subgraph project
|
|
||||||
router
|
|
||||||
nat
|
|
||||||
subgraph subnet1
|
|
||||||
compute1
|
|
||||||
lb1
|
|
||||||
end
|
|
||||||
subgraph subnet2
|
|
||||||
compute2
|
|
||||||
lb2
|
|
||||||
end
|
|
||||||
end
|
|
||||||
internet --> router
|
|
||||||
router --> subnet1 & subnet2
|
|
||||||
subnet1 & subnet2 --> nat --> internet
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
elk:
|
elk:
|
||||||
@@ -362,149 +157,84 @@ treemap
|
|||||||
"Leaf 2.2": 25
|
"Leaf 2.2": 25
|
||||||
"Leaf 2.3": 12
|
"Leaf 2.3": 12
|
||||||
|
|
||||||
</pre>
|
classDef class1 fill:red,color:blue,stroke:#FFD600;
|
||||||
<pre id="diagram5" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
flowchart:
|
|
||||||
curve: rounded
|
|
||||||
---
|
|
||||||
flowchart LR
|
|
||||||
I["fa:fa-code Text"] -- Mermaid js --> D["Use<br/>the<br/>editor!"]
|
|
||||||
I --> D & D
|
|
||||||
D@{ shape: question}
|
|
||||||
I@{ shape: question}
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
Pen and paper
|
|
||||||
Mermaid
|
|
||||||
|
|
||||||
</pre>
|
</pre
|
||||||
<pre id="diagram4" class="mermaid">
|
>
|
||||||
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
treemap:
|
||||||
flowchart:
|
valueFormat: '$0,0'
|
||||||
curve: linear
|
|
||||||
---
|
---
|
||||||
flowchart LR
|
treemap
|
||||||
A[A] --> B[B]
|
"Budget"
|
||||||
A[A] --- B([C])
|
"Operations"
|
||||||
A@{ shape: diamond}
|
"Salaries": 7000
|
||||||
%%B@{ shape: diamond}
|
"Equipment": 2000
|
||||||
|
"Supplies": 1000
|
||||||
|
"Marketing"
|
||||||
|
"Advertising": 4000
|
||||||
|
"Events": 1000
|
||||||
|
|
||||||
</pre>
|
</pre
|
||||||
|
>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
treemap
|
||||||
config:
|
title Accessible Treemap Title
|
||||||
layout: elk
|
"Category A"
|
||||||
flowchart:
|
"Item A1": 10
|
||||||
curve: linear
|
"Item A2": 20
|
||||||
---
|
"Category B"
|
||||||
|
"Item B1": 15
|
||||||
|
"Item B2": 25
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
A[A] -- Mermaid js --> B[B]
|
AB["apa@apa@"] --> B(("`apa@apa`"))
|
||||||
A[A] -- Mermaid js --- B[B]
|
</pre>
|
||||||
A@{ shape: diamond}
|
<pre id="diagram4" class="mermaid2">
|
||||||
B@{ shape: diamond}
|
flowchart
|
||||||
|
D(("for D"))
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram4" class="mermaid2">
|
||||||
|
flowchart LR
|
||||||
|
A e1@==> B
|
||||||
|
e1@{ animate: true}
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram4" class="mermaid2">
|
||||||
|
flowchart LR
|
||||||
|
A e1@--> B
|
||||||
|
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
|
||||||
|
class e1 animate
|
||||||
|
</pre>
|
||||||
|
<h2>infinite</h2>
|
||||||
|
<pre id="diagram4" class="mermaid2">
|
||||||
|
flowchart LR
|
||||||
|
A e1@--> B
|
||||||
|
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
|
||||||
|
class e1 animate
|
||||||
|
</pre>
|
||||||
|
<h2>Mermaid - edge-animation-slow</h2>
|
||||||
|
<pre id="diagram4" class="mermaid2">
|
||||||
|
flowchart LR
|
||||||
|
A e1@--> B
|
||||||
|
e1@{ animation: fast}
|
||||||
|
</pre>
|
||||||
|
<h2>Mermaid - edge-animation-fast</h2>
|
||||||
|
<pre id="diagram4" class="mermaid2">
|
||||||
|
flowchart LR
|
||||||
|
A e1@--> B
|
||||||
|
classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
|
||||||
|
class e1 edge-animation-fast
|
||||||
|
</pre>
|
||||||
|
|
||||||
</pre>
|
<pre id="diagram4" class="mermaid2">
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
flowchart:
|
|
||||||
curve: rounded
|
|
||||||
---
|
|
||||||
flowchart LR
|
|
||||||
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
|
|
||||||
I --> D & D
|
|
||||||
D@{ shape: question}
|
|
||||||
I@{ shape: question}
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
flowchart:
|
|
||||||
curve: rounded
|
|
||||||
elk:
|
|
||||||
nodePlacementStrategy: NETWORK_SIMPLEX
|
|
||||||
---
|
|
||||||
flowchart LR
|
|
||||||
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
|
|
||||||
D --> I & I
|
|
||||||
a["a"]
|
|
||||||
D@{ shape: trap-b}
|
|
||||||
I@{ shape: lean-l}
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
|
|
||||||
---
|
info </pre
|
||||||
flowchart LR
|
>
|
||||||
%% subgraph s1["Untitled subgraph"]
|
<pre id="diagram4" class="mermaid2">
|
||||||
C["Evaluate"]
|
|
||||||
%% end
|
|
||||||
|
|
||||||
B --> C
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
flowchart:
|
|
||||||
//curve: linear
|
|
||||||
---
|
|
||||||
flowchart LR
|
|
||||||
%% A ==> B
|
|
||||||
%% A2 --> B2
|
|
||||||
A{A} --> B((Bo boo)) & B & B & B
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
theme: default
|
|
||||||
look: classic
|
|
||||||
---
|
|
||||||
flowchart LR
|
|
||||||
subgraph s1["APA"]
|
|
||||||
D{"Use the editor"}
|
|
||||||
end
|
|
||||||
subgraph S2["S2"]
|
|
||||||
s1
|
|
||||||
I>"fa:fa-code Text"]
|
|
||||||
E["E"]
|
|
||||||
end
|
|
||||||
D -- Mermaid js --> I
|
|
||||||
D --> I & E
|
|
||||||
E --> I
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram4" class="mermaid">
|
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -529,7 +259,7 @@ config:
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -542,7 +272,7 @@ config:
|
|||||||
D-->I
|
D-->I
|
||||||
D-->I
|
D-->I
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -581,7 +311,7 @@ flowchart LR
|
|||||||
n8@{ shape: rect}
|
n8@{ shape: rect}
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -597,7 +327,7 @@ flowchart LR
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -606,7 +336,7 @@ flowchart LR
|
|||||||
A{A} --> B & C
|
A{A} --> B & C
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -618,7 +348,7 @@ flowchart LR
|
|||||||
end
|
end
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -636,7 +366,7 @@ flowchart LR
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
kanban:
|
kanban:
|
||||||
@@ -655,81 +385,81 @@ kanban
|
|||||||
task3[💻 Develop login feature]@{ ticket: 103 }
|
task3[💻 Develop login feature]@{ ticket: 103 }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||||
A:::AClass
|
A:::AClass
|
||||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
|
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
|
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
|
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
|
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||||
A:::AClass
|
A:::AClass
|
||||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
|
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
|
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
|
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
|
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||||
A:::AClass
|
A:::AClass
|
||||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
|
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
|
||||||
A:::AClass
|
A:::AClass
|
||||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
|
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
|
||||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
kanban
|
kanban
|
||||||
id2[In progress]
|
id2[In progress]
|
||||||
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
|
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid2">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
kanban:
|
kanban:
|
||||||
@@ -793,22 +523,18 @@ kanban
|
|||||||
alert('It worked');
|
alert('It worked');
|
||||||
}
|
}
|
||||||
await mermaid.initialize({
|
await mermaid.initialize({
|
||||||
// theme: 'base',
|
// theme: 'forest',
|
||||||
// theme: 'default',
|
// theme: 'default',
|
||||||
// theme: 'forest',
|
// theme: 'forest',
|
||||||
// handDrawnSeed: 12,
|
// handDrawnSeed: 12,
|
||||||
// look: 'handDrawn',
|
// look: 'handDrawn',
|
||||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||||
// layout: 'dagre',
|
// layout: 'dagre',
|
||||||
layout: 'elk',
|
// layout: 'elk',
|
||||||
// layout: 'fixed',
|
// layout: 'fixed',
|
||||||
// htmlLabels: false,
|
// htmlLabels: false,
|
||||||
flowchart: { titleTopMargin: 10 },
|
flowchart: { titleTopMargin: 10 },
|
||||||
|
fontFamily: "'Recursive', sans-serif",
|
||||||
// fontFamily: 'Caveat',
|
|
||||||
// fontFamily: 'Kalam',
|
|
||||||
// fontFamily: 'courier',
|
|
||||||
fontFamily: 'arial',
|
|
||||||
sequence: {
|
sequence: {
|
||||||
actorFontFamily: 'courier',
|
actorFontFamily: 'courier',
|
||||||
noteFontFamily: 'courier',
|
noteFontFamily: 'courier',
|
||||||
|
|||||||
@@ -1,376 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<title>Mermaid Quick Test Page</title>
|
|
||||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
|
||||||
<style>
|
|
||||||
div.mermaid {
|
|
||||||
font-family: 'Courier New', Courier, monospace !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: dagre
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: cose-bilkent
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap is a long thing))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: dagre
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap is a long thing))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap is a long thing))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: cose-bilkent
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap is a long thing))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
id)I am a cloud(
|
|
||||||
id))I am a bang((
|
|
||||||
Tools
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: dagre
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
id)I am a cloud(
|
|
||||||
id))I am a bang((
|
|
||||||
Tools
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
id)I am a cloud(
|
|
||||||
id))I am a bang((
|
|
||||||
Tools
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: cose-bilkent
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
id)I am a cloud(
|
|
||||||
id))I am a bang((
|
|
||||||
Tools
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
a
|
|
||||||
apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
b
|
|
||||||
c
|
|
||||||
d
|
|
||||||
B
|
|
||||||
apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
D
|
|
||||||
apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: dagre
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
a
|
|
||||||
apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
b
|
|
||||||
c
|
|
||||||
d
|
|
||||||
B
|
|
||||||
apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
D
|
|
||||||
apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
a
|
|
||||||
apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
b
|
|
||||||
c
|
|
||||||
d
|
|
||||||
B
|
|
||||||
apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
D
|
|
||||||
apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: cose-bilkent
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
a
|
|
||||||
apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
b
|
|
||||||
c
|
|
||||||
d
|
|
||||||
B
|
|
||||||
apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
D
|
|
||||||
apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
((This is a mindmap))
|
|
||||||
child1
|
|
||||||
grandchild 1
|
|
||||||
grandchild 2
|
|
||||||
child2
|
|
||||||
grandchild 3
|
|
||||||
grandchild 4
|
|
||||||
child3
|
|
||||||
grandchild 5
|
|
||||||
grandchild 6
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: dagre
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
((This is a mindmap))
|
|
||||||
child1
|
|
||||||
grandchild 1
|
|
||||||
grandchild 2
|
|
||||||
child2
|
|
||||||
grandchild 3
|
|
||||||
grandchild 4
|
|
||||||
child3
|
|
||||||
grandchild 5
|
|
||||||
grandchild 6
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
((This is a mindmap))
|
|
||||||
child1
|
|
||||||
grandchild 1
|
|
||||||
grandchild 2
|
|
||||||
child2
|
|
||||||
grandchild 3
|
|
||||||
grandchild 4
|
|
||||||
child3
|
|
||||||
grandchild 5
|
|
||||||
grandchild 6
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<pre class="mermaid">
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: cose-bilkent
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
((This is a mindmap))
|
|
||||||
child1
|
|
||||||
grandchild 1
|
|
||||||
grandchild 2
|
|
||||||
child2
|
|
||||||
grandchild 3
|
|
||||||
grandchild 4
|
|
||||||
child3
|
|
||||||
grandchild 5
|
|
||||||
grandchild 6
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<script type="module">
|
|
||||||
import mermaid from '/mermaid.esm.mjs';
|
|
||||||
import tidytree from '/mermaid-layout-tidy-tree.esm.mjs';
|
|
||||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
|
||||||
mermaid.registerLayoutLoaders(layouts);
|
|
||||||
mermaid.registerLayoutLoaders(tidytree);
|
|
||||||
mermaid.initialize({
|
|
||||||
theme: 'default',
|
|
||||||
logLevel: 3,
|
|
||||||
securityLevel: 'loose',
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
import externalExample from './mermaid-example-diagram.esm.mjs';
|
import externalExample from './mermaid-example-diagram.esm.mjs';
|
||||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||||
import tidyTree from './mermaid-layout-tidy-tree.esm.mjs';
|
|
||||||
import zenUml from './mermaid-zenuml.esm.mjs';
|
import zenUml from './mermaid-zenuml.esm.mjs';
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
|
||||||
@@ -66,7 +65,6 @@ const contentLoaded = async function () {
|
|||||||
await mermaid.registerExternalDiagrams([externalExample, zenUml]);
|
await mermaid.registerExternalDiagrams([externalExample, zenUml]);
|
||||||
|
|
||||||
mermaid.registerLayoutLoaders(layouts);
|
mermaid.registerLayoutLoaders(layouts);
|
||||||
mermaid.registerLayoutLoaders(tidyTree);
|
|
||||||
mermaid.initialize(graphObj.mermaid);
|
mermaid.initialize(graphObj.mermaid);
|
||||||
/**
|
/**
|
||||||
* CC-BY-4.0
|
* CC-BY-4.0
|
||||||
|
|||||||
@@ -603,10 +603,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="test">
|
<div class="test">
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
---
|
|
||||||
config:
|
|
||||||
theme: dark
|
|
||||||
---
|
|
||||||
classDiagram
|
classDiagram
|
||||||
test ()--() test2
|
test ()--() test2
|
||||||
</pre>
|
</pre>
|
||||||
|
|||||||
@@ -2,227 +2,223 @@
|
|||||||
"durations": [
|
"durations": [
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/other/configuration.spec.js",
|
"spec": "cypress/integration/other/configuration.spec.js",
|
||||||
"duration": 5841
|
"duration": 6162
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/other/external-diagrams.spec.js",
|
"spec": "cypress/integration/other/external-diagrams.spec.js",
|
||||||
"duration": 2138
|
"duration": 2148
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/other/ghsa.spec.js",
|
"spec": "cypress/integration/other/ghsa.spec.js",
|
||||||
"duration": 3370
|
"duration": 3585
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/other/iife.spec.js",
|
"spec": "cypress/integration/other/iife.spec.js",
|
||||||
"duration": 2052
|
"duration": 2099
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/other/interaction.spec.js",
|
"spec": "cypress/integration/other/interaction.spec.js",
|
||||||
"duration": 12243
|
"duration": 12119
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/other/rerender.spec.js",
|
"spec": "cypress/integration/other/rerender.spec.js",
|
||||||
"duration": 2065
|
"duration": 2063
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/other/xss.spec.js",
|
"spec": "cypress/integration/other/xss.spec.js",
|
||||||
"duration": 31288
|
"duration": 31921
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/appli.spec.js",
|
"spec": "cypress/integration/rendering/appli.spec.js",
|
||||||
"duration": 3421
|
"duration": 3385
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/architecture.spec.ts",
|
"spec": "cypress/integration/rendering/architecture.spec.ts",
|
||||||
"duration": 97
|
"duration": 108
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/block.spec.js",
|
"spec": "cypress/integration/rendering/block.spec.js",
|
||||||
"duration": 18500
|
"duration": 18063
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/c4.spec.js",
|
"spec": "cypress/integration/rendering/c4.spec.js",
|
||||||
"duration": 5793
|
"duration": 5519
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
|
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
|
||||||
"duration": 40966
|
"duration": 40040
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
|
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
|
||||||
"duration": 39176
|
"duration": 38665
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
|
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
|
||||||
"duration": 23468
|
"duration": 22836
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
|
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
|
||||||
"duration": 38291
|
"duration": 37096
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/classDiagram.spec.js",
|
"spec": "cypress/integration/rendering/classDiagram.spec.js",
|
||||||
"duration": 16949
|
"duration": 16452
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
|
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
|
||||||
"duration": 9480
|
"duration": 10387
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/current.spec.js",
|
"spec": "cypress/integration/rendering/current.spec.js",
|
||||||
"duration": 2753
|
"duration": 2803
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
|
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
|
||||||
"duration": 88028
|
"duration": 86891
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/erDiagram.spec.js",
|
"spec": "cypress/integration/rendering/erDiagram.spec.js",
|
||||||
"duration": 15615
|
"duration": 15206
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
|
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
|
||||||
"duration": 3706
|
"duration": 3540
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
|
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
|
||||||
"duration": 43905
|
"duration": 41975
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
|
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
|
||||||
"duration": 31217
|
"duration": 30909
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/flowchart-icon.spec.js",
|
"spec": "cypress/integration/rendering/flowchart-icon.spec.js",
|
||||||
"duration": 7531
|
"duration": 7881
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
|
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
|
||||||
"duration": 25423
|
"duration": 24294
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
|
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
|
||||||
"duration": 49664
|
"duration": 47652
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/flowchart.spec.js",
|
"spec": "cypress/integration/rendering/flowchart.spec.js",
|
||||||
"duration": 32525
|
"duration": 32049
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/gantt.spec.js",
|
"spec": "cypress/integration/rendering/gantt.spec.js",
|
||||||
"duration": 20915
|
"duration": 20248
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/gitGraph.spec.js",
|
"spec": "cypress/integration/rendering/gitGraph.spec.js",
|
||||||
"duration": 53556
|
"duration": 51202
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/iconShape.spec.ts",
|
"spec": "cypress/integration/rendering/iconShape.spec.ts",
|
||||||
"duration": 283038
|
"duration": 283546
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/imageShape.spec.ts",
|
"spec": "cypress/integration/rendering/imageShape.spec.ts",
|
||||||
"duration": 59434
|
"duration": 57257
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/info.spec.ts",
|
"spec": "cypress/integration/rendering/info.spec.ts",
|
||||||
"duration": 3101
|
"duration": 3352
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/journey.spec.js",
|
"spec": "cypress/integration/rendering/journey.spec.js",
|
||||||
"duration": 7099
|
"duration": 7423
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/kanban.spec.ts",
|
"spec": "cypress/integration/rendering/kanban.spec.ts",
|
||||||
"duration": 7567
|
"duration": 7804
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/katex.spec.js",
|
"spec": "cypress/integration/rendering/katex.spec.js",
|
||||||
"duration": 3817
|
"duration": 3847
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
|
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
|
||||||
"duration": 2624
|
"duration": 2637
|
||||||
},
|
|
||||||
{
|
|
||||||
"spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
|
|
||||||
"duration": 4246
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/mindmap.spec.ts",
|
"spec": "cypress/integration/rendering/mindmap.spec.ts",
|
||||||
"duration": 11967
|
"duration": 11658
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/newShapes.spec.ts",
|
"spec": "cypress/integration/rendering/newShapes.spec.ts",
|
||||||
"duration": 151914
|
"duration": 149500
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
|
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
|
||||||
"duration": 116698
|
"duration": 115427
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/packet.spec.ts",
|
"spec": "cypress/integration/rendering/packet.spec.ts",
|
||||||
"duration": 4967
|
"duration": 4801
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/pie.spec.ts",
|
"spec": "cypress/integration/rendering/pie.spec.ts",
|
||||||
"duration": 6700
|
"duration": 6786
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
|
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
|
||||||
"duration": 8963
|
"duration": 9422
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/radar.spec.js",
|
"spec": "cypress/integration/rendering/radar.spec.js",
|
||||||
"duration": 5540
|
"duration": 5652
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/requirement.spec.js",
|
"spec": "cypress/integration/rendering/requirement.spec.js",
|
||||||
"duration": 2782
|
"duration": 2787
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
|
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
|
||||||
"duration": 54797
|
"duration": 53631
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/sankey.spec.ts",
|
"spec": "cypress/integration/rendering/sankey.spec.ts",
|
||||||
"duration": 6914
|
"duration": 7075
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
|
"spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
|
||||||
"duration": 20481
|
"duration": 20446
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
|
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
|
||||||
"duration": 38490
|
"duration": 37326
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
|
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
|
||||||
"duration": 30766
|
"duration": 29208
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
|
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
|
||||||
"duration": 16705
|
"duration": 16328
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/theme.spec.js",
|
"spec": "cypress/integration/rendering/theme.spec.js",
|
||||||
"duration": 30928
|
"duration": 30541
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/timeline.spec.ts",
|
"spec": "cypress/integration/rendering/timeline.spec.ts",
|
||||||
"duration": 8424
|
"duration": 8611
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/treemap.spec.ts",
|
"spec": "cypress/integration/rendering/treemap.spec.ts",
|
||||||
"duration": 12533
|
"duration": 11878
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/xyChart.spec.js",
|
"spec": "cypress/integration/rendering/xyChart.spec.js",
|
||||||
"duration": 21197
|
"duration": 20400
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"spec": "cypress/integration/rendering/zenuml.spec.js",
|
"spec": "cypress/integration/rendering/zenuml.spec.js",
|
||||||
"duration": 3455
|
"duration": 3528
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es2020",
|
"target": "es2020",
|
||||||
"lib": ["es2020", "dom"],
|
"lib": ["es2020", "dom"],
|
||||||
"types": ["cypress", "node", "@argos-ci/cypress/support"],
|
"types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"noEmit": true
|
"noEmit": true
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -184,7 +184,6 @@
|
|||||||
}
|
}
|
||||||
Admin --> Report : generates
|
Admin --> Report : generates
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
classDiagram
|
classDiagram
|
||||||
namespace Company.Project.Module {
|
namespace Company.Project.Module {
|
||||||
@@ -241,20 +240,6 @@
|
|||||||
Bike --> Square : "Logo Shape"
|
Bike --> Square : "Logo Shape"
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<hr />
|
|
||||||
<pre class="mermaid">
|
|
||||||
classDiagram
|
|
||||||
note "This is a outer note"
|
|
||||||
note for Class1 "This is a outer note for Class1"
|
|
||||||
namespace ns {
|
|
||||||
note "This is a inner note"
|
|
||||||
note for Class1 "This is a inner note for Class1"
|
|
||||||
class Class1
|
|
||||||
class Class2
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
|
|||||||
@@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid-
|
|||||||
|
|
||||||
Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
|
Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
|
||||||
|
|
||||||
> **💡 Tip**
|
> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
|
||||||
> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone git@github.com/your-fork/mermaid
|
git clone git@github.com/your-fork/mermaid
|
||||||
|
|||||||
@@ -33,8 +33,7 @@ mindmap
|
|||||||
|
|
||||||
## Join the Development
|
## Join the Development
|
||||||
|
|
||||||
> **💡 Tip**
|
> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md).
|
||||||
> **Check out our** [**detailed contribution guide**](./contributing.md).
|
|
||||||
|
|
||||||
Where to start:
|
Where to start:
|
||||||
|
|
||||||
@@ -48,8 +47,7 @@ Where to start:
|
|||||||
|
|
||||||
## A Question Or a Suggestion?
|
## A Question Or a Suggestion?
|
||||||
|
|
||||||
> **💡 Tip**
|
> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
|
||||||
> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
|
|
||||||
|
|
||||||
If you have faced a vulnerability [report it to us](./security.md).
|
If you have faced a vulnerability [report it to us](./security.md).
|
||||||
|
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings,
|
|||||||
Mermaid basically supports two types of configuration options to be overridden by directives.
|
Mermaid basically supports two types of configuration options to be overridden by directives.
|
||||||
|
|
||||||
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
|
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
|
||||||
|
|
||||||
- theme
|
- theme
|
||||||
- fontFamily
|
- fontFamily
|
||||||
- logLevel
|
- logLevel
|
||||||
|
|||||||
@@ -1,40 +0,0 @@
|
|||||||
> **Warning**
|
|
||||||
>
|
|
||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
|
||||||
>
|
|
||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).
|
|
||||||
|
|
||||||
# Layouts
|
|
||||||
|
|
||||||
This page lists the available layout algorithms supported in Mermaid diagrams.
|
|
||||||
|
|
||||||
## Supported Layouts
|
|
||||||
|
|
||||||
- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)
|
|
||||||
- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)
|
|
||||||
- **cose-bilkent**: Cose Bilkent layout for force-directed graphs
|
|
||||||
- **dagre**: Dagre layout for layered graphs
|
|
||||||
|
|
||||||
## How to Use
|
|
||||||
|
|
||||||
You can specify the layout in your diagram's YAML config or initialization options. For example:
|
|
||||||
|
|
||||||
```mermaid-example
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
graph TD;
|
|
||||||
A-->B;
|
|
||||||
B-->C;
|
|
||||||
```
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
graph TD;
|
|
||||||
A-->B;
|
|
||||||
B-->C;
|
|
||||||
```
|
|
||||||
@@ -10,6 +10,10 @@
|
|||||||
|
|
||||||
# mermaid
|
# mermaid
|
||||||
|
|
||||||
|
## Classes
|
||||||
|
|
||||||
|
- [UnknownDiagramError](classes/UnknownDiagramError.md)
|
||||||
|
|
||||||
## Interfaces
|
## Interfaces
|
||||||
|
|
||||||
- [DetailedError](interfaces/DetailedError.md)
|
- [DetailedError](interfaces/DetailedError.md)
|
||||||
@@ -23,7 +27,6 @@
|
|||||||
- [RenderOptions](interfaces/RenderOptions.md)
|
- [RenderOptions](interfaces/RenderOptions.md)
|
||||||
- [RenderResult](interfaces/RenderResult.md)
|
- [RenderResult](interfaces/RenderResult.md)
|
||||||
- [RunOptions](interfaces/RunOptions.md)
|
- [RunOptions](interfaces/RunOptions.md)
|
||||||
- [UnknownDiagramError](interfaces/UnknownDiagramError.md)
|
|
||||||
|
|
||||||
## Type Aliases
|
## Type Aliases
|
||||||
|
|
||||||
|
|||||||
159
docs/config/setup/mermaid/classes/UnknownDiagramError.md
Normal file
159
docs/config/setup/mermaid/classes/UnknownDiagramError.md
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
> **Warning**
|
||||||
|
>
|
||||||
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||||
|
>
|
||||||
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md).
|
||||||
|
|
||||||
|
[**mermaid**](../../README.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Class: UnknownDiagramError
|
||||||
|
|
||||||
|
Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
|
||||||
|
|
||||||
|
## Extends
|
||||||
|
|
||||||
|
- `Error`
|
||||||
|
|
||||||
|
## Constructors
|
||||||
|
|
||||||
|
### new UnknownDiagramError()
|
||||||
|
|
||||||
|
> **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](UnknownDiagramError.md)
|
||||||
|
|
||||||
|
Defined in: [packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
##### message
|
||||||
|
|
||||||
|
`string`
|
||||||
|
|
||||||
|
#### Returns
|
||||||
|
|
||||||
|
[`UnknownDiagramError`](UnknownDiagramError.md)
|
||||||
|
|
||||||
|
#### Overrides
|
||||||
|
|
||||||
|
`Error.constructor`
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
### cause?
|
||||||
|
|
||||||
|
> `optional` **cause**: `unknown`
|
||||||
|
|
||||||
|
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
`Error.cause`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### message
|
||||||
|
|
||||||
|
> **message**: `string`
|
||||||
|
|
||||||
|
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
`Error.message`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### name
|
||||||
|
|
||||||
|
> **name**: `string`
|
||||||
|
|
||||||
|
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
`Error.name`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### stack?
|
||||||
|
|
||||||
|
> `optional` **stack**: `string`
|
||||||
|
|
||||||
|
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
`Error.stack`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### prepareStackTrace()?
|
||||||
|
|
||||||
|
> `static` `optional` **prepareStackTrace**: (`err`, `stackTraces`) => `any`
|
||||||
|
|
||||||
|
Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:143
|
||||||
|
|
||||||
|
Optional override for formatting stack traces
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
##### err
|
||||||
|
|
||||||
|
`Error`
|
||||||
|
|
||||||
|
##### stackTraces
|
||||||
|
|
||||||
|
`CallSite`\[]
|
||||||
|
|
||||||
|
#### Returns
|
||||||
|
|
||||||
|
`any`
|
||||||
|
|
||||||
|
#### See
|
||||||
|
|
||||||
|
<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
`Error.prepareStackTrace`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### stackTraceLimit
|
||||||
|
|
||||||
|
> `static` **stackTraceLimit**: `number`
|
||||||
|
|
||||||
|
Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
`Error.stackTraceLimit`
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
### captureStackTrace()
|
||||||
|
|
||||||
|
> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void`
|
||||||
|
|
||||||
|
Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:136
|
||||||
|
|
||||||
|
Create .stack property on a target object
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
##### targetObject
|
||||||
|
|
||||||
|
`object`
|
||||||
|
|
||||||
|
##### constructorOpt?
|
||||||
|
|
||||||
|
`Function`
|
||||||
|
|
||||||
|
#### Returns
|
||||||
|
|
||||||
|
`void`
|
||||||
|
|
||||||
|
#### Inherited from
|
||||||
|
|
||||||
|
`Error.captureStackTrace`
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: ExternalDiagramDefinition
|
# Interface: ExternalDiagramDefinition
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
|
Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me
|
|||||||
|
|
||||||
> **detector**: `DiagramDetector`
|
> **detector**: `DiagramDetector`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L98)
|
Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/me
|
|||||||
|
|
||||||
> **id**: `string`
|
> **id**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
|
Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/me
|
|||||||
|
|
||||||
> **loader**: `DiagramLoader`
|
> **loader**: `DiagramLoader`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
|
Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: LayoutData
|
# Interface: LayoutData
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L168)
|
Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
|
||||||
|
|
||||||
## Indexable
|
## Indexable
|
||||||
|
|
||||||
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.co
|
|||||||
|
|
||||||
> **config**: [`MermaidConfig`](MermaidConfig.md)
|
> **config**: [`MermaidConfig`](MermaidConfig.md)
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
|
Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.co
|
|||||||
|
|
||||||
> **edges**: `Edge`\[]
|
> **edges**: `Edge`\[]
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)
|
Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co
|
|||||||
|
|
||||||
> **nodes**: `Node`\[]
|
> **nodes**: `Node`\[]
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/types.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L169)
|
Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: LayoutLoaderDefinition
|
# Interface: LayoutLoaderDefinition
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
|
Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L21)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.co
|
|||||||
|
|
||||||
> `optional` **algorithm**: `string`
|
> `optional` **algorithm**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L27)
|
Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.co
|
|||||||
|
|
||||||
> **loader**: `LayoutLoader`
|
> **loader**: `LayoutLoader`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L26)
|
Defined in: [packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.co
|
|||||||
|
|
||||||
> **name**: `string`
|
> **name**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
|
Defined in: [packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ page.
|
|||||||
|
|
||||||
### detectType()
|
### detectType()
|
||||||
|
|
||||||
> **detectType**: (`text`, `config?`) => `string`
|
> **detectType**: (`text`, `config`?) => `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
|
Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
|
||||||
|
|
||||||
@@ -105,7 +105,7 @@ An array of objects with the id of the diagram.
|
|||||||
|
|
||||||
### ~~init()~~
|
### ~~init()~~
|
||||||
|
|
||||||
> **init**: (`config?`, `nodes?`, `callback?`) => `Promise`<`void`>
|
> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
|
Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
|
||||||
|
|
||||||
@@ -117,7 +117,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/
|
|||||||
|
|
||||||
[`MermaidConfig`](MermaidConfig.md)
|
[`MermaidConfig`](MermaidConfig.md)
|
||||||
|
|
||||||
**Deprecated**, please set configuration in [initialize](#initialize).
|
**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).
|
||||||
|
|
||||||
##### nodes?
|
##### nodes?
|
||||||
|
|
||||||
@@ -141,13 +141,13 @@ Called once for each rendered diagram's id.
|
|||||||
|
|
||||||
#### Deprecated
|
#### Deprecated
|
||||||
|
|
||||||
Use [initialize](#initialize) and [run](#run) instead.
|
Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
|
||||||
|
|
||||||
Renders the mermaid diagrams
|
Renders the mermaid diagrams
|
||||||
|
|
||||||
#### Deprecated
|
#### Deprecated
|
||||||
|
|
||||||
Use [initialize](#initialize) and [run](#run) instead.
|
Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -176,7 +176,7 @@ Configuration object for mermaid.
|
|||||||
|
|
||||||
### ~~mermaidAPI~~
|
### ~~mermaidAPI~~
|
||||||
|
|
||||||
> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }; `render`: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
|
> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
|
Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
|
||||||
|
|
||||||
@@ -184,81 +184,73 @@ Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/
|
|||||||
|
|
||||||
#### Deprecated
|
#### Deprecated
|
||||||
|
|
||||||
Use [parse](#parse) and [render](#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
|
Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### parse()
|
### parse()
|
||||||
|
|
||||||
> **parse**: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }
|
> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
|
Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
|
||||||
|
|
||||||
#### Call Signature
|
|
||||||
|
|
||||||
> (`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>
|
|
||||||
|
|
||||||
Parse the text and validate the syntax.
|
Parse the text and validate the syntax.
|
||||||
|
|
||||||
##### Parameters
|
#### Parameters
|
||||||
|
|
||||||
###### text
|
##### text
|
||||||
|
|
||||||
`string`
|
`string`
|
||||||
|
|
||||||
The mermaid diagram definition.
|
The mermaid diagram definition.
|
||||||
|
|
||||||
###### parseOptions
|
##### parseOptions
|
||||||
|
|
||||||
[`ParseOptions`](ParseOptions.md) & `object`
|
[`ParseOptions`](ParseOptions.md) & `object`
|
||||||
|
|
||||||
Options for parsing.
|
Options for parsing.
|
||||||
|
|
||||||
##### Returns
|
#### Returns
|
||||||
|
|
||||||
`Promise`<`false` | [`ParseResult`](ParseResult.md)>
|
`Promise`<`false` | [`ParseResult`](ParseResult.md)>
|
||||||
|
|
||||||
An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
|
An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
|
||||||
|
|
||||||
##### See
|
#### See
|
||||||
|
|
||||||
[ParseOptions](ParseOptions.md)
|
[ParseOptions](ParseOptions.md)
|
||||||
|
|
||||||
##### Throws
|
#### Throws
|
||||||
|
|
||||||
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
|
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
|
||||||
|
|
||||||
#### Call Signature
|
|
||||||
|
|
||||||
> (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>
|
|
||||||
|
|
||||||
Parse the text and validate the syntax.
|
Parse the text and validate the syntax.
|
||||||
|
|
||||||
##### Parameters
|
#### Parameters
|
||||||
|
|
||||||
###### text
|
##### text
|
||||||
|
|
||||||
`string`
|
`string`
|
||||||
|
|
||||||
The mermaid diagram definition.
|
The mermaid diagram definition.
|
||||||
|
|
||||||
###### parseOptions?
|
##### parseOptions?
|
||||||
|
|
||||||
[`ParseOptions`](ParseOptions.md)
|
[`ParseOptions`](ParseOptions.md)
|
||||||
|
|
||||||
Options for parsing.
|
Options for parsing.
|
||||||
|
|
||||||
##### Returns
|
#### Returns
|
||||||
|
|
||||||
`Promise`<[`ParseResult`](ParseResult.md)>
|
`Promise`<[`ParseResult`](ParseResult.md)>
|
||||||
|
|
||||||
An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
|
An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
|
||||||
|
|
||||||
##### See
|
#### See
|
||||||
|
|
||||||
[ParseOptions](ParseOptions.md)
|
[ParseOptions](ParseOptions.md)
|
||||||
|
|
||||||
##### Throws
|
#### Throws
|
||||||
|
|
||||||
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
|
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
|
||||||
|
|
||||||
@@ -340,7 +332,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
|
|||||||
|
|
||||||
### render()
|
### render()
|
||||||
|
|
||||||
> **render**: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>
|
> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
|
Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: ParseOptions
|
# Interface: ParseOptions
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
|
Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mer
|
|||||||
|
|
||||||
> `optional` **suppressErrors**: `boolean`
|
> `optional` **suppressErrors**: `boolean`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
|
Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
|
||||||
|
|
||||||
If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
|
If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
|
||||||
The `parseError` function will not be called.
|
The `parseError` function will not be called.
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: ParseResult
|
# Interface: ParseResult
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
|
Defined in: [packages/mermaid/src/types.ts:92](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L92)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mer
|
|||||||
|
|
||||||
> **config**: [`MermaidConfig`](MermaidConfig.md)
|
> **config**: [`MermaidConfig`](MermaidConfig.md)
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
|
Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
|
||||||
|
|
||||||
The config passed as YAML frontmatter or directives
|
The config passed as YAML frontmatter or directives
|
||||||
|
|
||||||
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
|
|||||||
|
|
||||||
> **diagramType**: `string`
|
> **diagramType**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
|
Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
|
||||||
|
|
||||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: RenderOptions
|
# Interface: RenderOptions
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
|
Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,4 +18,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.co
|
|||||||
|
|
||||||
> `optional` **algorithm**: `string`
|
> `optional` **algorithm**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
|
Defined in: [packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: RenderResult
|
# Interface: RenderResult
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
|
Defined in: [packages/mermaid/src/types.ts:110](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L110)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/me
|
|||||||
|
|
||||||
> `optional` **bindFunctions**: (`element`) => `void`
|
> `optional` **bindFunctions**: (`element`) => `void`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
|
Defined in: [packages/mermaid/src/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L128)
|
||||||
|
|
||||||
Bind function to be called after the svg has been inserted into the DOM.
|
Bind function to be called after the svg has been inserted into the DOM.
|
||||||
This is necessary for adding event listeners to the elements in the svg.
|
This is necessary for adding event listeners to the elements in the svg.
|
||||||
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
|
|||||||
|
|
||||||
> **diagramType**: `string`
|
> **diagramType**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
|
Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
|
||||||
|
|
||||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||||
|
|
||||||
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
|
|||||||
|
|
||||||
> **svg**: `string`
|
> **svg**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
|
Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
|
||||||
|
|
||||||
The svg code for the rendered graph.
|
The svg code for the rendered graph.
|
||||||
|
|||||||
@@ -1,65 +0,0 @@
|
|||||||
> **Warning**
|
|
||||||
>
|
|
||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
|
||||||
>
|
|
||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md).
|
|
||||||
|
|
||||||
[**mermaid**](../../README.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Interface: UnknownDiagramError
|
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
|
|
||||||
|
|
||||||
## Extends
|
|
||||||
|
|
||||||
- `Error`
|
|
||||||
|
|
||||||
## Properties
|
|
||||||
|
|
||||||
### cause?
|
|
||||||
|
|
||||||
> `optional` **cause**: `unknown`
|
|
||||||
|
|
||||||
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
|
|
||||||
|
|
||||||
#### Inherited from
|
|
||||||
|
|
||||||
`Error.cause`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### message
|
|
||||||
|
|
||||||
> **message**: `string`
|
|
||||||
|
|
||||||
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
|
|
||||||
|
|
||||||
#### Inherited from
|
|
||||||
|
|
||||||
`Error.message`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### name
|
|
||||||
|
|
||||||
> **name**: `string`
|
|
||||||
|
|
||||||
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
|
|
||||||
|
|
||||||
#### Inherited from
|
|
||||||
|
|
||||||
`Error.name`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### stack?
|
|
||||||
|
|
||||||
> `optional` **stack**: `string`
|
|
||||||
|
|
||||||
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
|
|
||||||
|
|
||||||
#### Inherited from
|
|
||||||
|
|
||||||
`Error.stack`
|
|
||||||
@@ -10,6 +10,6 @@
|
|||||||
|
|
||||||
# Type Alias: InternalHelpers
|
# Type Alias: InternalHelpers
|
||||||
|
|
||||||
> **InternalHelpers** = _typeof_ `internalHelpers`
|
> **InternalHelpers**: _typeof_ `internalHelpers`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
|
Defined in: [packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Type Alias: ParseErrorFunction()
|
# Type Alias: ParseErrorFunction()
|
||||||
|
|
||||||
> **ParseErrorFunction** = (`err`, `hash?`) => `void`
|
> **ParseErrorFunction**: (`err`, `hash`?) => `void`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
|
Defined in: [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
|
||||||
|
|
||||||
|
|||||||
@@ -10,6 +10,6 @@
|
|||||||
|
|
||||||
# Type Alias: SVG
|
# Type Alias: SVG
|
||||||
|
|
||||||
> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
|
> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
|
Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)
|
||||||
|
|||||||
@@ -10,6 +10,6 @@
|
|||||||
|
|
||||||
# Type Alias: SVGGroup
|
# Type Alias: SVGGroup
|
||||||
|
|
||||||
> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
|
> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
|
Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
|
||||||
|
|||||||
@@ -1,89 +0,0 @@
|
|||||||
> **Warning**
|
|
||||||
>
|
|
||||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
|
||||||
>
|
|
||||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).
|
|
||||||
|
|
||||||
# Tidy-tree Layout
|
|
||||||
|
|
||||||
The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- Organizes nodes in a tidy, non-overlapping tree
|
|
||||||
- Ideal for mindmaps and hierarchical data
|
|
||||||
- Automatically adjusts spacing for readability
|
|
||||||
|
|
||||||
## Example Usage
|
|
||||||
|
|
||||||
```mermaid-example
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap is a long thing))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
```
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap is a long thing))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
```
|
|
||||||
|
|
||||||
```mermaid-example
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
```
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
```
|
|
||||||
|
|
||||||
## Note
|
|
||||||
|
|
||||||
- Currently, tidy-tree is primarily supported for mindmap diagrams.
|
|
||||||
@@ -57,8 +57,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
|
|||||||
- [GitHub Writer](https://github.com/ckeditor/github-writer)
|
- [GitHub Writer](https://github.com/ckeditor/github-writer)
|
||||||
- [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
|
- [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
|
||||||
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
|
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
|
||||||
- [GNU Octave](https://octave.org/) ✅
|
|
||||||
- [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
|
|
||||||
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||||
- [MonsterWriter](https://www.monsterwriter.com/) ✅
|
- [MonsterWriter](https://www.monsterwriter.com/) ✅
|
||||||
- [Joplin](https://joplinapp.org) ✅
|
- [Joplin](https://joplinapp.org) ✅
|
||||||
@@ -274,7 +272,6 @@ Communication tools and platforms
|
|||||||
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
|
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
|
||||||
- [Reveal CK](https://github.com/jedcn/reveal-ck)
|
- [Reveal CK](https://github.com/jedcn/reveal-ck)
|
||||||
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
|
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
|
||||||
- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
|
|
||||||
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
|
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
|
||||||
|
|
||||||
<!--- cspell:ignore Blazorade HueHive --->
|
<!--- cspell:ignore Blazorade HueHive --->
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
|||||||
- **Plugins** - A plugin system for extending the functionality of Mermaid.
|
- **Plugins** - A plugin system for extending the functionality of Mermaid.
|
||||||
|
|
||||||
Official Mermaid Chart plugins:
|
Official Mermaid Chart plugins:
|
||||||
|
|
||||||
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
|
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
|
||||||
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
|
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
|
||||||
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
|
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
|
||||||
@@ -47,7 +48,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
|||||||
|
|
||||||
## Plans
|
## Plans
|
||||||
|
|
||||||
- **Free** - A free plan that includes six diagrams.
|
- **Free** - A free plan that includes three diagrams.
|
||||||
|
|
||||||
- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
|
- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
|
||||||
|
|
||||||
|
|||||||
@@ -35,11 +35,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
|
|||||||
Learn more:
|
Learn more:
|
||||||
|
|
||||||
- Visual Editor For Flowcharts
|
- Visual Editor For Flowcharts
|
||||||
|
|
||||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
||||||
|
|
||||||
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
|
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
|
||||||
|
|
||||||
- Visual Editor For Sequence diagrams
|
- Visual Editor For Sequence diagrams
|
||||||
|
|
||||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
||||||
|
|
||||||
- [Demo video](https://youtu.be/imc2u5_N6Dc)
|
- [Demo video](https://youtu.be/imc2u5_N6Dc)
|
||||||
|
|||||||
@@ -6,18 +6,6 @@
|
|||||||
|
|
||||||
# Blog
|
# Blog
|
||||||
|
|
||||||
## [The Essential Guide to Mermaid Chart Plugin for VS Code \[08/2025\]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
|
|
||||||
|
|
||||||
9/9/2025 • 5 mins
|
|
||||||
|
|
||||||
Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
|
|
||||||
|
|
||||||
## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
|
|
||||||
|
|
||||||
7/22/2025 • 8 mins
|
|
||||||
|
|
||||||
In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
|
|
||||||
|
|
||||||
## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
|
## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
|
||||||
|
|
||||||
7/15/2025 • 7 mins
|
7/15/2025 • 7 mins
|
||||||
|
|||||||
@@ -194,7 +194,7 @@ architecture-beta
|
|||||||
## Icons
|
## Icons
|
||||||
|
|
||||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||||
Users can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).
|
Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).
|
||||||
|
|
||||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||||
|
|
||||||
|
|||||||
@@ -139,6 +139,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [ ] Legend
|
- [ ] Legend
|
||||||
|
|
||||||
- [x] System Context
|
- [x] System Context
|
||||||
|
|
||||||
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] Person_Ext
|
- [x] Person_Ext
|
||||||
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||||
@@ -152,6 +153,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] System_Boundary
|
- [x] System_Boundary
|
||||||
|
|
||||||
- [x] Container diagram
|
- [x] Container diagram
|
||||||
|
|
||||||
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] ContainerDb
|
- [x] ContainerDb
|
||||||
- [x] ContainerQueue
|
- [x] ContainerQueue
|
||||||
@@ -161,6 +163,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] Container_Boundary(alias, label, ?tags, $link)
|
- [x] Container_Boundary(alias, label, ?tags, $link)
|
||||||
|
|
||||||
- [x] Component diagram
|
- [x] Component diagram
|
||||||
|
|
||||||
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] ComponentDb
|
- [x] ComponentDb
|
||||||
- [x] ComponentQueue
|
- [x] ComponentQueue
|
||||||
@@ -169,15 +172,18 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] ComponentQueue_Ext
|
- [x] ComponentQueue_Ext
|
||||||
|
|
||||||
- [x] Dynamic diagram
|
- [x] Dynamic diagram
|
||||||
|
|
||||||
- [x] RelIndex(index, from, to, label, ?tags, $link)
|
- [x] RelIndex(index, from, to, label, ?tags, $link)
|
||||||
|
|
||||||
- [x] Deployment diagram
|
- [x] Deployment diagram
|
||||||
|
|
||||||
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
||||||
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
||||||
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
||||||
|
|
||||||
- [x] Relationship Types
|
- [x] Relationship Types
|
||||||
|
|
||||||
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] BiRel (bidirectional relationship)
|
- [x] BiRel (bidirectional relationship)
|
||||||
- [x] Rel_U, Rel_Up
|
- [x] Rel_U, Rel_Up
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ title: Animal example
|
|||||||
classDiagram
|
classDiagram
|
||||||
note "From Duck till Zebra"
|
note "From Duck till Zebra"
|
||||||
Animal <|-- Duck
|
Animal <|-- Duck
|
||||||
note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
|
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
|
||||||
Animal <|-- Fish
|
Animal <|-- Fish
|
||||||
Animal <|-- Zebra
|
Animal <|-- Zebra
|
||||||
Animal : +int age
|
Animal : +int age
|
||||||
@@ -50,7 +50,7 @@ title: Animal example
|
|||||||
classDiagram
|
classDiagram
|
||||||
note "From Duck till Zebra"
|
note "From Duck till Zebra"
|
||||||
Animal <|-- Duck
|
Animal <|-- Duck
|
||||||
note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
|
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
|
||||||
Animal <|-- Fish
|
Animal <|-- Fish
|
||||||
Animal <|-- Zebra
|
Animal <|-- Zebra
|
||||||
Animal : +int age
|
Animal : +int age
|
||||||
|
|||||||
@@ -326,9 +326,7 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
|
|||||||
|
|
||||||
| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
|
| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** |
|
||||||
| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
|
| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
|
||||||
| Bang | Bang | `bang` | Bang | `bang` |
|
|
||||||
| Card | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` |
|
| Card | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` |
|
||||||
| Cloud | Cloud | `cloud` | cloud | `cloud` |
|
|
||||||
| Collate | Hourglass | `hourglass` | Represents a collate operation | `collate`, `hourglass` |
|
| Collate | Hourglass | `hourglass` | Represents a collate operation | `collate`, `hourglass` |
|
||||||
| Com Link | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
|
| Com Link | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` |
|
||||||
| Comment | Curly Brace | `brace` | Adds a comment | `brace-l`, `comment` |
|
| Comment | Curly Brace | `brace` | Adds a comment | `brace-l`, `comment` |
|
||||||
|
|||||||
@@ -360,8 +360,7 @@ gantt
|
|||||||
weekday monday
|
weekday monday
|
||||||
```
|
```
|
||||||
|
|
||||||
> **Warning**
|
> **Warning** > `millisecond` and `second` support was added in v10.3.0
|
||||||
> `millisecond` and `second` support was added in v10.3.0
|
|
||||||
|
|
||||||
## Output in compact mode
|
## Output in compact mode
|
||||||
|
|
||||||
|
|||||||
@@ -314,22 +314,3 @@ You can also refer the [implementation in the live editor](https://github.com/me
|
|||||||
cspell:locale en,en-gb
|
cspell:locale en,en-gb
|
||||||
cspell:ignore Buzan
|
cspell:ignore Buzan
|
||||||
--->
|
--->
|
||||||
|
|
||||||
## Layouts
|
|
||||||
|
|
||||||
Mermaid also supports a Tidy Tree layout for mindmaps.
|
|
||||||
|
|
||||||
```
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap is a long thing))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
C
|
|
||||||
D
|
|
||||||
```
|
|
||||||
|
|
||||||
Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)
|
|
||||||
|
|||||||
@@ -329,11 +329,7 @@ Messages can be of two displayed either solid or with a dotted line.
|
|||||||
[Actor][Arrow][Actor]:Message text
|
[Actor][Arrow][Actor]:Message text
|
||||||
```
|
```
|
||||||
|
|
||||||
Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.
|
There are ten types of arrows currently supported:
|
||||||
|
|
||||||
#### Supported Arrow Types
|
|
||||||
|
|
||||||
**Standard Arrow Types**
|
|
||||||
|
|
||||||
| Type | Description |
|
| Type | Description |
|
||||||
| -------- | ---------------------------------------------------- |
|
| -------- | ---------------------------------------------------- |
|
||||||
@@ -348,58 +344,6 @@ Lines can be solid or dotted, and can end with various types of arrowheads, cros
|
|||||||
| `-)` | Solid line with an open arrow at the end (async) |
|
| `-)` | Solid line with an open arrow at the end (async) |
|
||||||
| `--)` | Dotted line with a open arrow at the end (async) |
|
| `--)` | Dotted line with a open arrow at the end (async) |
|
||||||
|
|
||||||
**Half-Arrows (v\<MERMAID_RELEASE_VERSION>+)**
|
|
||||||
|
|
||||||
The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
| Type | Description |
|
|
||||||
| ------- | ---------------------------------------------------- |
|
|
||||||
| `-\|\` | Solid line with top half arrowhead |
|
|
||||||
| `--\|\` | Dotted line with top half arrowhead |
|
|
||||||
| `-\|/` | Solid line with bottom half arrowhead |
|
|
||||||
| `--\|/` | Dotted line with bottom half arrowhead |
|
|
||||||
| `/\|-` | Solid line with reverse top half arrowhead |
|
|
||||||
| `/\|--` | Dotted line with reverse top half arrowhead |
|
|
||||||
| `\\-` | Solid line with reverse bottom half arrowhead |
|
|
||||||
| `\\--` | Dotted line with reverse bottom half arrowhead |
|
|
||||||
| `-\\` | Solid line with top stick half arrowhead |
|
|
||||||
| `--\\` | Dotted line with top stick half arrowhead |
|
|
||||||
| `-//` | Solid line with bottom stick half arrowhead |
|
|
||||||
| `--//` | Dotted line with bottom stick half arrowhead |
|
|
||||||
| `//-` | Solid line with reverse top stick half arrowhead |
|
|
||||||
| `//--` | Dotted line with reverse top stick half arrowhead |
|
|
||||||
| `\\-` | Solid line with reverse bottom stick half arrowhead |
|
|
||||||
| `\\--` | Dotted line with reverse bottom stick half arrowhead |
|
|
||||||
|
|
||||||
## Central Connections (v\<MERMAID_RELEASE_VERSION>+)
|
|
||||||
|
|
||||||
Mermaid sequence diagrams support **central lifeline connections** using a `()`.
|
|
||||||
This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.
|
|
||||||
|
|
||||||
To indicate a central connection, append `()` to the arrow syntax.
|
|
||||||
|
|
||||||
#### Basic Syntax
|
|
||||||
|
|
||||||
```mermaid-example
|
|
||||||
sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant John
|
|
||||||
Alice->>()John: Hello John
|
|
||||||
Alice()->>John: How are you?
|
|
||||||
John()->>()Alice: Great!
|
|
||||||
```
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
sequenceDiagram
|
|
||||||
participant Alice
|
|
||||||
participant John
|
|
||||||
Alice->>()John: Hello John
|
|
||||||
Alice()->>John: How are you?
|
|
||||||
John()->>()Alice: Great!
|
|
||||||
```
|
|
||||||
|
|
||||||
## Activations
|
## Activations
|
||||||
|
|
||||||
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
|
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
|
||||||
|
|||||||
@@ -38,5 +38,3 @@ Each user journey is split into sections, these describe the part of the task
|
|||||||
the user is trying to complete.
|
the user is trying to complete.
|
||||||
|
|
||||||
Tasks syntax is `Task name: <score>: <comma separated list of actors>`
|
Tasks syntax is `Task name: <score>: <comma separated list of actors>`
|
||||||
|
|
||||||
Score is a number between 1 and 5, inclusive.
|
|
||||||
|
|||||||
@@ -138,7 +138,7 @@ xychart
|
|||||||
|
|
||||||
## Chart Theme Variables
|
## Chart Theme Variables
|
||||||
|
|
||||||
Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:
|
Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
---
|
---
|
||||||
@@ -163,52 +163,6 @@ config:
|
|||||||
| yAxisLineColor | Color of the y-axis line |
|
| yAxisLineColor | Color of the y-axis line |
|
||||||
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
|
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
|
||||||
|
|
||||||
### Setting Colors for Lines and Bars
|
|
||||||
|
|
||||||
To set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).
|
|
||||||
|
|
||||||
```mermaid-example
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
themeVariables:
|
|
||||||
xyChart:
|
|
||||||
plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
|
|
||||||
---
|
|
||||||
xychart
|
|
||||||
title "Different Colors in xyChart"
|
|
||||||
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
|
|
||||||
y-axis "valuesY" 0 --> 50
|
|
||||||
%% Black line
|
|
||||||
line [10,20,30,40]
|
|
||||||
%% Blue bar
|
|
||||||
bar [20,30,25,35]
|
|
||||||
%% Green bar
|
|
||||||
bar [15,25,20,30]
|
|
||||||
%% Red line
|
|
||||||
line [5,15,25,35]
|
|
||||||
```
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
themeVariables:
|
|
||||||
xyChart:
|
|
||||||
plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
|
|
||||||
---
|
|
||||||
xychart
|
|
||||||
title "Different Colors in xyChart"
|
|
||||||
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
|
|
||||||
y-axis "valuesY" 0 --> 50
|
|
||||||
%% Black line
|
|
||||||
line [10,20,30,40]
|
|
||||||
%% Blue bar
|
|
||||||
bar [20,30,25,35]
|
|
||||||
%% Green bar
|
|
||||||
bar [15,25,20,30]
|
|
||||||
%% Red line
|
|
||||||
line [5,15,25,35]
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example on config and theme
|
## Example on config and theme
|
||||||
|
|
||||||
```mermaid-example
|
```mermaid-example
|
||||||
|
|||||||
@@ -17,7 +17,6 @@ export default tseslint.config(
|
|||||||
...tseslint.configs.stylisticTypeChecked,
|
...tseslint.configs.stylisticTypeChecked,
|
||||||
{
|
{
|
||||||
ignores: [
|
ignores: [
|
||||||
'**/*.d.ts',
|
|
||||||
'**/dist/',
|
'**/dist/',
|
||||||
'**/node_modules/',
|
'**/node_modules/',
|
||||||
'.git/',
|
'.git/',
|
||||||
|
|||||||
56
package.json
56
package.json
@@ -63,36 +63,36 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@applitools/eyes-cypress": "^3.55.4",
|
"@applitools/eyes-cypress": "^3.44.9",
|
||||||
"@argos-ci/cypress": "^6.1.5",
|
"@argos-ci/cypress": "^5.0.2",
|
||||||
"@changesets/changelog-github": "^0.5.1",
|
"@changesets/changelog-github": "^0.5.1",
|
||||||
"@changesets/cli": "^2.29.7",
|
"@changesets/cli": "^2.27.12",
|
||||||
"@cspell/eslint-plugin": "^8.19.4",
|
"@cspell/eslint-plugin": "^8.19.4",
|
||||||
"@cypress/code-coverage": "^3.14.7",
|
"@cypress/code-coverage": "^3.12.49",
|
||||||
"@eslint/js": "^9.26.0",
|
"@eslint/js": "^9.26.0",
|
||||||
"@rollup/plugin-typescript": "^12.1.4",
|
"@rollup/plugin-typescript": "^12.1.2",
|
||||||
"@types/cors": "^2.8.19",
|
"@types/cors": "^2.8.17",
|
||||||
"@types/express": "^5.0.5",
|
"@types/express": "^5.0.0",
|
||||||
"@types/js-yaml": "^4.0.9",
|
"@types/js-yaml": "^4.0.9",
|
||||||
"@types/jsdom": "^21.1.7",
|
"@types/jsdom": "^21.1.7",
|
||||||
"@types/lodash": "^4.17.20",
|
"@types/lodash": "^4.17.15",
|
||||||
"@types/mdast": "^4.0.4",
|
"@types/mdast": "^4.0.4",
|
||||||
"@types/node": "^22.18.13",
|
"@types/node": "^22.13.5",
|
||||||
"@types/rollup-plugin-visualizer": "^5.0.3",
|
"@types/rollup-plugin-visualizer": "^5.0.3",
|
||||||
"@vitest/coverage-v8": "^3.2.4",
|
"@vitest/coverage-v8": "^3.0.6",
|
||||||
"@vitest/spy": "^3.2.4",
|
"@vitest/spy": "^3.0.6",
|
||||||
"@vitest/ui": "^3.2.4",
|
"@vitest/ui": "^3.0.6",
|
||||||
"ajv": "^8.17.1",
|
"ajv": "^8.17.1",
|
||||||
"chokidar": "3.6.0",
|
"chokidar": "3.6.0",
|
||||||
"concurrently": "^9.2.1",
|
"concurrently": "^9.1.2",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"cpy-cli": "^5.0.0",
|
"cpy-cli": "^5.0.0",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"cspell": "^9.2.2",
|
"cspell": "^9.1.3",
|
||||||
"cypress": "^14.5.4",
|
"cypress": "^14.5.1",
|
||||||
"cypress-image-snapshot": "^4.0.1",
|
"cypress-image-snapshot": "^4.0.1",
|
||||||
"cypress-split": "^1.24.25",
|
"cypress-split": "^1.24.14",
|
||||||
"esbuild": "^0.25.12",
|
"esbuild": "^0.25.0",
|
||||||
"eslint": "^9.26.0",
|
"eslint": "^9.26.0",
|
||||||
"eslint-config-prettier": "^10.1.8",
|
"eslint-config-prettier": "^10.1.8",
|
||||||
"eslint-plugin-cypress": "^4.3.0",
|
"eslint-plugin-cypress": "^4.3.0",
|
||||||
@@ -106,30 +106,30 @@
|
|||||||
"eslint-plugin-tsdoc": "^0.4.0",
|
"eslint-plugin-tsdoc": "^0.4.0",
|
||||||
"eslint-plugin-unicorn": "^59.0.1",
|
"eslint-plugin-unicorn": "^59.0.1",
|
||||||
"express": "^5.1.0",
|
"express": "^5.1.0",
|
||||||
"globals": "^16.4.0",
|
"globals": "^16.0.0",
|
||||||
"globby": "^14.1.0",
|
"globby": "^14.0.2",
|
||||||
"husky": "^9.1.7",
|
"husky": "^9.1.7",
|
||||||
"jest": "^30.1.3",
|
"jest": "^30.0.4",
|
||||||
"jison": "^0.4.18",
|
"jison": "^0.4.18",
|
||||||
"js-yaml": "^4.1.0",
|
"js-yaml": "^4.1.0",
|
||||||
"jsdom": "^26.1.0",
|
"jsdom": "^26.1.0",
|
||||||
"langium-cli": "3.3.0",
|
"langium-cli": "3.3.0",
|
||||||
"lint-staged": "^16.1.6",
|
"lint-staged": "^16.1.2",
|
||||||
"markdown-table": "^3.0.4",
|
"markdown-table": "^3.0.4",
|
||||||
"nyc": "^17.1.0",
|
"nyc": "^17.1.0",
|
||||||
"path-browserify": "^1.0.1",
|
"path-browserify": "^1.0.1",
|
||||||
"prettier": "^3.6.2",
|
"prettier": "^3.5.2",
|
||||||
"prettier-plugin-jsdoc": "^1.3.3",
|
"prettier-plugin-jsdoc": "^1.3.2",
|
||||||
"rimraf": "^6.0.1",
|
"rimraf": "^6.0.1",
|
||||||
"rollup-plugin-visualizer": "^6.0.5",
|
"rollup-plugin-visualizer": "^6.0.3",
|
||||||
"start-server-and-test": "^2.1.2",
|
"start-server-and-test": "^2.0.10",
|
||||||
"tslib": "^2.8.1",
|
"tslib": "^2.8.1",
|
||||||
"tsx": "^4.20.6",
|
"tsx": "^4.7.3",
|
||||||
"typescript": "~5.7.3",
|
"typescript": "~5.7.3",
|
||||||
"typescript-eslint": "^8.38.0",
|
"typescript-eslint": "^8.38.0",
|
||||||
"vite": "^7.0.7",
|
"vite": "^7.0.3",
|
||||||
"vite-plugin-istanbul": "^7.0.0",
|
"vite-plugin-istanbul": "^7.0.0",
|
||||||
"vitest": "^3.2.4"
|
"vitest": "^3.0.6"
|
||||||
},
|
},
|
||||||
"nyc": {
|
"nyc": {
|
||||||
"report-dir": "coverage/cypress"
|
"report-dir": "coverage/cypress"
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Mermaid examples package",
|
"description": "Mermaid examples package",
|
||||||
"author": "Sidharth Vinod",
|
"author": "Sidharth Vinod",
|
||||||
"license": "MIT",
|
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"module": "./dist/mermaid-examples.core.mjs",
|
"module": "./dist/mermaid-examples.core.mjs",
|
||||||
"types": "./dist/mermaid.d.ts",
|
"types": "./dist/mermaid.d.ts",
|
||||||
|
|||||||
@@ -37,12 +37,12 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@braintree/sanitize-url": "^7.1.1",
|
"@braintree/sanitize-url": "^7.0.4",
|
||||||
"d3": "^7.9.0",
|
"d3": "^7.9.0",
|
||||||
"khroma": "^2.1.0"
|
"khroma": "^2.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"concurrently": "^9.2.1",
|
"concurrently": "^9.1.2",
|
||||||
"mermaid": "workspace:*",
|
"mermaid": "workspace:*",
|
||||||
"rimraf": "^6.0.1"
|
"rimraf": "^6.0.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,16 +1,5 @@
|
|||||||
# @mermaid-js/layout-elk
|
# @mermaid-js/layout-elk
|
||||||
|
|
||||||
## 0.2.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
|
|
||||||
- mermaid@11.11.0
|
|
||||||
|
|
||||||
## 0.1.9
|
## 0.1.9
|
||||||
|
|
||||||
### Patch Changes
|
### Patch Changes
|
||||||
|
|||||||
@@ -69,4 +69,4 @@ mermaid.registerLayoutLoaders(elkLayouts);
|
|||||||
- `elk.mrtree`: Multi-root tree layout
|
- `elk.mrtree`: Multi-root tree layout
|
||||||
- `elk.sporeOverlap`: Spore overlap layout
|
- `elk.sporeOverlap`: Spore overlap layout
|
||||||
|
|
||||||
<!-- TODO: Add images for these layouts, as GitHub doesn't support natively. -->
|
<!-- TODO: Add images for these layouts, as GitHub doesn't support natively -->
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@mermaid-js/layout-elk",
|
"name": "@mermaid-js/layout-elk",
|
||||||
"version": "0.2.0",
|
"version": "0.1.9",
|
||||||
"description": "ELK layout engine for mermaid",
|
"description": "ELK layout engine for mermaid",
|
||||||
"module": "dist/mermaid-layout-elk.core.mjs",
|
"module": "dist/mermaid-layout-elk.core.mjs",
|
||||||
"types": "dist/layouts.d.ts",
|
"types": "dist/layouts.d.ts",
|
||||||
@@ -18,9 +18,7 @@
|
|||||||
"elk",
|
"elk",
|
||||||
"mermaid"
|
"mermaid"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {},
|
||||||
"clean": "rimraf dist"
|
|
||||||
},
|
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/mermaid-js/mermaid"
|
"url": "https://github.com/mermaid-js/mermaid"
|
||||||
|
|||||||
@@ -1,67 +0,0 @@
|
|||||||
import { describe, it, expect } from 'vitest';
|
|
||||||
import {
|
|
||||||
intersection,
|
|
||||||
ensureTrulyOutside,
|
|
||||||
makeInsidePoint,
|
|
||||||
tryNodeIntersect,
|
|
||||||
replaceEndpoint,
|
|
||||||
type RectLike,
|
|
||||||
type P,
|
|
||||||
} from '../geometry.js';
|
|
||||||
|
|
||||||
const approx = (a: number, b: number, eps = 1e-6) => Math.abs(a - b) < eps;
|
|
||||||
|
|
||||||
describe('geometry helpers', () => {
|
|
||||||
it('intersection: vertical approach hits bottom border', () => {
|
|
||||||
const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
|
|
||||||
const h = rect.height / 2; // 25
|
|
||||||
const outside: P = { x: 0, y: 100 };
|
|
||||||
const inside: P = { x: 0, y: 0 };
|
|
||||||
const res = intersection(rect, outside, inside);
|
|
||||||
expect(approx(res.x, 0)).toBe(true);
|
|
||||||
expect(approx(res.y, h)).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('ensureTrulyOutside nudges near-boundary point outward', () => {
|
|
||||||
const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
|
|
||||||
// near bottom boundary (y ~ h)
|
|
||||||
const near: P = { x: 0, y: rect.height / 2 - 0.2 };
|
|
||||||
const out = ensureTrulyOutside(rect, near, 10);
|
|
||||||
expect(out.y).toBeGreaterThan(rect.height / 2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('makeInsidePoint keeps x for vertical and y from center', () => {
|
|
||||||
const rect: RectLike = { x: 10, y: 5, width: 100, height: 50 };
|
|
||||||
const outside: P = { x: 10, y: 40 };
|
|
||||||
const center: P = { x: 99, y: -123 }; // center y should be used
|
|
||||||
const inside = makeInsidePoint(rect, outside, center);
|
|
||||||
expect(inside.x).toBe(outside.x);
|
|
||||||
expect(inside.y).toBe(center.y);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('tryNodeIntersect returns null for wrong-side intersections', () => {
|
|
||||||
const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
|
|
||||||
const outside: P = { x: -50, y: 0 };
|
|
||||||
const node = { intersect: () => ({ x: 10, y: 0 }) } as any; // right side of center
|
|
||||||
const res = tryNodeIntersect(node, rect, outside);
|
|
||||||
expect(res).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('replaceEndpoint dedup removes end/start appropriately', () => {
|
|
||||||
const pts: P[] = [
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 1, y: 1 },
|
|
||||||
];
|
|
||||||
// remove duplicate end
|
|
||||||
replaceEndpoint(pts, 'end', { x: 1, y: 1 });
|
|
||||||
expect(pts.length).toBe(1);
|
|
||||||
|
|
||||||
const pts2: P[] = [
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 1, y: 1 },
|
|
||||||
];
|
|
||||||
// remove duplicate start
|
|
||||||
replaceEndpoint(pts2, 'start', { x: 0, y: 0 });
|
|
||||||
expect(pts2.length).toBe(1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
export interface TreeData {
|
|
||||||
parentById: Record<string, string>;
|
|
||||||
childrenById: Record<string, string[]>;
|
|
||||||
}
|
|
||||||
export declare const findCommonAncestor: (
|
|
||||||
id1: string,
|
|
||||||
id2: string,
|
|
||||||
{ parentById }: TreeData
|
|
||||||
) => string;
|
|
||||||
@@ -1,209 +0,0 @@
|
|||||||
/* Geometry utilities extracted from render.ts for reuse and testing */
|
|
||||||
|
|
||||||
export interface P {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RectLike {
|
|
||||||
x: number; // center x
|
|
||||||
y: number; // center y
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
padding?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface NodeLike {
|
|
||||||
intersect?: (p: P) => P | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const EPS = 1;
|
|
||||||
export const PUSH_OUT = 10;
|
|
||||||
|
|
||||||
export const onBorder = (bounds: RectLike, p: P, tol = 0.5): boolean => {
|
|
||||||
const halfW = bounds.width / 2;
|
|
||||||
const halfH = bounds.height / 2;
|
|
||||||
const left = bounds.x - halfW;
|
|
||||||
const right = bounds.x + halfW;
|
|
||||||
const top = bounds.y - halfH;
|
|
||||||
const bottom = bounds.y + halfH;
|
|
||||||
|
|
||||||
const onLeft = Math.abs(p.x - left) <= tol && p.y >= top - tol && p.y <= bottom + tol;
|
|
||||||
const onRight = Math.abs(p.x - right) <= tol && p.y >= top - tol && p.y <= bottom + tol;
|
|
||||||
const onTop = Math.abs(p.y - top) <= tol && p.x >= left - tol && p.x <= right + tol;
|
|
||||||
const onBottom = Math.abs(p.y - bottom) <= tol && p.x >= left - tol && p.x <= right + tol;
|
|
||||||
return onLeft || onRight || onTop || onBottom;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Compute intersection between a rectangle (center x/y, width/height) and the line
|
|
||||||
* segment from insidePoint -\> outsidePoint. Returns the point on the rectangle border.
|
|
||||||
*
|
|
||||||
* This version avoids snapping to outsidePoint when certain variables evaluate to 0
|
|
||||||
* (previously caused vertical top/bottom cases to miss the border). It only enforces
|
|
||||||
* axis-constant behavior for purely vertical/horizontal approaches.
|
|
||||||
*/
|
|
||||||
export const intersection = (node: RectLike, outsidePoint: P, insidePoint: P): P => {
|
|
||||||
const x = node.x;
|
|
||||||
const y = node.y;
|
|
||||||
|
|
||||||
const dx = Math.abs(x - insidePoint.x);
|
|
||||||
const w = node.width / 2;
|
|
||||||
let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
|
|
||||||
const h = node.height / 2;
|
|
||||||
|
|
||||||
const Q = Math.abs(outsidePoint.y - insidePoint.y);
|
|
||||||
const R = Math.abs(outsidePoint.x - insidePoint.x);
|
|
||||||
|
|
||||||
if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
|
|
||||||
// Intersection is top or bottom of rect.
|
|
||||||
const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
|
|
||||||
r = (R * q) / Q;
|
|
||||||
const res = {
|
|
||||||
x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
|
|
||||||
y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Keep axis-constant special-cases only
|
|
||||||
if (R === 0) {
|
|
||||||
res.x = outsidePoint.x;
|
|
||||||
}
|
|
||||||
if (Q === 0) {
|
|
||||||
res.y = outsidePoint.y;
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
} else {
|
|
||||||
// Intersection on sides of rect
|
|
||||||
if (insidePoint.x < outsidePoint.x) {
|
|
||||||
r = outsidePoint.x - w - x;
|
|
||||||
} else {
|
|
||||||
r = x - w - outsidePoint.x;
|
|
||||||
}
|
|
||||||
const q = (Q * r) / R;
|
|
||||||
let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
|
|
||||||
let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
|
|
||||||
|
|
||||||
// Only handle axis-constant cases
|
|
||||||
if (R === 0) {
|
|
||||||
_x = outsidePoint.x;
|
|
||||||
}
|
|
||||||
if (Q === 0) {
|
|
||||||
_y = outsidePoint.y;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { x: _x, y: _y };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const outsideNode = (node: RectLike, point: P): boolean => {
|
|
||||||
const x = node.x;
|
|
||||||
const y = node.y;
|
|
||||||
const dx = Math.abs(point.x - x);
|
|
||||||
const dy = Math.abs(point.y - y);
|
|
||||||
const w = node.width / 2;
|
|
||||||
const h = node.height / 2;
|
|
||||||
return dx >= w || dy >= h;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ensureTrulyOutside = (bounds: RectLike, p: P, push = PUSH_OUT): P => {
|
|
||||||
const dx = Math.abs(p.x - bounds.x);
|
|
||||||
const dy = Math.abs(p.y - bounds.y);
|
|
||||||
const w = bounds.width / 2;
|
|
||||||
const h = bounds.height / 2;
|
|
||||||
if (Math.abs(dx - w) < EPS || Math.abs(dy - h) < EPS) {
|
|
||||||
const dirX = p.x - bounds.x;
|
|
||||||
const dirY = p.y - bounds.y;
|
|
||||||
const len = Math.sqrt(dirX * dirX + dirY * dirY);
|
|
||||||
if (len > 0) {
|
|
||||||
return {
|
|
||||||
x: bounds.x + (dirX / len) * (len + push),
|
|
||||||
y: bounds.y + (dirY / len) * (len + push),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const makeInsidePoint = (bounds: RectLike, outside: P, center: P): P => {
|
|
||||||
const isVertical = Math.abs(outside.x - bounds.x) < EPS;
|
|
||||||
const isHorizontal = Math.abs(outside.y - bounds.y) < EPS;
|
|
||||||
return {
|
|
||||||
x: isVertical
|
|
||||||
? outside.x
|
|
||||||
: outside.x < bounds.x
|
|
||||||
? bounds.x - bounds.width / 4
|
|
||||||
: bounds.x + bounds.width / 4,
|
|
||||||
y: isHorizontal ? outside.y : center.y,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const tryNodeIntersect = (node: NodeLike, bounds: RectLike, outside: P): P | null => {
|
|
||||||
if (!node?.intersect) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const res = node.intersect(outside);
|
|
||||||
if (!res) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const wrongSide =
|
|
||||||
(outside.x < bounds.x && res.x > bounds.x) || (outside.x > bounds.x && res.x < bounds.x);
|
|
||||||
if (wrongSide) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const dist = Math.hypot(outside.x - res.x, outside.y - res.y);
|
|
||||||
if (dist <= EPS) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const fallbackIntersection = (bounds: RectLike, outside: P, center: P): P => {
|
|
||||||
const inside = makeInsidePoint(bounds, outside, center);
|
|
||||||
return intersection(bounds, outside, inside);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const computeNodeIntersection = (
|
|
||||||
node: NodeLike,
|
|
||||||
bounds: RectLike,
|
|
||||||
outside: P,
|
|
||||||
center: P
|
|
||||||
): P => {
|
|
||||||
const outside2 = ensureTrulyOutside(bounds, outside);
|
|
||||||
return tryNodeIntersect(node, bounds, outside2) ?? fallbackIntersection(bounds, outside2, center);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const replaceEndpoint = (
|
|
||||||
points: P[],
|
|
||||||
which: 'start' | 'end',
|
|
||||||
value: P | null | undefined,
|
|
||||||
tol = 0.1
|
|
||||||
) => {
|
|
||||||
if (!value || points.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (which === 'start') {
|
|
||||||
if (
|
|
||||||
points.length > 0 &&
|
|
||||||
Math.abs(points[0].x - value.x) < tol &&
|
|
||||||
Math.abs(points[0].y - value.y) < tol
|
|
||||||
) {
|
|
||||||
// duplicate start remove it
|
|
||||||
points.shift();
|
|
||||||
} else {
|
|
||||||
points[0] = value;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const last = points.length - 1;
|
|
||||||
if (
|
|
||||||
points.length > 0 &&
|
|
||||||
Math.abs(points[last].x - value.x) < tol &&
|
|
||||||
Math.abs(points[last].y - value.y) < tol
|
|
||||||
) {
|
|
||||||
// duplicate end remove it
|
|
||||||
points.pop();
|
|
||||||
} else {
|
|
||||||
points[last] = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -5,6 +5,6 @@
|
|||||||
"outDir": "./dist",
|
"outDir": "./dist",
|
||||||
"types": ["vitest/importMeta", "vitest/globals"]
|
"types": ["vitest/importMeta", "vitest/globals"]
|
||||||
},
|
},
|
||||||
"include": ["./src/**/*.ts", "./src/**/*.d.ts"],
|
"include": ["./src/**/*.ts"],
|
||||||
"typeRoots": ["./src/types"]
|
"typeRoots": ["./src/types"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +0,0 @@
|
|||||||
# @mermaid-js/layout-tidy-tree
|
|
||||||
|
|
||||||
## 0.2.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
|
|
||||||
- mermaid@11.11.0
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
# @mermaid-js/layout-tidy-tree
|
|
||||||
|
|
||||||
This package provides a bidirectional tidy tree layout engine for Mermaid based on the non-layered-tidy-tree-layout algorithm.
|
|
||||||
|
|
||||||
> [!NOTE]
|
|
||||||
> The Tidy Tree Layout engine will not be available in all providers that support mermaid by default.
|
|
||||||
> The websites will have to install the @mermaid-js/layout-tidy-tree package to use the Tidy Tree layout engine.
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```
|
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: tidy-tree
|
|
||||||
---
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
A
|
|
||||||
B
|
|
||||||
```
|
|
||||||
|
|
||||||
### With bundlers
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install @mermaid-js/layout-tidy-tree
|
|
||||||
```
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import mermaid from 'mermaid';
|
|
||||||
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
|
|
||||||
|
|
||||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
|
||||||
```
|
|
||||||
|
|
||||||
### With CDN
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script type="module">
|
|
||||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
|
||||||
import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
|
|
||||||
|
|
||||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Tidy Tree Layout Overview
|
|
||||||
|
|
||||||
tidy-tree: The bidirectional tidy tree layout
|
|
||||||
|
|
||||||
The bidirectional tidy tree layout algorithm creates two separate trees that grow horizontally in opposite directions from a central root node:
|
|
||||||
Left tree: grows horizontally to the left (children alternate: 1st, 3rd, 5th...)
|
|
||||||
Right tree: grows horizontally to the right (children alternate: 2nd, 4th, 6th...)
|
|
||||||
|
|
||||||
This creates a balanced, symmetric layout that is ideal for mindmaps, organizational charts, and other tree-based diagrams.
|
|
||||||
|
|
||||||
Layout Structure:
|
|
||||||
[Child 3] ← [Child 1] ← [Root] → [Child 2] → [Child 4]
|
|
||||||
↓ ↓ ↓ ↓
|
|
||||||
[GrandChild] [GrandChild] [GrandChild] [GrandChild]
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@mermaid-js/layout-tidy-tree",
|
|
||||||
"version": "0.2.0",
|
|
||||||
"description": "Tidy-tree layout engine for mermaid",
|
|
||||||
"module": "dist/mermaid-layout-tidy-tree.core.mjs",
|
|
||||||
"types": "dist/layouts.d.ts",
|
|
||||||
"type": "module",
|
|
||||||
"exports": {
|
|
||||||
".": {
|
|
||||||
"import": "./dist/mermaid-layout-tidy-tree.core.mjs",
|
|
||||||
"types": "./dist/layouts.d.ts"
|
|
||||||
},
|
|
||||||
"./": "./"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"diagram",
|
|
||||||
"markdown",
|
|
||||||
"tidy-tree",
|
|
||||||
"mermaid",
|
|
||||||
"layout"
|
|
||||||
],
|
|
||||||
"scripts": {
|
|
||||||
"clean": "rimraf dist"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/mermaid-js/mermaid"
|
|
||||||
},
|
|
||||||
"contributors": [
|
|
||||||
"Knut Sveidqvist",
|
|
||||||
"Sidharth Vinod"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"d3": "^7.9.0",
|
|
||||||
"non-layered-tidy-tree-layout": "^2.0.2"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/d3": "^7.4.3",
|
|
||||||
"mermaid": "workspace:^"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"mermaid": "^11.0.2"
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"dist"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user