Merge branch 'develop' into sidv/contributors
* develop: (237 commits) submit built docs update Font Awesome Version Clarify FontAwesome support Update version Fix classParser Check for conflict when linting jison Update class grammar test fix Class diagram grammar Skip sourcemap Bump version Update deps Fix unit tests Update vite Fix applitools cypress Update packages/mermaid/package.json chore(deps): update dependency typescript to v5 fix typedoc fix(deps): update all minor dependencies chore(deps): update pnpm to v8 chore(deps): update fregante/setup-git-user action to v2 ...
This commit is contained in:
commit
9238deaf00
|
@ -50,19 +50,11 @@ body:
|
|||
attributes:
|
||||
label: Setup
|
||||
description: |-
|
||||
Please fill out the below info.
|
||||
Note that you only need to fill out one and not both sections.
|
||||
Please fill out the info below.
|
||||
Note that you only need to fill out the relevant section
|
||||
value: |-
|
||||
**Desktop**
|
||||
|
||||
- OS and Version: [Windows, Linux, Mac, ...]
|
||||
- Mermaid version:
|
||||
- Browser and Version: [Chrome, Edge, Firefox]
|
||||
|
||||
**Smartphone**
|
||||
|
||||
- Device: [Samsung, iPhone, ...]
|
||||
- OS and Version: [Android, iOS, ...]
|
||||
- Browser and Version: [Chrome, Safari, ...]
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Additional Context
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
name: Build Vitepress docs
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
# Build job
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
cache: pnpm
|
||||
node-version: 18
|
||||
|
||||
- name: Install Packages
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Run Build
|
||||
run: pnpm --filter mermaid run docs:build:vitepress
|
|
@ -38,15 +38,8 @@ jobs:
|
|||
- name: Setup Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
cache: pnpm
|
||||
node-version: ${{ matrix.node-version }}
|
||||
|
||||
- name: Install Packages
|
||||
run: |
|
||||
pnpm install --frozen-lockfile
|
||||
env:
|
||||
CYPRESS_CACHE_FOLDER: .cache/Cypress
|
||||
|
||||
- if: ${{ env.USE_APPLI }}
|
||||
name: Notify applitools of new batch
|
||||
# Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
|
||||
|
@ -54,19 +47,22 @@ jobs:
|
|||
env:
|
||||
# e.g. mermaid-js/mermaid/my-branch
|
||||
APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
|
||||
APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
|
||||
APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
|
||||
APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
|
||||
APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
|
||||
|
||||
- name: Run E2E Tests
|
||||
run: pnpm run e2e
|
||||
- name: Cypress run
|
||||
uses: cypress-io/github-action@v4
|
||||
id: cypress
|
||||
with:
|
||||
start: pnpm run dev
|
||||
wait-on: 'http://localhost:9000'
|
||||
env:
|
||||
CYPRESS_CACHE_FOLDER: .cache/Cypress
|
||||
# Mermaid applitools.config.js uses this to pick batch name.
|
||||
APPLI_BRANCH: ${{ github.ref_name }}
|
||||
APPLITOOLS_BATCH_ID: ${{ github.sha }}
|
||||
# e.g. mermaid-js/mermaid/my-branch
|
||||
APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
|
||||
APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
|
||||
APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
|
||||
APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
|
||||
APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
|
||||
|
|
|
@ -21,11 +21,7 @@ jobs:
|
|||
|
||||
- name: Setup Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v3
|
||||
# Need to skip setup if Cypress run is skipped, otherwise an error
|
||||
# is thrown since the pnpm cache step fails
|
||||
if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
|
||||
with:
|
||||
cache: pnpm
|
||||
node-version: ${{ matrix.node-version }}
|
||||
|
||||
# Install NPM dependencies, cache them correctly
|
||||
|
|
|
@ -14,6 +14,7 @@ on:
|
|||
pull_request:
|
||||
branches:
|
||||
- master
|
||||
workflow_dispatch:
|
||||
schedule:
|
||||
# * is a special character in YAML so you have to quote this string
|
||||
- cron: '30 8 * * *'
|
||||
|
@ -35,9 +36,16 @@ jobs:
|
|||
restore-keys: cache-lychee-
|
||||
|
||||
- name: Link Checker
|
||||
uses: lycheeverse/lychee-action@v1.5.4
|
||||
uses: lycheeverse/lychee-action@v1.7.0
|
||||
with:
|
||||
args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
|
||||
args: >-
|
||||
--verbose
|
||||
--no-progress
|
||||
--cache
|
||||
--max-cache-age 1d
|
||||
packages/mermaid/src/docs/**/*.md
|
||||
README.md
|
||||
README.zh-CN.md
|
||||
fail: true
|
||||
jobSummary: true
|
||||
env:
|
||||
|
|
|
@ -5,10 +5,6 @@ on:
|
|||
push:
|
||||
branches:
|
||||
- master
|
||||
pull_request:
|
||||
|
||||
# Allows you to run this workflow manually from the Actions tab
|
||||
workflow_dispatch:
|
||||
|
||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||
permissions:
|
||||
|
@ -53,7 +49,6 @@ jobs:
|
|||
|
||||
# Deployment job
|
||||
deploy:
|
||||
if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
|
||||
environment:
|
||||
name: github-pages
|
||||
runs-on: ubuntu-latest
|
||||
|
@ -61,4 +56,4 @@ jobs:
|
|||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v1
|
||||
uses: actions/deploy-pages@v2
|
||||
|
|
|
@ -9,7 +9,7 @@ jobs:
|
|||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: fregante/setup-git-user@v1
|
||||
- uses: fregante/setup-git-user@v2
|
||||
|
||||
- uses: pnpm/action-setup@v2
|
||||
# uses version from "packageManager" field in package.json
|
||||
|
|
|
@ -33,6 +33,14 @@ jobs:
|
|||
run: |
|
||||
pnpm run ci --coverage
|
||||
|
||||
- name: Run ganttDb tests using California timezone
|
||||
env:
|
||||
# Makes sure that gantt db works even in a timezone that has daylight savings
|
||||
# since some days have 25 hours instead of 24.
|
||||
TZ: America/Los_Angeles
|
||||
run: |
|
||||
pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
|
||||
|
||||
- name: Upload Coverage to Coveralls
|
||||
# it feels a bit weird to use @master, but that's what the docs use
|
||||
# (coveralls also doesn't publish a @v1 we can use)
|
||||
|
|
|
@ -4,12 +4,7 @@
|
|||
# Network error: Forbidden
|
||||
https://codepen.io
|
||||
|
||||
# Network error: The certificate was not trusted
|
||||
https://mkdocs.org/
|
||||
https://osawards.com/javascript/#nominees
|
||||
https://osawards.com/javascript/2019
|
||||
|
||||
# Timeout error, maybe Twitter has anti-bot defences against GitHub's CI servers?
|
||||
# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
|
||||
https://twitter.com/mermaidjs_
|
||||
|
||||
# Don't check files that are generated during the build via `pnpm docs:code`
|
||||
|
|
1
.npmrc
1
.npmrc
|
@ -1,3 +1,2 @@
|
|||
auto-install-peers=true
|
||||
strict-peer-dependencies=false
|
||||
use-inline-specifiers-lockfile-format=true
|
||||
|
|
|
@ -3,6 +3,7 @@ import { resolve } from 'path';
|
|||
import { fileURLToPath } from 'url';
|
||||
import jisonPlugin from './jisonPlugin.js';
|
||||
import { readFileSync } from 'fs';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
|
||||
|
||||
|
@ -10,6 +11,7 @@ const visualize = process.argv.includes('--visualize');
|
|||
const watch = process.argv.includes('--watch');
|
||||
const mermaidOnly = process.argv.includes('--mermaid');
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
||||
const sourcemap = false;
|
||||
|
||||
type OutputOptions = Exclude<
|
||||
Exclude<InlineConfig['build'], undefined>['rollupOptions'],
|
||||
|
@ -59,9 +61,15 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||
{
|
||||
name,
|
||||
format: 'esm',
|
||||
sourcemap: true,
|
||||
sourcemap,
|
||||
entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
|
||||
},
|
||||
{
|
||||
name,
|
||||
format: 'umd',
|
||||
sourcemap,
|
||||
entryFileNames: `${name}${minify ? '.min' : ''}.js`,
|
||||
},
|
||||
];
|
||||
|
||||
if (core) {
|
||||
|
@ -78,7 +86,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||
{
|
||||
name,
|
||||
format: 'esm',
|
||||
sourcemap: true,
|
||||
sourcemap,
|
||||
entryFileNames: `${name}.core.mjs`,
|
||||
},
|
||||
];
|
||||
|
@ -102,9 +110,14 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||
},
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.jison', '.js', '.ts', '.json'],
|
||||
extensions: [],
|
||||
},
|
||||
plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
|
||||
plugins: [
|
||||
jisonPlugin(),
|
||||
// @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
|
||||
typescript({ compilerOptions: { declaration: false } }),
|
||||
...visualizerOptions(packageName, core),
|
||||
],
|
||||
};
|
||||
|
||||
if (watch && config.build) {
|
||||
|
|
|
@ -10,7 +10,7 @@ async function createServer() {
|
|||
configFile: './vite.config.ts',
|
||||
mode: 'production',
|
||||
server: { middlewareMode: true },
|
||||
appType: 'custom', // don't include Vite's default HTML handling middlewares
|
||||
appType: 'custom', // don't include Vite's default HTML handling middleware
|
||||
});
|
||||
|
||||
app.use(cors());
|
||||
|
|
|
@ -55,6 +55,8 @@ The documentation is written in **Markdown**. For more information about Markdow
|
|||
The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
|
||||
The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
|
||||
|
||||
After editing files in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory, be sure to run `pnpm install` and `pnpm run --filter mermaid docs:build` locally to build the `/docs` directory.
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
classDef default fill:#fff,color:black,stroke:black
|
||||
|
|
38
README.md
38
README.md
|
@ -226,6 +226,44 @@ pie
|
|||
|
||||
### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
|
||||
|
||||
### Bar chart (using gantt chart) [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
|
||||
|
||||
```
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
|
||||
|
||||
```
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// @ts-nocheck TODO: Fix TS
|
||||
import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
|
||||
import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
|
||||
|
||||
export const select = function () {
|
||||
return new MockedD3();
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
"brkt",
|
||||
"brolin",
|
||||
"brotli",
|
||||
"città",
|
||||
"classdef",
|
||||
"codedoc",
|
||||
"colour",
|
||||
|
@ -48,6 +49,7 @@
|
|||
"graphviz",
|
||||
"grav",
|
||||
"greywolf",
|
||||
"huynh",
|
||||
"inkdrop",
|
||||
"jaoude",
|
||||
"jgreywolf",
|
||||
|
@ -97,6 +99,7 @@
|
|||
"sidharthv",
|
||||
"sphinxcontrib",
|
||||
"statediagram",
|
||||
"steph",
|
||||
"stylis",
|
||||
"substate",
|
||||
"sveidqvist",
|
||||
|
|
|
@ -22,7 +22,7 @@ export const mermaidUrl = (graphStr, options, api) => {
|
|||
return url;
|
||||
};
|
||||
|
||||
export const imgSnapshotTest = (graphStr, _options, api = false, validation) => {
|
||||
export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => {
|
||||
cy.log(_options);
|
||||
const options = Object.assign(_options);
|
||||
if (!options.fontFamily) {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { renderGraph } from '../../helpers/util';
|
||||
import { renderGraph } from '../../helpers/util.js';
|
||||
describe('Configuration', () => {
|
||||
describe('arrowMarkerAbsolute', () => {
|
||||
it('should handle default value false of arrowMarkerAbsolute', () => {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { urlSnapshotTest } from '../../helpers/util';
|
||||
import { urlSnapshotTest } from '../../helpers/util.js';
|
||||
|
||||
describe('mermaid', () => {
|
||||
describe('registerDiagram', () => {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { urlSnapshotTest } from '../../helpers/util';
|
||||
import { urlSnapshotTest } from '../../helpers/util.js';
|
||||
|
||||
describe('CSS injections', () => {
|
||||
it('should not allow CSS injections outside of the diagram', () => {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest } from '../../helpers/util';
|
||||
import { imgSnapshotTest } from '../../helpers/util.js';
|
||||
describe('Class diagram V2', () => {
|
||||
it('0: should render a simple class diagram', () => {
|
||||
imgSnapshotTest(
|
||||
|
@ -13,7 +13,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('1: should render a simple class diagram', () => {
|
||||
|
@ -47,7 +46,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('2: should render a simple class diagrams with cardinality', () => {
|
||||
|
@ -76,7 +74,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render a simple class diagram with different visibilities', () => {
|
||||
|
@ -94,7 +91,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render multiple class diagrams', () => {
|
||||
|
@ -147,7 +143,6 @@ describe('Class diagram V2', () => {
|
|||
],
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('4: should render a simple class diagram with comments', () => {
|
||||
|
@ -177,7 +172,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('5: should render a simple class diagram with abstract method', () => {
|
||||
|
@ -189,7 +183,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('6: should render a simple class diagram with static method', () => {
|
||||
|
@ -201,7 +194,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('7: should render a simple class diagram with Generic class', () => {
|
||||
|
@ -221,7 +213,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('8: should render a simple class diagram with Generic class and relations', () => {
|
||||
|
@ -242,7 +233,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('9: should render a simple class diagram with clickable link', () => {
|
||||
|
@ -264,7 +254,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('10: should render a simple class diagram with clickable callback', () => {
|
||||
|
@ -286,7 +275,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('11: should render a simple class diagram with return type on method', () => {
|
||||
|
@ -301,7 +289,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('12: should render a simple class diagram with generic types', () => {
|
||||
|
@ -317,7 +304,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('13: should render a simple class diagram with css classes applied', () => {
|
||||
|
@ -335,7 +321,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('14: should render a simple class diagram with css classes applied directly', () => {
|
||||
|
@ -351,7 +336,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
|
||||
|
@ -365,7 +349,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('16a: should render a simple class diagram with static field', () => {
|
||||
|
@ -378,7 +361,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('16b: should handle the direction statement with TB', () => {
|
||||
|
@ -403,7 +385,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('18: should handle the direction statement with LR', () => {
|
||||
|
@ -428,7 +409,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
it('17a: should handle the direction statement with BT', () => {
|
||||
imgSnapshotTest(
|
||||
|
@ -452,7 +432,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
it('17b: should handle the direction statement with RL', () => {
|
||||
imgSnapshotTest(
|
||||
|
@ -476,7 +455,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('18: should render a simple class diagram with notes', () => {
|
||||
|
@ -493,7 +471,6 @@ describe('Class diagram V2', () => {
|
|||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('1433: should render a simple class with a title', () => {
|
||||
|
@ -503,8 +480,72 @@ title: simple class diagram
|
|||
---
|
||||
classDiagram-v2
|
||||
class Class10
|
||||
`,
|
||||
{}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a class with text label', () => {
|
||||
imgSnapshotTest(
|
||||
`classDiagram
|
||||
class C1["Class 1 with text label"]
|
||||
C1 --> C2`
|
||||
);
|
||||
});
|
||||
|
||||
it('should render two classes with text labels', () => {
|
||||
imgSnapshotTest(
|
||||
`classDiagram
|
||||
class C1["Class 1 with text label"]
|
||||
class C2["Class 2 with chars @?"]
|
||||
C1 --> C2`
|
||||
);
|
||||
});
|
||||
it('should render a class with a text label, members and annotation', () => {
|
||||
imgSnapshotTest(
|
||||
`classDiagram
|
||||
class C1["Class 1 with text label"] {
|
||||
<<interface>>
|
||||
+member1
|
||||
}
|
||||
C1 --> C2`
|
||||
);
|
||||
});
|
||||
it('should render multiple classes with same text labels', () => {
|
||||
imgSnapshotTest(
|
||||
`classDiagram
|
||||
class C1["Class with text label"]
|
||||
class C2["Class with text label"]
|
||||
class C3["Class with text label"]
|
||||
C1 --> C2
|
||||
C3 ..> C2
|
||||
`
|
||||
);
|
||||
});
|
||||
it('should render classes with different text labels', () => {
|
||||
imgSnapshotTest(
|
||||
`classDiagram
|
||||
class C1["OneWord"]
|
||||
class C2["With, Comma"]
|
||||
class C3["With (Brackets)"]
|
||||
class C4["With [Brackets]"]
|
||||
class C5["With {Brackets}"]
|
||||
class C7["With 1 number"]
|
||||
class C8["With . period..."]
|
||||
class C9["With - dash"]
|
||||
class C10["With _ underscore"]
|
||||
class C11["With ' single quote"]
|
||||
class C12["With ~!@#$%^&*()_+=-/?"]
|
||||
class C13["With Città foreign language"]
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
it('should render classLabel if class has already been defined earlier', () => {
|
||||
imgSnapshotTest(
|
||||
`classDiagram
|
||||
Animal <|-- Duck
|
||||
class Duck["Duck with text label"]
|
||||
`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe('Class diagram', () => {
|
||||
it('1: should render a simple class diagram', () => {
|
||||
|
@ -286,7 +286,7 @@ describe('Class diagram', () => {
|
|||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
|
||||
it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
classDiagram
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest } from '../../helpers/util';
|
||||
import { imgSnapshotTest } from '../../helpers/util.js';
|
||||
|
||||
describe('Current diagram', () => {
|
||||
it('should render a state with states in it', () => {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest } from '../../helpers/util';
|
||||
import { imgSnapshotTest } from '../../helpers/util.js';
|
||||
|
||||
describe('Flowchart', () => {
|
||||
it('34: testing the label width in percy', () => {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe('Entity Relationship Diagram', () => {
|
||||
it('should render a simple ER diagram', () => {
|
||||
|
@ -10,7 +10,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render an ER diagram with a recursive relationship', () => {
|
||||
|
@ -23,7 +22,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render an ER diagram with multiple relationships between the same two entities', () => {
|
||||
|
@ -35,7 +33,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render a cyclical ER diagram', () => {
|
||||
|
@ -48,7 +45,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render a not-so-simple ER diagram', () => {
|
||||
|
@ -66,7 +62,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render multiple ER diagrams', () => {
|
||||
|
@ -85,7 +80,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
],
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render an ER diagram with blank or empty labels', () => {
|
||||
|
@ -98,7 +92,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render an ER diagrams when useMaxWidth is true (default)', () => {
|
||||
|
@ -151,7 +144,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ er: { useMaxWidth: false } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities with and without attributes', () => {
|
||||
|
@ -164,7 +156,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities with generic and array attributes', () => {
|
||||
|
@ -179,7 +170,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities with length in attributes type', () => {
|
||||
|
@ -193,7 +183,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities and attributes with big and small entity names', () => {
|
||||
|
@ -209,7 +198,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities with keys', () => {
|
||||
|
@ -228,7 +216,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities with comments', () => {
|
||||
|
@ -247,7 +234,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities with keys and comments', () => {
|
||||
|
@ -267,7 +253,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities with aliases', () => {
|
||||
|
@ -285,7 +270,6 @@ describe('Entity Relationship Diagram', () => {
|
|||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('1433: should render a simple ER diagram with a title', () => {
|
||||
|
|
|
@ -0,0 +1,45 @@
|
|||
import { imgSnapshotTest } from '../../helpers/util';
|
||||
|
||||
describe('Error Diagrams', () => {
|
||||
beforeEach(() => {
|
||||
cy.on('uncaught:exception', (err) => {
|
||||
expect(err.message).to.include('Parse error');
|
||||
// return false to prevent the error from
|
||||
// failing this test
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
it('should render a simple ER diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
error
|
||||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render error diagram for actual errors', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
flowchart TD
|
||||
A[Christmas] --|Get money| B(Go shopping)
|
||||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render error for wrong ER diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
|
||||
ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
|
||||
ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
|
||||
MONGODB-CLUSTERS ||..|{
|
||||
ATLAS-TEAMS ||..|{
|
||||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
});
|
||||
});
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe.skip('Flowchart ELK', () => {
|
||||
it('1-elk: should render a simple flowchart', () => {
|
||||
|
@ -684,4 +684,149 @@ A --> B
|
|||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
describe('Markdown strings flowchart-elk (#4220)', () => {
|
||||
describe('html labels', () => {
|
||||
it('With styling and classes', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart-elk LR
|
||||
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
classDef someclass fill:#f96
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('With formatting in a node', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart-elk LR
|
||||
a{"\`The **cat** in the hat\`"} -- 1o --> b
|
||||
a -- 2o --> c
|
||||
a -- 3o --> d
|
||||
g --2i--> a
|
||||
d --1i--> a
|
||||
h --3i -->a
|
||||
b --> d(The dog in the hog)
|
||||
c --> d
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('New line in node and formatted edge label', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart-elk LR
|
||||
b("\`The dog in **the** hog.(1)
|
||||
NL\`") --"\`1o **bold**\`"--> c
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('Wrapping long text with a new line', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart-elk LR
|
||||
b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
|
||||
Word!
|
||||
|
||||
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
|
||||
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('Sub graphs and markdown strings', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart-elk LR
|
||||
subgraph "One"
|
||||
a("\`The **cat**
|
||||
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
|
||||
end
|
||||
subgraph "\`**Two**\`"
|
||||
c("\`The **cat**
|
||||
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
|
||||
end
|
||||
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('svg text labels', () => {
|
||||
it('With styling and classes', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart-elk LR
|
||||
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
classDef someclass fill:#f96
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('With formatting in a node', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart-elk LR
|
||||
a{"\`The **cat** in the hat\`"} -- 1o --> b
|
||||
a -- 2o --> c
|
||||
a -- 3o --> d
|
||||
g --2i--> a
|
||||
d --1i--> a
|
||||
h --3i -->a
|
||||
b --> d(The dog in the hog)
|
||||
c --> d
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('New line in node and formatted edge label', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart-elk LR
|
||||
b("\`The dog in **the** hog.(1)
|
||||
NL\`") --"\`1o **bold**\`"--> c
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('Wrapping long text with a new line', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart-elk LR
|
||||
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
|
||||
Word!
|
||||
|
||||
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
|
||||
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('Sub graphs and markdown strings', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart-elk LR
|
||||
subgraph "One"
|
||||
a("\`The **cat**
|
||||
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
|
||||
end
|
||||
subgraph "\`**Two**\`"
|
||||
c("\`The **cat**
|
||||
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
|
||||
end
|
||||
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe('Flowchart v2', () => {
|
||||
it('1: should render a simple flowchart', () => {
|
||||
|
@ -685,4 +685,159 @@ A ~~~ B
|
|||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('4023: Should render html labels with images and-or text correctly', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
B[<img src='https://mermaid.js.org/mermaid-logo.svg'>]
|
||||
B-->C[<img src="https://mermaid.js.org/mermaid-logo.svg"> more text <img src='https://mermaid.js.org/mermaid-logo.svg'>]
|
||||
B-->D(<img src='https://mermaid.js.org/mermaid-logo.svg'> some text)
|
||||
B-->E(plain)`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
describe('Markdown strings flowchart (#4220)', () => {
|
||||
describe('html labels', () => {
|
||||
it('With styling and classes', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart LR
|
||||
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
classDef someclass fill:#f96
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('With formatting in a node', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart LR
|
||||
a{"\`The **cat** in the hat\`"} -- 1o --> b
|
||||
a -- 2o --> c
|
||||
a -- 3o --> d
|
||||
g --2i--> a
|
||||
d --1i--> a
|
||||
h --3i -->a
|
||||
b --> d(The dog in the hog)
|
||||
c --> d
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('New line in node and formatted edge label', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart LR
|
||||
b("\`The dog in **the** hog.(1)
|
||||
NL\`") --"\`1o **bold**\`"--> c
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('Wrapping long text with a new line', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart LR
|
||||
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
|
||||
Word!
|
||||
|
||||
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
|
||||
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('Sub graphs and markdown strings', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("\`The **cat**
|
||||
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
|
||||
end
|
||||
subgraph "\`**Two**\`"
|
||||
c("\`The **cat**
|
||||
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
|
||||
end
|
||||
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('svg text labels', () => {
|
||||
it('With styling and classes', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
classDef someclass fill:#f96
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('With formatting in a node', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
a{"\`The **cat** in the hat\`"} -- 1o --> b
|
||||
a -- 2o --> c
|
||||
a -- 3o --> d
|
||||
g --2i--> a
|
||||
d --1i--> a
|
||||
h --3i -->a
|
||||
b --> d(The dog in the hog)
|
||||
c --> d
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('New line in node and formatted edge label', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
b("\`The dog in **the** hog.(1)
|
||||
NL\`") --"\`1o **bold**\`"--> c
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('Wrapping long text with a new line', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
|
||||
Word!
|
||||
|
||||
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
|
||||
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
it('Sub graphs and markdown strings', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("\`The **cat**
|
||||
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
|
||||
end
|
||||
subgraph "\`**Two**\`"
|
||||
c("\`The **cat**
|
||||
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
|
||||
end
|
||||
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe('Graph', () => {
|
||||
it('1: should render a simple flowchart no htmlLabels', () => {
|
||||
|
|
|
@ -133,6 +133,24 @@ describe('Gantt diagram', () => {
|
|||
);
|
||||
});
|
||||
|
||||
it('should default to showing today marker', () => {
|
||||
// This test only works if the environment thinks today is 1010-10-10
|
||||
imgSnapshotTest(
|
||||
`
|
||||
gantt
|
||||
title Show today marker (vertical line should be visible)
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d
|
||||
%% Should default to being on
|
||||
%% todayMarker on
|
||||
section Section1
|
||||
Yesterday: 1010-10-09, 1d
|
||||
Today: 1010-10-10, 1d
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should hide today marker', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
|
@ -142,7 +160,8 @@ describe('Gantt diagram', () => {
|
|||
axisFormat %d
|
||||
todayMarker off
|
||||
section Section1
|
||||
Today: 1, -1h
|
||||
Yesterday: 1010-10-09, 1d
|
||||
Today: 1010-10-10, 1d
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
@ -157,7 +176,8 @@ describe('Gantt diagram', () => {
|
|||
axisFormat %d
|
||||
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
||||
section Section1
|
||||
Today: 1, -1h
|
||||
Yesterday: 1010-10-09, 1d
|
||||
Today: 1010-10-10, 1d
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
@ -435,4 +455,39 @@ describe('Gantt diagram', () => {
|
|||
{ gantt: { topAxis: true } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render when compact is true', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
displayMode: compact
|
||||
---
|
||||
gantt
|
||||
title GANTT compact
|
||||
dateFormat HH:mm:ss
|
||||
axisFormat %Hh%M
|
||||
|
||||
section DB Clean
|
||||
Clean: 12:00:00, 10m
|
||||
Clean: 12:30:00, 12m
|
||||
Clean: 13:00:00, 8m
|
||||
Clean: 13:30:00, 9m
|
||||
Clean: 14:00:00, 13m
|
||||
Clean: 14:30:00, 10m
|
||||
Clean: 15:00:00, 11m
|
||||
|
||||
section Sessions
|
||||
A: 12:00:00, 63m
|
||||
B: 12:30:00, 12m
|
||||
C: 13:05:00, 12m
|
||||
D: 13:06:00, 33m
|
||||
E: 13:15:00, 55m
|
||||
F: 13:20:00, 12m
|
||||
G: 13:32:00, 18m
|
||||
H: 13:50:00, 20m
|
||||
I: 14:10:00, 10m
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -223,5 +223,18 @@ mindmap
|
|||
shouldHaveRoot
|
||||
);
|
||||
});
|
||||
describe('Markdown strings mindmaps (#4220)', () => {
|
||||
it('Formatted label with linebreak and a wrapping label and emojis', () => {
|
||||
imgSnapshotTest(
|
||||
`mindmap
|
||||
id1[\`**Start** with
|
||||
a second line 😎\`]
|
||||
id2[\`The dog in **the** hog... a *very long text* about it
|
||||
Word!\`]
|
||||
`,
|
||||
{ titleTopMargin: 0 }
|
||||
);
|
||||
});
|
||||
});
|
||||
/* The end */
|
||||
});
|
||||
|
|
|
@ -75,4 +75,15 @@ describe('Pie Chart', () => {
|
|||
expect(svg).to.not.have.attr('style');
|
||||
});
|
||||
});
|
||||
it('should render a pie diagram when textPosition is set', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
pie
|
||||
"Dogs": 50
|
||||
"Cats": 25
|
||||
`,
|
||||
{ logLevel: 1, pie: { textPosition: 0.9 } }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/// <reference types="Cypress" />
|
||||
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
context('Sequence diagram', () => {
|
||||
it('should render a sequence diagram with boxes', () => {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe('State diagram', () => {
|
||||
it('v2 should render a simple info', () => {
|
||||
|
@ -530,7 +530,7 @@ stateDiagram-v2
|
|||
[*] --> A
|
||||
A --> B: test({ foo#colon; 'far' })
|
||||
B --> [*]
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold
|
||||
class B badBadEvent
|
||||
`,
|
||||
{ logLevel: 0, fontFamily: 'courier' }
|
||||
|
@ -543,14 +543,14 @@ stateDiagram-v2
|
|||
classDef notMoving fill:white
|
||||
classDef movement font-style:italic;
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold
|
||||
|
||||
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
|
||||
|
||||
class Still notMoving
|
||||
class Moving, Crash movement
|
||||
class Crash badBadEvent
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe('State diagram', () => {
|
||||
it('should render a simple state diagrams', () => {
|
||||
|
|
|
@ -188,7 +188,7 @@ mindmap
|
|||
//import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||
// import timeline from '../../packages/mermaid-timeline/src/detector';
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
// await mermaid.registerExternalDiagrams([]);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
// TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
let code = `flowchart LR
|
||||
Power_Supply --> Transmitter_A
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
<style>
|
||||
body {
|
||||
background: rgb(221, 208, 208);
|
||||
/*background:#333;*/
|
||||
font-family: 'Arial';
|
||||
}
|
||||
h1 {
|
||||
|
@ -120,17 +119,9 @@ classE o-- classF : aggregation
|
|||
};
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'linear', htmlLabels: true },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"arial", sans-serif',
|
||||
// themeVariables: {
|
||||
// fontFamily: '"arial", sans-serif',
|
||||
// },
|
||||
curve: 'linear',
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
|
|
|
@ -11,9 +11,9 @@ example-diagram
|
|||
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
||||
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
|
||||
<script type="module">
|
||||
import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
|
||||
import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
|
||||
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
await mermaid.registerExternalDiagrams([exampleDiagram]);
|
||||
await mermaid.initialize({ logLevel: 0 });
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
|
|
|
@ -29,9 +29,9 @@
|
|||
}
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
background-color: #eee;
|
||||
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||
radial-gradient(#fff 1%, transparent 11%);
|
||||
background-color: #efefef;
|
||||
background-image: radial-gradient(#fff 51%, transparent 91%),
|
||||
radial-gradient(#fff 51%, transparent 91%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-repeat: repeat;
|
||||
|
@ -51,29 +51,103 @@
|
|||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
graph BT
|
||||
a{The cat in the hat} -- 1o --> b
|
||||
a -- 2o --> c
|
||||
a -- 3o --> d
|
||||
g --2i--> a
|
||||
d --1i--> a
|
||||
h --3i -->a
|
||||
b --> d(The dog in the hog)
|
||||
c --> d
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*] </pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart RL
|
||||
subgraph "`one`"
|
||||
a1 -- l1 --> a2
|
||||
a1 -- l2 --> a2
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart RL
|
||||
subgraph "`one`"
|
||||
a1 -- l1 --> a2
|
||||
a1 -- l2 --> a2
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart-elk TB
|
||||
a --> b
|
||||
a --> c
|
||||
b --> d
|
||||
c --> d
|
||||
flowchart
|
||||
id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
A[A text that needs to be wrapped wraps to another line]
|
||||
B[A text that needs to be<br/>wrapped wraps to another line]
|
||||
C["`A text that needs to be wrapped to another line`"]</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
C["`A text
|
||||
that needs
|
||||
to be wrapped
|
||||
in another
|
||||
way`"]
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
classDiagram-v2
|
||||
note "I love this diagram!\nDo you love it?"
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
stateDiagram-v2
|
||||
State1: The state with a note with minus - and plus + in it
|
||||
note left of State1
|
||||
Important information! You can write
|
||||
notes with . and in them.
|
||||
end note </pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
root
|
||||
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"theme": "forest"} }%%
|
||||
mindmap
|
||||
id1[**Start2**<br/>end]
|
||||
id2[**Start2**<br />end]
|
||||
%% Another comment
|
||||
id3[**Start2**<br>end] %% Comment
|
||||
id4[**Start2**<br >end<br >the very end]
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
id1["`**Start2**
|
||||
second line 😎 with long text that is wrapping to the next line`"]
|
||||
id2["`Child **with bold** text`"]
|
||||
id3["`Children of which some
|
||||
is using *italic type of* text`"]
|
||||
id4[Child]
|
||||
id5["`Child
|
||||
Row
|
||||
and another
|
||||
`"]
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
id1("`**Root**`"]
|
||||
id2["`A formatted text... with **bold** and *italics*`"]
|
||||
id3[Regular labels works as usual]
|
||||
id4["`Emojis and unicode works too: 🤓
|
||||
शान्तिः سلام 和平 `"]
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
flowchart TB
|
||||
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||
|
@ -89,7 +163,7 @@ flowchart TB
|
|||
rom --> core2
|
||||
end
|
||||
|
||||
subgraph amd[AMD Latte GPU]
|
||||
subgraph amd["`**AMD** Latte GPU`"]
|
||||
mem[Memory & I/O Bridge]
|
||||
dram[DRAM Controller]
|
||||
edram[32 MB EDRAM MEM1]
|
||||
|
@ -128,6 +202,62 @@ flowchart TB
|
|||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
|
||||
flowchart TB
|
||||
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||
subgraph ibm[IBM Espresso CPU]
|
||||
core0[IBM PowerPC Broadway Core 0]
|
||||
core1[IBM PowerPC Broadway Core 1]
|
||||
core2[IBM PowerPC Broadway Core 2]
|
||||
|
||||
rom[16 KB ROM]
|
||||
|
||||
core0 --- core2
|
||||
|
||||
rom --> core2
|
||||
end
|
||||
|
||||
subgraph amd["`**AMD** Latte GPU`"]
|
||||
mem[Memory & I/O Bridge]
|
||||
dram[DRAM Controller]
|
||||
edram[32 MB EDRAM MEM1]
|
||||
rom[512 B SEEPROM]
|
||||
|
||||
sata[SATA IF]
|
||||
exi[EXI]
|
||||
|
||||
subgraph gx[GX]
|
||||
sram[3 MB 1T-SRAM]
|
||||
end
|
||||
|
||||
radeon[AMD Radeon R7xx GX2]
|
||||
|
||||
mem --- gx
|
||||
mem --- radeon
|
||||
|
||||
rom --- mem
|
||||
|
||||
mem --- sata
|
||||
mem --- exi
|
||||
|
||||
dram --- sata
|
||||
dram --- exi
|
||||
end
|
||||
|
||||
ddr3[2 GB DDR3 RAM MEM2]
|
||||
|
||||
mem --- ddr3
|
||||
dram --- ddr3
|
||||
edram --- ddr3
|
||||
|
||||
core1 --- mem
|
||||
|
||||
exi --- rtc
|
||||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
|
||||
<br />
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart TB
|
||||
|
@ -263,21 +393,23 @@ mindmap
|
|||
|
||||
<script type="module">
|
||||
// import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
await mermaid.registerExternalDiagrams([example]);
|
||||
// import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
// await mermaid.registerExternalDiagrams([example]);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// theme: 'forest',
|
||||
startOnLoad: true,
|
||||
logLevel: 5,
|
||||
logLevel: 0,
|
||||
flowchart: {
|
||||
// defaultRenderer: 'elk',
|
||||
useMaxWidth: false,
|
||||
// htmlLabels: false,
|
||||
htmlLabels: true,
|
||||
},
|
||||
// htmlLabels: false,
|
||||
gantt: {
|
||||
useMaxWidth: false,
|
||||
},
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
<script type="module">
|
||||
// import mermaid from './mermaid.esm.mjs';
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
|
||||
// import mermaidMindmap from './mermaid-mindmap.esm.mjs';
|
||||
|
||||
// import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
|
||||
|
|
|
@ -1,246 +1,17 @@
|
|||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
background-color: #eee;
|
||||
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||
radial-gradient(#fff 1%, transparent 11%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
graph TB
|
||||
a --> b
|
||||
a --> c
|
||||
b --> d
|
||||
c --> d
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart-elk LR
|
||||
subgraph A
|
||||
a --> b
|
||||
end
|
||||
subgraph B
|
||||
b
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
flowchart TB
|
||||
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||
subgraph ibm[IBM Espresso CPU]
|
||||
core0[IBM PowerPC Broadway Core 0]
|
||||
core1[IBM PowerPC Broadway Core 1]
|
||||
core2[IBM PowerPC Broadway Core 2]
|
||||
|
||||
rom[16 KB ROM]
|
||||
|
||||
core0 --- core2
|
||||
|
||||
rom --> core2
|
||||
end
|
||||
|
||||
subgraph amd[AMD Latte GPU]
|
||||
mem[Memory & I/O Bridge]
|
||||
dram[DRAM Controller]
|
||||
edram[32 MB EDRAM MEM1]
|
||||
rom[512 B SEEPROM]
|
||||
|
||||
sata[SATA IF]
|
||||
exi[EXI]
|
||||
|
||||
subgraph gx[GX]
|
||||
sram[3 MB 1T-SRAM]
|
||||
end
|
||||
|
||||
radeon[AMD Radeon R7xx GX2]
|
||||
|
||||
mem --- gx
|
||||
mem --- radeon
|
||||
|
||||
rom --- mem
|
||||
|
||||
mem --- sata
|
||||
mem --- exi
|
||||
|
||||
dram --- sata
|
||||
dram --- exi
|
||||
end
|
||||
|
||||
ddr3[2 GB DDR3 RAM MEM2]
|
||||
|
||||
mem --- ddr3
|
||||
dram --- ddr3
|
||||
edram --- ddr3
|
||||
|
||||
core1 --- mem
|
||||
|
||||
exi --- rtc
|
||||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
<br />
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart TB
|
||||
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||
subgraph ibm[IBM Espresso CPU]
|
||||
core0[IBM PowerPC Broadway Core 0]
|
||||
core1[IBM PowerPC Broadway Core 1]
|
||||
core2[IBM PowerPC Broadway Core 2]
|
||||
|
||||
rom[16 KB ROM]
|
||||
|
||||
core0 --- core2
|
||||
|
||||
rom --> core2
|
||||
end
|
||||
|
||||
subgraph amd[AMD Latte GPU]
|
||||
mem[Memory & I/O Bridge]
|
||||
dram[DRAM Controller]
|
||||
edram[32 MB EDRAM MEM1]
|
||||
rom[512 B SEEPROM]
|
||||
|
||||
sata[SATA IF]
|
||||
exi[EXI]
|
||||
|
||||
subgraph gx[GX]
|
||||
sram[3 MB 1T-SRAM]
|
||||
end
|
||||
|
||||
radeon[AMD Radeon R7xx GX2]
|
||||
|
||||
mem --- gx
|
||||
mem --- radeon
|
||||
|
||||
rom --- mem
|
||||
|
||||
mem --- sata
|
||||
mem --- exi
|
||||
|
||||
dram --- sata
|
||||
dram --- exi
|
||||
end
|
||||
|
||||
ddr3[2 GB DDR3 RAM MEM2]
|
||||
|
||||
mem --- ddr3
|
||||
dram --- ddr3
|
||||
edram --- ddr3
|
||||
|
||||
core1 --- mem
|
||||
|
||||
exi --- rtc
|
||||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
<br />
|
||||
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
B1 --be be--x B2
|
||||
B1 --bo bo--o B3
|
||||
subgraph Ugge
|
||||
B2
|
||||
B3
|
||||
subgraph inner
|
||||
B4
|
||||
B5
|
||||
end
|
||||
subgraph inner2
|
||||
subgraph deeper
|
||||
C4
|
||||
C5
|
||||
end
|
||||
C6
|
||||
end
|
||||
|
||||
B4 --> C4
|
||||
|
||||
B3 -- X --> B4
|
||||
B2 --> inner
|
||||
|
||||
C4 --> C5
|
||||
end
|
||||
|
||||
subgraph outer
|
||||
B6
|
||||
end
|
||||
B6 --> B5
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
sequenceDiagram
|
||||
Customer->>+Stripe: Makes a payment request
|
||||
Stripe->>+Bank: Forwards the payment request to the bank
|
||||
Bank->>+Customer: Asks for authorization
|
||||
Customer->>+Bank: Provides authorization
|
||||
Bank->>+Stripe: Sends a response with payment details
|
||||
Stripe->>+Merchant: Sends a notification of payment receipt
|
||||
Merchant->>+Stripe: Confirms the payment
|
||||
Stripe->>+Customer: Sends a confirmation of payment
|
||||
Customer->>+Merchant: Receives goods or services
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
gantt
|
||||
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d
|
||||
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
||||
section Section1
|
||||
Today: 1, -1h
|
||||
</pre>
|
||||
<div id="d2"></div>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
import mermaid from '/mermaid.esm.mjs';
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
|
@ -265,6 +36,11 @@ sequenceDiagram
|
|||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
const value = `graph TD\nHello --> World`;
|
||||
const el = document.getElementById('d2');
|
||||
const { svg } = await mermaid.render('d22', value);
|
||||
console.log(svg);
|
||||
el.innerHTML = svg;
|
||||
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
|
||||
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
|
||||
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import mermaid2 from '../../packages/mermaid/src/mermaid';
|
||||
import externalExample from '../../packages/mermaid-example-diagram/src/detector';
|
||||
import mermaid2 from './mermaid.esm.mjs';
|
||||
import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
|
||||
|
||||
function b64ToUtf8(str) {
|
||||
return decodeURIComponent(escape(window.atob(str)));
|
||||
|
@ -47,7 +47,6 @@ const contentLoaded = async function () {
|
|||
await mermaid2.registerExternalDiagrams([externalExample]);
|
||||
mermaid2.initialize(graphObj.mermaid);
|
||||
await mermaid2.run();
|
||||
markRendered();
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -123,7 +122,6 @@ const contentLoadedApi = async function () {
|
|||
bindFunctions(div);
|
||||
}
|
||||
}
|
||||
markRendered();
|
||||
};
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
|
@ -135,10 +133,10 @@ if (typeof document !== 'undefined') {
|
|||
function () {
|
||||
if (this.location.href.match('xss.html')) {
|
||||
this.console.log('Using api');
|
||||
void contentLoadedApi();
|
||||
void contentLoadedApi().finally(markRendered);
|
||||
} else {
|
||||
this.console.log('Not using api');
|
||||
void contentLoaded();
|
||||
void contentLoaded().finally(markRendered);
|
||||
}
|
||||
},
|
||||
false
|
||||
|
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Error | Mermaid Quick Test Page</title>
|
||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
erDiagram
|
||||
ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
|
||||
ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
|
||||
ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
erDiagram
|
||||
ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
|
||||
ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
|
||||
ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
|
||||
MONGODB-CLUSTERS ||..|{
|
||||
ATLAS-TEAMS ||..|{
|
||||
</pre>
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
A[Christmas] --|Get money| B(Go shopping)
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -78,7 +78,7 @@
|
|||
axisFormat %d/%m
|
||||
todayMarker off
|
||||
section Section1
|
||||
Today: 1, -01:00, 5min
|
||||
Today: 1, 08-08-09-01:00, 5min
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
|
@ -89,7 +89,7 @@
|
|||
axisFormat %d/%m
|
||||
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
||||
section Section1
|
||||
Today: 1, -01:00, 5min
|
||||
Today: 1, 08-08-09-01:00, 5min
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
|
@ -166,6 +166,37 @@
|
|||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
---
|
||||
displayMode: compact
|
||||
---
|
||||
gantt
|
||||
title GANTT compact
|
||||
dateFormat HH:mm:ss
|
||||
axisFormat %Hh%M
|
||||
|
||||
section DB Clean
|
||||
Clean: 12:00:00, 10m
|
||||
Clean: 12:30:00, 12m
|
||||
Clean: 13:00:00, 8m
|
||||
Clean: 13:30:00, 9m
|
||||
Clean: 14:00:00, 13m
|
||||
Clean: 14:30:00, 10m
|
||||
Clean: 15:00:00, 11m
|
||||
|
||||
section Sessions
|
||||
A: 12:00:00, 63m
|
||||
B: 12:30:00, 12m
|
||||
C: 13:05:00, 12m
|
||||
D: 13:06:00, 33m
|
||||
E: 13:15:00, 55m
|
||||
F: 13:20:00, 12m
|
||||
G: 13:32:00, 18m
|
||||
H: 13:50:00, 20m
|
||||
I: 14:10:00, 10m
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<script>
|
||||
function ganttTestClick(a, b, c) {
|
||||
console.log('a:', a);
|
||||
|
|
|
@ -81,7 +81,6 @@
|
|||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
await mermaid.registerExternalDiagrams([mermaidMindmap]);
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
startOnLoad: true,
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
%%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
|
||||
pie
|
||||
title Key elements in Product X
|
||||
accTitle: Key elements in Product X
|
||||
|
@ -37,7 +38,7 @@
|
|||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from '../packages/mermaid';
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// themeCSS: '.node rect { fill: red; }',
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
# Tutorials
|
||||
|
||||
This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
|
||||
This is a list of publicly available Tutorials for using Mermaid.JS and is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
|
||||
|
||||
**Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
|
||||
|
||||
|
|
|
@ -16,4 +16,4 @@
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)
|
||||
[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77)
|
||||
|
|
|
@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L91)
|
||||
[mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98)
|
||||
|
||||
---
|
||||
|
||||
|
@ -51,4 +51,4 @@ The svg code for the rendered graph.
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
|
||||
[mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88)
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:2084](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2084)
|
||||
[defaultConfig.ts:2115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2115)
|
||||
|
||||
---
|
||||
|
||||
|
|
|
@ -25,13 +25,13 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)
|
||||
[mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82)
|
||||
|
||||
## Variables
|
||||
|
||||
### mermaidAPI
|
||||
|
||||
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean` | `void`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
|
||||
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
|
||||
|
||||
## mermaidAPI configuration defaults
|
||||
|
||||
|
@ -88,6 +88,7 @@ const config = {
|
|||
numberSectionStyles: 4,
|
||||
axisFormat: '%Y-%m-%d',
|
||||
topAxis: false,
|
||||
displayMode: '',
|
||||
},
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
|
@ -95,7 +96,7 @@ mermaid.initialize(config);
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:680](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L680)
|
||||
[mermaidAPI.ts:673](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L673)
|
||||
|
||||
## Functions
|
||||
|
||||
|
@ -126,7 +127,7 @@ Return the last node appended
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
|
||||
[mermaidAPI.ts:312](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L312)
|
||||
|
||||
---
|
||||
|
||||
|
@ -152,7 +153,7 @@ the cleaned up svgCode
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:259](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L259)
|
||||
[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
|
||||
|
||||
---
|
||||
|
||||
|
@ -178,7 +179,7 @@ the string with all the user styles
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L188)
|
||||
[mermaidAPI.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L192)
|
||||
|
||||
---
|
||||
|
||||
|
@ -201,7 +202,7 @@ the string with all the user styles
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:236](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L236)
|
||||
[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
|
||||
|
||||
---
|
||||
|
||||
|
@ -228,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L172)
|
||||
[mermaidAPI.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L176)
|
||||
|
||||
---
|
||||
|
||||
|
@ -248,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L152)
|
||||
[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
|
||||
|
||||
---
|
||||
|
||||
|
@ -268,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L123)
|
||||
[mermaidAPI.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L127)
|
||||
|
||||
---
|
||||
|
||||
|
@ -294,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
|
||||
[mermaidAPI.ts:291](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L291)
|
||||
|
||||
---
|
||||
|
||||
|
@ -319,4 +320,4 @@ Remove any existing elements from the given document
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
|
||||
[mermaidAPI.ts:362](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L362)
|
||||
|
|
|
@ -261,6 +261,34 @@ The theming engine will only recognize hex colors and not color names. So, the v
|
|||
| activationBkgColor | secondaryColor | Activation Background Color |
|
||||
| sequenceNumberColor | calculated from lineColor | Sequence Number Color |
|
||||
|
||||
## Pie Diagram Variables
|
||||
|
||||
| Variable | Default value | Description |
|
||||
| ------------------- | ------------------------------ | ------------------------------------------ |
|
||||
| pie1 | primaryColor | Fill for 1st section in pie diagram |
|
||||
| pie2 | secondaryColor | Fill for 2nd section in pie diagram |
|
||||
| pie3 | calculated from tertiary | Fill for 3rd section in pie diagram |
|
||||
| pie4 | calculated from primaryColor | Fill for 4th section in pie diagram |
|
||||
| pie5 | calculated from secondaryColor | Fill for 5th section in pie diagram |
|
||||
| pie6 | calculated from tertiaryColor | Fill for 6th section in pie diagram |
|
||||
| pie7 | calculated from primaryColor | Fill for 7th section in pie diagram |
|
||||
| pie8 | calculated from primaryColor | Fill for 8th section in pie diagram |
|
||||
| pie9 | calculated from primaryColor | Fill for 9th section in pie diagram |
|
||||
| pie10 | calculated from primaryColor | Fill for 10th section in pie diagram |
|
||||
| pie11 | calculated from primaryColor | Fill for 11th section in pie diagram |
|
||||
| pie12 | calculated from primaryColor | Fill for 12th section in pie diagram |
|
||||
| pieTitleTextSize | 25px | Title text size |
|
||||
| pieTitleTextColor | taskTextDarkColor | Title text color |
|
||||
| pieSectionTextSize | 17px | Text size of individual section labels |
|
||||
| pieSectionTextColor | textColor | Text color of individual section labels |
|
||||
| pieLegendTextSize | 17px | Text size of labels in diagram legend |
|
||||
| pieLegendTextColor | taskTextDarkColor | Text color of labels in diagram legend |
|
||||
| pieStrokeColor | black | Border color of individual pie sections |
|
||||
| pieStrokeWidth | 2px | Border width of individual pie sections |
|
||||
| pieOuterStrokeWidth | 2px | Border width of pie diagram's outer circle |
|
||||
| pieOuterStrokeColor | black | Border color of pie diagram's outer circle |
|
||||
| pieOpacity | 0.7 | Opacity of individual pie sections |
|
||||
|
||||
## State Colors
|
||||
|
||||
| Variable | Default value | Description |
|
||||
|
|
|
@ -247,6 +247,23 @@ The example below show an outline of how this could be used. The example just lo
|
|||
</script>
|
||||
```
|
||||
|
||||
To determine the type of diagram present in a given text, you can utilize the `mermaid.detectType` function, as demonstrated in the example below.
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
const graphDefinition = `sequenceDiagram
|
||||
Pumbaa->>Timon:I ate like a pig.
|
||||
Timon->>Pumbaa:Pumbaa, you ARE a pig.`;
|
||||
try {
|
||||
const type = mermaid.detectType(graphDefinition);
|
||||
console.log(type); // 'sequence'
|
||||
} catch (error) {
|
||||
// UnknownDiagramError
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Binding events
|
||||
|
||||
Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
|
||||
|
|
|
@ -20,12 +20,14 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||
- [Gitea](https://gitea.io) (**Native support**)
|
||||
- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
|
||||
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
|
||||
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
|
||||
- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
|
||||
- [Joplin](https://joplinapp.org) (**Native support**)
|
||||
- [Slab](https://slab.com) (**Native support**)
|
||||
- [Swimm](https://swimm.io) (**Native support**)
|
||||
- [Notion](https://notion.so) (**Native support**)
|
||||
- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
|
||||
- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**)
|
||||
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
|
||||
- [GitBook](https://gitbook.com)
|
||||
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
|
||||
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
|
||||
|
@ -88,7 +90,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||
- [FosWiki](https://foswiki.org)
|
||||
- [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
|
||||
- [DokuWiki](https://dokuwiki.org)
|
||||
- [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
|
||||
- [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
|
||||
- [ComboStrap](https://combostrap.com/mermaid)
|
||||
- [TiddlyWiki](https://tiddlywiki.com/)
|
||||
- [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
|
||||
|
@ -149,7 +151,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||
- [remark-mermaid](https://github.com/temando/remark-mermaid)
|
||||
- [jSDoc](https://jsdoc.app/)
|
||||
- [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
|
||||
- [MkDocs](https://mkdocs.org)
|
||||
- [MkDocs](https://www.mkdocs.org)
|
||||
- [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
|
||||
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
|
||||
- [Type Doc](https://typedoc.org/)
|
||||
|
@ -159,6 +161,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
|||
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
|
||||
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
|
||||
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
|
||||
- [Quarto](https://quarto.org/)
|
||||
|
||||
## Browser Extensions
|
||||
|
||||
|
|
|
@ -263,7 +263,7 @@ To Deploy Mermaid:
|
|||
|
||||
### [Mermaid API](../config/setup/README.md):
|
||||
|
||||
**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
|
||||
**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
|
@ -272,9 +272,9 @@ To Deploy Mermaid:
|
|||
</script>
|
||||
```
|
||||
|
||||
**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
|
||||
**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
|
||||
|
||||
**Examples can be found at** [Other examples](../syntax/examples.md)
|
||||
**Examples can be found in** [Other examples](../syntax/examples.md)
|
||||
|
||||
## Sibling projects
|
||||
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/announcements.md](../../packages/mermaid/src/docs/news/announcements.md).
|
||||
|
||||
# Announcements
|
||||
|
||||
## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
|
||||
|
||||
3 April 2023 · 3 mins
|
||||
|
||||
Markdown Strings reduce the hassle # Starting from v10.
|
|
@ -0,0 +1,31 @@
|
|||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/blog.md](../../packages/mermaid/src/docs/news/blog.md).
|
||||
|
||||
# Blog
|
||||
|
||||
## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
|
||||
|
||||
27 March 2023 · 2 mins
|
||||
|
||||
Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
|
||||
|
||||
## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
|
||||
|
||||
8 March 2023 · 9 mins
|
||||
|
||||
The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
|
||||
|
||||
## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
|
||||
|
||||
1 March 2023 · 12 mins
|
||||
|
||||
Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
|
||||
|
||||
## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
|
||||
|
||||
10 February 2023 · 10 mins
|
||||
|
||||
Busting the myth that developers can’t write # It’s an annoying stereotype that developers don’t know how to write, speak, and otherwise communicate.
|
Binary file not shown.
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 12 KiB |
|
@ -128,7 +128,41 @@ classDiagram
|
|||
Vehicle <|-- Car
|
||||
```
|
||||
|
||||
Naming convention: a class name should be composed only of alphanumeric characters (including unicode), and underscores.
|
||||
Naming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-).
|
||||
|
||||
### Class labels
|
||||
|
||||
In case you need to provide a label for a class, you can use the following syntax:
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class Animal["Animal with a label"]
|
||||
class Car["Car with *! symbols"]
|
||||
Animal --> Car
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Animal["Animal with a label"]
|
||||
class Car["Car with *! symbols"]
|
||||
Animal --> Car
|
||||
```
|
||||
|
||||
You can also use backticks to escape special characters in the label:
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class `Animal Class!`
|
||||
class `Car Class`
|
||||
`Animal Class!` --> `Car Class`
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class `Animal Class!`
|
||||
class `Car Class`
|
||||
`Animal Class!` --> `Car Class`
|
||||
```
|
||||
|
||||
## Defining Members of a class
|
||||
|
||||
|
@ -249,12 +283,12 @@ To describe the visibility (or encapsulation) of an attribute or method/function
|
|||
- `#` Protected
|
||||
- `~` Package/Internal
|
||||
|
||||
> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
|
||||
> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()` or after the return type:
|
||||
>
|
||||
> - `*` Abstract e.g.: `someAbstractMethod()*`
|
||||
> - `$` Static e.g.: `someStaticMethod()$`
|
||||
> - `*` Abstract e.g.: `someAbstractMethod()*` or `someAbstractMethod() int*`
|
||||
> - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$`
|
||||
|
||||
> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
|
||||
> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end:
|
||||
>
|
||||
> - `$` Static e.g.: `String someField$`
|
||||
|
||||
|
@ -570,10 +604,26 @@ You would define these actions on a separate line after all classes have been de
|
|||
|
||||
## Notes
|
||||
|
||||
It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
|
||||
It is possible to add notes on the diagram using `note "line1\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\nline2"`.
|
||||
|
||||
### Examples
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
note "This is a general note"
|
||||
note for MyClass "This is a note for a class"
|
||||
class MyClass{
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
note "This is a general note"
|
||||
note for MyClass "This is a note for a class"
|
||||
class MyClass{
|
||||
}
|
||||
```
|
||||
|
||||
_URL Link:_
|
||||
|
||||
```mermaid-example
|
||||
|
@ -692,11 +742,11 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
|||
|
||||
### Styling a node
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition:
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
|
||||
```html
|
||||
<style>
|
||||
.cssClass > rect {
|
||||
.styleClass > rect {
|
||||
fill: #ff0000;
|
||||
stroke: #ffff00;
|
||||
stroke-width: 4px;
|
||||
|
@ -706,29 +756,29 @@ It is possible to apply specific styles such as a thicker border or a different
|
|||
|
||||
Then attaching that class to a specific node:
|
||||
|
||||
cssClass "nodeId1" cssClass;
|
||||
cssClass "nodeId1" styleClass;
|
||||
|
||||
It is also possible to attach a class to a list of nodes in one statement:
|
||||
|
||||
cssClass "nodeId1,nodeId2" cssClass;
|
||||
cssClass "nodeId1,nodeId2" styleClass;
|
||||
|
||||
A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class Animal:::cssClass
|
||||
class Animal:::styleClass
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Animal:::cssClass
|
||||
class Animal:::styleClass
|
||||
```
|
||||
|
||||
Or:
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class Animal:::cssClass {
|
||||
class Animal:::styleClass {
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
|
@ -736,7 +786,7 @@ classDiagram
|
|||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Animal:::cssClass {
|
||||
class Animal:::styleClass {
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
|
|
|
@ -183,20 +183,6 @@ flowchart LR
|
|||
|
||||
### A hexagon node
|
||||
|
||||
Code:
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
id1{{This is the text in the box}}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
id1{{This is the text in the box}}
|
||||
```
|
||||
|
||||
Render:
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
id1{{This is the text in the box}}
|
||||
|
@ -724,6 +710,44 @@ flowchart LR
|
|||
B1 --> B2
|
||||
```
|
||||
|
||||
## Markdown Strings
|
||||
|
||||
The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
|
||||
end
|
||||
subgraph "`**Two**`"
|
||||
c("`The **cat**
|
||||
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
|
||||
end
|
||||
subgraph "`**Two**`"
|
||||
c("`The **cat**
|
||||
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
|
||||
end
|
||||
```
|
||||
|
||||
Formatting:
|
||||
|
||||
- For bold text, use double asterisks (`**`) before and after the text.
|
||||
- For italics, use single asterisks (`*`) before and after the text.
|
||||
- With traditional strings, you needed to add `<br>` tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a `<br>` tag.
|
||||
|
||||
This feature is applicable to node labels, edge labels, and subgraph labels.
|
||||
|
||||
## Interaction
|
||||
|
||||
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
|
@ -979,7 +1003,7 @@ flowchart TD
|
|||
B-->E(A fa:fa-camera-retro perhaps?)
|
||||
```
|
||||
|
||||
?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
|
||||
Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
|
||||
|
||||
## Graph declarations with spaces between vertices and link and without semicolon
|
||||
|
||||
|
|
|
@ -184,7 +184,7 @@ The following formatting options are supported:
|
|||
| `YY` | 14 | 2 digit year |
|
||||
| `Q` | 1..4 | Quarter of year. Sets month to first month in quarter. |
|
||||
| `M MM` | 1..12 | Month number |
|
||||
| `MMM MMMM` | January..Dec | Month name in locale set by `moment.locale()` |
|
||||
| `MMM MMMM` | January..Dec | Month name in locale set by `dayjs.locale()` |
|
||||
| `D DD` | 1..31 | Day of month |
|
||||
| `Do` | 1st..31st | Day of month with ordinal |
|
||||
| `DDD DDDD` | 1..365 | Day of year |
|
||||
|
@ -200,7 +200,7 @@ The following formatting options are supported:
|
|||
| `SSS` | 0..999 | Thousandths of a second |
|
||||
| `Z ZZ` | +12:00 | Offset from UTC as +-HH:mm, +-HHmm, or Z |
|
||||
|
||||
More info in: <https://momentjs.com/docs/#/parsing/string-format/>
|
||||
More info in: <https://day.js.org/docs/en/parse/string-format/>
|
||||
|
||||
### Output date format on the axis
|
||||
|
||||
|
@ -257,9 +257,41 @@ The pattern is:
|
|||
|
||||
More info in: <https://github.com/d3/d3-time#interval_every>
|
||||
|
||||
## Output in compact mode
|
||||
|
||||
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
displayMode: compact
|
||||
---
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :a2, 2014-01-20, 25d
|
||||
Another one :a3, 2014-02-10, 20d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
displayMode: compact
|
||||
---
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :a2, 2014-01-20, 25d
|
||||
Another one :a3, 2014-02-10, 20d
|
||||
```
|
||||
|
||||
## Comments
|
||||
|
||||
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
|
||||
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
|
@ -432,3 +464,41 @@ Beginner's tip—a full example using interactive links in an html context:
|
|||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Bar chart (using gantt chart)
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
|
|
@ -182,7 +182,7 @@ More shapes will be added, beginning with the shapes available in flowcharts.
|
|||
|
||||
## Icons
|
||||
|
||||
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and fontawesome 4 are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
|
||||
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and [Font Awesome 5](https://fontawesome.com/v5/search?o=r&m=free) are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
|
@ -224,7 +224,7 @@ mindmap
|
|||
C
|
||||
```
|
||||
|
||||
_These classes needs top be supplied by the site administrator._
|
||||
_These classes need to be supplied by the site administrator._
|
||||
|
||||
## Unclear indentation
|
||||
|
||||
|
@ -254,6 +254,34 @@ Root
|
|||
C
|
||||
```
|
||||
|
||||
## Markdown Strings
|
||||
|
||||
The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id1["`**Root** with
|
||||
a second line
|
||||
Unicode works too: 🤓`"]
|
||||
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
|
||||
id3[Regular labels still works]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id1["`**Root** with
|
||||
a second line
|
||||
Unicode works too: 🤓`"]
|
||||
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
|
||||
id3[Regular labels still works]
|
||||
```
|
||||
|
||||
Formatting:
|
||||
|
||||
- For bold text, use double asterisks \*\* before and after the text.
|
||||
- For italics, use single asterisks \* before and after the text.
|
||||
- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
|
||||
|
||||
## Integrating with your library/website.
|
||||
|
||||
Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
|
||||
|
|
|
@ -48,6 +48,7 @@ Drawing a pie chart is really simple in mermaid.
|
|||
## Example
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
|
@ -57,6 +58,7 @@ pie showData
|
|||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
|
@ -64,3 +66,11 @@ pie showData
|
|||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Possible pie diagram configuration parameters:
|
||||
|
||||
| Parameter | Description | Default value |
|
||||
| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
|
||||
| `textPosition` | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.75` |
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
|
||||
|
||||
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
|
||||
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
|
||||
|
||||
### An example of a timeline.
|
||||
|
||||
|
@ -213,7 +213,7 @@ However, if there is no section defined, then we have two possibilities:
|
|||
|
||||
```
|
||||
|
||||
Note that this is no, section defined, and each time period and its corresponding events will have its own color scheme.
|
||||
Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
|
||||
|
||||
2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
|
||||
|
||||
|
@ -257,7 +257,7 @@ let us look at same example, where we have disabled the multiColor option.
|
|||
|
||||
### Customizing Color scheme
|
||||
|
||||
You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
|
||||
You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
|
||||
In case you have more than 12 sections, the color scheme will start to repeat.
|
||||
|
||||
NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
|
||||
|
|
83
package.json
83
package.json
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"name": "mermaid-monorepo",
|
||||
"private": true,
|
||||
"version": "9.4.0",
|
||||
"version": "10.1.0",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@7.27.0",
|
||||
"packageManager": "pnpm@8.3.1",
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
|
@ -55,65 +55,66 @@
|
|||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@applitools/eyes-cypress": "^3.27.6",
|
||||
"@commitlint/cli": "^17.2.0",
|
||||
"@commitlint/config-conventional": "^17.2.0",
|
||||
"@cspell/eslint-plugin": "^6.14.2",
|
||||
"@applitools/eyes-cypress": "^3.32.0",
|
||||
"@commitlint/cli": "^17.6.1",
|
||||
"@commitlint/config-conventional": "^17.6.1",
|
||||
"@cspell/eslint-plugin": "^6.31.1",
|
||||
"@rollup/plugin-typescript": "^11.1.0",
|
||||
"@types/cors": "^2.8.13",
|
||||
"@types/eslint": "^8.4.10",
|
||||
"@types/eslint": "^8.37.0",
|
||||
"@types/express": "^4.17.17",
|
||||
"@types/js-yaml": "^4.0.5",
|
||||
"@types/jsdom": "^21.0.0",
|
||||
"@types/lodash": "^4.14.188",
|
||||
"@types/mdast": "^3.0.10",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/prettier": "^2.7.1",
|
||||
"@types/jsdom": "^21.1.1",
|
||||
"@types/lodash": "^4.14.194",
|
||||
"@types/mdast": "^3.0.11",
|
||||
"@types/node": "^18.16.0",
|
||||
"@types/prettier": "^2.7.2",
|
||||
"@types/rollup-plugin-visualizer": "^4.2.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.48.2",
|
||||
"@typescript-eslint/parser": "^5.48.2",
|
||||
"@vitest/coverage-c8": "^0.28.4",
|
||||
"@vitest/spy": "^0.28.4",
|
||||
"@vitest/ui": "^0.28.4",
|
||||
"concurrently": "^7.5.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||
"@typescript-eslint/parser": "^5.59.0",
|
||||
"@vitest/coverage-c8": "^0.30.1",
|
||||
"@vitest/spy": "^0.30.1",
|
||||
"@vitest/ui": "^0.30.1",
|
||||
"concurrently": "^8.0.1",
|
||||
"cors": "^2.8.5",
|
||||
"coveralls": "^3.1.1",
|
||||
"cypress": "^12.0.0",
|
||||
"cypress": "^12.10.0",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"esbuild": "^0.17.0",
|
||||
"eslint": "^8.32.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"esbuild": "^0.17.18",
|
||||
"eslint": "^8.39.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-cypress": "^2.13.2",
|
||||
"eslint-plugin-html": "^7.1.0",
|
||||
"eslint-plugin-jest": "^27.1.5",
|
||||
"eslint-plugin-jsdoc": "^39.6.2",
|
||||
"eslint-plugin-jest": "^27.2.1",
|
||||
"eslint-plugin-jsdoc": "^43.0.7",
|
||||
"eslint-plugin-json": "^3.1.0",
|
||||
"eslint-plugin-lodash": "^7.4.0",
|
||||
"eslint-plugin-markdown": "^3.0.0",
|
||||
"eslint-plugin-no-only-tests": "^3.1.0",
|
||||
"eslint-plugin-tsdoc": "^0.2.17",
|
||||
"eslint-plugin-unicorn": "^45.0.0",
|
||||
"eslint-plugin-unicorn": "^46.0.0",
|
||||
"express": "^4.18.2",
|
||||
"globby": "^13.1.2",
|
||||
"husky": "^8.0.2",
|
||||
"jest": "^29.3.1",
|
||||
"globby": "^13.1.4",
|
||||
"husky": "^8.0.3",
|
||||
"jest": "^29.5.0",
|
||||
"jison": "^0.4.18",
|
||||
"js-yaml": "^4.1.0",
|
||||
"jsdom": "^21.0.0",
|
||||
"lint-staged": "^13.0.3",
|
||||
"ohmyfetch": "^0.4.21",
|
||||
"jsdom": "^21.1.1",
|
||||
"lint-staged": "^13.2.1",
|
||||
"path-browserify": "^1.0.1",
|
||||
"pnpm": "^7.15.0",
|
||||
"prettier": "^2.7.1",
|
||||
"pnpm": "^8.3.1",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-jsdoc": "^0.4.2",
|
||||
"rimraf": "^4.0.0",
|
||||
"rollup-plugin-visualizer": "^5.8.3",
|
||||
"start-server-and-test": "^1.15.4",
|
||||
"rimraf": "^5.0.0",
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"start-server-and-test": "^2.0.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^4.8.4",
|
||||
"vite": "^4.1.1",
|
||||
"vitest": "^0.28.5"
|
||||
"typescript": "^5.0.4",
|
||||
"vite": "^4.3.1",
|
||||
"vitest": "^0.30.1"
|
||||
},
|
||||
"volta": {
|
||||
"node": "18.14.0"
|
||||
"node": "18.16.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -48,8 +48,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@types/cytoscape": "^3.19.9",
|
||||
"concurrently": "^7.5.0",
|
||||
"rimraf": "^4.0.0",
|
||||
"concurrently": "^8.0.0",
|
||||
"rimraf": "^5.0.0",
|
||||
"mermaid": "workspace:*"
|
||||
},
|
||||
"resolutions": {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
// @ts-ignore: TODO Fix ts errors
|
||||
import parser from './parser/exampleDiagram';
|
||||
import * as db from './exampleDiagramDb';
|
||||
import renderer from './exampleDiagramRenderer';
|
||||
import styles from './styles';
|
||||
import { injectUtils } from './mermaidUtils';
|
||||
import parser from './parser/exampleDiagram.jison';
|
||||
import * as db from './exampleDiagramDb.js';
|
||||
import renderer from './exampleDiagramRenderer.js';
|
||||
import styles from './styles.js';
|
||||
import { injectUtils } from './mermaidUtils.js';
|
||||
|
||||
export const diagram = {
|
||||
db,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { parser } from './parser/exampleDiagram';
|
||||
import * as db from './exampleDiagramDb';
|
||||
import { injectUtils } from './mermaidUtils';
|
||||
import { parser } from './parser/exampleDiagram.jison';
|
||||
import * as db from './exampleDiagramDb.js';
|
||||
import { injectUtils } from './mermaidUtils.js';
|
||||
// Todo fix utils functions for tests
|
||||
import {
|
||||
log,
|
||||
|
@ -8,7 +8,7 @@ import {
|
|||
getConfig,
|
||||
sanitizeText,
|
||||
setupGraphViewBox,
|
||||
} from '../../mermaid/src/diagram-api/diagramAPI';
|
||||
} from '../../mermaid/src/diagram-api/diagramAPI.js';
|
||||
|
||||
injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/** Created by knut on 15-01-14. */
|
||||
import { log } from './mermaidUtils';
|
||||
import { log } from './mermaidUtils.js';
|
||||
|
||||
var message = '';
|
||||
var info = false;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/** Created by knut on 14-12-11. */
|
||||
import { select } from 'd3';
|
||||
import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
|
||||
import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
|
||||
|
||||
/**
|
||||
* Draws a an info picture in the tag with id: id based on the graph definition in text.
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"module": "esnext",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mermaid",
|
||||
"version": "10.0.0",
|
||||
"version": "10.2.0-rc.2",
|
||||
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"module": "./dist/mermaid.core.mjs",
|
||||
|
@ -8,7 +8,8 @@
|
|||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/mermaid.d.ts",
|
||||
"import": "./dist/mermaid.core.mjs"
|
||||
"import": "./dist/mermaid.core.mjs",
|
||||
"default": "./dist/mermaid.core.mjs"
|
||||
},
|
||||
"./*": "./*"
|
||||
},
|
||||
|
@ -51,19 +52,20 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@braintree/sanitize-url": "^6.0.0",
|
||||
"@braintree/sanitize-url": "^6.0.2",
|
||||
"@khanacademy/simple-markdown": "^0.9.0",
|
||||
"cytoscape": "^3.23.0",
|
||||
"cytoscape-cose-bilkent": "^4.1.0",
|
||||
"cytoscape-fcose": "^2.1.0",
|
||||
"d3": "^7.4.0",
|
||||
"dagre-d3-es": "7.0.8",
|
||||
"dompurify": "2.4.3",
|
||||
"dagre-d3-es": "7.0.10",
|
||||
"dayjs": "^1.11.7",
|
||||
"dompurify": "3.0.2",
|
||||
"elkjs": "^0.8.2",
|
||||
"khroma": "^2.0.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"moment-mini": "^2.29.4",
|
||||
"non-layered-tidy-tree-layout": "^2.0.2",
|
||||
"stylis": "^4.1.2",
|
||||
"stylis": "^4.1.3",
|
||||
"ts-dedent": "^2.2.0",
|
||||
"uuid": "^9.0.0",
|
||||
"web-worker": "^1.2.0"
|
||||
|
@ -71,42 +73,46 @@
|
|||
"devDependencies": {
|
||||
"@types/cytoscape": "^3.19.9",
|
||||
"@types/d3": "^7.4.0",
|
||||
"@types/dompurify": "^2.4.0",
|
||||
"@types/jsdom": "^21.0.0",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/dompurify": "^3.0.2",
|
||||
"@types/jsdom": "^21.1.1",
|
||||
"@types/lodash-es": "^4.17.7",
|
||||
"@types/micromatch": "^4.0.2",
|
||||
"@types/prettier": "^2.7.1",
|
||||
"@types/prettier": "^2.7.2",
|
||||
"@types/stylis": "^4.0.2",
|
||||
"@types/uuid": "^9.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
||||
"@typescript-eslint/parser": "^5.42.1",
|
||||
"@types/uuid": "^9.0.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||
"@typescript-eslint/parser": "^5.59.0",
|
||||
"chokidar": "^3.5.3",
|
||||
"concurrently": "^7.5.0",
|
||||
"concurrently": "^8.0.1",
|
||||
"coveralls": "^3.1.1",
|
||||
"cpy-cli": "^4.2.0",
|
||||
"cspell": "^6.14.3",
|
||||
"globby": "^13.1.2",
|
||||
"cspell": "^6.31.1",
|
||||
"csstree-validator": "^3.0.0",
|
||||
"globby": "^13.1.4",
|
||||
"jison": "^0.4.18",
|
||||
"js-base64": "^3.7.2",
|
||||
"jsdom": "^21.0.0",
|
||||
"js-base64": "^3.7.5",
|
||||
"jsdom": "^21.1.1",
|
||||
"micromatch": "^4.0.5",
|
||||
"path-browserify": "^1.0.1",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier": "^2.8.8",
|
||||
"remark": "^14.0.2",
|
||||
"remark-frontmatter": "^4.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"rimraf": "^4.0.0",
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"typedoc": "^0.23.18",
|
||||
"typedoc-plugin-markdown": "^3.13.6",
|
||||
"typescript": "^4.8.4",
|
||||
"rimraf": "^5.0.0",
|
||||
"start-server-and-test": "^2.0.0",
|
||||
"typedoc": "^0.24.5",
|
||||
"typedoc-plugin-markdown": "^3.15.2",
|
||||
"typescript": "^5.0.4",
|
||||
"unist-util-flatmap": "^1.0.0",
|
||||
"vitepress": "^1.0.0-alpha.46",
|
||||
"vitepress-plugin-search": "^1.0.4-alpha.19"
|
||||
"vitepress": "^1.0.0-alpha.72",
|
||||
"vitepress-plugin-search": "^1.0.4-alpha.20"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"dist/",
|
||||
"README.md"
|
||||
],
|
||||
"sideEffects": false
|
||||
"sideEffects": false,
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,12 +1,18 @@
|
|||
import * as configApi from './config';
|
||||
import { log } from './logger';
|
||||
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
|
||||
import { detectType, getDiagramLoader } from './diagram-api/detectType';
|
||||
import { extractFrontMatter } from './diagram-api/frontmatter';
|
||||
import { UnknownDiagramError } from './errors';
|
||||
import { DetailedError } from './utils';
|
||||
import * as configApi from './config.js';
|
||||
import { log } from './logger.js';
|
||||
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
|
||||
import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
|
||||
import { extractFrontMatter } from './diagram-api/frontmatter.js';
|
||||
import { UnknownDiagramError } from './errors.js';
|
||||
import { DetailedError } from './utils.js';
|
||||
import { cleanupComments } from './diagram-api/comments.js';
|
||||
|
||||
export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
|
||||
|
||||
/**
|
||||
* An object representing a parsed mermaid diagram definition.
|
||||
* @privateRemarks This is exported as part of the public mermaidAPI.
|
||||
*/
|
||||
export class Diagram {
|
||||
type = 'graph';
|
||||
parser;
|
||||
|
@ -38,7 +44,10 @@ export class Diagram {
|
|||
// Similarly, we can't do this in getDiagramFromText() because some code
|
||||
// calls diagram.db.clear(), which would reset anything set by
|
||||
// extractFrontMatter().
|
||||
this.parser.parse = (text: string) => originalParse(extractFrontMatter(text, this.db));
|
||||
|
||||
this.parser.parse = (text: string) =>
|
||||
originalParse(cleanupComments(extractFrontMatter(text, this.db)));
|
||||
|
||||
this.parser.parser.yy = this.db;
|
||||
if (diagram.init) {
|
||||
diagram.init(cnf);
|
||||
|
@ -68,6 +77,15 @@ export class Diagram {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse the text asynchronously and generate a Diagram object asynchronously.
|
||||
* **Warning:** This function may be changed in the future.
|
||||
* @alpha
|
||||
* @param text - The mermaid diagram definition.
|
||||
* @returns A the Promise of a Diagram object.
|
||||
* @throws {@link UnknownDiagramError} if the diagram type can not be found.
|
||||
* @privateRemarks This is exported as part of the public mermaidAPI.
|
||||
*/
|
||||
export const getDiagramFromText = async (text: string): Promise<Diagram> => {
|
||||
const type = detectType(text, configApi.getConfig());
|
||||
try {
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
*
|
||||
* We can't easily use `vi.spyOn(mermaidAPI, "function")` since the object is frozen with `Object.freeze()`.
|
||||
*/
|
||||
import * as configApi from '../config';
|
||||
import * as configApi from '../config.js';
|
||||
import { vi } from 'vitest';
|
||||
import { mermaidAPI as mAPI } from '../mermaidAPI';
|
||||
import { mermaidAPI as mAPI } from '../mermaidAPI.js';
|
||||
|
||||
// original version cannot be modified since it was frozen with `Object.freeze()`
|
||||
export const mermaidAPI = {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { MockedD3 } from './tests/MockedD3';
|
||||
import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
|
||||
import { D3Element } from './mermaidAPI';
|
||||
import { MockedD3 } from './tests/MockedD3.js';
|
||||
import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
|
||||
import { D3Element } from './mermaidAPI.js';
|
||||
|
||||
describe('accessibility', () => {
|
||||
const fauxSvgNode = new MockedD3();
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
* @see https://www.w3.org/TR/svg-aam-1.0/
|
||||
*
|
||||
*/
|
||||
import { D3Element } from './mermaidAPI';
|
||||
import { D3Element } from './mermaidAPI.js';
|
||||
|
||||
import isEmpty from 'lodash-es/isEmpty.js';
|
||||
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import { sanitizeText as _sanitizeText } from './diagrams/common/common';
|
||||
import { getConfig } from './config';
|
||||
import { sanitizeText as _sanitizeText } from './diagrams/common/common.js';
|
||||
import { getConfig } from './config.js';
|
||||
let title = '';
|
||||
let diagramTitle = '';
|
||||
let description = '';
|
||||
|
||||
const sanitizeText = (txt: string): string => _sanitizeText(txt, getConfig());
|
||||
|
||||
export const clear = function (): void {
|
||||
|
@ -36,10 +37,10 @@ export const getDiagramTitle = function (): string {
|
|||
};
|
||||
|
||||
export default {
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
setAccTitle,
|
||||
getDiagramTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle: getDiagramTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear,
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import * as configApi from './config';
|
||||
import * as configApi from './config.js';
|
||||
|
||||
describe('when working with site config', function () {
|
||||
beforeEach(() => {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import assignWithDepth from './assignWithDepth';
|
||||
import { log } from './logger';
|
||||
import theme from './themes';
|
||||
import config from './defaultConfig';
|
||||
import type { MermaidConfig } from './config.type';
|
||||
import assignWithDepth from './assignWithDepth.js';
|
||||
import { log } from './logger.js';
|
||||
import theme from './themes/index.js';
|
||||
import config from './defaultConfig.js';
|
||||
import type { MermaidConfig } from './config.type.js';
|
||||
|
||||
export const defaultConfig: MermaidConfig = Object.freeze(config);
|
||||
|
||||
|
|
|
@ -222,7 +222,9 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
|
|||
maxNodeWidth: number;
|
||||
}
|
||||
|
||||
export type PieDiagramConfig = BaseDiagramConfig;
|
||||
export interface PieDiagramConfig extends BaseDiagramConfig {
|
||||
textPosition?: number;
|
||||
}
|
||||
|
||||
export interface ErDiagramConfig extends BaseDiagramConfig {
|
||||
titleTopMargin?: number;
|
||||
|
@ -264,6 +266,10 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
|
|||
padding?: number;
|
||||
textHeight?: number;
|
||||
defaultRenderer?: string;
|
||||
nodeSpacing?: number;
|
||||
rankSpacing?: number;
|
||||
diagramPadding?: number;
|
||||
htmlLabels?: boolean;
|
||||
}
|
||||
|
||||
export interface JourneyDiagramConfig extends BaseDiagramConfig {
|
||||
|
@ -295,6 +301,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
|
|||
leftMargin?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
padding?: number;
|
||||
boxMargin?: number;
|
||||
boxTextMargin?: number;
|
||||
noteMargin?: number;
|
||||
|
@ -311,6 +318,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
|
|||
sectionFills?: string[];
|
||||
sectionColours?: string[];
|
||||
disableMulticolor?: boolean;
|
||||
useMaxWidth?: boolean;
|
||||
}
|
||||
|
||||
export interface GanttDiagramConfig extends BaseDiagramConfig {
|
||||
|
@ -327,6 +335,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
|
|||
axisFormat?: string;
|
||||
tickInterval?: string;
|
||||
topAxis?: boolean;
|
||||
displayMode?: string;
|
||||
}
|
||||
|
||||
export interface SequenceDiagramConfig extends BaseDiagramConfig {
|
||||
|
@ -377,6 +386,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
|
|||
curve?: string;
|
||||
padding?: number;
|
||||
defaultRenderer?: string;
|
||||
wrappingWidth?: number;
|
||||
}
|
||||
|
||||
export interface FontConfig {
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import intersectRect from './intersect/intersect-rect';
|
||||
import { log } from '../logger';
|
||||
import createLabel from './createLabel';
|
||||
import intersectRect from './intersect/intersect-rect.js';
|
||||
import { log } from '../logger.js';
|
||||
import createLabel from './createLabel.js';
|
||||
import { createText } from '../rendering-util/createText.js';
|
||||
import { select } from 'd3';
|
||||
import { getConfig } from '../config';
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
import { getConfig } from '../config.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
|
||||
const rect = (parent, node) => {
|
||||
log.trace('Creating subgraph rect for ', node.id, node);
|
||||
log.info('Creating subgraph rect for ', node.id, node);
|
||||
|
||||
// Add outer g element
|
||||
const shapeSvg = parent
|
||||
|
@ -17,12 +18,18 @@ const rect = (parent, node) => {
|
|||
// add the rect
|
||||
const rect = shapeSvg.insert('rect', ':first-child');
|
||||
|
||||
const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
|
||||
|
||||
// Create the label and insert it after the rect
|
||||
const label = shapeSvg.insert('g').attr('class', 'cluster-label');
|
||||
|
||||
const text = label
|
||||
.node()
|
||||
.appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
|
||||
// const text = label
|
||||
// .node()
|
||||
// .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
|
||||
const text =
|
||||
node.labelType === 'markdown'
|
||||
? createText(label, node.labelText, { style: node.labelStyle, useHtmlLabels })
|
||||
: label.node().appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
|
||||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
|
@ -56,13 +63,20 @@ const rect = (parent, node) => {
|
|||
.attr('width', width)
|
||||
.attr('height', node.height + padding);
|
||||
|
||||
if (useHtmlLabels) {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
|
||||
);
|
||||
} else {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
|
||||
);
|
||||
}
|
||||
// Center the label
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
// 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
|
||||
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
|
||||
);
|
||||
|
||||
const rectBox = rect.node().getBBox();
|
||||
node.width = rectBox.width;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { select } from 'd3';
|
||||
import { log } from '../logger';
|
||||
import { getConfig } from '../config';
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
import { decodeEntities } from '../mermaidAPI';
|
||||
import { log } from '../logger.js';
|
||||
import { getConfig } from '../config.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
import { decodeEntities } from '../mermaidAPI.js';
|
||||
|
||||
/**
|
||||
* @param dom
|
||||
|
@ -41,7 +41,13 @@ function addHtmlLabel(node) {
|
|||
div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
|
||||
return fo.node();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param _vertexText
|
||||
* @param style
|
||||
* @param isTitle
|
||||
* @param isNode
|
||||
* @deprecated svg-util/createText instead
|
||||
*/
|
||||
const createLabel = (_vertexText, style, isTitle, isNode) => {
|
||||
let vertexText = _vertexText || '';
|
||||
if (typeof vertexText === 'object') {
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import { log } from '../logger';
|
||||
import createLabel from './createLabel';
|
||||
import { log } from '../logger.js';
|
||||
import createLabel from './createLabel.js';
|
||||
import { createText } from '../rendering-util/createText.js';
|
||||
import { line, curveBasis, select } from 'd3';
|
||||
import { getConfig } from '../config';
|
||||
import utils from '../utils';
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
import { getConfig } from '../config.js';
|
||||
import utils from '../utils.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
|
||||
let edgeLabels = {};
|
||||
let terminalLabels = {};
|
||||
|
@ -14,8 +15,17 @@ export const clear = () => {
|
|||
};
|
||||
|
||||
export const insertEdgeLabel = (elem, edge) => {
|
||||
const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
|
||||
// Create the actual text element
|
||||
const labelElement = createLabel(edge.label, edge.labelStyle);
|
||||
const labelElement =
|
||||
edge.labelType === 'markdown'
|
||||
? createText(elem, edge.label, {
|
||||
style: edge.labelStyle,
|
||||
useHtmlLabels,
|
||||
addSvgBackground: true,
|
||||
})
|
||||
: createLabel(edge.label, edge.labelStyle);
|
||||
log.info('abc82', edge, edge.labelType);
|
||||
|
||||
// Create outer g, edgeLabel, this will be positioned after graph layout
|
||||
const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
|
||||
|
@ -26,7 +36,7 @@ export const insertEdgeLabel = (elem, edge) => {
|
|||
|
||||
// Center the label
|
||||
let bbox = labelElement.getBBox();
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
if (useHtmlLabels) {
|
||||
const div = labelElement.children[0];
|
||||
const dv = select(labelElement);
|
||||
bbox = div.getBoundingClientRect();
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { intersection } from './edges';
|
||||
import { setLogLevel } from '../logger';
|
||||
import { intersection } from './edges.js';
|
||||
import { setLogLevel } from '../logger.js';
|
||||
|
||||
describe('Graphlib decorations', () => {
|
||||
let node;
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
|
||||
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
|
||||
import insertMarkers from './markers';
|
||||
import { updateNodeBounds } from './shapes/util';
|
||||
import insertMarkers from './markers.js';
|
||||
import { updateNodeBounds } from './shapes/util.js';
|
||||
import {
|
||||
clear as clearGraphlib,
|
||||
clusterDb,
|
||||
adjustClustersAndEdges,
|
||||
findNonClusterChild,
|
||||
sortNodesByHierarchy,
|
||||
} from './mermaid-graphlib';
|
||||
import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
|
||||
import { insertCluster, clear as clearClusters } from './clusters';
|
||||
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
|
||||
import { log } from '../logger';
|
||||
} from './mermaid-graphlib.js';
|
||||
import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes.js';
|
||||
import { insertCluster, clear as clearClusters } from './clusters.js';
|
||||
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
|
||||
import { log } from '../logger.js';
|
||||
|
||||
const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
||||
const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
|
||||
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
|
||||
const dir = graph.graph().rankdir;
|
||||
log.trace('Dir in recursive render - dir:', dir);
|
||||
|
@ -35,44 +35,46 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
|||
|
||||
// Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
|
||||
// to the abstract node and is later used by dagre for the layout
|
||||
graph.nodes().forEach(function (v) {
|
||||
const node = graph.node(v);
|
||||
if (parentCluster !== undefined) {
|
||||
const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
|
||||
// data.clusterPositioning = true;
|
||||
log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
|
||||
graph.setNode(parentCluster.id, data);
|
||||
if (!graph.parent(v)) {
|
||||
log.trace('Setting parent', v, parentCluster.id);
|
||||
graph.setParent(v, parentCluster.id, data);
|
||||
await Promise.all(
|
||||
graph.nodes().map(async function (v) {
|
||||
const node = graph.node(v);
|
||||
if (parentCluster !== undefined) {
|
||||
const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
|
||||
// data.clusterPositioning = true;
|
||||
log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
|
||||
graph.setNode(parentCluster.id, data);
|
||||
if (!graph.parent(v)) {
|
||||
log.trace('Setting parent', v, parentCluster.id);
|
||||
graph.setParent(v, parentCluster.id, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
if (node && node.clusterNode) {
|
||||
// const children = graph.children(v);
|
||||
log.info('Cluster identified', v, node.width, graph.node(v));
|
||||
const o = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
|
||||
const newEl = o.elem;
|
||||
updateNodeBounds(node, newEl);
|
||||
node.diff = o.diff || 0;
|
||||
log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
|
||||
setNodeElem(newEl, node);
|
||||
log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
if (node && node.clusterNode) {
|
||||
// const children = graph.children(v);
|
||||
log.info('Cluster identified', v, node.width, graph.node(v));
|
||||
const o = await recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
|
||||
const newEl = o.elem;
|
||||
updateNodeBounds(node, newEl);
|
||||
node.diff = o.diff || 0;
|
||||
log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
|
||||
setNodeElem(newEl, node);
|
||||
|
||||
log.warn('Recursive render complete ', newEl, node);
|
||||
} else {
|
||||
if (graph.children(v).length > 0) {
|
||||
// This is a cluster but not to be rendered recursively
|
||||
// Render as before
|
||||
log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
|
||||
log.info(findNonClusterChild(node.id, graph));
|
||||
clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
|
||||
// insertCluster(clusters, graph.node(v));
|
||||
log.warn('Recursive render complete ', newEl, node);
|
||||
} else {
|
||||
log.info('Node - the non recursive path', v, node.id, node);
|
||||
insertNode(nodes, graph.node(v), dir);
|
||||
if (graph.children(v).length > 0) {
|
||||
// This is a cluster but not to be rendered recursively
|
||||
// Render as before
|
||||
log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
|
||||
log.info(findNonClusterChild(node.id, graph));
|
||||
clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
|
||||
// insertCluster(clusters, graph.node(v));
|
||||
} else {
|
||||
log.info('Node - the non recursive path', v, node.id, node);
|
||||
await insertNode(nodes, graph.node(v), dir);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
// Insert labels, this will insert them into the dom so that the width can be calculated
|
||||
// Also figure out which edges point to/from clusters and adjust them accordingly
|
||||
|
@ -146,7 +148,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
|||
return { elem, diff };
|
||||
};
|
||||
|
||||
export const render = (elem, graph, markers, diagramtype, id) => {
|
||||
export const render = async (elem, graph, markers, diagramtype, id) => {
|
||||
insertMarkers(elem, markers, diagramtype, id);
|
||||
clearNodes();
|
||||
clearEdges();
|
||||
|
@ -157,7 +159,7 @@ export const render = (elem, graph, markers, diagramtype, id) => {
|
|||
adjustClustersAndEdges(graph);
|
||||
log.warn('Graph after:', graphlibJson.write(graph));
|
||||
// log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
|
||||
recursiveRender(elem, graph, diagramtype);
|
||||
await recursiveRender(elem, graph, diagramtype);
|
||||
};
|
||||
|
||||
// const shapeDefinitions = {};
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import intersectEllipse from './intersect-ellipse';
|
||||
import intersectEllipse from './intersect-ellipse.js';
|
||||
|
||||
/**
|
||||
* @param node
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint "no-console": off */
|
||||
|
||||
import intersectLine from './intersect-line';
|
||||
import intersectLine from './intersect-line.js';
|
||||
|
||||
export default intersectPolygon;
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/** Setup arrow head and define the marker. The result is appended to the svg. */
|
||||
|
||||
import { log } from '../logger';
|
||||
import { log } from '../logger.js';
|
||||
|
||||
// Only add the number of markers that the diagram needs
|
||||
const insertMarkers = (elem, markerArray, type, id) => {
|
||||
|
@ -142,7 +142,7 @@ const point = (elem, type) => {
|
|||
.append('marker')
|
||||
.attr('id', type + '-pointEnd')
|
||||
.attr('class', 'marker ' + type)
|
||||
.attr('viewBox', '0 0 12 20')
|
||||
.attr('viewBox', '0 0 10 10')
|
||||
.attr('refX', 10)
|
||||
.attr('refY', 5)
|
||||
.attr('markerUnits', 'userSpaceOnUse')
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/** Decorates with functions required by mermaids dagre-wrapper. */
|
||||
import { log } from '../logger';
|
||||
import { log } from '../logger.js';
|
||||
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
|
||||
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
|
||||
|
||||
|
|
|
@ -5,8 +5,8 @@ import {
|
|||
adjustClustersAndEdges,
|
||||
extractDescendants,
|
||||
sortNodesByHierarchy,
|
||||
} from './mermaid-graphlib';
|
||||
import { setLogLevel, log } from '../logger';
|
||||
} from './mermaid-graphlib.js';
|
||||
import { setLogLevel, log } from '../logger.js';
|
||||
|
||||
describe('Graphlib decorations', () => {
|
||||
let g;
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
import { select } from 'd3';
|
||||
import { log } from '../logger';
|
||||
import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
|
||||
import { getConfig } from '../config';
|
||||
import { log } from '../logger.js';
|
||||
import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
|
||||
import { getConfig } from '../config.js';
|
||||
import intersect from './intersect/index.js';
|
||||
import createLabel from './createLabel';
|
||||
import note from './shapes/note';
|
||||
import { parseMember } from '../diagrams/class/svgDraw';
|
||||
import { evaluate } from '../diagrams/common/common';
|
||||
import createLabel from './createLabel.js';
|
||||
import note from './shapes/note.js';
|
||||
import { parseMember } from '../diagrams/class/svgDraw.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
|
||||
const question = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const question = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -69,8 +69,8 @@ const choice = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const hexagon = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const hexagon = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const f = 4;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -96,8 +96,8 @@ const hexagon = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const rect_left_inv_arrow = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const rect_left_inv_arrow = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -122,8 +122,8 @@ const rect_left_inv_arrow = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const lean_right = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const lean_right = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -145,8 +145,8 @@ const lean_right = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const lean_left = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const lean_left = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -168,8 +168,8 @@ const lean_left = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const trapezoid = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const trapezoid = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -191,8 +191,8 @@ const trapezoid = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const inv_trapezoid = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const inv_trapezoid = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -214,8 +214,8 @@ const inv_trapezoid = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const rect_right_inv_arrow = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const rect_right_inv_arrow = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -238,8 +238,8 @@ const rect_right_inv_arrow = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const cylinder = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const cylinder = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const rx = w / 2;
|
||||
|
@ -310,13 +310,19 @@ const cylinder = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const rect = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
|
||||
const rect = async (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
||||
parent,
|
||||
node,
|
||||
'node ' + node.classes,
|
||||
true
|
||||
);
|
||||
|
||||
log.trace('Classes = ', node.classes);
|
||||
// add the rect
|
||||
const rect = shapeSvg.insert('rect', ':first-child');
|
||||
|
||||
// const totalWidth = bbox.width + node.padding * 2;
|
||||
// const totalHeight = bbox.height + node.padding * 2;
|
||||
const totalWidth = bbox.width + node.padding;
|
||||
const totalHeight = bbox.height + node.padding;
|
||||
rect
|
||||
|
@ -324,6 +330,8 @@ const rect = (parent, node) => {
|
|||
.attr('style', node.style)
|
||||
.attr('rx', node.rx)
|
||||
.attr('ry', node.ry)
|
||||
// .attr('x', -bbox.width / 2 - node.padding)
|
||||
// .attr('y', -bbox.height / 2 - node.padding)
|
||||
.attr('x', -bbox.width / 2 - halfPadding)
|
||||
.attr('y', -bbox.height / 2 - halfPadding)
|
||||
.attr('width', totalWidth)
|
||||
|
@ -349,8 +357,8 @@ const rect = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const labelRect = (parent, node) => {
|
||||
const { shapeSvg } = labelHelper(parent, node, 'label', true);
|
||||
const labelRect = async (parent, node) => {
|
||||
const { shapeSvg } = await labelHelper(parent, node, 'label', true);
|
||||
|
||||
log.trace('Classes = ', node.classes);
|
||||
// add the rect
|
||||
|
@ -536,8 +544,8 @@ const rectWithTitle = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const stadium = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const stadium = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const h = bbox.height + node.padding;
|
||||
const w = bbox.width + h / 4 + node.padding;
|
||||
|
@ -562,8 +570,8 @@ const stadium = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const circle = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
|
||||
const circle = async (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
|
||||
const circle = shapeSvg.insert('circle', ':first-child');
|
||||
|
||||
// center the circle around its coordinate
|
||||
|
@ -587,8 +595,8 @@ const circle = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const doublecircle = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
|
||||
const doublecircle = async (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
|
||||
const gap = 5;
|
||||
const circleGroup = shapeSvg.insert('g', ':first-child');
|
||||
const outerCircle = circleGroup.insert('circle');
|
||||
|
@ -623,8 +631,8 @@ const doublecircle = (parent, node) => {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
const subroutine = (parent, node) => {
|
||||
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
|
||||
const subroutine = async (parent, node) => {
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
|
||||
|
||||
const w = bbox.width + node.padding;
|
||||
const h = bbox.height + node.padding;
|
||||
|
@ -772,7 +780,7 @@ const class_box = (parent, node) => {
|
|||
maxWidth += interfaceBBox.width;
|
||||
}
|
||||
|
||||
let classTitleString = node.classData.id;
|
||||
let classTitleString = node.classData.label;
|
||||
|
||||
if (node.classData.type !== undefined && node.classData.type !== '') {
|
||||
if (getConfig().flowchart.htmlLabels) {
|
||||
|
@ -927,61 +935,6 @@ const class_box = (parent, node) => {
|
|||
);
|
||||
verticalPos += classTitleBBox.height + rowPadding;
|
||||
});
|
||||
//
|
||||
// let bbox;
|
||||
// if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// const div = interfaceLabel.children[0];
|
||||
// const dv = select(interfaceLabel);
|
||||
// bbox = div.getBoundingClientRect();
|
||||
// dv.attr('width', bbox.width);
|
||||
// dv.attr('height', bbox.height);
|
||||
// }
|
||||
// bbox = labelContainer.getBBox();
|
||||
|
||||
// log.info('Text 2', text2);
|
||||
// const textRows = text2.slice(1, text2.length);
|
||||
// let titleBox = text.getBBox();
|
||||
// const descr = label
|
||||
// .node()
|
||||
// .appendChild(createLabel(textRows.join('<br/>'), node.labelStyle, true, true));
|
||||
|
||||
// if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
// const div = descr.children[0];
|
||||
// const dv = select(descr);
|
||||
// bbox = div.getBoundingClientRect();
|
||||
// dv.attr('width', bbox.width);
|
||||
// dv.attr('height', bbox.height);
|
||||
// }
|
||||
// // bbox = label.getBBox();
|
||||
// // log.info(descr);
|
||||
// select(descr).attr(
|
||||
// 'transform',
|
||||
// 'translate( ' +
|
||||
// // (titleBox.width - bbox.width) / 2 +
|
||||
// (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
|
||||
// ', ' +
|
||||
// (titleBox.height + halfPadding + 5) +
|
||||
// ')'
|
||||
// );
|
||||
// select(text).attr(
|
||||
// 'transform',
|
||||
// 'translate( ' +
|
||||
// // (titleBox.width - bbox.width) / 2 +
|
||||
// (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
|
||||
// ', ' +
|
||||
// 0 +
|
||||
// ')'
|
||||
// );
|
||||
// // Get the size of the label
|
||||
|
||||
// // Bounding box for title and text
|
||||
// bbox = label.node().getBBox();
|
||||
|
||||
// // Center the label
|
||||
// label.attr(
|
||||
// 'transform',
|
||||
// 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'
|
||||
// );
|
||||
|
||||
rect
|
||||
.attr('class', 'outer title-state')
|
||||
|
@ -990,13 +943,6 @@ const class_box = (parent, node) => {
|
|||
.attr('width', maxWidth + node.padding)
|
||||
.attr('height', maxHeight + node.padding);
|
||||
|
||||
// innerLine
|
||||
// .attr('class', 'divider')
|
||||
// .attr('x1', -bbox.width / 2 - halfPadding)
|
||||
// .attr('x2', bbox.width / 2 + halfPadding)
|
||||
// .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)
|
||||
// .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);
|
||||
|
||||
updateNodeBounds(node, rect);
|
||||
|
||||
node.intersect = function (point) {
|
||||
|
@ -1035,7 +981,7 @@ const shapes = {
|
|||
|
||||
let nodeElems = {};
|
||||
|
||||
export const insertNode = (elem, node, dir) => {
|
||||
export const insertNode = async (elem, node, dir) => {
|
||||
let newEl;
|
||||
let el;
|
||||
|
||||
|
@ -1048,9 +994,9 @@ export const insertNode = (elem, node, dir) => {
|
|||
target = node.linkTarget || '_blank';
|
||||
}
|
||||
newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
|
||||
el = shapes[node.shape](newEl, node, dir);
|
||||
el = await shapes[node.shape](newEl, node, dir);
|
||||
} else {
|
||||
el = shapes[node.shape](elem, node, dir);
|
||||
el = await shapes[node.shape](elem, node, dir);
|
||||
newEl = el;
|
||||
}
|
||||
if (node.tooltip) {
|
||||
|
@ -1076,6 +1022,7 @@ export const clear = () => {
|
|||
|
||||
export const positionNode = (node) => {
|
||||
const el = nodeElems[node.id];
|
||||
|
||||
log.trace(
|
||||
'Transforming node',
|
||||
node.diff,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/** Setup arrow head and define the marker. The result is appended to the svg. */
|
||||
|
||||
// import { log } from '../logger';
|
||||
// import { log } from '../logger.js';
|
||||
|
||||
// Only add the number of markers that the diagram needs
|
||||
const insertPatterns = (elem, patternArray, type, id) => {
|
||||
|
|
|
@ -1,9 +1,19 @@
|
|||
import { updateNodeBounds, labelHelper } from './util';
|
||||
import { log } from '../../logger';
|
||||
import { updateNodeBounds, labelHelper } from './util.js';
|
||||
import { log } from '../../logger.js';
|
||||
import { getConfig } from '../../config.js';
|
||||
import intersect from '../intersect/index.js';
|
||||
|
||||
const note = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
|
||||
const note = async (parent, node) => {
|
||||
const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
|
||||
if (!useHtmlLabels) {
|
||||
node.centerLabel = true;
|
||||
}
|
||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
||||
parent,
|
||||
node,
|
||||
'node ' + node.classes,
|
||||
true
|
||||
);
|
||||
|
||||
log.info('Classes = ', node.classes);
|
||||
// add the rect
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
import createLabel from '../createLabel';
|
||||
import { getConfig } from '../../config';
|
||||
import { decodeEntities } from '../../mermaidAPI';
|
||||
import createLabel from '../createLabel.js';
|
||||
import { createText } from '../../rendering-util/createText.js';
|
||||
import { getConfig } from '../../config.js';
|
||||
import { decodeEntities } from '../../mermaidAPI.js';
|
||||
import { select } from 'd3';
|
||||
import { evaluate, sanitizeText } from '../../diagrams/common/common';
|
||||
export const labelHelper = (parent, node, _classes, isNode) => {
|
||||
import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
|
||||
|
||||
export const labelHelper = async (parent, node, _classes, isNode) => {
|
||||
let classes;
|
||||
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
|
||||
if (!_classes) {
|
||||
classes = 'node default';
|
||||
} else {
|
||||
|
@ -27,9 +30,17 @@ export const labelHelper = (parent, node, _classes, isNode) => {
|
|||
labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];
|
||||
}
|
||||
|
||||
const text = label
|
||||
.node()
|
||||
.appendChild(
|
||||
const textNode = label.node();
|
||||
let text;
|
||||
if (node.labelType === 'markdown') {
|
||||
// text = textNode;
|
||||
text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
|
||||
useHtmlLabels,
|
||||
width: node.width || getConfig().flowchart.wrappingWidth,
|
||||
classes: 'markdown-node-label',
|
||||
});
|
||||
} else {
|
||||
text = textNode.appendChild(
|
||||
createLabel(
|
||||
sanitizeText(decodeEntities(labelText), getConfig()),
|
||||
node.labelStyle,
|
||||
|
@ -37,23 +48,61 @@ export const labelHelper = (parent, node, _classes, isNode) => {
|
|||
isNode
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
const halfPadding = node.padding / 2;
|
||||
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
|
||||
// if there are images, need to wait for them to load before getting the bounding box
|
||||
const images = div.getElementsByTagName('img');
|
||||
if (images) {
|
||||
const noImgText = labelText.replace(/<img[^>]*>/g, '').trim() === '';
|
||||
|
||||
await Promise.all(
|
||||
[...images].map(
|
||||
(img) =>
|
||||
new Promise((res) =>
|
||||
img.addEventListener('load', function () {
|
||||
img.style.display = 'flex';
|
||||
img.style.flexDirection = 'column';
|
||||
|
||||
if (noImgText) {
|
||||
// default size if no text
|
||||
const bodyFontSize = getConfig().fontSize
|
||||
? getConfig().fontSize
|
||||
: window.getComputedStyle(document.body).fontSize;
|
||||
const enlargingFactor = 5;
|
||||
img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
|
||||
} else {
|
||||
img.style.width = '100%';
|
||||
}
|
||||
res(img);
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
bbox = div.getBoundingClientRect();
|
||||
dv.attr('width', bbox.width);
|
||||
dv.attr('height', bbox.height);
|
||||
}
|
||||
|
||||
const halfPadding = node.padding / 2;
|
||||
|
||||
// Center the label
|
||||
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
||||
|
||||
if (useHtmlLabels) {
|
||||
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
||||
} else {
|
||||
label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
|
||||
}
|
||||
if (node.centerLabel) {
|
||||
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
||||
}
|
||||
label.insert('rect', ':first-child');
|
||||
return { shapeSvg, bbox, halfPadding, label };
|
||||
};
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import theme from './themes';
|
||||
import { MermaidConfig } from './config.type';
|
||||
import theme from './themes/index.js';
|
||||
import { MermaidConfig } from './config.type.js';
|
||||
/**
|
||||
* **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
|
||||
* here](8.6.0_docs.md)].**
|
||||
|
@ -258,6 +258,18 @@ const config: Partial<MermaidConfig> = {
|
|||
* Default value: 'dagre-wrapper'
|
||||
*/
|
||||
defaultRenderer: 'dagre-wrapper',
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | --------------- | ----------- | ------- | -------- | ----------------------- |
|
||||
* | wrappingWidth | See notes | number | 4 | width of nodes where text is wrapped |
|
||||
*
|
||||
* **Notes:**
|
||||
*
|
||||
* When using markdown strings the text ius wrapped automatically, this
|
||||
* value sets the max width of a text before it continues on a new line.
|
||||
* Default value: 'dagre-wrapper'
|
||||
*/
|
||||
wrappingWidth: 200,
|
||||
},
|
||||
|
||||
/** The object containing configurations specific for sequence diagrams */
|
||||
|
@ -659,6 +671,17 @@ const config: Partial<MermaidConfig> = {
|
|||
*/
|
||||
numberSectionStyles: 4,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | ----------- | ------------------------- | ------ | -------- | --------- |
|
||||
* | displayMode | Controls the display mode | string | 4 | 'compact' |
|
||||
*
|
||||
* **Notes**:
|
||||
*
|
||||
* - **compact**: Enables displaying multiple tasks on the same row.
|
||||
*/
|
||||
displayMode: '',
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | ---------- | ---------------------------- | ---- | -------- | ---------------- |
|
||||
|
@ -684,7 +707,6 @@ const config: Partial<MermaidConfig> = {
|
|||
* Default value: undefined
|
||||
*/
|
||||
tickInterval: undefined,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||||
|
@ -1247,6 +1269,15 @@ const config: Partial<MermaidConfig> = {
|
|||
* Default value: true
|
||||
*/
|
||||
useMaxWidth: true,
|
||||
|
||||
/**
|
||||
* | Parameter | Description | Type | Required | Values |
|
||||
* | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
|
||||
* | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number | Optional | Decimal from 0 to 1 |
|
||||
*
|
||||
* **Notes:** Default value: 0.75
|
||||
*/
|
||||
textPosition: 0.75,
|
||||
},
|
||||
|
||||
/** The object containing configurations specific for req diagrams */
|
||||
|
|
|
@ -0,0 +1,94 @@
|
|||
// tests to check that comments are removed
|
||||
|
||||
import { cleanupComments } from './comments.js';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
|
||||
describe('comments', () => {
|
||||
it('should remove comments', () => {
|
||||
const text = `
|
||||
|
||||
%% This is a comment
|
||||
%% This is another comment
|
||||
graph TD
|
||||
A-->B
|
||||
%% This is a comment
|
||||
`;
|
||||
expect(cleanupComments(text)).toMatchInlineSnapshot(`
|
||||
"graph TD
|
||||
A-->B
|
||||
"
|
||||
`);
|
||||
});
|
||||
|
||||
it('should keep init statements when removing comments', () => {
|
||||
const text = `
|
||||
%% This is a comment
|
||||
|
||||
%% This is another comment
|
||||
%%{init: {'theme': 'forest'}}%%
|
||||
%%{ init: {'theme': 'space before init'}}%%
|
||||
%%{init: {'theme': 'space after ending'}}%%
|
||||
graph TD
|
||||
A-->B
|
||||
|
||||
B-->C
|
||||
%% This is a comment
|
||||
`;
|
||||
expect(cleanupComments(text)).toMatchInlineSnapshot(`
|
||||
"%%{init: {'theme': 'forest'}}%%
|
||||
%%{ init: {'theme': 'space before init'}}%%
|
||||
%%{init: {'theme': 'space after ending'}}%%
|
||||
graph TD
|
||||
A-->B
|
||||
|
||||
B-->C
|
||||
"
|
||||
`);
|
||||
});
|
||||
|
||||
it('should remove indented comments', () => {
|
||||
const text = `
|
||||
%% This is a comment
|
||||
graph TD
|
||||
A-->B
|
||||
%% This is a comment
|
||||
C-->D
|
||||
`;
|
||||
expect(cleanupComments(text)).toMatchInlineSnapshot(`
|
||||
"graph TD
|
||||
A-->B
|
||||
C-->D
|
||||
"
|
||||
`);
|
||||
});
|
||||
|
||||
it('should remove empty newlines from start', () => {
|
||||
const text = `
|
||||
|
||||
|
||||
|
||||
|
||||
%% This is a comment
|
||||
graph TD
|
||||
A-->B
|
||||
`;
|
||||
expect(cleanupComments(text)).toMatchInlineSnapshot(`
|
||||
"graph TD
|
||||
A-->B
|
||||
"
|
||||
`);
|
||||
});
|
||||
|
||||
it('should remove comments at end of text with no newline', () => {
|
||||
const text = `
|
||||
graph TD
|
||||
A-->B
|
||||
%% This is a comment`;
|
||||
|
||||
expect(cleanupComments(text)).toMatchInlineSnapshot(`
|
||||
"graph TD
|
||||
A-->B
|
||||
"
|
||||
`);
|
||||
});
|
||||
});
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* Remove all lines starting with `%%` from the text that don't contain a `%%{`
|
||||
* @param text - The text to remove comments from
|
||||
* @returns cleaned text
|
||||
*/
|
||||
export const cleanupComments = (text: string): string => {
|
||||
return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
|
||||
};
|
|
@ -1,14 +1,14 @@
|
|||
import { MermaidConfig } from '../config.type';
|
||||
import { log } from '../logger';
|
||||
import { MermaidConfig } from '../config.type.js';
|
||||
import { log } from '../logger.js';
|
||||
import type {
|
||||
DetectorRecord,
|
||||
DiagramDetector,
|
||||
DiagramLoader,
|
||||
ExternalDiagramDefinition,
|
||||
} from './types';
|
||||
import { frontMatterRegex } from './frontmatter';
|
||||
import { getDiagram, registerDiagram } from './diagramAPI';
|
||||
import { UnknownDiagramError } from '../errors';
|
||||
} from './types.js';
|
||||
import { frontMatterRegex } from './frontmatter.js';
|
||||
import { getDiagram, registerDiagram } from './diagramAPI.js';
|
||||
import { UnknownDiagramError } from '../errors.js';
|
||||
|
||||
const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
|
||||
const anyComment = /\s*%%.*\n/gm;
|
||||
|
@ -46,9 +46,24 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
|
|||
}
|
||||
}
|
||||
|
||||
throw new UnknownDiagramError(`No diagram type detected for text: ${text}`);
|
||||
throw new UnknownDiagramError(
|
||||
`No diagram type detected matching given configuration for text: ${text}`
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Registers lazy-loaded diagrams to Mermaid.
|
||||
*
|
||||
* The diagram function is loaded asynchronously, so that diagrams are only loaded
|
||||
* if the diagram is detected.
|
||||
*
|
||||
* @remarks
|
||||
* Please note that the order of diagram detectors is important.
|
||||
* The first detector to return `true` is the diagram that will be loaded
|
||||
* and used, so put more specific detectors at the beginning!
|
||||
*
|
||||
* @param diagrams - Diagrams to lazy load, and their detectors, in order of importance.
|
||||
*/
|
||||
export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinition[]) => {
|
||||
for (const { id, detector, loader } of diagrams) {
|
||||
addDetector(id, detector, loader);
|
||||
|
@ -97,4 +112,6 @@ export const addDetector = (key: string, detector: DiagramDetector, loader?: Dia
|
|||
log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`);
|
||||
};
|
||||
|
||||
export const getDiagramLoader = (key: string) => detectors[key].loader;
|
||||
export const getDiagramLoader = (key: string) => {
|
||||
return detectors[key].loader;
|
||||
};
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue