Compare commits

..

11 Commits

Author SHA1 Message Date
Knut Sveidqvist
ff6bc3b374 Handling of animation classes 2025-06-23 14:02:55 +02:00
Knut Sveidqvist
ba7d76f923 Direction handling 2025-06-23 12:46:07 +02:00
Knut Sveidqvist
95201a1f22 0 failing tests 2025-06-23 12:01:27 +02:00
Knut Sveidqvist
55b69d7df8 2 failing tests 2025-06-23 11:03:28 +02:00
Knut Sveidqvist
cb6f8e51a2 5 failing tests 2025-06-20 07:33:27 +02:00
Knut Sveidqvist
7a358cb00e Chevcrotain Lexer done 2025-06-19 10:23:48 +02:00
Knut Sveidqvist
771eca026b Chevcrotain WIP 2025-06-19 09:34:43 +02:00
Knut Sveidqvist
729de7a6e9 1st set of tests going through 2025-06-13 14:37:28 +02:00
Knut Sveidqvist
2b0e0ac8fa flow-chev-edges.spec.js going through 2025-06-13 09:12:30 +02:00
Knut Sveidqvist
4a5e1a3250 Better handling of special characters 2025-06-13 08:09:54 +02:00
Knut Sveidqvist
a0bd8e2f64 Chevrotain POC 2025-06-11 15:35:44 +02:00
360 changed files with 22459 additions and 15928 deletions

View File

@@ -33,9 +33,4 @@ export const packageOptions = {
packageName: 'mermaid-layout-elk', packageName: 'mermaid-layout-elk',
file: 'layouts.ts', file: 'layouts.ts',
}, },
examples: {
name: 'mermaid-examples',
packageName: 'examples',
file: 'index.ts',
},
} as const satisfies Record<string, PackageOptions>; } as const satisfies Record<string, PackageOptions>;

View File

@@ -10,16 +10,13 @@ const buildType = (packageName: string) => {
console.log(out.toString()); console.log(out.toString());
} }
} catch (e) { } catch (e) {
console.error(e);
if (e.stdout.length > 0) { if (e.stdout.length > 0) {
console.error(e.stdout.toString()); console.error(e.stdout.toString());
} }
if (e.stderr.length > 0) { if (e.stderr.length > 0) {
console.error(e.stderr.toString()); console.error(e.stderr.toString());
} }
// Exit the build process if we are in CI
if (process.env.CI) {
throw new Error(`Failed to build types for ${packageName}`);
}
} }
}; };

View File

@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: Add Vertical Line To Gantt Plot At Specified Time

View File

@@ -0,0 +1,5 @@
---
'@mermaid-js/mermaid-zenuml': major
---
Upgraded the dependency @zenuml/core

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
Fix stroke styles for ER diagram to correctly apply path and row-specific styles

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
chore: Convert StateDB into TypeScript

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams

View File

@@ -0,0 +1,7 @@
---
'@mermaid-js/mermaid-zenuml': patch
---
chore: bump minimum ZenUML version to 3.23.28
commit: 9d06d8f31e7f12af9e9e092214f907f2dc93ad75

View File

@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: Add support for styling Journey Diagram title (color, font-family, and font-size)

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via `mermaid.registerIconPacks`.

View File

@@ -0,0 +1,5 @@
---
'mermaid': minor
---
Added support for the click directive in stateDiagram syntax

View File

@@ -0,0 +1,6 @@
---
'mermaid': minor
'@mermaid-js/parser': minor
---
feat: Add shorter `+<count>: Label` syntax in packet diagram

View File

@@ -0,0 +1,6 @@
---
'mermaid': patch
'@mermaid-js/parser': patch
---
Refactor grammar so that title don't break Architecture Diagrams

View File

@@ -0,0 +1,5 @@
---
'mermaid': major
---
fix: allow sequence diagram arrows with a trailing colon but no message

View File

@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: Dynamically Render Data Labels Within Bar Charts

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: allow colons in events

View File

@@ -0,0 +1,7 @@
---
'@mermaid-js/mermaid-zenuml': patch
---
fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11
commit: 0ad44c12feead9d20c6a870a49327ada58d6e657

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Fix incomplete string escaping in URL manipulation logic when `arrowMarkerAbsolute: true` by ensuring all unsafe characters are escaped.

View File

@@ -47,7 +47,6 @@ edgesep
EMPTYSTR EMPTYSTR
enddate enddate
ERDIAGRAM ERDIAGRAM
eslint
flatmap flatmap
forwardable forwardable
frontmatter frontmatter
@@ -88,7 +87,6 @@ NODIR
NSTR NSTR
outdir outdir
Qcontrolx Qcontrolx
QSTR
reinit reinit
rels rels
reqs reqs

View File

@@ -2,11 +2,8 @@
Ashish Jain Ashish Jain
cpettitt cpettitt
Dong Cai Dong Cai
fourcube
knsv
Knut Sveidqvist
Nikolay Rozhkov Nikolay Rozhkov
Peng Xiao Peng Xiao
Per Brolin Per Brolin
Sidharth Vinod
subhash-halder subhash-halder
Vinod Sidharth

View File

@@ -13,10 +13,11 @@ gitgraph
gzipped gzipped
handDrawn handDrawn
kanban kanban
knsv
Knut
marginx marginx
marginy marginy
Markdownish Markdownish
mermaidchart
mermaidjs mermaidjs
mindmap mindmap
mindmaps mindmaps
@@ -34,6 +35,7 @@ sandboxed
siebling siebling
statediagram statediagram
substate substate
Sveidqvist
unfixable unfixable
Viewbox Viewbox
viewports viewports

View File

@@ -1,5 +1,5 @@
import { build } from 'esbuild'; import { build } from 'esbuild';
import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises'; import { mkdir, readFile, rename, writeFile } from 'node:fs/promises';
import { packageOptions } from '../.build/common.js'; import { packageOptions } from '../.build/common.js';
import { generateLangium } from '../.build/generateLangium.js'; import { generateLangium } from '../.build/generateLangium.js';
import type { MermaidBuildOptions } from './util.js'; import type { MermaidBuildOptions } from './util.js';
@@ -90,7 +90,6 @@ const buildTinyMermaid = async () => {
tinyPkg.version = mermaidPkg.version; tinyPkg.version = mermaidPkg.version;
await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n'); await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n');
await cp('./packages/mermaid/CHANGELOG.md', './packages/tiny/CHANGELOG.md');
}; };
const main = async () => { const main = async () => {

8
.github/lychee.toml vendored
View File

@@ -46,21 +46,13 @@ exclude = [
# Drupal 403 # Drupal 403
"https://(www.)?drupal.org", "https://(www.)?drupal.org",
# Phbpp 403
"https://(www.)?phpbb.com",
# Swimm returns 404, even though the link is valid # Swimm returns 404, even though the link is valid
"https://docs.swimm.io", "https://docs.swimm.io",
# Certificate Error
"https://noteshub.app",
# Timeout # Timeout
"https://huehive.co", "https://huehive.co",
"https://foswiki.org", "https://foswiki.org",
"https://www.gnu.org", "https://www.gnu.org",
"https://redmine.org",
"https://mermaid-preview.com"
] ]
# Exclude all private IPs from checking. # Exclude all private IPs from checking.

View File

@@ -42,4 +42,4 @@ jobs:
working-directory: ./packages/mermaid working-directory: ./packages/mermaid
run: pnpm run docs:build run: pnpm run docs:build
- uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main

View File

@@ -58,7 +58,7 @@ jobs:
echo "EOF" >> $GITHUB_OUTPUT echo "EOF" >> $GITHUB_OUTPUT
- name: Commit and create pull request - name: Commit and create pull request
uses: peter-evans/create-pull-request@1310d7dab503600742045e6fd4b84dda64352858 uses: peter-evans/create-pull-request@889dce9eaba7900ce30494f5e1ac7220b27e5c81
with: with:
add-paths: | add-paths: |
cypress/timings.json cypress/timings.json

View File

@@ -29,29 +29,3 @@ jobs:
disable-releaser: true disable-releaser: true
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Add "Sponsored by MermaidChart" label
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const prNumber = context.payload.pull_request.number;
const { data: commits } = await github.rest.pulls.listCommits({
owner: context.repo.owner,
repo: context.repo.repo,
pull_number: prNumber,
});
const isSponsored = commits.every(
(c) => c.commit.author.email?.endsWith('@mermaidchart.com')
);
if (isSponsored) {
console.log('PR is sponsored. Adding label.');
await github.rest.issues.addLabels({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: prNumber,
labels: ['Sponsored by MermaidChart'],
});
}

View File

@@ -1,70 +0,0 @@
name: Validate pnpm-lock.yaml
on:
pull_request:
paths:
- 'pnpm-lock.yaml'
- '**/package.json'
- '.github/workflows/validate-lockfile.yml'
jobs:
validate-lockfile:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 20
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
- name: Validate pnpm-lock.yaml entries
id: validate # give this step an ID so we can reference its outputs
run: |
issues=()
# 1) No tarball references
if grep -qF 'tarball:' pnpm-lock.yaml; then
issues+=("• Tarball references found (forbidden)")
fi
# 2) No unwanted vitepress paths
if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
fi
# 3) Lockfile only changes when package.json changes
git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > changed.txt
if grep -q '^pnpm-lock.yaml$' changed.txt && ! grep -q 'package.json' changed.txt; then
issues+=("• pnpm-lock.yaml changed without any package.json modification")
fi
# If any issues, output them and fail
if [ ${#issues[@]} -gt 0 ]; then
# Use the new GITHUB_OUTPUT approach to set a multiline output
{
echo "errors<<EOF"
printf '%s\n' "${issues[@]}"
echo "EOF"
} >> $GITHUB_OUTPUT
exit 1
fi
- name: Comment on PR if validation failed
if: failure()
uses: peter-evans/create-or-update-comment@v4
with:
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.pull_request.number }}
body: |
The following issue(s) were detected:
${{ steps.validate.outputs.errors }}
Please address these and push an update.
_Posted automatically by GitHub Actions_

View File

@@ -1 +0,0 @@
./packages/mermaid/CHANGELOG.md

1005
CHANGELOG.md Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -95,6 +95,10 @@ In our release process we rely heavily on visual regression tests using [applito
<!-- </Main description> --> <!-- </Main description> -->
## Mermaid AI Bot
[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
## Examples ## Examples
**The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).** **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**

13
__mocks__/d3.ts Normal file
View File

@@ -0,0 +1,13 @@
import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
export const select = function () {
return new MockedD3();
};
export const selectAll = function () {
return new MockedD3();
};
export const curveBasis = 'basis';
export const curveLinear = 'linear';
export const curveCardinal = 'cardinal';

View File

@@ -26,10 +26,7 @@ export default eyesPlugin(
config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true'; config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
if (config.env.useArgos) { if (config.env.useArgos) {
registerArgosTask(on, config, { registerArgosTask(on, config);
// Enable upload to Argos only when it runs on CI.
uploadToArgos: !!process.env.CI,
});
} else { } else {
addMatchImageSnapshotPlugin(on, config); addMatchImageSnapshotPlugin(on, config);
} }

View File

@@ -14,7 +14,7 @@ interface CodeObject {
mermaid: CypressMermaidConfig; mermaid: CypressMermaidConfig;
} }
export const utf8ToB64 = (str: string): string => { const utf8ToB64 = (str: string): string => {
return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64'); return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
}; };
@@ -22,7 +22,7 @@ const batchId: string =
'mermaid-batch-' + 'mermaid-batch-' +
(Cypress.env('useAppli') (Cypress.env('useAppli')
? Date.now().toString() ? Date.now().toString()
: (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString())); : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
export const mermaidUrl = ( export const mermaidUrl = (
graphStr: string | string[], graphStr: string | string[],
@@ -61,7 +61,9 @@ export const imgSnapshotTest = (
sequence: { sequence: {
...(_options.sequence ?? {}), ...(_options.sequence ?? {}),
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier', noteFontFamily: _options.sequence?.noteFontFamily
? _options.sequence.noteFontFamily
: 'courier',
messageFontFamily: 'courier', messageFontFamily: 'courier',
}, },
}; };

View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts'; import { mermaidUrl } from '../../helpers/util.ts';
describe('XSS', () => { describe('XSS', () => {
it('should handle xss in tags', () => { it('should handle xss in tags', () => {
const str = const str =
@@ -141,37 +141,4 @@ describe('XSS', () => {
cy.wait(1000); cy.wait(1000);
cy.get('#the-malware').should('not.exist'); cy.get('#the-malware').should('not.exist');
}); });
it('should sanitize icon labels in architecture diagrams', () => {
const str = JSON.stringify({
code: `architecture-beta
group api(cloud)[API]
service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
it('should sanitize katex blocks', () => {
const str = JSON.stringify({
code: `sequenceDiagram
participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
A->>John: Hello John, how are you?`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
it('should sanitize labels', () => {
const str = JSON.stringify({
code: `erDiagram
"<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
}); });

View File

@@ -16,7 +16,7 @@ describe('Block diagram', () => {
it('BL2: should handle columns statement in sub-blocks', () => { it('BL2: should handle columns statement in sub-blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
id1["Hello"] id1["Hello"]
block block
columns 3 columns 3
@@ -32,7 +32,7 @@ describe('Block diagram', () => {
it('BL3: should align block widths and handle columns statement in sub-blocks', () => { it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
block block
columns 1 columns 1
id1 id1
@@ -48,7 +48,7 @@ describe('Block diagram', () => {
it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => { it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 1 columns 1
block block
columns 1 columns 1
@@ -68,7 +68,7 @@ describe('Block diagram', () => {
it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => { it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 1 columns 1
block block
id1 id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
it('BL6: should handle block arrows and spece statements', () => { it('BL6: should handle block arrows and spece statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
space:3 space:3
ida idb idc ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
it('BL7: should handle different types of edges', () => { it('BL7: should handle different types of edges', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
A space:5 A space:5
A --o B A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
it('BL8: should handle sub-blocks without columns statements', () => { it('BL8: should handle sub-blocks without columns statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 2 columns 2
C A B C A B
block block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
it('BL9: should handle edges from blocks in sub blocks to other blocks', () => { it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
B space B space
block block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
it('BL10: should handle edges from composite blocks', () => { it('BL10: should handle edges from composite blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
B space B space
block BL block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
it('BL11: should handle edges to composite blocks', () => { it('BL11: should handle edges to composite blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
B space B space
block BL block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
it('BL12: edges should handle labels', () => { it('BL12: edges should handle labels', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A A
space space
A -- "apa" --> E A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
it('BL13: should handle block arrows in different directions', () => { it('BL13: should handle block arrows in different directions', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
space blockArrowId1<["down"]>(down) space space blockArrowId1<["down"]>(down) space
blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left) blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
it('BL14: should style statements and class statements', () => { it('BL14: should style statements and class statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A A
B B
classDef blue fill:#66f,stroke:#333,stroke-width:2px; classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
it('BL15: width alignment - D and E should share available space', () => { it('BL15: width alignment - D and E should share available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
block block
D D
E E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
it('BL16: width alignment - C should be as wide as the composite block', () => { it('BL16: width alignment - C should be as wide as the composite block', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
block block
A("This is the text") A("This is the text")
B B
@@ -238,7 +238,7 @@ describe('Block diagram', () => {
it('BL17: width alignment - blocks should be equal in width', () => { it('BL17: width alignment - blocks should be equal in width', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A("This is the text") A("This is the text")
B B
C C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
it('BL18: block types 1 - square, rounded and circle', () => { it('BL18: block types 1 - square, rounded and circle', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A["square"] A["square"]
B("rounded") B("rounded")
C(("circle")) C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
it('BL19: block types 2 - odd, diamond and hexagon', () => { it('BL19: block types 2 - odd, diamond and hexagon', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A>"rect_left_inv_arrow"] A>"rect_left_inv_arrow"]
B{"diamond"} B{"diamond"}
C{{"hexagon"}} C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
it('BL20: block types 3 - stadium', () => { it('BL20: block types 3 - stadium', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A(["stadium"]) A(["stadium"])
`, `,
{} {}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => { it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A[/"lean right"/] A[/"lean right"/]
B[\"lean left"\] B[\"lean left"\]
C[/"trapezoid"\] C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
it('BL22: block types 1 - square, rounded and circle', () => { it('BL22: block types 1 - square, rounded and circle', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A["square"] A["square"]
B("rounded") B("rounded")
C(("circle")) C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
it('BL23: sizing - it should be possible to make a block wider', () => { it('BL23: sizing - it should be possible to make a block wider', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A("rounded"):2 A("rounded"):2
B:2 B:2
C C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
it('BL24: sizing - it should be possible to make a composite block wider', () => { it('BL24: sizing - it should be possible to make a composite block wider', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
block:2 block:2
A A
end end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
it('BL25: block in the middle with space on each side', () => { it('BL25: block in the middle with space on each side', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
space space
middle["In the middle"] middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
}); });
it('BL26: space and an edge', () => { it('BL26: space and an edge', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 5 columns 5
A space B A space B
A --x B A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
}); });
it('BL27: block sizes for regular blocks', () => { it('BL27: block sizes for regular blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
a["A wide one"] b:2 c:2 d a["A wide one"] b:2 c:2 d
`, `,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
}); });
it('BL28: composite block with a set width - f should use the available space', () => { it('BL28: composite block with a set width - f should use the available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {
it('BL29: composite block with a set width - f and g should split the available space', () => { it('BL29: composite block with a set width - f and g should split the available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
@@ -384,28 +384,4 @@ describe('Block diagram', () => {
{} {}
); );
}); });
it('BL30: block should overflow if too wide for columns', () => {
imgSnapshotTest(
`block-beta
columns 2
fit:2
overflow:3
short:1
also_overflow:2
`,
{}
);
});
it('BL31: edge without arrow syntax should render with no arrowheads', () => {
imgSnapshotTest(
`block-beta
a
b
a --- b
`,
{}
);
});
}); });

View File

@@ -495,34 +495,4 @@ describe('Class diagram', () => {
cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener'); cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
}); });
}); });
describe('Include char sequence "graph" in text (#6795)', () => {
it('has a label with char sequence "graph"', () => {
imgSnapshotTest(
`
classDiagram
class Person {
+String name
-Int id
#double age
+Text demographicProfile
}
`,
{ flowchart: { defaultRenderer: 'elk' } }
);
});
});
it('should handle backticks for namespace and class names', () => {
imgSnapshotTest(
`
classDiagram
namespace \`A::B\` {
class \`IPC::Sender\`
}
RenderProcessHost --|> \`IPC::Sender\`
`,
{}
);
});
}); });

View File

@@ -354,19 +354,4 @@ ORDER ||--|{ LINE-ITEM : contains
{ logLevel: 1 } { logLevel: 1 }
); );
}); });
describe('Include char sequence "graph" in text (#6795)', () => {
it('has a label with char sequence "graph"', () => {
imgSnapshotTest(
`
erDiagram
p[Photograph] {
varchar(12) jobId
date dateCreated
}
`,
{ flowchart: { defaultRenderer: 'elk' } }
);
});
});
}); });

View File

@@ -1053,21 +1053,6 @@ flowchart LR
}); });
}); });
}); });
it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart TB
a --> a1 & a2 & a3 & a4
b --> b1 & b2
b2 --> b3
b1 --> b4
`
);
});
}); });
describe('Title and arrow styling #4813', () => { describe('Title and arrow styling #4813', () => {

View File

@@ -1113,77 +1113,4 @@ end
); );
}); });
}); });
describe('Flowchart Node Shape Rendering', () => {
it('should render a stadium-shaped node', () => {
imgSnapshotTest(
`flowchart TB
A(["Start"]) --> n1["Untitled Node"]
A --> n2["Untitled Node"]
`,
{}
);
});
it('should render a diamond-shaped node using shape config', () => {
imgSnapshotTest(
`flowchart BT
n2["Untitled Node"] --> n1["Diamond"]
n1@{ shape: diam}
`,
{}
);
});
it('should render a rounded rectangle and a normal rectangle', () => {
imgSnapshotTest(
`flowchart BT
n2["Untitled Node"] --> n1["Rounded Rectangle"]
n3["Untitled Node"] --> n1
n1@{ shape: rounded}
n3@{ shape: rect}
`,
{}
);
});
});
it('6617: Per Link Curve Styling using edge Ids', () => {
imgSnapshotTest(
`flowchart TD
A e1@-->B e5@--> E
E e7@--> D
B e3@-->D
A e2@-->C e4@-->D
C e6@--> F
F e8@--> D
e1@{ curve: natural }
e2@{ curve: stepAfter }
e3@{ curve: monotoneY }
e4@{ curve: bumpY }
e5@{ curve: linear }
e6@{ curve: catmullRom }
e7@{ curve: cardinal }
`
);
});
describe('when rendering unsuported markdown', () => {
const graph = `flowchart TB
mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
subgraph subgraph1["\`How to fix **fix**\`"]
broken --> B["B"]
end
githost["Github, Gitlab, BitBucket, etc."]
githost2["\`Github, Gitlab, BitBucket, etc.\`"]
a["1."]
b["- x"]
`;
it('should render raw strings', () => {
imgSnapshotTest(graph);
});
it('should render raw strings with htmlLabels: false', () => {
imgSnapshotTest(graph, { htmlLabels: false });
});
});
}); });

View File

@@ -565,18 +565,6 @@ describe('Gantt diagram', () => {
); );
}); });
it('should render only the day when using dateFormat D', () => {
imgSnapshotTest(
`
gantt
title Test
dateFormat D
A :a, 1, 1d
`,
{}
);
});
// TODO: fix it // TODO: fix it
// //
// This test is skipped deliberately // This test is skipped deliberately
@@ -659,49 +647,6 @@ describe('Gantt diagram', () => {
); );
}); });
it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD HH:mm:ss
excludes 2025-07-07
section Section
A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
Another task:after a1, 20h
`,
{}
);
});
it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD HH:mm:ss
excludes weekends
weekend saturday
section Section
A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
Another task:after a1, 20h
`,
{}
);
});
it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD HH:mm:ss
excludes weekends
weekend friday
section Section
A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
Another task:after a1, 20h
`,
{}
);
});
it("should render when there's a semicolon in the title", () => { it("should render when there's a semicolon in the title", () => {
imgSnapshotTest( imgSnapshotTest(
` `

View File

@@ -246,22 +246,5 @@ Word!\`]
); );
}); });
}); });
describe('Include char sequence "graph" in text (#6795)', () => {
it('has a label with char sequence "graph"', () => {
imgSnapshotTest(
`
mindmap
root
Photograph
Waterfall
Landscape
Geography
Mountains
Rocks
`,
{ flowchart: { defaultRenderer: 'elk' } }
);
});
});
/* The end */ /* The end */
}); });

View File

@@ -1,7 +1,7 @@
import { imgSnapshotTest } from '../../helpers/util'; import { imgSnapshotTest } from '../../helpers/util';
describe('packet structure', () => { describe('packet structure', () => {
it('should render a simple packet-beta diagram', () => { it('should render a simple packet diagram', () => {
imgSnapshotTest( imgSnapshotTest(
`packet-beta `packet-beta
title Hello world title Hello world
@@ -10,18 +10,9 @@ describe('packet structure', () => {
); );
}); });
it('should render a simple packet diagram', () => {
imgSnapshotTest(
`packet
title Hello world
0-10: "hello"
`
);
});
it('should render a simple packet diagram without ranges', () => { it('should render a simple packet diagram without ranges', () => {
imgSnapshotTest( imgSnapshotTest(
`packet `packet-beta
0: "h" 0: "h"
1: "i" 1: "i"
` `
@@ -30,7 +21,7 @@ describe('packet structure', () => {
it('should render a complex packet diagram', () => { it('should render a complex packet diagram', () => {
imgSnapshotTest( imgSnapshotTest(
`packet `packet-beta
0-15: "Source Port" 0-15: "Source Port"
16-31: "Destination Port" 16-31: "Destination Port"
32-63: "Sequence Number" 32-63: "Sequence Number"
@@ -61,7 +52,7 @@ describe('packet structure', () => {
packet: packet:
showBits: false showBits: false
--- ---
packet packet-beta
0-15: "Source Port" 0-15: "Source Port"
16-31: "Destination Port" 16-31: "Destination Port"
32-63: "Sequence Number" 32-63: "Sequence Number"

View File

@@ -82,13 +82,4 @@ describe('pie chart', () => {
` `
); );
}); });
it('should render pie slices only for non-zero values but shows all legends', () => {
imgSnapshotTest(
` pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 1
`
);
});
}); });

View File

@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
describe('when given a linkColor', function () { describe('when given a linkColor', function () {
this.beforeAll(() => { this.beforeAll(() => {
cy.wrap( cy.wrap(
`sankey `sankey-beta
a,b,10 a,b,10
` `
).as('graph'); ).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
this.beforeAll(() => { this.beforeAll(() => {
cy.wrap( cy.wrap(
` `
sankey sankey-beta
a,b,8 a,b,8
b,c,8 b,c,8

View File

@@ -602,231 +602,6 @@ State1 --> [*]
-- --
55 55
} }
`,
{}
);
});
it('should render edge labels correctly', () => {
imgSnapshotTest(
`---
title: On The Way To Something Something DarkSide
config:
look: default
theme: default
---
stateDiagram-v2
state State1_____________
{
c0
}
state State2_____________
{
c1
}
state State3_____________
{
c7
}
state State4_____________
{
c2
}
state State5_____________
{
c3
}
state State6_____________
{
c4
}
state State7_____________
{
c5
}
state State8_____________
{
c6
}
[*] --> State1_____________
State1_____________ --> State2_____________ : Transition1_____
State2_____________ --> State4_____________ : Transition2_____
State2_____________ --> State3_____________ : Transition3_____
State3_____________ --> State2_____________
State4_____________ --> State2_____________ : Transition5_____
State4_____________ --> State5_____________ : Transition6_____
State5_____________ --> State6_____________ : Transition7_____
State6_____________ --> State4_____________ : Transition8_____
State2_____________ --> State7_____________ : Transition4_____
State4_____________ --> State7_____________ : Transition4_____
State5_____________ --> State7_____________ : Transition4_____
State6_____________ --> State7_____________ : Transition4_____
State7_____________ --> State1_____________ : Transition9_____
State5_____________ --> State8_____________ : Transition10____
State8_____________ --> State5_____________ : Transition11____
`,
{}
);
});
it('should render edge labels correctly with multiple transitions', () => {
imgSnapshotTest(
`---
title: Multiple Transitions
config:
look: default
theme: default
---
stateDiagram-v2
state State1_____________
{
c0
}
state State2_____________
{
c1
}
state State3_____________
{
c7
}
state State4_____________
{
c2
}
state State5_____________
{
c3
}
state State6_____________
{
c4
}
state State7_____________
{
c5
}
state State8_____________
{
c6
}
state State9_____________
{
c9
}
[*] --> State1_____________
State1_____________ --> State2_____________ : Transition1_____
State2_____________ --> State4_____________ : Transition2_____
State2_____________ --> State3_____________ : Transition3_____
State3_____________ --> State2_____________
State4_____________ --> State2_____________ : Transition5_____
State4_____________ --> State5_____________ : Transition6_____
State5_____________ --> State6_____________ : Transition7_____
State6_____________ --> State4_____________ : Transition8_____
State2_____________ --> State7_____________ : Transition4_____
State4_____________ --> State7_____________ : Transition4_____
State5_____________ --> State7_____________ : Transition4_____
State6_____________ --> State7_____________ : Transition4_____
State7_____________ --> State1_____________ : Transition9_____
State5_____________ --> State8_____________ : Transition10____
State8_____________ --> State5_____________ : Transition11____
State9_____________ --> State8_____________ : Transition12____
`,
{}
);
});
it('should render edge labels correctly with multiple states', () => {
imgSnapshotTest(
`---
title: Multiple States
config:
look: default
theme: default
---
stateDiagram-v2
state State1_____________
{
c0
}
state State2_____________
{
c1
}
state State3_____________
{
c7
}
state State4_____________
{
c2
}
state State5_____________
{
c3
}
state State6_____________
{
c4
}
state State7_____________
{
c5
}
state State8_____________
{
c6
}
state State9_____________
{
c9
}
state State10_____________
{
c10
}
[*] --> State1_____________
State1_____________ --> State2_____________ : Transition1_____
State2_____________ --> State3_____________ : Transition2_____
State3_____________ --> State4_____________ : Transition3_____
State4_____________ --> State5_____________ : Transition4_____
State5_____________ --> State6_____________ : Transition5_____
State6_____________ --> State7_____________ : Transition6_____
State7_____________ --> State8_____________ : Transition7_____
State8_____________ --> State9_____________ : Transition8_____
State9_____________ --> State10_____________ : Transition9_____
`, `,
{} {}
); );

View File

@@ -161,68 +161,4 @@ describe('Timeline diagram', () => {
{} {}
); );
}); });
it('11: should render timeline with many stacked events and proper timeline line length', () => {
imgSnapshotTest(
`timeline
title Medical Device Lifecycle
section Pre-Development
Quality Management System : Regulatory Compliance : Risk Management
section Development
Management Responsibility : Planning Activities : Human Resources
Resource Management : Management Reviews : Infrastructure
section Post-Development
Product Realization Activities : Planning Activities : Customer-related Processes
Post-Production Activities : Feedback : Complaints : Adverse Events
: Research and Development : Purchasing Activities
: Production Activities : Installation Activities
: Servicing Activities : Post-Market Surveillance
`,
{}
);
});
it('12: should render timeline with proper vertical line lengths for all columns', () => {
imgSnapshotTest(
`---
config:
theme: base
themeVariables:
fontFamily: Fira Sans
fontSize: 17px
cScale0: '#b3cde0'
cScale1: '#f49090'
cScale2: '#85d5b8'
---
timeline
title Medical Device Lifecycle
section Planning
Quality Management System (4): Regulatory Compliance (4.1.1)
: Risk Management (4.1.2)
Management Resposibility (5): Planning Activities (5.4)
: Management Reviews (5.6)
Resource Management (6): Human Resources (6.2)
: Infrastructure (6.3)
section Realization
Research and Development (7.3): RnD Planning (7.3.2)
: Inputs (7.3.3)
: Outputs (7.3.4)
: Review (7.3.5)
: Verification (7.3.6)
: Validation (7.3.7)
Purchasing (7.4): Purchasing Process (7.4.1)
: Purchasing Information (7.4.2)
Production (7.5): Production Activities (7.5.1)
: Production Feedback (8.2.1)
Installation (7.5.3): Installation Activities (7.5.3)
Servicing (7.5.4): Servicing Activities (7.5.4)
section Post-Production
Post-Market Activities (8): Feedback (8.2.1)
: Complaints (8.2.2)
: Adverse Events (8.2.3)
`,
{}
);
});
}); });

View File

@@ -1,382 +0,0 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Treemap Diagram', () => {
it('1: should render a basic treemap', () => {
imgSnapshotTest(
`treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it('2: should render a hierarchical treemap', () => {
imgSnapshotTest(
`treemap-beta
"Products"
"Electronics"
"Phones": 50
"Computers": 30
"Accessories": 20
"Clothing"
"Men's"
"Shirts": 10
"Pants": 15
"Women's"
"Dresses": 20
"Skirts": 10
`,
{}
);
});
it('3: should render a treemap with styling using classDef', () => {
imgSnapshotTest(
`treemap-beta
"Section 1"
"Leaf 1.1": 12
"Section 1.2":::class1
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20:::class1
"Leaf 2.2": 25
"Leaf 2.3": 12
classDef class1 fill:red,color:blue,stroke:#FFD600;
`,
{}
);
});
it('4: should handle long text that wraps', () => {
imgSnapshotTest(
`treemap-beta
"Main Category"
"This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
"Short item": 20
`,
{}
);
});
it('5: should render with a forest theme', () => {
imgSnapshotTest(
`---
config:
theme: forest
---
treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it('6: should handle multiple levels of nesting', () => {
imgSnapshotTest(
`treemap-beta
"Level 1"
"Level 2A"
"Level 3A": 10
"Level 3B": 15
"Level 2B"
"Level 3C": 20
"Level 3D"
"Level 4A": 5
"Level 4B": 5
`,
{}
);
});
it('7: should handle classDef with multiple styles', () => {
imgSnapshotTest(
`treemap-beta
"Main"
"A": 20
"B":::important
"B1": 10
"B2": 15
"C": 5:::secondary
classDef important fill:#f96,stroke:#333,stroke-width:2px;
classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
`,
{}
);
});
it('8: should handle dollar value formatting with thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$0,0"
---
treemap
"Budget"
"Operations"
"Salaries": 700000
"Equipment": 200000
"Supplies": 100000
"Marketing"
"Advertising": 400000
"Events": 100000
`,
{}
);
});
it('8a: should handle percentage formatting', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".1%"
---
treemap-beta
"Market Share"
"Company A": 0.35
"Company B": 0.25
"Company C": 0.15
"Others": 0.25
`,
{}
);
});
it('8b: should handle decimal formatting', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".2f"
---
treemap-beta
"Metrics"
"Conversion Rate": 0.0567
"Bounce Rate": 0.6723
"Click-through Rate": 0.1289
"Engagement": 0.4521
`,
{}
);
});
it('8c: should handle dollar sign with decimal places', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$.2f"
---
treemap-beta
"Product Prices"
"Basic": 19.99
"Standard": 49.99
"Premium": 99.99
"Enterprise": 199.99
`,
{}
);
});
it('8d: should handle dollar sign with thousands separator and decimal places', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$,.2f"
---
treemap-beta
"Revenue"
"Q1": 1250345.75
"Q2": 1645789.25
"Q3": 1845123.50
"Q4": 2145678.75
`,
{}
);
});
it('8e: should handle simple thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ","
---
treemap-beta
"User Counts"
"Active Users": 1250345
"New Signups": 45789
"Churned": 12350
"Converted": 78975
`,
{}
);
});
it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$,.0f"
---
treemap-beta
"Sales by Region"
"North": 1234567
"South": 7654321
"East": 4567890
"West": 9876543
`,
{}
);
});
it('8g: should handle scientific notation format', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".2e"
---
treemap-beta
"Scientific Values"
"Value 1": 1234567
"Value 2": 0.0000123
"Value 3": 1000000000
`,
{}
);
});
it('9: should handle a complex example with multiple features', () => {
imgSnapshotTest(
`---
config:
theme: dark
treemap:
valueFormat: "$0,0"
---
treemap-beta
"Company Budget"
"Engineering":::engineering
"Frontend": 300000
"Backend": 400000
"DevOps": 200000
"Marketing":::marketing
"Digital": 250000
"Print": 100000
"Events": 150000
"Sales":::sales
"Direct": 500000
"Channel": 300000
classDef engineering fill:#6b9bc3,stroke:#333;
classDef marketing fill:#c36b9b,stroke:#333;
classDef sales fill:#c3a66b,stroke:#333;
`,
{}
);
});
it('10: should render the example from documentation', () => {
imgSnapshotTest(
`
treemap-beta
"Section 1"
"Leaf 1.1": 12
"Section 1.2":::class1
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20:::class1
"Leaf 2.2": 25
"Leaf 2.3": 12
classDef class1 fill:red,color:blue,stroke:#FFD600;
`,
{}
);
});
it('11: should handle comments', () => {
imgSnapshotTest(
`
treemap-beta
%% This is a comment
"Category A"
"Item A1": 10
"Item A2": 20
%% Another comment
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
/*
it.skip('12: should render a treemap with title', () => {
imgSnapshotTest(
`
treemap-beta
title Treemap with Title
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it.skip('13: should render a treemap with accessibility attributes', () => {
imgSnapshotTest(
`
treemap-beta
accTitle: Accessible Treemap Title
accDescr: This is a description of the treemap for accessibility purposes
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it.skip('14: should render a treemap with title and accessibility attributes', () => {
imgSnapshotTest(
`
treemap
title Treemap with Title and Accessibility
accTitle: Accessible Treemap Title
accDescr: This is a description of the treemap for accessibility purposes
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
*/
});

View File

@@ -1,7 +1,7 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('XY Chart', () => { describe('XY Chart', () => {
it('should render the simplest possible xy-beta chart', () => { it('should render the simplest possible chart', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
@@ -10,19 +10,10 @@ describe('XY Chart', () => {
{} {}
); );
}); });
it('should render the simplest possible xy chart', () => {
imgSnapshotTest(
`
xychart
line [10, 30, 20]
`,
{}
);
});
it('Should render a complete chart', () => { it('Should render a complete chart', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -35,7 +26,7 @@ describe('XY Chart', () => {
it('Should render a chart without title', () => { it('Should render a chart without title', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -47,7 +38,7 @@ describe('XY Chart', () => {
it('y-axis title not required', () => { it('y-axis title not required', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis 4000 --> 11000 y-axis 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -59,7 +50,7 @@ describe('XY Chart', () => {
it('Should render a chart without y-axis with different range', () => { it('Should render a chart without y-axis with different range', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -70,7 +61,7 @@ describe('XY Chart', () => {
it('x axis title not required', () => { it('x axis title not required', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -81,7 +72,7 @@ describe('XY Chart', () => {
it('Multiple plots can be rendered', () => { it('Multiple plots can be rendered', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
line [23, 46, 77, 34] line [23, 46, 77, 34]
line [45, 32, 33, 12] line [45, 32, 33, 12]
bar [87, 54, 99, 85] bar [87, 54, 99, 85]
@@ -95,7 +86,7 @@ describe('XY Chart', () => {
it('Decimals and negative numbers are supported', () => { it('Decimals and negative numbers are supported', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
y-axis -2.4 --> 3.5 y-axis -2.4 --> 3.5
line [+1.3, .6, 2.4, -.34] line [+1.3, .6, 2.4, -.34]
`, `,
@@ -113,7 +104,7 @@ describe('XY Chart', () => {
height: 20 height: 20
plotReservedSpacePercent: 100 plotReservedSpacePercent: 100
--- ---
xychart xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`, `,
{} {}
@@ -139,7 +130,7 @@ describe('XY Chart', () => {
showTick: false showTick: false
showAxisLine: false showAxisLine: false
--- ---
xychart xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`, `,
{} {}
@@ -149,7 +140,7 @@ describe('XY Chart', () => {
imgSnapshotTest( imgSnapshotTest(
` `
%%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%%
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -190,7 +181,7 @@ describe('XY Chart', () => {
plotReservedSpacePercent: 60 plotReservedSpacePercent: 60
showDataLabel: true showDataLabel: true
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -211,7 +202,7 @@ describe('XY Chart', () => {
yAxis: yAxis:
showTitle: false showTitle: false
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -232,7 +223,7 @@ describe('XY Chart', () => {
yAxis: yAxis:
showLabel: false showLabel: false
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -253,7 +244,7 @@ describe('XY Chart', () => {
yAxis: yAxis:
showTick: false showTick: false
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -274,7 +265,7 @@ describe('XY Chart', () => {
yAxis: yAxis:
showAxisLine: false showAxisLine: false
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -303,7 +294,7 @@ describe('XY Chart', () => {
xAxisLineColor: "#87ceeb" xAxisLineColor: "#87ceeb"
plotColorPalette: "#008000, #faba63" plotColorPalette: "#008000, #faba63"
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -316,7 +307,7 @@ describe('XY Chart', () => {
it('should use the correct distances between data points', () => { it('should use the correct distances between data points', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
x-axis 0 --> 2 x-axis 0 --> 2
line [0, 1, 0, 1] line [0, 1, 0, 1]
bar [1, 0, 1, 0] bar [1, 0, 1, 0]
@@ -334,7 +325,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -353,7 +344,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -366,7 +357,7 @@ describe('XY Chart', () => {
it('should render vertical bar chart without labels by default', () => { it('should render vertical bar chart without labels by default', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -384,7 +375,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -402,7 +393,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart xychart-beta
title "Multiple Bar Plots" title "Multiple Bar Plots"
x-axis Categories [A, B, C] x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100 y-axis "Values" 0 --> 100
@@ -421,7 +412,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart xychart-beta
title "Multiple Bar Plots" title "Multiple Bar Plots"
x-axis Categories [A, B, C] x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100 y-axis "Values" 0 --> 100
@@ -439,7 +430,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart xychart-beta
title "Single Bar Chart" title "Single Bar Chart"
x-axis Categories [A] x-axis Categories [A]
y-axis "Value" 0 --> 100 y-axis "Value" 0 --> 100
@@ -458,7 +449,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart xychart-beta
title "Single Bar Chart" title "Single Bar Chart"
x-axis Categories [A] x-axis Categories [A]
y-axis "Value" 0 --> 100 y-axis "Value" 0 --> 100
@@ -476,7 +467,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart xychart-beta
title "Decimal and Negative Values" title "Decimal and Negative Values"
x-axis Categories [A, B, C] x-axis Categories [A, B, C]
y-axis -10 --> 10 y-axis -10 --> 10
@@ -495,7 +486,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart xychart-beta
title "Decimal and Negative Values" title "Decimal and Negative Values"
x-axis Categories [A, B, C] x-axis Categories [A, B, C]
y-axis -10 --> 10 y-axis -10 --> 10
@@ -513,7 +504,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan,b,c] x-axis Months [jan,b,c]
y-axis "Revenue (in $)" 4000 --> 12000 y-axis "Revenue (in $)" 4000 --> 12000
@@ -570,7 +561,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan,b,c] x-axis Months [jan,b,c]
y-axis "Revenue (in $)" 4000 --> 12000 y-axis "Revenue (in $)" 4000 --> 12000
@@ -624,7 +615,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s] x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
y-axis "Revenue (in $)" 4000 --> 12000 y-axis "Revenue (in $)" 4000 --> 12000
@@ -681,7 +672,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s] x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
y-axis "Revenue (in $)" 4000 --> 12000 y-axis "Revenue (in $)" 4000 --> 12000
@@ -735,7 +726,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan] x-axis Months [jan]
y-axis "Revenue (in $)" 3000 --> 12000 y-axis "Revenue (in $)" 3000 --> 12000
@@ -792,7 +783,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan] x-axis Months [jan]
y-axis "Revenue (in $)" 3000 --> 12000 y-axis "Revenue (in $)" 3000 --> 12000

View File

@@ -1,35 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h1>Pie chart demos</h1>
<pre class="mermaid">
pie title Default text position: Animal adoption
accTitle: simple pie char demo
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
"dogs" : -60.67
"rats" : 40.12
</pre>
<hr />
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
});
</script>
</body>
</html>

View File

@@ -32,26 +32,8 @@
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
rel="stylesheet"
/>
<style> <style>
.recursive-mermaid {
font-family: 'Recursive', sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-variation-settings:
'slnt' 0,
'CASL' 0,
'CRSV' 0.5,
'MONO' 0;
}
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background: #333; */ /* background: #333; */
@@ -63,9 +45,7 @@
h1 { h1 {
color: grey; color: grey;
} }
.mermaid {
border: 1px solid red;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -103,11 +83,6 @@
width: 100%; width: 100%;
} }
.class2 {
fill: red;
fill-opacity: 1;
}
/* tspan { /* tspan {
font-size: 6px !important; font-size: 6px !important;
} */ } */
@@ -131,79 +106,21 @@
<body> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
--- flowchart RL
config:
layout: elk
elk:
mergeEdges: false
forceNodeModelOrder: false
considerModelOrder: NONE
---
flowchart TB
a --> a1 & a2 & a3 & a4
b --> b1 & b2
b2 --> b3
b1 --> b4</pre
>
<pre id="diagram4" class="mermaid">
treemap
"Section 1"
"Leaf 1.1": 12
"Section 1.2":::class1
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20:::class1
"Leaf 2.2": 25
"Leaf 2.3": 12
classDef class1 fill:red,color:blue,stroke:#FFD600;
</pre
>
<pre id="diagram4" class="mermaid2">
---
config:
treemap:
valueFormat: '$0,0'
---
treemap
"Budget"
"Operations"
"Salaries": 7000
"Equipment": 2000
"Supplies": 1000
"Marketing"
"Advertising": 4000
"Events": 1000
</pre
>
<pre id="diagram4" class="mermaid">
treemap
title Accessible Treemap Title
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
AB["apa@apa@"] --> B(("`apa@apa`")) AB["apa@apa@"] --> B(("`apa@apa`"))
</pre> </pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart flowchart
D(("for D")) D(("for D"))
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <h1>below</h1>
<pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
A e1@==> B A e1@==> B
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
A e1@--> B A e1@--> B
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
@@ -336,7 +253,7 @@ flowchart LR
A{A} --> B & C A{A} --> B & C
</pre </pre
> >
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -523,7 +440,7 @@ kanban
alert('It worked'); alert('It worked');
} }
await mermaid.initialize({ await mermaid.initialize({
// theme: 'forest', // theme: 'base',
// theme: 'default', // theme: 'default',
// theme: 'forest', // theme: 'forest',
// handDrawnSeed: 12, // handDrawnSeed: 12,
@@ -534,7 +451,11 @@ kanban
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
fontFamily: "'Recursive', sans-serif",
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
// fontFamily: 'courier',
fontFamily: 'arial',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',

View File

@@ -41,6 +41,10 @@ graph TB
const { svg } = await mermaid.render('d22', value); const { svg } = await mermaid.render('d22', value);
console.log(svg); console.log(svg);
el.innerHTML = 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));
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
</script> </script>
</body> </body>
</html> </html>

View File

@@ -182,7 +182,7 @@ const contentLoadedApi = async function () {
for (let i = 0; i < numCodes; i++) { for (let i = 0; i < numCodes; i++) {
const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]); const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
div.innerHTML = svg; div.innerHTML = svg;
bindFunctions?.(div); bindFunctions(div);
} }
} else { } else {
const div = document.createElement('div'); const div = document.createElement('div');
@@ -194,7 +194,7 @@ const contentLoadedApi = async function () {
const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div); const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
div.innerHTML = svg; div.innerHTML = svg;
console.log(div.innerHTML); console.log(div.innerHTML);
bindFunctions?.(div); bindFunctions(div);
} }
} }
}; };

View File

@@ -2,219 +2,215 @@
"durations": [ "durations": [
{ {
"spec": "cypress/integration/other/configuration.spec.js", "spec": "cypress/integration/other/configuration.spec.js",
"duration": 6297 "duration": 6130
}, },
{ {
"spec": "cypress/integration/other/external-diagrams.spec.js", "spec": "cypress/integration/other/external-diagrams.spec.js",
"duration": 2187 "duration": 1974
}, },
{ {
"spec": "cypress/integration/other/ghsa.spec.js", "spec": "cypress/integration/other/ghsa.spec.js",
"duration": 3509 "duration": 3308
}, },
{ {
"spec": "cypress/integration/other/iife.spec.js", "spec": "cypress/integration/other/iife.spec.js",
"duration": 2218 "duration": 1877
}, },
{ {
"spec": "cypress/integration/other/interaction.spec.js", "spec": "cypress/integration/other/interaction.spec.js",
"duration": 12104 "duration": 10902
}, },
{ {
"spec": "cypress/integration/other/rerender.spec.js", "spec": "cypress/integration/other/rerender.spec.js",
"duration": 2151 "duration": 1836
}, },
{ {
"spec": "cypress/integration/other/xss.spec.js", "spec": "cypress/integration/other/xss.spec.js",
"duration": 33064 "duration": 26467
}, },
{ {
"spec": "cypress/integration/rendering/appli.spec.js", "spec": "cypress/integration/rendering/appli.spec.js",
"duration": 3488 "duration": 3129
}, },
{ {
"spec": "cypress/integration/rendering/architecture.spec.ts", "spec": "cypress/integration/rendering/architecture.spec.ts",
"duration": 106 "duration": 104
}, },
{ {
"spec": "cypress/integration/rendering/block.spec.js", "spec": "cypress/integration/rendering/block.spec.js",
"duration": 18317 "duration": 16230
}, },
{ {
"spec": "cypress/integration/rendering/c4.spec.js", "spec": "cypress/integration/rendering/c4.spec.js",
"duration": 5592 "duration": 5231
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js", "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
"duration": 39358 "duration": 38113
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js", "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
"duration": 37160 "duration": 36423
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js", "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
"duration": 23660 "duration": 22509
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js", "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
"duration": 36866 "duration": 34933
}, },
{ {
"spec": "cypress/integration/rendering/classDiagram.spec.js", "spec": "cypress/integration/rendering/classDiagram.spec.js",
"duration": 17334 "duration": 14681
}, },
{ {
"spec": "cypress/integration/rendering/conf-and-directives.spec.js", "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
"duration": 9871 "duration": 8877
}, },
{ {
"spec": "cypress/integration/rendering/current.spec.js", "spec": "cypress/integration/rendering/current.spec.js",
"duration": 2833 "duration": 2517
}, },
{ {
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js", "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
"duration": 85321 "duration": 81226
}, },
{ {
"spec": "cypress/integration/rendering/erDiagram.spec.js", "spec": "cypress/integration/rendering/erDiagram.spec.js",
"duration": 15673 "duration": 14211
}, },
{ {
"spec": "cypress/integration/rendering/errorDiagram.spec.js", "spec": "cypress/integration/rendering/errorDiagram.spec.js",
"duration": 3724 "duration": 3355
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-elk.spec.js", "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
"duration": 41178 "duration": 38857
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js", "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
"duration": 29966 "duration": 28570
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-icon.spec.js", "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
"duration": 7689 "duration": 6902
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts", "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
"duration": 24709 "duration": 23075
}, },
{ {
"spec": "cypress/integration/rendering/flowchart-v2.spec.js", "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
"duration": 45565 "duration": 40514
}, },
{ {
"spec": "cypress/integration/rendering/flowchart.spec.js", "spec": "cypress/integration/rendering/flowchart.spec.js",
"duration": 31144 "duration": 28611
}, },
{ {
"spec": "cypress/integration/rendering/gantt.spec.js", "spec": "cypress/integration/rendering/gantt.spec.js",
"duration": 20808 "duration": 16605
}, },
{ {
"spec": "cypress/integration/rendering/gitGraph.spec.js", "spec": "cypress/integration/rendering/gitGraph.spec.js",
"duration": 49985 "duration": 47636
}, },
{ {
"spec": "cypress/integration/rendering/iconShape.spec.ts", "spec": "cypress/integration/rendering/iconShape.spec.ts",
"duration": 273272 "duration": 262219
}, },
{ {
"spec": "cypress/integration/rendering/imageShape.spec.ts", "spec": "cypress/integration/rendering/imageShape.spec.ts",
"duration": 55880 "duration": 54111
}, },
{ {
"spec": "cypress/integration/rendering/info.spec.ts", "spec": "cypress/integration/rendering/info.spec.ts",
"duration": 3271 "duration": 3006
}, },
{ {
"spec": "cypress/integration/rendering/journey.spec.js", "spec": "cypress/integration/rendering/journey.spec.js",
"duration": 7293 "duration": 6858
}, },
{ {
"spec": "cypress/integration/rendering/kanban.spec.ts", "spec": "cypress/integration/rendering/kanban.spec.ts",
"duration": 7861 "duration": 7281
}, },
{ {
"spec": "cypress/integration/rendering/katex.spec.js", "spec": "cypress/integration/rendering/katex.spec.js",
"duration": 3922 "duration": 3579
}, },
{ {
"spec": "cypress/integration/rendering/marker_unique_id.spec.js", "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
"duration": 2726 "duration": 2448
}, },
{ {
"spec": "cypress/integration/rendering/mindmap.spec.ts", "spec": "cypress/integration/rendering/mindmap.spec.ts",
"duration": 11670 "duration": 10618
}, },
{ {
"spec": "cypress/integration/rendering/newShapes.spec.ts", "spec": "cypress/integration/rendering/newShapes.spec.ts",
"duration": 146020 "duration": 140874
}, },
{ {
"spec": "cypress/integration/rendering/oldShapes.spec.ts", "spec": "cypress/integration/rendering/oldShapes.spec.ts",
"duration": 114244 "duration": 108015
}, },
{ {
"spec": "cypress/integration/rendering/packet.spec.ts", "spec": "cypress/integration/rendering/packet.spec.ts",
"duration": 5036 "duration": 4241
}, },
{ {
"spec": "cypress/integration/rendering/pie.spec.ts", "spec": "cypress/integration/rendering/pie.spec.ts",
"duration": 6545 "duration": 5645
}, },
{ {
"spec": "cypress/integration/rendering/quadrantChart.spec.js", "spec": "cypress/integration/rendering/quadrantChart.spec.js",
"duration": 9097 "duration": 8524
}, },
{ {
"spec": "cypress/integration/rendering/radar.spec.js", "spec": "cypress/integration/rendering/radar.spec.js",
"duration": 5676 "duration": 5203
}, },
{ {
"spec": "cypress/integration/rendering/requirement.spec.js", "spec": "cypress/integration/rendering/requirement.spec.js",
"duration": 2795 "duration": 2635
}, },
{ {
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js", "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
"duration": 51660 "duration": 50512
}, },
{ {
"spec": "cypress/integration/rendering/sankey.spec.ts", "spec": "cypress/integration/rendering/sankey.spec.ts",
"duration": 6957 "duration": 6692
}, },
{ {
"spec": "cypress/integration/rendering/sequencediagram.spec.js", "spec": "cypress/integration/rendering/sequencediagram.spec.js",
"duration": 36026 "duration": 34559
}, },
{ {
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js", "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
"duration": 29551 "duration": 24421
}, },
{ {
"spec": "cypress/integration/rendering/stateDiagram.spec.js", "spec": "cypress/integration/rendering/stateDiagram.spec.js",
"duration": 17364 "duration": 15316
}, },
{ {
"spec": "cypress/integration/rendering/theme.spec.js", "spec": "cypress/integration/rendering/theme.spec.js",
"duration": 30209 "duration": 28240
}, },
{ {
"spec": "cypress/integration/rendering/timeline.spec.ts", "spec": "cypress/integration/rendering/timeline.spec.ts",
"duration": 8699 "duration": 6808
},
{
"spec": "cypress/integration/rendering/treemap.spec.ts",
"duration": 12168
}, },
{ {
"spec": "cypress/integration/rendering/xyChart.spec.js", "spec": "cypress/integration/rendering/xyChart.spec.js",
"duration": 21453 "duration": 19359
}, },
{ {
"spec": "cypress/integration/rendering/zenuml.spec.js", "spec": "cypress/integration/rendering/zenuml.spec.js",
"duration": 3577 "duration": 3164
} }
] ]
} }

31
debug-edge-parsing.js Normal file
View File

@@ -0,0 +1,31 @@
import { FlowDB } from './packages/mermaid/src/diagrams/flowchart/flowDb.ts';
import flow from './packages/mermaid/src/diagrams/flowchart/parser/flowParserAdapter.ts';
// Set up the test environment
flow.yy = new FlowDB();
flow.yy.clear();
console.log('=== Testing basic edge parsing ===');
console.log('Input: "graph TD;A-->B;"');
try {
const result = flow.parse('graph TD;A-->B;');
console.log('Parse result:', result);
const vertices = flow.yy.getVertices();
const edges = flow.yy.getEdges();
console.log('Vertices:', vertices);
console.log('Vertices size:', vertices.size);
console.log('Vertices keys:', Array.from(vertices.keys()));
console.log('Edges:', edges);
console.log('Edges length:', edges.length);
// Check specific vertices
console.log('Vertex A:', vertices.get('A'));
console.log('Vertex B:', vertices.get('B'));
} catch (error) {
console.error('Parse error:', error);
console.error('Error stack:', error.stack);
}

27
debug-interpolate.js Normal file
View File

@@ -0,0 +1,27 @@
// Debug script for interpolate functionality
import { FlowDB } from './packages/mermaid/src/diagrams/flowchart/flowDb.js';
import flow from './packages/mermaid/src/diagrams/flowchart/parser/flowParserAdapter.js';
// Set up test
flow.yy = new FlowDB();
flow.yy.clear();
console.log('Testing interpolate functionality...');
try {
const input = 'graph TD\nA-->B\nlinkStyle default interpolate basis';
console.log('Input:', input);
const result = flow.parse(input);
console.log('Parse result:', result);
const edges = flow.yy.getEdges();
console.log('Edges:', edges);
console.log('edges.defaultInterpolate:', edges.defaultInterpolate);
// Check if updateLinkInterpolate method exists
console.log('updateLinkInterpolate method exists:', typeof flow.yy.updateLinkInterpolate);
} catch (error) {
console.error('Error:', error);
}

View File

@@ -10,7 +10,7 @@
<body> <body>
<h1>Block diagram demos</h1> <h1>Block diagram demos</h1>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
columns 1 columns 1
db(("DB")) db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
style B fill:#f9F,stroke:#333,stroke-width:4px style B fill:#f9F,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
A1["square"] A1["square"]
B1("rounded") B1("rounded")
C1(("circle")) C1(("circle"))
@@ -36,7 +36,7 @@ block
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
A1(["stadium"]) A1(["stadium"])
A2[["subroutine"]] A2[["subroutine"]]
B1[("cylinder")] B1[("cylinder")]
@@ -48,7 +48,7 @@ block
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
block:e:4 block:e:4
columns 2 columns 2
f f
@@ -57,7 +57,7 @@ block
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
block:e:4 block:e:4
columns 2 columns 2
f f
@@ -67,7 +67,7 @@ block
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
@@ -80,7 +80,7 @@ block
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
columns 4 columns 4
a b c d a b c d
block:e:4 block:e:4
@@ -97,19 +97,19 @@ flowchart LR
X-- "a label" -->z X-- "a label" -->z
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
columns 5 columns 5
A space B A space B
A --x B A --x B
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
columns 3 columns 3
a["A wide one"] b:2 c:2 d a["A wide one"] b:2 c:2 d
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
columns 3 columns 3
a b c a b c
e:3 e:3
@@ -117,7 +117,7 @@ columns 3
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block block-beta
A1:3 A1:3
A2:1 A2:1

View File

@@ -4,7 +4,7 @@
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/> />
<link <link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

View File

@@ -17,7 +17,7 @@
<div class="diagrams"> <div class="diagrams">
<pre class="mermaid"> <pre class="mermaid">
packet packet-beta
0-15: "Source Port" 0-15: "Source Port"
16-31: "Destination Port" 16-31: "Destination Port"
32-63: "Sequence Number" 32-63: "Sequence Number"
@@ -44,7 +44,7 @@
packet: packet:
showBits: false showBits: false
--- ---
packet packet-beta
0-15: "Source Port" 0-15: "Source Port"
16-31: "Destination Port" 16-31: "Destination Port"
32-63: "Sequence Number" 32-63: "Sequence Number"
@@ -70,7 +70,7 @@
config: config:
theme: forest theme: forest
--- ---
packet packet-beta
title Forest theme title Forest theme
0-15: "Source Port" 0-15: "Source Port"
16-31: "Destination Port" 16-31: "Destination Port"
@@ -97,7 +97,7 @@
config: config:
theme: dark theme: dark
--- ---
packet packet-beta
title Dark theme title Dark theme
0-15: "Source Port" 0-15: "Source Port"
16-31: "Destination Port" 16-31: "Destination Port"

View File

@@ -20,14 +20,12 @@
width: 800 width: 800
nodeAlignment: left nodeAlignment: left
--- ---
sankey sankey-beta
a,b,8 Revenue,Expenses,10
b,c,8 Revenue,Profit,10
c,d,8 Expenses,Manufacturing,5
d,e,8 Expenses,Tax,3
Expenses,Research,2
x,c,4
c,y,4
</pre> </pre>
<h2>Energy flow</h2> <h2>Energy flow</h2>
@@ -42,7 +40,7 @@
linkColor: gradient linkColor: gradient
nodeAlignment: justify nodeAlignment: justify
--- ---
sankey sankey-beta
Agricultural 'waste',Bio-conversion,124.729 Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597 Bio-conversion,Liquid,0.597

View File

@@ -23,23 +23,6 @@
1940 : fourth step : fifth step 1940 : fourth step : fifth step
</pre> </pre>
<h2>Medical Device Lifecycle Timeline</h2>
<pre class="mermaid">
timeline
title Medical Device Lifecycle
section Planning
Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
Management Responsibility (5) : Planning Activities (5.2) : Human Resources (6.2) : RnD Planning (7.3.2) : Purchasing Process (7.4.1) : Production Activities (7.5.1) : Installation Activities (7.5.3) : Servicing Activities (7.5.4)
section Realization
Research and Development (7.3) : Inputs (7.3.3) : Outputs (7.3.4) : Review (7.3.5) : Verification (7.3.6) : Validation (7.3.7)
Purchasing (7.4) : Purchasing Information (7.4.2) : Production Feedback (8.2.1)
Production (7.5) : Production Feedback (8.2.1)
Installation (7.5.3) : Installation Activities (7.5.3)
Servicing (7.5.4) : Servicing Activities (7.5.4)
section Post-Production
Post-Market Activities (8) : Feedback (8.2.1) : Complaints (8.2.2) : Adverse Events (8.2.3)
</pre>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({

View File

@@ -1,75 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mermaid Treemap Diagram Demo</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0 auto;
max-width: 900px;
padding: 20px;
}
.mermaid {
margin: 30px 0;
}
h1,
h2 {
color: #333;
}
pre {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Treemap Diagram Demo</h1>
<p>This is a demo of the new treemap diagram type in Mermaid.</p>
<h2>Basic Treemap Example</h2>
<pre class="mermaid">
treemap
"Root"
"Branch 1"
"Leaf 1.1": 10
"Leaf 1.2": 15
"Branch 2"
"Branch 2.1"
"Leaf 2.1.1": 20
"Leaf 2.1.2": 25
"Leaf 2.2": 25
"Leaf 2.3": 30
</pre>
<h2>Technology Stack Treemap Example</h2>
<pre class="mermaid">
treemap
"Technology Stack"
"Frontend"
"React": 35
"CSS": 15
"HTML": 10
"Backend"
"Node.js": 25
"Express": 10
"MongoDB": 15
"DevOps"
"Docker": 10
"Kubernetes": 15
"CI/CD": 5
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 1,
securityLevel: 'loose',
});
</script>
</body>
</html>

View File

@@ -16,7 +16,7 @@
<body> <body>
<h1>XY Charts demos</h1> <h1>XY Charts demos</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart xychart-beta
title "Sales Revenue (in $)" title "Sales Revenue (in $)"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
<hr /> <hr />
<h1>XY Charts horizontal</h1> <h1>XY Charts horizontal</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart horizontal xychart-beta horizontal
title "Basic xychart" title "Basic xychart"
x-axis "this is x axis" [category1, "category 2", category3, category4] x-axis "this is x axis" [category1, "category 2", category3, category4]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
<hr /> <hr />
<h1>XY Charts only lines and bar</h1> <h1>XY Charts only lines and bar</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart xychart-beta
line [23, 46, 77, 34] line [23, 46, 77, 34]
line [45, 32, 33, 12] line [45, 32, 33, 12]
line [87, 54, 99, 85] line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
<hr /> <hr />
<h1>XY Charts with +ve and -ve numbers</h1> <h1>XY Charts with +ve and -ve numbers</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart xychart-beta
line [+1.3, .6, 2.4, -.34] line [+1.3, .6, 2.4, -.34]
</pre> </pre>
<h1>XY Charts Bar with multiple category</h1> <h1>XY Charts Bar with multiple category</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart xychart-beta
title "Basic xychart with many categories" title "Basic xychart with many categories"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@
<h1>XY Charts line with multiple category</h1> <h1>XY Charts line with multiple category</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart xychart-beta
title "Line chart with many category" title "Line chart with many category"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@
<h1>XY Charts category with large text</h1> <h1>XY Charts category with large text</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart xychart-beta
title "Basic xychart with many categories with category overlap" title "Basic xychart with many categories with category overlap"
x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7] x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
height: 20 height: 20
plotReservedSpacePercent: 100 plotReservedSpacePercent: 100
--- ---
xychart xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre> </pre>
@@ -103,7 +103,7 @@ config:
height: 20 height: 20
plotReservedSpacePercent: 100 plotReservedSpacePercent: 100
--- ---
xychart xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre> </pre>
@@ -136,7 +136,7 @@ config:
chartOrientation: horizontal chartOrientation: horizontal
plotReservedSpacePercent: 60 plotReservedSpacePercent: 60
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -162,7 +162,7 @@ config:
xAxisLineColor: "#87ceeb" xAxisLineColor: "#87ceeb"
plotColorPalette: "#008000, #faba63" plotColorPalette: "#008000, #faba63"
--- ---
xychart xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000

View File

@@ -301,7 +301,7 @@ If you are adding a feature, you will definitely need to add tests. Depending on
Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run. Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run.
Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.) Unit tests are mandatory for all code except the renderers. (The renderers are tested with integration tests.)
We use [Vitest](https://vitest.dev) to run unit tests. We use [Vitest](https://vitest.dev) to run unit tests.
@@ -327,30 +327,6 @@ When using Docker prepend your command with `./run`:
./run pnpm test ./run pnpm test
``` ```
##### Testing the DOM
One can use `jsdomIt` to test any part of Mermaid that interacts with the DOM, as long as it is not related to the layout.
The function `jsdomIt` ([developed in utils.ts](../../tests/util.ts)) overrides `it` from `vitest`, and creates a pseudo-browser environment that works almost like the real deal for the duration of the test. It uses JSDOM to create a DOM, and adds objects `window` and `document` to `global` to mock the browser environment.
> \[!NOTE]
> The layout cannot work in `jsdomIt` tests because JSDOM has no rendering engine, hence the pseudo-browser environment.
Example :
```typescript
import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
jsdomIt('should add element "thing" in the SVG', ({ svg }) => {
// Code in this block runs in a pseudo-browser environment
addThing(svg); // The svg item is the D3 selection of the SVG node
const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API
expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG
});
```
They can be used to test any method that interacts with the DOM, including for testing renderers. For renderers, additional integration testing is necessary to test the layout though.
#### Integration / End-to-End (E2E) Tests #### Integration / End-to-End (E2E) Tests
These test the rendering and visual appearance of the diagrams. These test the rendering and visual appearance of the diagrams.

View File

@@ -111,13 +111,3 @@ const themes = {
``` ```
The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups. The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
## Examples
The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

View File

@@ -12,4 +12,4 @@
> `const` **configKeys**: `Set`<`string`> > `const` **configKeys**: `Set`<`string`>
Defined in: [packages/mermaid/src/defaultConfig.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L292) Defined in: [packages/mermaid/src/defaultConfig.ts:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278)

View File

@@ -10,7 +10,7 @@
# Interface: ExternalDiagramDefinition # Interface: ExternalDiagramDefinition
Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94) Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
## Properties ## Properties
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/me
> **detector**: `DiagramDetector` > **detector**: `DiagramDetector`
Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96) Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
--- ---
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me
> **id**: `string` > **id**: `string`
Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95) Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
--- ---
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/me
> **loader**: `DiagramLoader` > **loader**: `DiagramLoader`
Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97) Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)

View File

@@ -10,7 +10,7 @@
# Interface: Mermaid # Interface: Mermaid
Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429) Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
## Properties ## Properties
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/
> **contentLoaded**: () => `void` > **contentLoaded**: () => `void`
Defined in: [packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447) Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
\##contentLoaded Callback function that is called when page is loaded. This functions fetches \##contentLoaded Callback function that is called when page is loaded. This functions fetches
configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -34,7 +34,7 @@ page.
> **detectType**: (`text`, `config`?) => `string` > **detectType**: (`text`, `config`?) => `string`
Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449) Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
Detects the type of the graph text. Detects the type of the graph text.
@@ -86,28 +86,11 @@ A graph definition key
--- ---
### getRegisteredDiagramsMetadata()
> **getRegisteredDiagramsMetadata**: () => `Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
Defined in: [packages/mermaid/src/mermaid.ts:451](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L451)
Gets the metadata for all registered diagrams.
Currently only the id is returned.
#### Returns
`Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
An array of objects with the id of the diagram.
---
### ~~init()~~ ### ~~init()~~
> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`> > **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442) Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
## init ## init
@@ -155,7 +138,7 @@ Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
> **initialize**: (`config`) => `void` > **initialize**: (`config`) => `void`
Defined in: [packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446) Defined in: [packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
Used to set configurations for mermaid. Used to set configurations for mermaid.
This function should be called before the run function. This function should be called before the run function.
@@ -178,7 +161,7 @@ Configuration object for mermaid.
> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }> > **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) Defined in: [packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
**`Internal`** **`Internal`**
@@ -192,7 +175,7 @@ Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [o
> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)> > **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) Defined in: [packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
Parse the text and validate the syntax. Parse the text and validate the syntax.
@@ -260,7 +243,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
> `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md) > `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md)
Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
--- ---
@@ -268,7 +251,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/
> **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`> > **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`>
Defined in: [packages/mermaid/src/mermaid.ts:445](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L445) Defined in: [packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
Used to register external diagram types. Used to register external diagram types.
@@ -298,7 +281,7 @@ If opts.lazyLoad is false, the diagrams will be loaded immediately.
> **registerIconPacks**: (`iconLoaders`) => `void` > **registerIconPacks**: (`iconLoaders`) => `void`
Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L450) Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
#### Parameters #### Parameters
@@ -316,7 +299,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/
> **registerLayoutLoaders**: (`loaders`) => `void` > **registerLayoutLoaders**: (`loaders`) => `void`
Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L444) Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
#### Parameters #### Parameters
@@ -334,7 +317,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)> > **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438) Defined in: [packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
#### Parameters #### Parameters
@@ -366,7 +349,7 @@ Deprecated for external use.
> **run**: (`options`) => `Promise`<`void`> > **run**: (`options`) => `Promise`<`void`>
Defined in: [packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443) Defined in: [packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
## run ## run
@@ -410,7 +393,7 @@ Optional runtime configs
> **setParseErrorHandler**: (`parseErrorHandler`) => `void` > **setParseErrorHandler**: (`parseErrorHandler`) => `void`
Defined in: [packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448) Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
## setParseErrorHandler Alternative to directly setting parseError using: ## setParseErrorHandler Alternative to directly setting parseError using:
@@ -441,4 +424,4 @@ New parseError() callback.
> **startOnLoad**: `boolean` > **startOnLoad**: `boolean`
Defined in: [packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) Defined in: [packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)

View File

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid-
> `optional` **altFontFamily**: `string` > `optional` **altFontFamily**: `string`
Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132) Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
--- ---
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid
> `optional` **architecture**: `ArchitectureDiagramConfig` > `optional` **architecture**: `ArchitectureDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204) Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
--- ---
@@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid
> `optional` **arrowMarkerAbsolute**: `boolean` > `optional` **arrowMarkerAbsolute**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151) Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
Controls whether or arrow markers in html code are absolute paths or anchors. Controls whether or arrow markers in html code are absolute paths or anchors.
This matters if you are using base tag settings. This matters if you are using base tag settings.
@@ -45,7 +45,7 @@ This matters if you are using base tag settings.
> `optional` **block**: `BlockDiagramConfig` > `optional` **block**: `BlockDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211) Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
--- ---
@@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid
> `optional` **c4**: `C4DiagramConfig` > `optional` **c4**: `C4DiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208) Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
--- ---
@@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid
> `optional` **class**: `ClassDiagramConfig` > `optional` **class**: `ClassDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197) Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
--- ---
@@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid
> `optional` **darkMode**: `boolean` > `optional` **darkMode**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123) Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
--- ---
@@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid
> `optional` **deterministicIds**: `boolean` > `optional` **deterministicIds**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184) Defined in: [packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
This option controls if the generated ids of nodes in the SVG are This option controls if the generated ids of nodes in the SVG are
generated randomly or based on a seed. generated randomly or based on a seed.
@@ -93,7 +93,7 @@ should not change unless content is changed.
> `optional` **deterministicIDSeed**: `string` > `optional` **deterministicIDSeed**: `string`
Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) Defined in: [packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
This option is the optional seed for deterministic ids. This option is the optional seed for deterministic ids.
If set to `undefined` but deterministicIds is `true`, a simple number iterator is used. If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
@@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string.
> `optional` **dompurifyConfig**: `Config` > `optional` **dompurifyConfig**: `Config`
Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213) Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
--- ---
@@ -115,24 +115,12 @@ Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid
Defined in: [packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91) Defined in: [packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
#### considerModelOrder?
> `optional` **considerModelOrder**: `"NONE"` | `"NODES_AND_EDGES"` | `"PREFER_EDGES"` | `"PREFER_NODES"`
Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
#### cycleBreakingStrategy? #### cycleBreakingStrategy?
> `optional` **cycleBreakingStrategy**: `"GREEDY"` | `"DEPTH_FIRST"` | `"INTERACTIVE"` | `"MODEL_ORDER"` | `"GREEDY_MODEL_ORDER"` > `optional` **cycleBreakingStrategy**: `"GREEDY"` | `"DEPTH_FIRST"` | `"INTERACTIVE"` | `"MODEL_ORDER"` | `"GREEDY_MODEL_ORDER"`
This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops. This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
#### forceNodeModelOrder?
> `optional` **forceNodeModelOrder**: `boolean`
The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
#### mergeEdges? #### mergeEdges?
> `optional` **mergeEdges**: `boolean` > `optional` **mergeEdges**: `boolean`
@@ -151,7 +139,7 @@ Elk specific option affecting how nodes are placed.
> `optional` **er**: `ErDiagramConfig` > `optional` **er**: `ErDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
--- ---
@@ -159,7 +147,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid
> `optional` **flowchart**: `FlowchartDiagramConfig` > `optional` **flowchart**: `FlowchartDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192) Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
--- ---
@@ -167,7 +155,7 @@ Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid
> `optional` **fontFamily**: `string` > `optional` **fontFamily**: `string`
Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131) Defined in: [packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
Specifies the font to be used in the rendered diagrams. Specifies the font to be used in the rendered diagrams.
Can be any possible CSS `font-family`. Can be any possible CSS `font-family`.
@@ -179,7 +167,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
> `optional` **fontSize**: `number` > `optional` **fontSize**: `number`
Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215) Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
--- ---
@@ -187,7 +175,7 @@ Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid
> `optional` **forceLegacyMathML**: `boolean` > `optional` **forceLegacyMathML**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173) Defined in: [packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
fonts and browser's MathML implementation, this option is recommended if consistent rendering is important. fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
@@ -199,7 +187,7 @@ If set to true, ignores legacyMathML.
> `optional` **gantt**: `GanttDiagramConfig` > `optional` **gantt**: `GanttDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194) Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
--- ---
@@ -207,7 +195,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid
> `optional` **gitGraph**: `GitGraphDiagramConfig` > `optional` **gitGraph**: `GitGraphDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207) Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
--- ---
@@ -225,7 +213,7 @@ Defines the seed to be used when using handDrawn look. This is important for the
> `optional` **htmlLabels**: `boolean` > `optional` **htmlLabels**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124) Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
--- ---
@@ -233,7 +221,7 @@ Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid
> `optional` **journey**: `JourneyDiagramConfig` > `optional` **journey**: `JourneyDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195) Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
--- ---
@@ -241,7 +229,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid
> `optional` **kanban**: `KanbanDiagramConfig` > `optional` **kanban**: `KanbanDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206) Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
--- ---
@@ -259,7 +247,7 @@ Defines which layout algorithm to use for rendering the diagram.
> `optional` **legacyMathML**: `boolean` > `optional` **legacyMathML**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166) Defined in: [packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
without their own MathML implementation. If this option is disabled and MathML is not supported, the math without their own MathML implementation. If this option is disabled and MathML is not supported, the math
@@ -272,7 +260,7 @@ fall back to legacy rendering for KaTeX.
> `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5` > `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
Defined in: [packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137) Defined in: [packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
This option decides the amount of logging to be used by mermaid. This option decides the amount of logging to be used by mermaid.
@@ -292,7 +280,7 @@ Defines which main look to use for the diagram.
> `optional` **markdownAutoWrap**: `boolean` > `optional` **markdownAutoWrap**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216) Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
--- ---
@@ -320,7 +308,7 @@ The maximum allowed size of the users text diagram
> `optional` **mindmap**: `MindmapDiagramConfig` > `optional` **mindmap**: `MindmapDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205) Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
--- ---
@@ -328,7 +316,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid
> `optional` **packet**: `PacketDiagramConfig` > `optional` **packet**: `PacketDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210) Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
--- ---
@@ -336,7 +324,7 @@ Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid
> `optional` **pie**: `PieDiagramConfig` > `optional` **pie**: `PieDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200) Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
--- ---
@@ -344,7 +332,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid
> `optional` **quadrantChart**: `QuadrantChartConfig` > `optional` **quadrantChart**: `QuadrantChartConfig`
Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
--- ---
@@ -352,7 +340,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid
> `optional` **radar**: `RadarDiagramConfig` > `optional` **radar**: `RadarDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212) Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
--- ---
@@ -360,7 +348,7 @@ Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid
> `optional` **requirement**: `RequirementDiagramConfig` > `optional` **requirement**: `RequirementDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
--- ---
@@ -368,7 +356,7 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid
> `optional` **sankey**: `SankeyDiagramConfig` > `optional` **sankey**: `SankeyDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
--- ---
@@ -376,7 +364,7 @@ Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid
> `optional` **secure**: `string`\[] > `optional` **secure**: `string`\[]
Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158) Defined in: [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
This option controls which `currentConfig` keys are considered secure and This option controls which `currentConfig` keys are considered secure and
can only be changed via call to `mermaid.initialize`. can only be changed via call to `mermaid.initialize`.
@@ -388,7 +376,7 @@ This prevents malicious graph directives from overriding a site's default securi
> `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"` > `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141) Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
Level of trust for parsed diagram Level of trust for parsed diagram
@@ -398,7 +386,7 @@ Level of trust for parsed diagram
> `optional` **sequence**: `SequenceDiagramConfig` > `optional` **sequence**: `SequenceDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
--- ---
@@ -406,7 +394,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid
> `optional` **startOnLoad**: `boolean` > `optional` **startOnLoad**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145) Defined in: [packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
Dictates whether mermaid starts on Page load Dictates whether mermaid starts on Page load
@@ -416,7 +404,7 @@ Dictates whether mermaid starts on Page load
> `optional` **state**: `StateDiagramConfig` > `optional` **state**: `StateDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
--- ---
@@ -424,7 +412,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid
> `optional` **suppressErrorRendering**: `boolean` > `optional` **suppressErrorRendering**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222) Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
Suppresses inserting 'Syntax error' diagram in the DOM. Suppresses inserting 'Syntax error' diagram in the DOM.
This is useful when you want to control how to handle syntax errors in your application. This is useful when you want to control how to handle syntax errors in your application.
@@ -462,7 +450,7 @@ Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-
> `optional` **timeline**: `TimelineDiagramConfig` > `optional` **timeline**: `TimelineDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
--- ---
@@ -470,7 +458,7 @@ Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid
> `optional` **wrap**: `boolean` > `optional` **wrap**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214) Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
--- ---
@@ -478,4 +466,4 @@ Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid
> `optional` **xyChart**: `XYChartConfig` > `optional` **xyChart**: `XYChartConfig`
Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

View File

@@ -10,7 +10,7 @@
# Interface: ParseOptions # Interface: ParseOptions
Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72) Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
## Properties ## Properties
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mer
> `optional` **suppressErrors**: `boolean` > `optional` **suppressErrors**: `boolean`
Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77) Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)
If `true`, parse will return `false` instead of throwing error when the diagram is invalid. If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
The `parseError` function will not be called. The `parseError` function will not be called.

View File

@@ -10,7 +10,7 @@
# Interface: ParseResult # Interface: ParseResult
Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80) Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
## Properties ## Properties
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mer
> **config**: [`MermaidConfig`](MermaidConfig.md) > **config**: [`MermaidConfig`](MermaidConfig.md)
Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88) Defined in: [packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
The config passed as YAML frontmatter or directives The config passed as YAML frontmatter or directives
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
> **diagramType**: `string` > **diagramType**: `string`
Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84) Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)
The diagram type, e.g. 'flowchart', 'sequence', etc. The diagram type, e.g. 'flowchart', 'sequence', etc.

View File

@@ -10,7 +10,7 @@
# Interface: RenderResult # Interface: RenderResult
Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98) Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
## Properties ## Properties
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mer
> `optional` **bindFunctions**: (`element`) => `void` > `optional` **bindFunctions**: (`element`) => `void`
Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116) Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
Bind function to be called after the svg has been inserted into the DOM. Bind function to be called after the svg has been inserted into the DOM.
This is necessary for adding event listeners to the elements in the svg. This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
> **diagramType**: `string` > **diagramType**: `string`
Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106) Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
The diagram type, e.g. 'flowchart', 'sequence', etc. The diagram type, e.g. 'flowchart', 'sequence', etc.
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
> **svg**: `string` > **svg**: `string`
Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102) Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
The svg code for the rendered graph. The svg code for the rendered graph.

View File

@@ -12,4 +12,4 @@
> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`> > **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126) Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)

View File

@@ -12,4 +12,4 @@
> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`> > **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128) Defined in: [packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)

View File

@@ -12,4 +12,4 @@
> `const` **default**: [`Mermaid`](../interfaces/Mermaid.md) > `const` **default**: [`Mermaid`](../interfaces/Mermaid.md)
Defined in: [packages/mermaid/src/mermaid.ts:454](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L454) Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)

View File

@@ -1,189 +0,0 @@
---
references:
- "File: /packages/mermaid/src/diagrams/flowchart/flowDiagram.ts"
- "File: /packages/mermaid/src/diagrams/flowchart/flowDb.ts"
- "File: /packages/mermaid/src/diagrams/flowchart/flowDetector.ts"
- "File: /packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts"
- "File: /packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts"
- "File: /packages/mermaid/src/diagrams/flowchart/styles.ts"
- "File: /packages/mermaid/src/diagrams/flowchart/types.ts"
- "File: /packages/mermaid/src/diagrams/flowchart/flowChartShapes.js"
- "File: /packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts"
- "File: /packages/mermaid/src/diagrams/flowchart/elk/detector.ts"
generationTime: 2025-07-23T10:31:53.266Z
---
flowchart TD
%% Entry Points and Detection
Input["User Input Text"] --> Detection{Detection Phase}
Detection --> flowDetector["flowDetector.ts<br/>detector(txt, config)"]
Detection --> flowDetectorV2["flowDetector-v2.ts<br/>detector(txt, config)"]
Detection --> elkDetector["elk/detector.ts<br/>detector(txt, config)"]
flowDetector --> |"Checks /^\s*graph/"| DetectLegacy{Legacy Flowchart?}
flowDetectorV2 --> |"Checks /^\s*flowchart/"| DetectNew{New Flowchart?}
elkDetector --> |"Checks /^\s*flowchart-elk/"| DetectElk{ELK Layout?}
DetectLegacy --> |Yes| LoadDiagram
DetectNew --> |Yes| LoadDiagram
DetectElk --> |Yes| LoadDiagram
%% Loading Phase
LoadDiagram["loader() function"] --> flowDiagram["flowDiagram.ts<br/>diagram object"]
flowDiagram --> DiagramStructure{Diagram Components}
DiagramStructure --> Parser["parser: flowParser"]
DiagramStructure --> Database["db: new FlowDB()"]
DiagramStructure --> Renderer["renderer: flowRenderer-v3-unified"]
DiagramStructure --> Styles["styles: flowStyles"]
DiagramStructure --> Init["init: (cnf: MermaidConfig)"]
%% Parser Phase
Parser --> flowParser["parser/flowParser.ts<br/>newParser.parse(src)"]
flowParser --> |"Preprocesses src"| RemoveWhitespace["Remove trailing whitespace<br/>src.replace(/}\s*\n/g, '}\n')"]
RemoveWhitespace --> flowJison["parser/flow.jison<br/>flowJisonParser.parse(newSrc)"]
flowJison --> ParseGraph["Parse Graph Structure"]
ParseGraph --> ParseVertices["Parse Vertices"]
ParseGraph --> ParseEdges["Parse Edges"]
ParseGraph --> ParseSubgraphs["Parse Subgraphs"]
ParseGraph --> ParseClasses["Parse Classes"]
ParseGraph --> ParseStyles["Parse Styles"]
%% Database Phase - FlowDB Class
Database --> FlowDBClass["flowDb.ts<br/>FlowDB class"]
FlowDBClass --> DBInit["constructor()<br/>- Initialize counters<br/>- Bind methods<br/>- Setup toolTips<br/>- Call clear()"]
DBInit --> DBMethods{FlowDB Methods}
DBMethods --> addVertex["addVertex(id, textObj, type, style,<br/>classes, dir, props, metadata)"]
DBMethods --> addLink["addLink(_start[], _end[], linkData)"]
DBMethods --> addSingleLink["addSingleLink(_start, _end, type, id)"]
DBMethods --> setDirection["setDirection(dir)"]
DBMethods --> addSubGraph["addSubGraph(nodes[], id, title)"]
DBMethods --> addClass["addClass(id, style)"]
DBMethods --> setClass["setClass(ids, className)"]
DBMethods --> setTooltip["setTooltip(ids, tooltip)"]
DBMethods --> setClickEvent["setClickEvent(id, functionName, args)"]
DBMethods --> setClickFun["setClickFun(id, functionName, args)"]
%% Vertex Processing
addVertex --> VertexProcess{Vertex Processing}
VertexProcess --> CreateVertex["Create FlowVertex object<br/>- id, labelType, domId<br/>- styles[], classes[]"]
VertexProcess --> SanitizeText["sanitizeText(textObj.text)"]
VertexProcess --> ParseMetadata["Parse YAML metadata<br/>yaml.load(yamlData)"]
VertexProcess --> SetVertexProps["Set vertex properties<br/>- shape, label, icon, form<br/>- pos, img, constraint, w, h"]
%% Edge Processing
addSingleLink --> EdgeProcess{Edge Processing}
EdgeProcess --> CreateEdge["Create FlowEdge object<br/>- start, end, type, text<br/>- labelType, classes[]"]
EdgeProcess --> ProcessLinkText["Process link text<br/>- sanitizeText()<br/>- strip quotes"]
EdgeProcess --> SetEdgeProps["Set edge properties<br/>- type, stroke, length"]
EdgeProcess --> GenerateEdgeId["Generate edge ID<br/>getEdgeId(start, end, counter)"]
EdgeProcess --> ValidateEdgeLimit["Validate edge limit<br/>maxEdges check"]
%% Data Collection
DBMethods --> GetData["getData()"]
GetData --> CollectNodes["Collect nodes[] from vertices"]
GetData --> CollectEdges["Collect edges[] from edges"]
GetData --> ProcessSubGraphs["Process subgraphs<br/>- parentDB Map<br/>- subGraphDB Map"]
GetData --> AddNodeFromVertex["addNodeFromVertex()<br/>for each vertex"]
GetData --> ProcessEdgeTypes["destructEdgeType()<br/>arrowTypeStart, arrowTypeEnd"]
%% Node Creation
AddNodeFromVertex --> NodeCreation{Node Creation}
NodeCreation --> FindExistingNode["findNode(nodes, vertex.id)"]
NodeCreation --> CreateBaseNode["Create base node<br/>- id, label, parentId<br/>- cssStyles, cssClasses<br/>- shape, domId, tooltip"]
NodeCreation --> GetCompiledStyles["getCompiledStyles(classDefs)"]
NodeCreation --> GetTypeFromVertex["getTypeFromVertex(vertex)"]
%% Rendering Phase
Renderer --> flowRendererV3["flowRenderer-v3-unified.ts<br/>draw(text, id, version, diag)"]
flowRendererV3 --> RenderInit["Initialize rendering<br/>- getConfig()<br/>- handle securityLevel<br/>- getDiagramElement()"]
RenderInit --> GetLayoutData["diag.db.getData()<br/>as LayoutData"]
GetLayoutData --> SetupLayoutData["Setup layout data<br/>- type, layoutAlgorithm<br/>- direction, spacing<br/>- markers, diagramId"]
SetupLayoutData --> CallRender["render(data4Layout, svg)"]
CallRender --> SetupViewPort["setupViewPortForSVG(svg, padding)"]
SetupViewPort --> ProcessLinks["Process vertex links<br/>- create anchor elements<br/>- handle click events"]
%% Shape Rendering
CallRender --> ShapeSystem["flowChartShapes.js<br/>Shape Functions"]
ShapeSystem --> ShapeFunctions{Shape Functions}
ShapeFunctions --> question["question(parent, bbox, node)"]
ShapeFunctions --> hexagon["hexagon(parent, bbox, node)"]
ShapeFunctions --> rect_left_inv_arrow["rect_left_inv_arrow(parent, bbox, node)"]
ShapeFunctions --> lean_right["lean_right(parent, bbox, node)"]
ShapeFunctions --> lean_left["lean_left(parent, bbox, node)"]
ShapeFunctions --> insertPolygonShape["insertPolygonShape(parent, w, h, points)"]
ShapeFunctions --> intersectPolygon["intersectPolygon(node, points, point)"]
ShapeFunctions --> intersectRect["intersectRect(node, point)"]
%% Styling System
Styles --> stylesTS["styles.ts<br/>getStyles(options)"]
stylesTS --> StyleOptions["FlowChartStyleOptions<br/>- arrowheadColor, border2<br/>- clusterBkg, mainBkg<br/>- fontFamily, textColor"]
StyleOptions --> GenerateCSS["Generate CSS styles<br/>- .label, .cluster-label<br/>- .node, .edgePath<br/>- .flowchart-link, .edgeLabel"]
GenerateCSS --> GetIconStyles["getIconStyles()"]
%% Type System
Parser --> TypeSystem["types.ts<br/>Type Definitions"]
TypeSystem --> FlowVertex["FlowVertex interface"]
TypeSystem --> FlowEdge["FlowEdge interface"]
TypeSystem --> FlowClass["FlowClass interface"]
TypeSystem --> FlowSubGraph["FlowSubGraph interface"]
TypeSystem --> FlowVertexTypeParam["FlowVertexTypeParam<br/>Shape types"]
%% Utility Functions
DBMethods --> UtilityFunctions{Utility Functions}
UtilityFunctions --> lookUpDomId["lookUpDomId(id)"]
UtilityFunctions --> getClasses["getClasses()"]
UtilityFunctions --> getDirection["getDirection()"]
UtilityFunctions --> getVertices["getVertices()"]
UtilityFunctions --> getEdges["getEdges()"]
UtilityFunctions --> getSubGraphs["getSubGraphs()"]
UtilityFunctions --> clear["clear()"]
UtilityFunctions --> defaultConfig["defaultConfig()"]
%% Event Handling
ProcessLinks --> EventHandling{Event Handling}
EventHandling --> setupToolTips["setupToolTips(element)"]
EventHandling --> bindFunctions["bindFunctions(element)"]
EventHandling --> runFunc["utils.runFunc(functionName, args)"]
%% Common Database Functions
DBMethods --> CommonDB["commonDb.js functions"]
CommonDB --> setAccTitle["setAccTitle()"]
CommonDB --> getAccTitle["getAccTitle()"]
CommonDB --> setAccDescription["setAccDescription()"]
CommonDB --> getAccDescription["getAccDescription()"]
CommonDB --> setDiagramTitle["setDiagramTitle()"]
CommonDB --> getDiagramTitle["getDiagramTitle()"]
CommonDB --> commonClear["clear()"]
%% Final Output
ProcessLinks --> FinalSVG["Final SVG Output"]
%% Layout Algorithm Selection
SetupLayoutData --> LayoutAlgorithm{Layout Algorithm}
LayoutAlgorithm --> Dagre["dagre<br/>(default)"]
LayoutAlgorithm --> DagreWrapper["dagre-wrapper<br/>(v2 renderer)"]
LayoutAlgorithm --> ELK["elk<br/>(external package)"]
%% Testing Components
FlowDBClass --> TestFiles["Test Files"]
TestFiles --> flowDbSpec["flowDb.spec.ts"]
TestFiles --> flowChartShapesSpec["flowChartShapes.spec.js"]
TestFiles --> ParserTests["parser/*.spec.js files<br/>- flow-text.spec.js<br/>- flow-edges.spec.js<br/>- flow-style.spec.js<br/>- subgraph.spec.js"]
%% Configuration
Init --> ConfigSetup["Configuration Setup"]
ConfigSetup --> FlowchartConfig["cnf.flowchart config"]
ConfigSetup --> ArrowMarkers["arrowMarkerAbsolute"]
ConfigSetup --> LayoutConfig["layout config"]
ConfigSetup --> SetConfig["setConfig() calls"]

View File

@@ -1,307 +0,0 @@
---
references:
- "File: /packages/mermaid/src/mermaidAPI.ts"
- "File: /packages/mermaid/src/mermaid.ts"
generationTime: 2025-01-28T16:30:00.000Z
---
sequenceDiagram
participant User as User/Browser
participant Mermaid as mermaid.ts
participant Queue as executionQueue
participant API as mermaidAPI.ts
participant Config as configApi
participant Preprocessor as preprocessDiagram
participant DiagramAPI as diagram-api
participant Diagram as Diagram.fromText
participant Renderer as diagram.renderer
participant Styles as Styling System
participant DOM as DOM/SVG
Note over User, DOM: Mermaid Complete API Flow
%% Initialization Phase
User->>+Mermaid: mermaid.initialize(config)
Mermaid->>+API: mermaidAPI.initialize(config)
API->>API: assignWithDepth({}, userOptions)
API->>API: handle legacy fontFamily config
API->>Config: saveConfigFromInitialize(options)
alt Theme Configuration Available
API->>API: check if theme in theme object
API->>API: set themeVariables from theme
else Default Theme
API->>API: use default theme variables
end
API->>Config: setSiteConfig(options) or getSiteConfig()
API->>API: setLogLevel(config.logLevel)
API->>DiagramAPI: addDiagrams()
API-->>-Mermaid: initialization complete
Mermaid-->>-User: ready to render
%% Content Loaded Event
User->>DOM: document.load event
DOM->>+Mermaid: contentLoaded()
opt startOnLoad is true
Mermaid->>Config: getConfig()
Config-->>Mermaid: { startOnLoad: true }
Mermaid->>Mermaid: run()
end
Mermaid-->>-DOM: event handling complete
%% Main Run Function
User->>+Mermaid: mermaid.run(options)
Mermaid->>Mermaid: runThrowsErrors(options)
Mermaid->>Config: getConfig()
Config-->>Mermaid: configuration object
alt nodes provided
Mermaid->>Mermaid: use provided nodes
else querySelector provided
Mermaid->>DOM: document.querySelectorAll(querySelector)
DOM-->>Mermaid: nodesToProcess
end
Mermaid->>Mermaid: new InitIDGenerator(deterministicIds, seed)
loop For each diagram element
Mermaid->>DOM: check element.getAttribute('data-processed')
opt not processed
Mermaid->>DOM: element.setAttribute('data-processed', 'true')
Mermaid->>Mermaid: generate unique id
Mermaid->>DOM: get element.innerHTML
Mermaid->>Mermaid: entityDecode and clean text
Mermaid->>Mermaid: detectInit(txt)
Mermaid->>Queue: render(id, txt, element)
end
end
Mermaid-->>-User: processing initiated
%% Render Function (Queued)
activate Queue
Queue->>+API: mermaidAPI.render(id, text, container)
API->>DiagramAPI: addDiagrams()
API->>+Preprocessor: processAndSetConfigs(text)
Preprocessor->>Preprocessor: preprocessDiagram(text)
Preprocessor->>Config: reset()
Preprocessor->>Config: addDirective(processed.config)
Preprocessor-->>-API: { code, config }
API->>Config: getConfig()
Config-->>API: current configuration
opt text length > maxTextSize
API->>API: text = MAX_TEXTLENGTH_EXCEEDED_MSG
end
API->>API: setup id selectors and element IDs
API->>API: determine security level (sandbox/loose)
%% DOM Setup
alt svgContainingElement provided
alt isSandboxed
API->>DOM: sandboxedIframe(select(svgContainingElement), iFrameID)
API->>DOM: select iframe contentDocument body
else
API->>DOM: select(svgContainingElement)
end
else no container
API->>API: removeExistingElements(document, id, divId, iFrameId)
alt isSandboxed
API->>DOM: sandboxedIframe(select('body'), iFrameID)
else
API->>DOM: select('body')
end
end
API->>DOM: appendDivSvgG(root, id, enclosingDivID, fontFamily, XMLNS_XLINK_STD)
%% Diagram Creation
API->>+Diagram: Diagram.fromText(text, { title: processed.title })
Diagram->>DiagramAPI: detect diagram type
Diagram->>DiagramAPI: load appropriate diagram
Diagram-->>-API: diagram instance
opt parsing error occurred
API->>+Diagram: Diagram.fromText('error')
Diagram-->>-API: error diagram
API->>API: store parseEncounteredException
end
%% Style Generation
API->>DOM: get svg element and firstChild
API->>Renderer: diag.renderer.getClasses(text, diag)
Renderer-->>API: diagramClassDefs
API->>+Styles: createUserStyles(config, diagramType, diagramClassDefs, idSelector)
Styles->>Styles: createCssStyles(config, classDefs)
opt config.themeCSS defined
Styles->>Styles: append themeCSS
end
opt fontFamily configured
Styles->>Styles: add CSS variables for fonts
end
opt classDefs exist
loop For each styleClassDef
opt has styles
Styles->>Styles: cssImportantStyles for each CSS element
end
opt has textStyles
Styles->>Styles: cssImportantStyles for tspan elements
end
end
end
Styles->>Styles: getStyles(graphType, userCSSstyles, themeVariables)
Styles->>Styles: serialize(compile(svgId{allStyles}), stringify)
Styles-->>-API: compiled CSS rules
API->>DOM: create style element
API->>DOM: style.innerHTML = rules
API->>DOM: svg.insertBefore(style, firstChild)
%% Diagram Rendering
API->>+Renderer: diag.renderer.draw(text, id, version, diag)
Renderer->>Renderer: diagram-specific rendering logic
Renderer->>DOM: create SVG elements
Renderer->>DOM: apply positioning and styling
Renderer-->>-API: rendered diagram
opt rendering error
alt suppressErrorRendering
API->>API: removeTempElements()
API->>Mermaid: throw error
else
API->>Renderer: errorRenderer.draw(text, id, version)
end
end
%% Accessibility and Cleanup
API->>DOM: select svg element
API->>Diagram: diag.db.getAccTitle()
API->>Diagram: diag.db.getAccDescription()
API->>API: addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr)
API->>DOM: set xmlns for foreignobject elements
API->>DOM: get innerHTML from enclosing div
API->>+API: cleanUpSvgCode(svgCode, isSandboxed, arrowMarkerAbsolute)
opt not useArrowMarkerUrls and not sandboxed
API->>API: replace marker-end URLs with anchors
end
API->>API: decodeEntities(svgCode)
API->>API: replace <br> with <br/>
API-->>-API: cleaned SVG code
alt isSandboxed
API->>+API: putIntoIFrame(svgCode, svgEl)
API->>API: calculate iframe height
API->>API: toBase64 encode SVG content
API->>API: create iframe with sandbox attributes
API-->>-API: iframe HTML
else not loose security
API->>API: DOMPurify.sanitize(svgCode, options)
end
API->>API: attachFunctions()
API->>API: removeTempElements()
opt parseEncounteredException
API->>Mermaid: throw parseEncounteredException
end
API-->>-Queue: { diagramType, svg: svgCode, bindFunctions }
%% Return to Web Integration
activate Mermaid
Queue-->>Mermaid: render result
Mermaid->>DOM: element.innerHTML = svg
opt postRenderCallback
Mermaid->>User: postRenderCallback(id)
end
opt bindFunctions exist
Mermaid->>DOM: bindFunctions(element)
end
deactivate Mermaid
%% Parse Function Flow
User->>+Mermaid: mermaid.parse(text, parseOptions)
activate Queue
Queue->>+API: mermaidAPI.parse(text, parseOptions)
API->>DiagramAPI: addDiagrams()
API->>Preprocessor: processAndSetConfigs(text)
Preprocessor-->>API: { code, config }
API->>Diagram: getDiagramFromText(code)
Diagram-->>API: diagram instance
API-->>-Queue: { diagramType: diagram.type, config }
Queue-->>-Mermaid: parse result
Mermaid-->>-User: ParseResult or false
%% External Diagram Registration
User->>+Mermaid: registerExternalDiagrams(diagrams, options)
Mermaid->>DiagramAPI: addDiagrams()
Mermaid->>DiagramAPI: registerLazyLoadedDiagrams(...diagrams)
opt lazyLoad is false
Mermaid->>DiagramAPI: loadRegisteredDiagrams()
end
Mermaid-->>-User: registration complete
%% Error Handling
Note over Mermaid, API: Error Handling Throughout
alt Error occurs
API->>Mermaid: throw error
Mermaid->>+Mermaid: handleError(error, errors, parseError)
Mermaid->>Mermaid: log.warn(error)
alt isDetailedError
Mermaid->>User: parseError(error.str, error.hash)
else
Mermaid->>User: parseError(error)
end
opt not suppressErrors
Mermaid->>User: throw error
end
Mermaid-->>-User: error handled
end
%% Configuration Details
Note over Config: Configuration Functions
Note right of Config: Functions:<br/>- reset()<br/>- getConfig()<br/>- setConfig()<br/>- getSiteConfig()<br/>- updateSiteConfig()<br/>- saveConfigFromInitialize()
Note over Styles: CSS Generation
Note right of Styles: Features:<br/>- createCssStyles()<br/>- createUserStyles()<br/>- cssImportantStyles()<br/>- Theme integration<br/>- Class definitions
Note over API: Security Levels
Note right of API: Modes:<br/>- sandbox: iframe isolation<br/>- loose: minimal sanitization<br/>- default: DOMPurify sanitization
Note over API: Helper Functions
Note right of API: Utilities:<br/>- cleanUpSvgCode()<br/>- putIntoIFrame()<br/>- appendDivSvgG()<br/>- removeExistingElements()

View File

@@ -1,180 +0,0 @@
---
references:
- "File: /packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts"
- "File: /packages/mermaid/src/diagrams/mindmap/mindmapDb.ts"
- "File: /packages/mermaid/src/diagrams/mindmap/detector.ts"
- "File: /packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts"
- "File: /packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts"
- "File: /packages/mermaid/src/diagrams/mindmap/styles.ts"
- "File: /packages/mermaid/src/diagrams/mindmap/svgDraw.ts"
generationTime: 2025-01-28T16:00:00.000Z
---
sequenceDiagram
participant User as User Input Text
participant Detector as detector.ts
participant Loader as DiagramLoader
participant Definition as mindmap-definition.ts
participant Parser as parser/mindmap.jison
participant DB as MindmapDB
participant Renderer as mindmapRenderer.ts
participant Cytoscape as cytoscape.js
participant SVGDraw as svgDraw.ts
participant Styles as styles.ts
participant Output as Final SVG
Note over User, Output: Mindmap Implementation Flow
%% Detection Phase
User->>Detector: /^\s*mindmap/ text input
activate Detector
Detector->>Detector: detector(txt) validates pattern
Detector->>Loader: loader() function called
deactivate Detector
activate Loader
Loader->>Definition: import mindmap-definition.js
deactivate Loader
%% Core Structure Setup
activate Definition
Definition->>DB: get db() → new MindmapDB()
Definition->>Renderer: setup renderer
Definition->>Parser: setup parser
Definition->>Styles: setup styles
deactivate Definition
%% Database Initialization
activate DB
Note over DB: MindmapDB Constructor
DB->>DB: initialize nodes array
DB->>DB: setup nodeType constants
DB->>DB: bind methods
DB->>DB: clear() state
%% Parsing Phase
activate Parser
User->>Parser: mindmap syntax text
loop For each node in hierarchy
Parser->>DB: addNode(level, id, descr, type)
activate DB
DB->>DB: sanitizeText(id, descr)
DB->>DB: getType(startStr, endStr)
Note right of DB: Shape Detection:<br/>[ → RECT<br/>( → ROUNDED_RECT<br/>(( → CIRCLE<br/>)) → BANG<br/>{{ → HEXAGON
DB->>DB: getParent(level)
DB->>DB: create MindmapNode
DB->>DB: add to hierarchy
deactivate DB
end
opt Icon/Class Decoration
Parser->>DB: decorateNode(decoration)
DB->>DB: set icon/class properties
end
deactivate Parser
%% Data Preparation
Renderer->>DB: getData() for layout
activate DB
DB->>DB: collect all nodes
DB->>DB: build parent-child relationships
DB-->>Renderer: return node hierarchy
deactivate DB
%% Rendering Pipeline
activate Renderer
Note over Renderer: Rendering Phase
Renderer->>Cytoscape: initialize cytoscape
activate Cytoscape
loop For each node in mindmap
Renderer->>Cytoscape: addNodes(mindmap, cy, conf, level)
Cytoscape->>Cytoscape: create node data
Cytoscape->>Cytoscape: set position (x, y)
end
loop For parent-child relationships
Renderer->>Cytoscape: add edges
Cytoscape->>Cytoscape: create edge data
end
Renderer->>Cytoscape: configure cose-bilkent layout
Cytoscape->>Cytoscape: calculate optimal positions
Cytoscape-->>Renderer: return positioned graph
deactivate Cytoscape
%% SVG Generation
Renderer->>SVGDraw: drawNodes(db, svg, mindmap, section, conf)
activate SVGDraw
loop For each node recursively
SVGDraw->>SVGDraw: select shape function
alt Default Shape
SVGDraw->>SVGDraw: defaultBkg() - rounded rectangle
else Rectangle Shape
SVGDraw->>SVGDraw: rectBkg() - sharp corners
else Circle Shape
SVGDraw->>SVGDraw: circleBkg() - perfect circle
else Cloud Shape
SVGDraw->>SVGDraw: cloudBkg() - organic curves
else Bang Shape
SVGDraw->>SVGDraw: bangBkg() - explosion style
else Hexagon Shape
SVGDraw->>SVGDraw: hexagonBkg() - six sides
end
SVGDraw->>SVGDraw: create SVG elements
SVGDraw->>SVGDraw: add text labels
SVGDraw->>SVGDraw: position node
opt Node has children
SVGDraw->>SVGDraw: drawNodes() recursive call
end
end
deactivate SVGDraw
%% Edge Rendering
Renderer->>Renderer: drawEdges(edgesEl, cy)
loop For each edge
Renderer->>Renderer: extract edge bounds
Renderer->>Renderer: draw SVG path
end
%% Styling Application
Renderer->>Styles: getStyles(options)
activate Styles
Styles->>Styles: genSections(options)
loop For THEME_COLOR_LIMIT sections
Styles->>Styles: generate color scale
Styles->>Styles: create CSS rules
Note right of Styles: .section-X fills<br/>.edge-depth-X widths<br/>.node-icon-X colors
end
Styles->>Styles: apply theme integration
Styles-->>Renderer: return compiled CSS
deactivate Styles
%% Final Assembly
Renderer->>Output: selectSvgElement()
Renderer->>Output: setupGraphViewbox()
Renderer->>Output: apply styles
Renderer->>Output: add interactive elements
deactivate Renderer
activate Output
Note over Output: Final Mindmap Features
Output->>Output: responsive layout
Output->>Output: accessibility attributes
Output->>Output: hover effects
Output->>Output: click handling
Output-->>User: rendered mindmap
deactivate Output
%% Configuration Details
Note over DB, Styles: Configuration Options
Note right of DB: Padding Calculations:<br/>Base padding from config<br/>RECT: ×2 padding<br/>ROUNDED_RECT: ×2 padding<br/>HEXAGON: ×2 padding
Note right of Styles: Section Management:<br/>MAX_SECTIONS = 12<br/>Dynamic color generation<br/>Git theme integration
Note right of Renderer: Layout Parameters:<br/>Cytoscape configuration<br/>coseBilkent settings<br/>Node spacing rules

View File

@@ -73,7 +73,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅ - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅ - [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅
- [Redmine](https://redmine.org) - [Redmine](https://redmine.org)
- [Mermaid Macro](https://redmine.org/plugins/redmine_mermaid_macro) - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
- [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
@@ -84,7 +84,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
LLM integrations to create mermaid diagrams using AI from text descriptions. LLM integrations to create mermaid diagrams using AI from text descriptions.
- [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams) - [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams)
- [MCP Server Mermaid](https://github.com/hustcc/mcp-mermaid) - Generate mermaid diagram and chart with AI MCP dynamically.
### CRM/ERP ### CRM/ERP
@@ -104,7 +103,6 @@ Blogging frameworks and platforms
- [Mermaid](https://nextra.site/docs/guide/mermaid) - [Mermaid](https://nextra.site/docs/guide/mermaid)
- [WordPress](https://wordpress.org) - [WordPress](https://wordpress.org)
- [MerPRess](https://wordpress.org/plugins/merpress/) - [MerPRess](https://wordpress.org/plugins/merpress/)
- [WP Documentation](https://wordpress.org/themes/wp-documentation/)
### CMS/ECM ### CMS/ECM
@@ -117,7 +115,7 @@ Content Management Systems/Enterprise Content Management
- [Grav CMS](https://getgrav.org/) - [Grav CMS](https://getgrav.org/)
- [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
- [Tiki Wiki CMS Groupware](https://tiki.org) - [Tiki](https://tiki.org)
- [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram) - [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
- [VitePress](https://vitepress.vuejs.org/) - [VitePress](https://vitepress.vuejs.org/)
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/) - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
@@ -247,7 +245,7 @@ Communication tools and platforms
| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) | | GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) |
| Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | - | | Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | - |
| Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) | | Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) |
| Markdown Diagrams | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) | | Markdown Diagrams | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
| Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) | | Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) |
| Extensions for Mermaid | - | - | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | | Extensions for Mermaid | - | - | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
| Chrome Diagrammer | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - | | Chrome Diagrammer | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - |
@@ -272,6 +270,5 @@ Communication tools and platforms
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin) - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck) - [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin) - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
<!--- cspell:ignore Blazorade HueHive ---> <!--- cspell:ignore Blazorade HueHive --->

View File

@@ -16,7 +16,9 @@ Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/do
### MIME Type ### MIME Type
The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is [`text/vnd.mermaid`](https://www.iana.org/assignments/media-types/application/vnd.mermaid). The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
Currently pending [IANA](https://www.iana.org/) recognition.
## Showcase ## Showcase

View File

@@ -30,7 +30,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
Official Mermaid Chart plugins: Official Mermaid Chart plugins:
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts) - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview) - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud) - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)

View File

@@ -6,66 +6,6 @@
# Blog # Blog
## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
7/15/2025 • 7 mins
Mermaid just introduced a Visual Editor for Entity Relationship diagrams, letting anyone map database structures through a simple point-and-click interface instead of code. This no-code ER builder now sits alongside Mermaids editors for flowcharts, sequence, and class diagrams, enabling teams to craft and share polished data models for apps, AI, and business processes.
## [Mermaid supports Treemap Diagrams now!!!](https://docs.mermaidchart.com/blog/posts/mermaid-have-treemap-diagrams-now)
7/3/2025 • 4 mins
Mermaid has introduced Treemap diagrams, currently in beta, enhancing hierarchical data visualization. Treemap diagrams use nested rectangles to represent data relationships, focusing on size and proportions. They offer various applications, including budget visualization and market analysis. With simple syntax and customization options, users can effectively present complex data hierarchies.
## [AI Diagram Generators and Data Visualization: Best Practices](https://docs.mermaidchart.com/blog/posts/ai-diagram-generators-and-data-visualization-best-practices)
7/2/2025 • 6 mins
AI diagram generators transform complex data into clear, interactive visuals enabling faster analysis, better decisions, and stronger collaboration across teams. By combining automation with manual refinement, these tools empower anyone to communicate insights effectively, regardless of technical skill level.
## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://docs.mermaidchart.com/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025)
6/26/2025 • 14 mins
AI diagram generators are transforming how developers visualize and communicate complex systems, reducing hours of manual work into minutes. With tools like Mermaid AI, users benefit from both code-based and visual editing, enabling seamless collaboration and precision. Whether youre diagramming workflows, software architecture, or data relationships, the right AI tool can significantly boost productivity and streamline communication.
## [5 Time-Saving Tips for Using Mermaids AI Diagram Generator Effectively](https://docs.mermaidchart.com/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively)
6/11/2025 • 10 mins
See how developers can save time and boost productivity using Mermaid Charts AI diagram generator. Learn five practical tips that help turn plain language into powerful, professional diagrams.
## [Enhancing Team Collaboration with AI-Powered Diagrams](https://docs.mermaidchart.com/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams)
5/27/2025 • 6 mins
Software teams move fast, but old-school diagramming tools cant keep up. Mermaid Chart replaces static slides and whiteboards with real-time, AI-generated visuals that evolve with your code and ideas. Just describe a process in plain English, and watch it come to life.
## [What is an AI Diagram Generator? Benefits and Use Cases](https://docs.mermaidchart.com/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases)
5/22/2025 • 6 mins
Discover how AI diagram generators like Mermaid Chart transform developer workflows. Instantly turn text into flowcharts, ERDs, and system diagrams, no manual drag-and-drop needed. Learn how it works, key benefits, and real-world use cases.
## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://docs.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator)
5/21/2025 • 9 mins
Would an AI diagram generator make your life easier? We think it would!
## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://docs.mermaidchart.com/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code)
3/21/2025 • 5 mins
The Mermaid Chart VS Code Plugin is a powerful developer diagramming tool that brings Mermaid.js diagramming directly into your Visual Studio Code environment. Whether youre visualizing software architecture, documenting API flows, fixing bad documentation, or managing flowcharts and sequence diagrams, this plugin integrates seamlessly into your workflow. Key Features of the Mermaid Chart VS Code \[…]
## [Mermaid Chart: The Evolution of Mermaid](https://docs.mermaidchart.com/blog/posts/mermaid-chart-the-evolution-of-mermaid)
1/30/2025 • 3 mins
Mermaid revolutionized diagramming with its simple, markdown-style syntax, empowering millions of developers worldwide. Now, Mermaid Chart takes it further with AI-powered visuals, a GUI for seamless editing, real-time collaboration, and advanced design tools. Experience the next generation of diagramming—faster, smarter, and built for modern teams. Try Mermaid Chart today!
## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams) ## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams)
1/17/2025 • 5 mins 1/17/2025 • 5 mins

View File

@@ -1,9 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="12" fill="#E0095F"/>
<mask id="mask0_1_24" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
<rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_1_24)">
<path d="M24 30.875C25.2083 30.875 26.3229 30.5833 27.3438 30C28.3646 29.4167 29.1875 28.625 29.8125 27.625C29.9375 27.375 29.9271 27.125 29.7812 26.875C29.6354 26.625 29.4167 26.5 29.125 26.5H18.875C18.5833 26.5 18.3646 26.625 18.2188 26.875C18.0729 27.125 18.0625 27.375 18.1875 27.625C18.8125 28.625 19.6406 29.4167 20.6719 30C21.7031 30.5833 22.8125 30.875 24 30.875ZM20.125 21.4375L20.7813 22.0938C20.9688 22.2813 21.1875 22.375 21.4375 22.375C21.6875 22.375 21.9063 22.2813 22.0938 22.0938C22.2813 21.9063 22.3698 21.6875 22.3594 21.4375C22.349 21.1875 22.2604 20.9688 22.0938 20.7813L21 19.6563C20.75 19.4063 20.4531 19.2812 20.1094 19.2812C19.7656 19.2812 19.4688 19.4063 19.2188 19.6563L18.0938 20.7813C17.9063 20.9688 17.8125 21.1875 17.8125 21.4375C17.8125 21.6875 17.9063 21.9063 18.0938 22.0938C18.2604 22.2604 18.474 22.349 18.7344 22.3594C18.9948 22.3698 19.2188 22.2917 19.4063 22.125L20.125 21.4375ZM27.875 21.4375L28.5938 22.125C28.7813 22.2917 29 22.375 29.25 22.375C29.5 22.375 29.7188 22.2813 29.9063 22.0938C30.0938 21.9063 30.1875 21.6875 30.1875 21.4375C30.1875 21.1875 30.0938 20.9688 29.9063 20.7813L28.7812 19.6563C28.5312 19.4063 28.2344 19.2812 27.8906 19.2812C27.5469 19.2812 27.25 19.4063 27 19.6563L25.875 20.7813C25.7083 20.9688 25.625 21.1875 25.625 21.4375C25.625 21.6875 25.7188 21.9063 25.9063 22.0938C26.0938 22.2813 26.3125 22.375 26.5625 22.375C26.8125 22.375 27.0312 22.2813 27.2187 22.0938L27.875 21.4375ZM24 36.5C22.2708 36.5 20.6458 36.1719 19.125 35.5156C17.6042 34.8594 16.2812 33.9688 15.1562 32.8438C14.0312 31.7188 13.1406 30.3958 12.4844 28.875C11.8281 27.3542 11.5 25.7292 11.5 24C11.5 22.2708 11.8281 20.6458 12.4844 19.125C13.1406 17.6042 14.0312 16.2812 15.1562 15.1562C16.2812 14.0312 17.6042 13.1406 19.125 12.4844C20.6458 11.8281 22.2708 11.5 24 11.5C25.7292 11.5 27.3542 11.8281 28.875 12.4844C30.3958 13.1406 31.7188 14.0312 32.8438 15.1562C33.9688 16.2812 34.8594 17.6042 35.5156 19.125C36.1719 20.6458 36.5 22.2708 36.5 24C36.5 25.7292 36.1719 27.3542 35.5156 28.875C34.8594 30.3958 33.9688 31.7188 32.8438 32.8438C31.7188 33.9688 30.3958 34.8594 28.875 35.5156C27.3542 36.1719 25.7292 36.5 24 36.5ZM24 34C26.7917 34 29.1563 33.0313 31.0938 31.0938C33.0313 29.1563 34 26.7917 34 24C34 21.2083 33.0313 18.8438 31.0938 16.9063C29.1563 14.9688 26.7917 14 24 14C21.2083 14 18.8438 14.9688 16.9063 16.9063C14.9688 18.8438 14 21.2083 14 24C14 26.7917 14.9688 29.1563 16.9063 31.0938C18.8438 33.0313 21.2083 34 24 34Z" fill="white"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -1,9 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="12" fill="#E0095F"/>
<mask id="mask0_2_44" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
<rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_2_44)">
<path d="M32.75 27.75C32.3958 27.75 32.099 27.6302 31.8594 27.3906C31.6198 27.151 31.5 26.8542 31.5 26.5C31.5 26.1458 31.6198 25.849 31.8594 25.6094C32.099 25.3698 32.3958 25.25 32.75 25.25H34C34.3542 25.25 34.651 25.3698 34.8906 25.6094C35.1302 25.849 35.25 26.1458 35.25 26.5C35.25 26.8542 35.1302 27.151 34.8906 27.3906C34.651 27.6302 34.3542 27.75 34 27.75H32.75ZM32.75 32.75C32.3958 32.75 32.099 32.6302 31.8594 32.3906C31.6198 32.151 31.5 31.8542 31.5 31.5C31.5 31.1458 31.6198 30.849 31.8594 30.6094C32.099 30.3698 32.3958 30.25 32.75 30.25H34C34.3542 30.25 34.651 30.3698 34.8906 30.6094C35.1302 30.849 35.25 31.1458 35.25 31.5C35.25 31.8542 35.1302 32.151 34.8906 32.3906C34.651 32.6302 34.3542 32.75 34 32.75H32.75ZM26.5 34C25.8125 34 25.224 33.7552 24.7344 33.2656C24.2448 32.776 24 32.1875 24 31.5H22.75C22.3958 31.5 22.099 31.3802 21.8594 31.1406C21.6198 30.901 21.5 30.6042 21.5 30.25V27.75C21.5 27.3958 21.6198 27.099 21.8594 26.8594C22.099 26.6198 22.3958 26.5 22.75 26.5H24C24 25.8125 24.2448 25.224 24.7344 24.7344C25.224 24.2448 25.8125 24 26.5 24H29C29.3542 24 29.651 24.1198 29.8906 24.3594C30.1302 24.599 30.25 24.8958 30.25 25.25V32.75C30.25 33.1042 30.1302 33.401 29.8906 33.6406C29.651 33.8802 29.3542 34 29 34H26.5ZM17.75 30.25C16.375 30.25 15.1979 29.7604 14.2188 28.7812C13.2396 27.8021 12.75 26.625 12.75 25.25C12.75 23.875 13.2396 22.6979 14.2188 21.7188C15.1979 20.7396 16.375 20.25 17.75 20.25H19.625C20.1458 20.25 20.5885 20.0677 20.9531 19.7031C21.3177 19.3385 21.5 18.8958 21.5 18.375C21.5 17.8542 21.3177 17.4115 20.9531 17.0469C20.5885 16.6823 20.1458 16.5 19.625 16.5H15.25C14.8958 16.5 14.599 16.3802 14.3594 16.1406C14.1198 15.901 14 15.6042 14 15.25C14 14.8958 14.1198 14.599 14.3594 14.3594C14.599 14.1198 14.8958 14 15.25 14H19.625C20.8333 14 21.8646 14.4271 22.7187 15.2812C23.5729 16.1354 24 17.1667 24 18.375C24 19.5833 23.5729 20.6146 22.7187 21.4687C21.8646 22.3229 20.8333 22.75 19.625 22.75H17.75C17.0625 22.75 16.474 22.9948 15.9844 23.4844C15.4948 23.974 15.25 24.5625 15.25 25.25C15.25 25.9375 15.4948 26.526 15.9844 27.0156C16.474 27.5052 17.0625 27.75 17.75 27.75H19C19.3542 27.75 19.651 27.8698 19.8906 28.1094C20.1302 28.349 20.25 28.6458 20.25 29C20.25 29.3542 20.1302 29.651 19.8906 29.8906C19.651 30.1302 19.3542 30.25 19 30.25H17.75Z" fill="white"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -1,9 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="12" fill="#E0095F"/>
<mask id="mask0_2_49" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
<rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_2_49)">
<path d="M22.75 32.75V28.875C21.7292 28.6458 20.8177 28.2135 20.0156 27.5781C19.2135 26.9427 18.625 26.1458 18.25 25.1875C16.6875 25 15.3802 24.3177 14.3281 23.1406C13.276 21.9635 12.75 20.5833 12.75 19V17.75C12.75 17.0625 12.9948 16.474 13.4844 15.9844C13.974 15.4948 14.5625 15.25 15.25 15.25H17.75C17.75 14.5625 17.9948 13.974 18.4844 13.4844C18.974 12.9948 19.5625 12.75 20.25 12.75H27.75C28.4375 12.75 29.026 12.9948 29.5156 13.4844C30.0052 13.974 30.25 14.5625 30.25 15.25H32.75C33.4375 15.25 34.026 15.4948 34.5156 15.9844C35.0052 16.474 35.25 17.0625 35.25 17.75V19C35.25 20.5833 34.724 21.9635 33.6719 23.1406C32.6198 24.3177 31.3125 25 29.75 25.1875C29.375 26.1458 28.7865 26.9427 27.9844 27.5781C27.1823 28.2135 26.2708 28.6458 25.25 28.875V32.75H29C29.3542 32.75 29.651 32.8698 29.8906 33.1094C30.1302 33.349 30.25 33.6458 30.25 34C30.25 34.3542 30.1302 34.651 29.8906 34.8906C29.651 35.1302 29.3542 35.25 29 35.25H19C18.6458 35.25 18.349 35.1302 18.1094 34.8906C17.8698 34.651 17.75 34.3542 17.75 34C17.75 33.6458 17.8698 33.349 18.1094 33.1094C18.349 32.8698 18.6458 32.75 19 32.75H22.75ZM17.75 22.5V17.75H15.25V19C15.25 19.7917 15.4792 20.5052 15.9375 21.1406C16.3958 21.776 17 22.2292 17.75 22.5ZM24 26.5C25.0417 26.5 25.9271 26.1354 26.6562 25.4062C27.3854 24.6771 27.75 23.7917 27.75 22.75V15.25H20.25V22.75C20.25 23.7917 20.6146 24.6771 21.3438 25.4062C22.0729 26.1354 22.9583 26.5 24 26.5ZM30.25 22.5C31 22.2292 31.6042 21.776 32.0625 21.1406C32.5208 20.5052 32.75 19.7917 32.75 19V17.75H30.25V22.5Z" fill="white"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 200 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 200 KiB

View File

@@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask
id="mask0_89_26528"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect width="20" height="20" fill="currentColor" />
</mask>
<g mask="url(#mask0_89_26528)">
<path
d="M10.25 12.9792C11.2083 12.9792 12.0312 12.6667 12.7188 12.0417C13.4062 11.4167 13.75 10.6671 13.75 9.79292C13.75 9.01431 13.4965 8.35069 12.9896 7.80208C12.4826 7.25347 11.8747 6.97917 11.1656 6.97917C10.5248 6.97917 9.98285 7.1875 9.53979 7.60417C9.0966 8.02083 8.875 8.52083 8.875 9.10417C8.875 9.38194 8.92528 9.63847 9.02583 9.87375C9.12639 10.109 9.27056 10.3247 9.45833 10.5208L10.5208 9.45833C10.4722 9.41667 10.4358 9.36458 10.4115 9.30208C10.3872 9.23958 10.375 9.17687 10.375 9.11396C10.375 8.94076 10.4514 8.79167 10.6042 8.66667C10.7569 8.54167 10.9444 8.47917 11.1667 8.47917C11.4583 8.47917 11.7118 8.60806 11.9271 8.86583C12.1424 9.12361 12.25 9.43222 12.25 9.79167C12.25 10.25 12.0521 10.6458 11.6562 10.9792C11.2604 11.3125 10.7933 11.4792 10.255 11.4792C9.57111 11.4792 8.98264 11.191 8.48958 10.6146C7.99653 10.0382 7.75 9.35417 7.75 8.5625C7.75 8.13514 7.82986 7.72625 7.98958 7.33583C8.14931 6.94528 8.38194 6.59722 8.6875 6.29167L7.625 5.25C7.18056 5.69444 6.84028 6.20139 6.60417 6.77083C6.36806 7.34028 6.25 7.9375 6.25 8.5625C6.25 9.78472 6.63889 10.8264 7.41667 11.6875C8.19444 12.5486 9.13889 12.9792 10.25 12.9792ZM5.5 18V14.3542C4.70833 13.6875 4.09375 12.8849 3.65625 11.9465C3.21875 11.008 3 10.0189 3 8.97917C3 7.04056 3.68257 5.39271 5.04771 4.03563C6.41285 2.67854 8.07056 2 10.0208 2C11.5347 2 12.8958 2.40625 14.1042 3.21875C15.3125 4.03125 16.1111 5.09028 16.5 6.39583L17.875 11.0417C17.9444 11.2844 17.9062 11.5049 17.7604 11.7029C17.6146 11.901 17.4167 12 17.1667 12H16V14.5C16 14.9125 15.8531 15.2656 15.5594 15.5594C15.2656 15.8531 14.9125 16 14.5 16H12.5V18H11V14.5H14.5V10.5H16.1667L15.0833 6.89583C14.7778 5.89583 14.1562 5.07986 13.2188 4.44792C12.2812 3.81597 11.2153 3.5 10.0208 3.5C8.47917 3.5 7.17361 4.03215 6.10417 5.09646C5.03472 6.16076 4.5 7.455 4.5 8.97917C4.5 9.79764 4.67361 10.5751 5.02083 11.3117C5.36806 12.0483 5.85417 12.6806 6.47917 13.2083L7 13.6667V18H5.5Z"
fill="currentColor"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask
id="mask0_89_26616"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect width="20" height="20" fill="currentColor" />
</mask>
<g mask="url(#mask0_89_26616)">
<path
d="M4 16.9999V14.4999H5.875L4.4375 8.77077C3.99306 8.56244 3.64236 8.25341 3.38542 7.84369C3.12847 7.43396 3 6.98605 3 6.49993C3 5.7916 3.24306 5.19785 3.72917 4.71868C4.21528 4.23952 4.8125 3.99993 5.52083 3.99993C6.0625 3.99993 6.55208 4.15966 6.98958 4.4791C7.42708 4.79855 7.72222 5.22216 7.875 5.74993H9.5V4.74993C9.5 4.5416 9.57292 4.36452 9.71875 4.21868C9.86458 4.07285 10.0417 3.99993 10.25 3.99993C10.4583 3.99993 10.6354 4.07285 10.7812 4.21868C10.9271 4.36452 11 4.5416 11 4.74993V4.89577L13 3.18743C13.1111 3.09021 13.2361 3.03466 13.375 3.02077C13.5139 3.00688 13.6528 3.02771 13.7917 3.08327L16.5625 4.33327C16.7569 4.4166 16.8924 4.55202 16.9688 4.73952C17.0451 4.92702 17.0347 5.11799 16.9375 5.31243C16.8542 5.49299 16.7153 5.61799 16.5208 5.68743C16.3264 5.75688 16.1319 5.75688 15.9375 5.68743L13.6042 4.64577L11.4167 6.49993L13.6042 8.37494L15.9375 7.33327C16.1319 7.24993 16.3229 7.24299 16.5104 7.31244C16.6979 7.38188 16.8403 7.51382 16.9375 7.70827C17.0208 7.88882 17.0243 8.06938 16.9479 8.24994C16.8715 8.43049 16.7431 8.57632 16.5625 8.68744L13.7917 9.93744C13.6667 10.0069 13.5312 10.0312 13.3854 10.0104C13.2396 9.98952 13.1111 9.93049 13 9.83327L11 8.12494V8.24994C11 8.45827 10.9271 8.63535 10.7812 8.78119C10.6354 8.92702 10.4583 8.99994 10.25 8.99994C10.0417 8.99994 9.86458 8.92702 9.71875 8.78119C9.57292 8.63535 9.5 8.45827 9.5 8.24994V7.24994H7.875C7.81944 7.44438 7.73958 7.62146 7.63542 7.78119C7.53125 7.94091 7.40972 8.09716 7.27083 8.24994L10.8542 14.4999H14V16.9999H4ZM5.5 7.62494C5.81944 7.62494 6.08681 7.5173 6.30208 7.30202C6.51736 7.08674 6.625 6.81938 6.625 6.49993C6.625 6.19438 6.51736 5.93396 6.30208 5.71868C6.08681 5.50341 5.81944 5.39577 5.5 5.39577C5.18056 5.39577 4.91319 5.50341 4.69792 5.71868C4.48264 5.93396 4.375 6.19438 4.375 6.49993C4.375 6.81938 4.48264 7.08674 4.69792 7.30202C4.91319 7.5173 5.18056 7.62494 5.5 7.62494ZM7.41667 14.4999H9.125L6.08333 9.18744L7.41667 14.4999Z"
fill="currentColor"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask
id="mask0_89_26596"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect width="20" height="20" fill="currentColor" />
</mask>
<g mask="url(#mask0_89_26596)">
<path
d="M5 12H15V10.5H5V12ZM5 9.25H15V7.75H5V9.25ZM5 6.5H15V5H5V6.5ZM18 18L15 15H3.5C3.0875 15 2.73438 14.8531 2.44063 14.5594C2.14688 14.2656 2 13.9125 2 13.5V3.5C2 3.0875 2.14688 2.73438 2.44063 2.44063C2.73438 2.14688 3.0875 2 3.5 2H16.5C16.9125 2 17.2656 2.14688 17.5594 2.44063C17.8531 2.73438 18 3.0875 18 3.5V18ZM3.5 13.5H15.625L16.5 14.375V3.5H3.5V13.5Z"
fill="currentColor"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 764 B

View File

@@ -1,11 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="currentColor"
>
<path
d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"
/>
</svg>

Before

Width:  |  Height:  |  Size: 329 B

View File

@@ -1,11 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="currentColor"
>
<path
d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z"
/>
</svg>

Before

Width:  |  Height:  |  Size: 794 B

View File

@@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask
id="mask0_89_26621"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect width="20" height="20" fill="currentColor" />
</mask>
<g mask="url(#mask0_89_26621)">
<path
d="M3.5 11.5L5.5 9.5L3.5 7.5L1.5 9.5L3.5 11.5ZM14.5 11.5L16.5 8L18.5 11.5H14.5ZM9.98958 10.5C9.30208 10.5 8.71528 10.2569 8.22917 9.77083C7.74306 9.28472 7.5 8.69444 7.5 8C7.5 7.30556 7.74306 6.71528 8.22917 6.22917C8.71528 5.74306 9.30556 5.5 10 5.5C10.6944 5.5 11.2847 5.74306 11.7708 6.22917C12.2569 6.71528 12.5 7.30903 12.5 8.01042C12.5 8.69792 12.2569 9.28472 11.7708 9.77083C11.2847 10.2569 10.691 10.5 9.98958 10.5ZM10 7C9.71667 7 9.47917 7.09583 9.2875 7.2875C9.09583 7.47917 9 7.71667 9 8C9 8.28333 9.09583 8.52083 9.2875 8.7125C9.47917 8.90417 9.71667 9 10 9C10.2833 9 10.5208 8.90417 10.7125 8.7125C10.9042 8.52083 11 8.28333 11 8C11 7.71667 10.9042 7.47917 10.7125 7.2875C10.5208 7.09583 10.2833 7 10 7ZM0 15.5V14.25C0 13.5139 0.34375 12.9722 1.03125 12.625C1.71875 12.2778 2.54167 12.1042 3.5 12.1042C3.70833 12.1042 3.91667 12.1146 4.125 12.1354C4.33333 12.1563 4.54167 12.1875 4.75 12.2292C4.5 12.4792 4.3125 12.7951 4.1875 13.1771C4.0625 13.559 4 13.9167 4 14.25V15.5H0ZM5 15.5V14.2604C5 13.434 5.42361 12.7674 6.27083 12.2604C7.11806 11.7535 8.36111 11.5 10 11.5C11.6389 11.5 12.8819 11.7528 13.7292 12.2585C14.5764 12.7644 15 13.4282 15 14.25V15.5H5ZM16.5 12.1042C17.4583 12.1042 18.2812 12.2778 18.9688 12.625C19.6562 12.9722 20 13.5139 20 14.25V15.5H16V14.25C16 13.9167 15.941 13.559 15.8229 13.1771C15.7049 12.7951 15.5139 12.4792 15.25 12.2292C15.4583 12.1875 15.6652 12.1563 15.8706 12.1354C16.0759 12.1146 16.2857 12.1042 16.5 12.1042ZM10 13C9.11111 13 8.40972 13.0799 7.89583 13.2396C7.38194 13.3993 6.93056 13.6528 6.54167 14H13.4583C13.0556 13.6528 12.6007 13.3993 12.0938 13.2396C11.5868 13.0799 10.8889 13 10 13Z"
fill="currentColor"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3a9 9 0 0 1 3.618 17.243l-2.193-5.602a3 3 0 1 0-2.849 0l-2.193 5.603A9 9 0 0 1 12 3"
/>
</svg>

Before

Width:  |  Height:  |  Size: 428 B

View File

@@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask
id="mask0_89_26548"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect width="20" height="20" fill="currentColor" />
</mask>
<g mask="url(#mask0_89_26548)">
<path
d="M8 17H4.5C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V12C3.55556 11.9722 4.02778 11.7674 4.41667 11.3854C4.80556 11.0035 5 10.5417 5 10C5 9.45833 4.80556 8.99653 4.41667 8.61458C4.02778 8.23264 3.55556 8.02778 3 8V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H8C8 2.44444 8.19285 1.97222 8.57854 1.58333C8.96438 1.19444 9.4366 1 9.99521 1C10.554 1 11.0278 1.19333 11.4167 1.58C11.8056 1.96667 12 2.44 12 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V8C17.5556 8 18.0278 8.19285 18.4167 8.57854C18.8056 8.96438 19 9.4366 19 9.99521C19 10.554 18.8067 11.0278 18.42 11.4167C18.0333 11.8056 17.56 12 17 12V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H12C11.9722 16.4444 11.7682 15.9722 11.3879 15.5833C11.0076 15.1944 10.5458 15 10.0025 15C9.45917 15 8.99653 15.1944 8.61458 15.5833C8.23264 15.9722 8.02778 16.4444 8 17ZM4.5 15.5H6.83333C7.11111 14.875 7.53819 14.3854 8.11458 14.0312C8.69097 13.6771 9.31944 13.5 10 13.5C10.6806 13.5 11.309 13.6771 11.8854 14.0312C12.4618 14.3854 12.8889 14.875 13.1667 15.5H15.5V10.5H17C17.1333 10.5 17.25 10.45 17.35 10.35C17.45 10.25 17.5 10.1333 17.5 10C17.5 9.86667 17.45 9.75 17.35 9.65C17.25 9.55 17.1333 9.5 17 9.5H15.5V4.5H10.5V3C10.5 2.86667 10.45 2.75 10.35 2.65C10.25 2.55 10.1333 2.5 10 2.5C9.86667 2.5 9.75 2.55 9.65 2.65C9.55 2.75 9.5 2.86667 9.5 3V4.5H4.5V6.83333C5.125 7.11111 5.61458 7.53819 5.96875 8.11458C6.32292 8.69097 6.5 9.31944 6.5 10C6.5 10.6974 6.32292 11.3335 5.96875 11.9083C5.61458 12.4833 5.125 12.9028 4.5 13.1667V15.5Z"
fill="currentColor"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask
id="mask0_89_26538"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect width="20" height="20" fill="currentColor" />
</mask>
<g mask="url(#mask0_89_26538)">
<path
d="M8 13.5L13.5 10L8 6.5V13.5ZM4.5 17C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H4.5ZM4.5 15.5H15.5V4.5H4.5V15.5Z"
fill="currentColor"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 792 B

View File

@@ -1,11 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="currentColor"
>
<path
d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q41-45 62.5-100.5T800-480q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"
/>
</svg>

Before

Width:  |  Height:  |  Size: 608 B

View File

@@ -1,11 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="currentColor"
>
<path
d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"
/>
</svg>

Before

Width:  |  Height:  |  Size: 368 B

View File

@@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask
id="mask0_89_26543"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect width="20" height="20" fill="currentColor" />
</mask>
<g mask="url(#mask0_89_26543)">
<path
d="M10 17C8.05556 17 6.40278 16.3194 5.04167 14.9583C3.68056 13.5972 3 11.9444 3 10H4.5C4.5 11.5139 5.03819 12.809 6.11458 13.8854C7.19097 14.9618 8.48611 15.5 10 15.5C11.5139 15.5 12.809 14.9618 13.8854 13.8854C14.9618 12.809 15.5 11.5139 15.5 10C15.5 8.48611 14.9618 7.19097 13.8854 6.11458C12.809 5.03819 11.5139 4.5 10 4.5C9.13889 4.5 8.3434 4.67778 7.61354 5.03333C6.88382 5.38889 6.26958 5.87778 5.77083 6.5H8V8H3V3H4.5V5.70833C5.13889 4.875 5.93403 4.21528 6.88542 3.72917C7.83681 3.24306 8.875 3 10 3C10.9722 3 11.8828 3.18472 12.7319 3.55417C13.581 3.92361 14.3199 4.42271 14.9485 5.05146C15.5773 5.68007 16.0764 6.41896 16.4458 7.26813C16.8153 8.11715 17 9.02778 17 10C17 10.9722 16.8153 11.8828 16.4458 12.7319C16.0764 13.581 15.5773 14.3199 14.9485 14.9485C14.3199 15.5773 13.581 16.0764 12.7319 16.4458C11.8828 16.8153 10.9722 17 10 17ZM12.0833 12.8333L9.25 10V6H10.75V9.375L13.1458 11.7708L12.0833 12.8333Z"
fill="currentColor"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask
id="mask0_89_26533"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect width="20" height="20" fill="currentColor" />
</mask>
<g mask="url(#mask0_89_26533)">
<path
d="M6.54165 17L5.83332 16.2917L4.56249 17.5625C4.27082 17.8542 3.91665 18 3.49999 18C3.08332 18 2.72915 17.8542 2.43749 17.5625C2.15971 17.2569 2.01735 16.8993 2.0104 16.4896C2.00346 16.0799 2.14582 15.7292 2.43749 15.4375L3.70832 14.1667L2.99999 13.4583L13.0208 3.4375C13.3125 3.14583 13.6632 3 14.0729 3C14.4826 3 14.8403 3.14583 15.1458 3.4375L16.5625 4.85417C16.8542 5.13194 17 5.47917 17 5.89583C17 6.3125 16.8542 6.66667 16.5625 6.95833L6.54165 17ZM9.27082 9.33333L5.12499 13.4583L6.54165 14.875L10.6875 10.7292L9.27082 9.33333Z"
fill="#2B2542"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 937 B

View File

@@ -1,11 +0,0 @@
<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_2)">
<rect width="1200" height="630" fill="#FF3670"/>
<path d="M807.836 142.655C715.59 138.706 630.888 195.464 599.461 282.281C568.034 195.464 483.332 138.706 391.086 142.655C388.013 215.854 423.032 285.658 483.546 326.958C514.556 348.257 533.087 383.583 532.984 421.202V486.46H665.951V421.202C665.843 383.585 684.37 348.258 715.376 326.958C775.907 285.674 810.931 215.859 807.836 142.655Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1_2">
<rect width="1200" height="630" fill="white"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 647 B

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