GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2026-05-23 20:10:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/2833_add_randomize_config_option_for_architecture_diagrams

Browse Source
This commit is contained in:
Jeroen Smink
2026-03-16 09:46:35 +01:00
committed by GitHub
parent 3f4df6700c d36b37ae85
commit d8dbe5656e
225 changed files with 4416 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.build/jsonSchema.ts
+1
View File
@@ -27,6 +27,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
'sankey',
'block',
'packet',
'treeView',
'architecture',
'radar',
'venn',
.changeset/brave-baths-behave.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Prevent HTML tags from being escaped in sandbox label rendering
.changeset/brave-memes-flash.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Support edge animation in hand drawn look
.changeset/busy-mirrors-try.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Resolved parsing error where direction TD was not recognized within subgraphs
.changeset/chatty-insects-dream.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix(treemap): Fixed treemap classDef style application to properly apply user-defined styles
.changeset/chilly-words-march.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Correct viewBox casing and make SVGs responsive
.changeset/curly-apes-prove.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Improve participant parsing and prevent recursive loops on invalid syntax
.changeset/curvy-cases-battle.md
-8
View File
@@ -1,8 +0,0 @@
---
'mermaid': patch
---
fix: respect `markdownAutoWrap: false` to prevent text auto-wrapping in flowchart markdown labels with `htmlLabels` enabled.
Markdown labels with `markdownAutoWrap: false, htmlLabels: false` set doesn't work
correctly.
.changeset/dirty-regions-start.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': patch
---
add link to ishikawa diagram on mermaid.js.org
.changeset/docs-gantt-duration-format.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': patch
---
docs: document valid duration token formats in gantt.md
.changeset/dry-brooms-fly.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: architecture diagram lines should now have the correct length
.changeset/eight-crabs-sell.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Support the [`htmlLabels` Mermaid config value](https://mermaid.js.org/config/schema-docs/config.html#htmllabels) whenever possible
.changeset/eight-jobs-sing.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: Export the `AsyncIconLoader`, `SyncIconLoader`, and `IconLoader` types.
.changeset/evil-monkeys-hunt.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: Add venn-beta diagram
.changeset/fair-swans-allow.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Prevent browser hang when using multiline accDescr in XY charts
.changeset/fix-7472-er-diagram-parsing-1-identifier.md
+9
View File
@@ -0,0 +1,9 @@
---
'mermaid': patch
---
fix: ER diagram parsing when using "1" as entity identifier on right side
The parser was incorrectly tokenizing the second "1" in patterns like `a many to 1 1:` because the lookahead rule only checked for alphabetic characters after whitespace, not digits. Added a new lookahead pattern `"1"(?=\s+[0-9])` to correctly identify the cardinality alias before a numeric entity name.
Fixes #7472
.changeset/fix-block-nested-positioning.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: correct block positioning when nested blocks span multiple columns
.changeset/fix-bt-arc-curves.md
-9
View File
@@ -1,9 +0,0 @@
---
'mermaid': patch
---
fix: correct BT orientation arc sweep flags in gitGraph drawArrow()
Swapped SVG arc sweep-flag values in the BT (bottom-to-top) orientation branches of `drawArrow()` so curves bend in the correct direction. Affects both rerouting and non-rerouting code paths for merge and non-merge arrows.
Resolves #6593
.changeset/fix-classdiagram-inline-annotations.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: support inline annotation syntax in class diagrams (class Shape <<interface>>)
.changeset/fix-colon-in-state-transition.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: allow colons in stateDiagram-v2 transition and state description text
.changeset/fix-gantt-dark-done-text.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: derive taskTextDarkColor from doneTaskBkgColor in dark theme for readable done-task text
.changeset/fix-ishikawa-indentation.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: preserve cause hierarchy when ishikawa effect is indented more than causes
.changeset/fix-pie-chart-title-clipping.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Prevent long pie chart titles from being clipped by expanding the viewBox
.changeset/fix-style-unknown-node-warning.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: warn when `style` statement targets a non-existent node in flowcharts
.changeset/flat-garlics-do.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: Add option to change timeline direction
.changeset/gentle-states-shine.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Allow :::className syntax inside composite state blocks
.changeset/gold-showers-pick.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': minor
---
Fix duplicate SVG element IDs when rendering multiple diagrams on the same page. Internal element IDs (nodes, edges, markers, clusters) are now prefixed with the diagram's SVG element ID across all diagram types. Custom CSS or JS using exact ID selectors like `#arrowhead` should use attribute-ending selectors like `[id$="-arrowhead"]` instead.
.changeset/late-bears-chew.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
revert: restore original hexagon and roundedRect implementations
.changeset/lazy-brooms-battle.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
feat: add alias support for new participant syntax of sequence diagrams
.changeset/loud-results-melt.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: Add half-arrowheads (solid & stick) and central connection support
.changeset/nine-bugs-drop.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix(er): recognize '1' cardinality alias before relationship operators
.changeset/olive-mails-joke.md
-8
View File
@@ -1,8 +0,0 @@
---
'mermaid': patch
---
fix: change `createLabel` to call `createText`
This adds support for KaTeX and FontAwesome icons loaded via iconpacks in some
older labels. There are some small changes in formatting due to standardizing this code.
.changeset/orange-clouds-kick.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: prevent unintended opacity on SVG aws icons containing rect elements
.changeset/plain-taxis-yawn.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: add theme support for data label colour in xy chart
.changeset/restore-hexagon-roundedrect.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
chore: restore original hexagon and roundedRect implementations
.changeset/rounded-edge-curves.md
-9
View File
@@ -1,9 +0,0 @@
---
'mermaid': minor
---
fix: replace smooth curve edges with rounded right-angle edges
The default flowchart edge curve changes from `basis` (smooth splines) to `rounded` (right-angle segments with rounded corners). This fixes ELK layout edges that were curving instead of routing at right angles (#7213) and applies consistently across all diagram types using the shared rendering pipeline.
To restore the previous smooth curve behavior, set `flowchart.curve: 'basis'` in your config.
.changeset/salty-seals-guess.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Ensure correct edge label rendering for ER and requirement diagrams when flowchart htmlLabels are false
.changeset/seven-towns-obey.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: Deprecate [`flowchart.htmlLabels`](https://mermaid.js.org/config/schema-docs/config-defs-flowchart-diagram-config.html#htmllabels) in favor of [root-level `htmlLabels`](https://mermaid.js.org/config/schema-docs/config.html#htmllabels) in Mermaid config
.changeset/shaky-cities-fry.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: add showDataLabelOutsideBar option for xy chart
.changeset/shiny-coats-stay.md
-22
View File
@@ -1,22 +0,0 @@
---
'@mermaid-js/parser': major
---
chore: upgrade to Langium v4
Upgrade `@mermaid-js/parser` to use Langium v4,
see https://github.com/eclipse-langium/langium/releases/tag/v4.0.0
for more details.
The major breaking changes that impact consumers of this package are:
- Due to various type-related changes, `langium` now requires version `>= 5.8.0`
of TypeScript.
- The generated type names from `ast.ts` have been moved from `<typeName>` to
`<typeName>.$type`
([langium#1942](https://github.com/eclipse-langium/langium/pull/1942)).
This also removes a transitive dependency on lodash versions that are vulnerable
to CVE-2025-13465, although
[chevrotain doesn't use the affected functions](https://github.com/Chevrotain/chevrotain/blob/21f20cd9754f8d5e85243fd9286d1fff397363ab/packages/website/docs/changes/CHANGELOG.md?plain=1#L5-L8),
so this is only to silence security scanners.
.changeset/short-seals-sort.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: allow to put notes in namespaces on classDiagram
.changeset/slow-bees-mate.md
-5
View File
@@ -1,5 +0,0 @@
---
'@mermaid-js/parser': patch
---
fix: enhanced parser error messages to include line and column numbers for better debugging experience
.changeset/slow-lemons-know.md
-5
View File
@@ -1,5 +0,0 @@
---
'@mermaid': patch
---
fix: Mindmap breaking in ELK layout
.changeset/sweet-games-build.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names
.changeset/swift-cloths-run.md
-29
View File
@@ -1,29 +0,0 @@
---
'mermaid': patch
---
fix: Restore proper rendering of plain text flowchart labels without auto line-wrapping
This fix restores backwards compatibility with Mermaid v10 by ensuring that plain text labels in flowcharts are rendered correctly. In Mermaid v11, all labels were incorrectly being treated as markdown by default, which caused issues with text wrapping, multiline breaks, and backwards compatibility.
**What changed:**
- Plain text labels in flowcharts (without markdown syntax) now render as regular text
- For node labels and edge labels, these will line-wrap automatically. Although this isn't backwards compatible with v10, we think this is a minor change and it's worth keeping to avoid too many changes from diagrams created from v11 onwards.
- Plain text labels in other diagrams will continue to not line wrap.
- Plain text labels with `\n` characters now correctly create line breaks
- Plain text that looks like markdown (e.g., "1.", "- x") is no longer misinterpreted
**If you want markdown formatting:**
You can still use markdown in your flowchart labels by using the proper markdown syntax. Wrap your markdown text with double quotes and backticks:
``node["`_markdown_ **text**`"]``
Example:
````markdown
```mermaid
flowchart TD
plain["Plain text\nwith manual line break"]
markdown["`This is a **markdown** _label_ that wraps and doesn't replace \n with newlines`"]
```
````
.changeset/ten-plums-bet.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Support ComponentQueue_Ext to prevent parsing error
.changeset/tender-guests-unite.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Allow quoted string labels in architecture-beta diagrams
.changeset/treemap-dark-theme-colors.md
+5
View File
@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: treemap title and labels use theme-aware colors for dark backgrounds
.changeset/tricky-lions-behave.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Correct tooltip placement to appear near hovered element
.changeset/tricky-rivers-stand.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype
.changeset/odd-crabs-bake.md → .changeset/weak-tools-pay.md
+2 -1
View File
@@ -1,6 +1,7 @@
---
'@mermaid-js/examples': minor
'mermaid': minor
'@mermaid-js/parser': minor
---
feat: Add Ishikawa diagram (ishikawa-beta)
add new TreeView diagram
.changeset/wide-lines-trade.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11
.changeset/wise-ends-bake.md
-5
View File
@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix(gitgraph): pass gitGraphConfig to renderer functions for applying directives properly.
.cspell/libraries.txt
+1
View File
@@ -69,6 +69,7 @@ sphinxcontrib
ssim
stylis
Swimm
Tachi
tsbuildinfo
tseslint
Tuleap
.github/lychee.toml
+16 -1
View File
@@ -60,7 +60,22 @@ exclude = [
"https://foswiki.org",
"https://www.gnu.org",
"https://redmine.org",
"https://mermaid-preview.com"
"https://mermaid-preview.com",
# npmjs.com 403
"https://(www.)?npmjs.com",
# dokuwiki.org 402
"https://(www.)?dokuwiki.org",
# medium.com 403
"https://medium.com",
# appsource.microsoft.com 403
"https://appsource.microsoft.com",
# mermaid.ai 403
"https://mermaid.ai"
]
# Exclude all private IPs from checking.
.gitignore
+4 -1
View File
@@ -54,12 +54,15 @@ demos/dev/**
!/demos/dev/reload.js
!/demos/dev/architecture-randomize.html
tsx-0/**
node-compile-cache/
vite.config.ts.timestamp-*
# autogenereated by langium-cli
generated/
# Agent instruction files (synced from mermaid-ops via /sync, not committed here)
# generated type declarations from pnpm prepare
packages/examples/src/**/*.d.ts
/CLAUDE.md
/AGENTS.md
/assistant/
cypress/helpers/util.ts
+20
View File
@@ -145,6 +145,26 @@ export const verifyScreenshot = (name: string): void => {
}
};
/**
* Asserts that no element ID appears more than once in the current document.
* Use after rendering multiple mermaid diagrams on the same page.
*/
export const assertNoDuplicateIds = (): void => {
cy.document().then((doc) => {
const allElements = doc.querySelectorAll('[id]');
const idCounts: Record<string, number> = {};
for (const el of allElements) {
const id = el.getAttribute('id')!;
idCounts[id] = (idCounts[id] || 0) + 1;
}
const duplicates = Object.entries(idCounts).filter(([, count]) => count > 1);
expect(
duplicates,
`Duplicate IDs found: ${duplicates.map(([id, n]) => `${id} (${n}x)`).join(', ')}`
).to.have.length(0);
});
};
export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
expect(value).to.be.within(
expected * (1 - deltaPercent / 100),
cypress/integration/other/interaction.spec.js
+12 -12
View File
@@ -61,36 +61,36 @@ describe('Interaction', () => {
});
it('should handle a click on a task with a bound URL clicking on the rect', () => {
cy.get('rect#cl1').click({ force: true });
cy.get('rect[id$="-cl1"]').click({ force: true });
cy.location().should(({ href }) => {
expect(href).to.eq(`${baseUrl}/empty.html`);
});
});
it('should handle a click on a task with a bound URL clicking on the text', () => {
cy.get('text#cl1-text').click({ force: true });
cy.get('text[id$="-cl1-text"]').click({ force: true });
cy.location().should(({ href }) => {
expect(href).to.eq(`${baseUrl}/empty.html`);
});
});
it('should handle a click on a task with a bound function without args', () => {
cy.get('rect#cl2').click({ force: true });
cy.get('rect[id$="-cl2"]').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
});
it('should handle a click on a task with a bound function with args', () => {
cy.get('rect#cl3').click({ force: true });
cy.get('rect[id$="-cl3"]').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
});
it('should handle a click on a task with a bound function without args', () => {
cy.get('text#cl2-text').click({ force: true });
cy.get('text[id$="-cl2-text"]').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
});
it('should handle a click on a task with a bound function with args ', () => {
cy.get('text#cl3-text').click({ force: true });
cy.get('text[id$="-cl3-text"]').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
});
});
@@ -124,26 +124,26 @@ describe('Interaction', () => {
});
it('should handle a click on a task with a bound URL clicking on the rect', () => {
cy.get('rect#cl1').click({ force: true });
cy.get('rect[id$="-cl1"]').click({ force: true });
cy.location().should(({ href }) => {
expect(href).to.eq(`${baseUrl}/empty.html`);
});
});
it('should handle a click on a task with a bound URL clicking on the text', () => {
cy.get('text#cl1-text').click({ force: true });
cy.get('text[id$="-cl1-text"]').click({ force: true });
cy.location().should(({ href }) => {
expect(href).to.eq(`${baseUrl}/empty.html`);
});
});
it('should handle a click on a task with a bound function', () => {
cy.get('rect#cl2').click({ force: true });
cy.get('rect[id$="-cl2"]').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist');
});
it('should handle a click on a task with a bound function', () => {
cy.get('text#cl2-text').click({ force: true });
cy.get('text[id$="-cl2-text"]').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist');
});
});
@@ -171,12 +171,12 @@ describe('Interaction', () => {
});
it('should handle a click on a task with a bound function', () => {
cy.get('rect#cl2').click({ force: true });
cy.get('rect[id$="-cl2"]').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist');
});
it('should handle a click on a task with a bound function', () => {
cy.get('text#cl2-text').click({ force: true });
cy.get('text[id$="-cl2-text"]').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist');
});
});
cypress/integration/other/rerender.spec.js
+2 -2
View File
@@ -8,10 +8,10 @@ describe('Rerendering', () => {
it('should be able to render and rerender a graph via API', () => {
const url = '/rerender.html';
cy.visit(url);
cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
cy.get('#graph [id*=flowchart-A]').should('have.text', 'XMas');
cy.get('body').find('#rerender').click({ force: true });
cy.get('#graph [id^=flowchart-A]').should('have.text', 'Saturday');
cy.get('#graph [id*=flowchart-A]').should('have.text', 'Saturday');
});
});
cypress/integration/rendering/erDiagram-unified.spec.js
+14
View File
@@ -30,6 +30,20 @@ describe('Entity Relationship Diagram Unified', () => {
);
});
it(`${description}should render ER diagram with edge labels centered when htmlLabels is false`, () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER ||--|{ ADDRESS : "invoiced at"
CUSTOMER ||--|{ ADDRESS : "receives goods at"
ORDER ||--o{ INVOICE : "liable for"
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render an ER diagram with a recursive relationship`, () => {
imgSnapshotTest(
`
cypress/integration/rendering/flowchart-handDrawn.spec.js
+2 -2
View File
@@ -1041,7 +1041,7 @@ graph TD
L_B_D_0@{ animation: fast }`,
{ look: 'handDrawn', screenshot: false }
);
cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
cy.get('path[id$="-L_A_B_0"]').should('have.class', 'edge-animation-slow');
cy.get('path[id$="-L_B_D_0"]').should('have.class', 'edge-animation-fast');
});
});
cypress/integration/rendering/flowchart-v2.spec.js
+12 -1
View File
@@ -71,7 +71,18 @@ describe('Flowchart v2', () => {
{ htmlLabels: false, flowchart: { htmlLabels: false } }
);
});
it('5a: angle brackets should be work without html labels', () => {
it('5a: should render flowchart with edge labels centered when htmlLabels is false', () => {
imgSnapshotTest(
`flowchart TB
A[Start] -->|first| B[Middle]
B -->|second| C[End]
`,
{ logLevel: 1, htmlLabels: false }
);
});
it('5b: angle brackets should be work without html labels', () => {
imgSnapshotTest(
`flowchart TD
a["**Plain text**:\n 5 > 3 && 2 < 4"]
cypress/integration/rendering/flowchart.spec.js
+2 -2
View File
@@ -786,8 +786,8 @@ describe('Graph', () => {
{ screenshot: false }
);
// Verify animation classes are applied to both edges
cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
cy.get('path[id$="-L_A_B_0"]').should('have.class', 'edge-animation-slow');
cy.get('path[id$="-L_B_D_0"]').should('have.class', 'edge-animation-fast');
});
it('58: handle styling with style expressions', () => {
imgSnapshotTest(
cypress/integration/rendering/gantt.spec.js
+34
View File
@@ -884,4 +884,38 @@ describe('Gantt diagram', () => {
{ theme: 'dark' }
);
});
it('should render done task inside-text readable in dark mode', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD
title Gantt dark mode done-task inside-text readability
section A section
Done :done, 2014-01-06, 14d
Active :active, 2014-01-20, 14d
section Critical tasks
Done critical :crit, done, 2014-01-06, 14d
`,
{ theme: 'dark' }
);
});
it('should render done task outside-text readable in dark mode (regression #7433)', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD
title Gantt dark mode done-task outside-text readability
section A section
A very long label that will not fit inside the short bar :done, 2014-01-06, 1d
Active short bar :active, 2014-01-07, 1d
section Critical tasks
A very long label that will not fit inside the short bar :crit, done, 2014-01-06, 1d
`,
{ theme: 'dark' }
);
});
});
cypress/integration/rendering/ishikawa.spec.ts
+15 -1
View File
@@ -155,7 +155,21 @@ describe('Ishikawa diagram', () => {
});
});
it('12: should render a very deep nested diagram', () => {
it('12: should render correctly when effect is indented more than causes', () => {
imgSnapshotTest(
`ishikawa-beta
Problem
Cause A
Subcause A1
Subcause A2
Cause B
Subcause B1
Cause C
`
);
});
it('13: should render a very deep nested diagram', () => {
imgSnapshotTest(
`ishikawa-beta
Very deep
cypress/integration/rendering/marker_unique_id.spec.js
+8 -1
View File
@@ -1,4 +1,4 @@
import { urlSnapshotTest } from '../../helpers/util.ts';
import { urlSnapshotTest, assertNoDuplicateIds } from '../../helpers/util.ts';
describe('Marker Unique IDs Per Diagram', () => {
it('should render a blue arrow tip in second digram', () => {
@@ -7,4 +7,11 @@ describe('Marker Unique IDs Per Diagram', () => {
flowchart: { htmlLabels: false },
});
});
it('should have no duplicate element IDs across all four diagrams', () => {
cy.visit('/marker_unique_id.html');
cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('have.length.at.least', 4);
assertNoDuplicateIds();
});
});
cypress/integration/rendering/multi_diagram_unique_ids.spec.js
+10
View File
@@ -0,0 +1,10 @@
import { assertNoDuplicateIds } from '../../helpers/util.ts';
describe('Multi-Diagram Unique IDs', () => {
it('should have no duplicate element IDs across all diagrams on the page', () => {
cy.visit('/multi_diagram_unique_ids.html');
cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('have.length.at.least', 8);
assertNoDuplicateIds();
});
});
cypress/integration/rendering/pie.spec.ts
+14
View File
@@ -101,4 +101,18 @@ describe('pie chart', () => {
{ theme: 'dark' }
);
});
it('should render a pie diagram with a long title without clipping', () => {
imgSnapshotTest(
`pie title Weekly Grocery Consumption for a Family of 4
"Vegetables": 25
"Fruits": 5
"Cheese": 5
"Milk": 15
"Eggs": 15
"Meat": 30
"Bread": 5
`
);
});
});
cypress/integration/rendering/timeline.spec.ts
+30
View File
@@ -225,4 +225,34 @@ timeline
{}
);
});
describe('Vertical Timeline (TD)', () => {
it('13: should render a simple vertical timeline with no specific sections', () => {
imgSnapshotTest(
`timeline TD
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
`,
{}
);
});
it('14: should render a vertical timeline diagram with sections', () => {
imgSnapshotTest(
`timeline TD
title Timeline of Industrial Revolution
section 17th-20th century
Industry 1.0 : Machinery, Water power, Steam <br>power
Industry 2.0 : Electricity, Internal combustion engine, Mass production
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data,3D printing
`,
{}
);
});
});
});
cypress/integration/rendering/treeView.spec.ts
+75
View File
@@ -0,0 +1,75 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('TreeView Diagram', () => {
it('should render a simple treeView diagram', () => {
imgSnapshotTest(
`treeView-beta
"file1.ts"`
);
});
it('should render a complex treeView diagram', () => {
imgSnapshotTest(
`treeView-beta
"root"
"folder1"
"file1.js"
"file2.ts"
"folder2"
"file3.spec.ts"
"folder3"
"file4.ts"
"file5.ts"
"folder4"
"file6.ts"
"file7.ts"`
);
});
it('should render a complex treeView diagram with multiple roots', () => {
imgSnapshotTest(
`treeView-beta
"folder1"
"file1.js"
"file2.ts"
"folder2"
"file3.spec.ts"
"folder3"
"file4.ts"
"file5.ts"
"folder4"
"file6.ts"
"file7.ts"`
);
});
it('should render a treeView diagram with custom config', () => {
imgSnapshotTest(
`
---
config:
treeView:
rowIndent: 80
lineThickness: 3
themeVariables:
treeView:
labelFontSize: '20px'
labelColor: '#FF0000'
lineColor: '#00FF00'
---
treeView-beta
"folder1"
"file1.js"
"file2.ts"
"folder2"
"file3.spec.ts"
"folder3"
"file4.ts"
"file5.ts"
"folder4"
"file6.ts"
"file7.ts"
`
);
});
});
cypress/integration/rendering/treemap.spec.ts
+36
View File
@@ -416,6 +416,42 @@ classDef highlight fill:#f39c12,color:#000,stroke:#e67e22,stroke-width:2px;
);
});
it('17: should render treemap with readable text on dark theme', () => {
imgSnapshotTest(
`---
config:
theme: dark
---
treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it('18: should render treemap with readable text on neutral theme', () => {
imgSnapshotTest(
`---
config:
theme: neutral
---
treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
/*
it.skip('17: should render a treemap with title', () => {
imgSnapshotTest(
cypress/integration/rendering/xyChart.spec.js
+42
View File
@@ -289,10 +289,13 @@ describe('XY Chart', () => {
`
---
config:
xyChart:
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#ff0000"
backgroundColor: "#f0f8ff"
dataLabelColor: "#eeeeee"
yAxisLabelColor: "#ee82ee"
yAxisTitleColor: "#7fffd4"
yAxisTickColor: "#87ceeb"
@@ -363,6 +366,45 @@ describe('XY Chart', () => {
);
});
it('should render vertical bar chart with labels outside bar', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
---
xychart
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`,
{}
);
});
it('should render horizontal bar chart with labels outside bar', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
chartOrientation: horizontal
---
xychart
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`,
{}
);
});
it('should render vertical bar chart without labels by default', () => {
imgSnapshotTest(
`
cypress/platform/ashish2.html
+1 -1
View File
@@ -59,7 +59,7 @@
<div>Security check</div>
<pre id="diagram" class="mermaid2">
timeline
title My day
title My day ahead
section Section with no tasks
section Go to work at the dog office
1930 : first step : second step is a long step
cypress/platform/multi_diagram_unique_ids.html
+81
View File
@@ -0,0 +1,81 @@
<html>
<head></head>
<body>
<h1>Multi-Diagram Unique ID Test</h1>
<p>Each diagram type below appears twice with identical content.</p>
<!-- Flowchart pair -->
<pre class="mermaid">
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[OK]
B -->|No| D[Cancel]
</pre>
<pre class="mermaid">
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[OK]
B -->|No| D[Cancel]
</pre>
<!-- Class diagram pair -->
<pre class="mermaid">
classDiagram
class Animal {
+String name
+makeSound()
}
class Dog {
+fetch()
}
Animal <|-- Dog
</pre>
<pre class="mermaid">
classDiagram
class Animal {
+String name
+makeSound()
}
class Dog {
+fetch()
}
Animal <|-- Dog
</pre>
<!-- ER diagram pair -->
<pre class="mermaid">
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
</pre>
<pre class="mermaid">
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
</pre>
<!-- State diagram pair -->
<pre class="mermaid">
stateDiagram-v2
[*] --> Active
Active --> Inactive
Inactive --> [*]
</pre>
<pre class="mermaid">
stateDiagram-v2
[*] --> Active
Active --> Inactive
Inactive --> [*]
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
await mermaid.run();
if (window.Cypress) {
window.rendered = true;
}
</script>
</body>
</html>
demos/index.html
+108 -105
View File
@@ -1,105 +1,108 @@
<!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: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h1>Mermaid quick test and demo pages</h1>
<p>
Some of these pages have duplicates; some are slow to load because they have so many graphs.
</p>
<p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
<p>
If you'd like to clean up one of the pages, please feel free to
<a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
</p>
<ul>
<li>
<h2><a href="./c4context.html">C4 Context</a></h2>
</li>
<li>
<h2><a href="./classchart.html">Class diagrams</a></h2>
</li>
<li>
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
</li>
<li>
<h2><a href="./er.html">Entity Relation diagram</a></h2>
</li>
<li>
<h2><a href="./flowchart.html">Flow charts</a></h2>
</li>
<li>
<h2><a href="./gantt.html">Gantt</a></h2>
</li>
<li>
<h2><a href="./git.html">Git</a></h2>
</li>
<li>
<h2><a href="./info.html">Info</a></h2>
</li>
<li>
<h2><a href="./journey.html">Journey</a></h2>
</li>
<li>
<h2><a href="./mindmap.html">Mindmap</a></h2>
</li>
<li>
<h2><a href="./ishikawa.html">Ishikawa</a></h2>
</li>
<li>
<h2><a href="./pie.html">Pie</a></h2>
</li>
<li>
<h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
</li>
<li>
<h2><a href="./xychart.html">XY charts</a></h2>
</li>
<li>
<h2><a href="./requirements.html">Requirements</a></h2>
</li>
<li>
<h2><a href="./sequence.html">Sequence</a></h2>
</li>
<li>
<h2><a href="./state.html">State</a></h2>
</li>
<li>
<h2><a href="./timeline.html">Timeline</a></h2>
</li>
<li>
<h2><a href="./zenuml.html">ZenUML</a></h2>
</li>
<li>
<h2><a href="./sankey.html">Sankey</a></h2>
</li>
<li>
<h2><a href="./packet.html">Packet</a></h2>
</li>
<li>
<h2><a href="./block.html">Layered Blocks</a></h2>
</li>
<li>
<h2><a href="./architecture.html">Architecture</a></h2>
</li>
<li>
<h2><a href="./radar.html">Radar</a></h2>
</li>
<li>
<h2><a href="./venn.html">Venn diagram</a></h2>
</li>
</ul>
</body>
</html>
<!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: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h1>Mermaid quick test and demo pages</h1>
<p>
Some of these pages have duplicates; some are slow to load because they have so many graphs.
</p>
<p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
<p>
If you'd like to clean up one of the pages, please feel free to
<a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
</p>
<ul>
<li>
<h2><a href="./c4context.html">C4 Context</a></h2>
</li>
<li>
<h2><a href="./classchart.html">Class diagrams</a></h2>
</li>
<li>
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
</li>
<li>
<h2><a href="./er.html">Entity Relation diagram</a></h2>
</li>
<li>
<h2><a href="./flowchart.html">Flow charts</a></h2>
</li>
<li>
<h2><a href="./gantt.html">Gantt</a></h2>
</li>
<li>
<h2><a href="./git.html">Git</a></h2>
</li>
<li>
<h2><a href="./info.html">Info</a></h2>
</li>
<li>
<h2><a href="./journey.html">Journey</a></h2>
</li>
<li>
<h2><a href="./mindmap.html">Mindmap</a></h2>
</li>
<li>
<h2><a href="./ishikawa.html">Ishikawa</a></h2>
</li>
<li>
<h2><a href="./pie.html">Pie</a></h2>
</li>
<li>
<h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
</li>
<li>
<h2><a href="./xychart.html">XY charts</a></h2>
</li>
<li>
<h2><a href="./requirements.html">Requirements</a></h2>
</li>
<li>
<h2><a href="./sequence.html">Sequence</a></h2>
</li>
<li>
<h2><a href="./state.html">State</a></h2>
</li>
<li>
<h2><a href="./timeline.html">Timeline</a></h2>
</li>
<li>
<h2><a href="./zenuml.html">ZenUML</a></h2>
</li>
<li>
<h2><a href="./sankey.html">Sankey</a></h2>
</li>
<li>
<h2><a href="./packet.html">Packet</a></h2>
</li>
<li>
<h2><a href="./block.html">Layered Blocks</a></h2>
</li>
<li>
<h2><a href="./architecture.html">Architecture</a></h2>
</li>
<li>
<h2><a href="./radar.html">Radar</a></h2>
</li>
<li>
<h2><a href="./venn.html">Venn diagram</a></h2>
</li>
<li>
<h2><a href="./treeView.html">TreeView</a></h2>
</li>
</ul>
</body>
</html>
demos/timeline.html
+13
View File
@@ -23,6 +23,19 @@
1940 : fourth step : fifth step
</pre>
<h2>Vertical Timeline</h2>
<pre class="mermaid">
timeline TD
title My day
section Wake up
0600 : step
: step
section Go to work
0800 : first step : second step
: third step very very very very very loooooong
1940 : fourth step : fifth step
</pre>
<h2>Medical Device Lifecycle Timeline</h2>
<pre class="mermaid">
timeline
demos/treeView.html
+75
View File
@@ -0,0 +1,75 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mermaid TreeView 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>TreeView Diagram Demo</h1>
<h2>Basic TreeView Example</h2>
<pre class="mermaid">
treeView-beta
"docs"
"build"
"make.bat"
"Makefile"
"out"
"source"
"build"
"static"
"_templates"
"div. Files"
</pre>
<h2>TreeView Config Example</h2>
<pre class="mermaid">
---
config:
treeView:
rowIndent: 80
lineThickness: 3
themeVariables:
treeView:
labelFontSize: '20px'
labelColor: '#FF0000'
lineColor: '#00FF00'
---
treeView-beta
"packages"
"mermaid"
"src"
"parser"
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
logLevel: 1,
securityLevel: 'loose',
});
</script>
</body>
</html>
demos/xychart.html
+144
View File
@@ -15,6 +15,7 @@
<body>
<h1>XY Charts demos</h1>
<pre class="mermaid">
xychart
title "Sales Revenue (in $)"
@@ -23,6 +24,7 @@
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr />
<h1>XY Charts horizontal</h1>
<pre class="mermaid">
@@ -52,6 +54,7 @@
line [+1.3, .6, 2.4, -.34]
</pre>
<hr />
<h1>XY Charts Bar with multiple category</h1>
<pre class="mermaid">
xychart
@@ -61,6 +64,137 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<hr />
<h1>XY Charts Bar with showDataLabel</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
---
xychart
title "Basic xychart with showDataLabel"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<hr />
<h1>XY Charts Bar with showDataLabel and showDataLabelOutsideBar</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
---
xychart
title "Basic xychart showDataLabel and showDataLabelOutsideBar"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<hr />
<h1>XY Charts Bar with showDataLabel (alternate data)</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
---
xychart
title "Basic xychart showDataLabel and showDataLabelOutsideBar (alternate data)"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr />
<h1>XY Charts Bar with showDataLabel and showDataLabelOutsideBar (alternate data)</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
---
xychart
title "Basic xychart showDataLabel and showDataLabelOutsideBar (alternate data)"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr />
<h1>XY Charts Bar Horizontal with showDataLabel</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart
title "Basic xychart Horizontal with showDataLabel"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<hr />
<h1>XY Charts Bar Horizontal with showDataLabel and showDataLabelOutsideBar</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
chartOrientation: horizontal
---
xychart
title "Basic xychart Horizontal showDataLabel and showDataLabelOutsideBar"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<hr />
<h1>XY Charts Bar Horizontal with showDataLabel (alternate data)</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart
title "Basic xychart Horizontal showDataLabel (alternate data)"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr />
<h1>
XY Charts Bar Horizontal with showDataLabel and showDataLabelOutsideBar (alternate data)
</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
chartOrientation: horizontal
---
xychart
title "Basic xychart Horizontal showDataLabel and showDataLabelOutsideBar (alternate data)"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr />
<h1>XY Charts line with multiple category</h1>
<pre class="mermaid">
xychart
@@ -70,6 +204,7 @@
line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<hr />
<h1>XY Charts category with large text</h1>
<pre class="mermaid">
xychart
@@ -79,6 +214,7 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<hr />
<h1>sparkline demo</h1>
<pre class="mermaid">
---
@@ -93,6 +229,7 @@ config:
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre>
<hr />
<h1>sparkBar demo</h1>
<pre class="mermaid">
---
@@ -107,6 +244,7 @@ config:
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre>
<hr />
<h1>XY Charts demos with all configs</h1>
<pre class="mermaid">
---
@@ -135,6 +273,7 @@ config:
axisLineWidth: 5
chartOrientation: horizontal
plotReservedSpacePercent: 60
showDataLabel: true
---
xychart
title "Sales Revenue"
@@ -144,14 +283,19 @@ config:
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr />
<h1>XY Charts demos with all theme config</h1>
<pre class="mermaid">
---
config:
xyChart:
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#ff0000"
backgroundColor: "#f0f8ff"
dataLabelColor: "#eeeeee"
yAxisLabelColor: "#ee82ee"
yAxisTitleColor: "#7fffd4"
yAxisTickColor: "#87ceeb"
docs/community/new-diagram.md
+6 -4
View File
@@ -8,15 +8,17 @@
### Examples
> **Warning**
> The below steps are a work in progress and will be updated soon.
### Step 1: Grammar & Parsing
Please refer to the following PRs on how to use Langium to add a new diagram grammar.
- <https://github.com/mermaid-js/mermaid/pull/4839>
- <https://github.com/mermaid-js/mermaid/pull/4751>
> **Warning**
> The below steps are a work in progress and will be updated soon.
### Step 1: Grammar & Parsing
The grammar language is documented [here](https://langium.org/docs/reference/grammar-language/). The [Langium Playground](https://langium.org/playground/) can help you test your diagram grammar against real inputs.
### Step 2: Rendering
docs/config/directives.md
+1 -1
View File
@@ -253,7 +253,7 @@ The following code snippet changes flowchart config:
Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
> **Warning**
> **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v\<MERMAID_RELEASE_VERSION>+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level.
> **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v11.12.3+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level.
```mermaid-example
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
docs/config/setup/defaultConfig/variables/configKeys.md
+1 -1
View File
@@ -12,4 +12,4 @@
> `const` **configKeys**: `Set`<`string`>
Defined in: [packages/mermaid/src/defaultConfig.ts:298](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L298)
Defined in: [packages/mermaid/src/defaultConfig.ts:302](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L302)
docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md
+4 -4
View File
@@ -10,7 +10,7 @@
# Interface: ExternalDiagramDefinition
Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
## Properties
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me
> **detector**: `DiagramDetector`
Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L98)
Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
---
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/me
> **id**: `string`
Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L98)
---
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/me
> **loader**: `DiagramLoader`
Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
docs/config/setup/mermaid/interfaces/LayoutData.md
+8
View File
@@ -26,6 +26,14 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.co
---
### diagramId?
> `optional` **diagramId**: `string`
Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L172)
---
### edges
> **edges**: `Edge`\[]
docs/config/setup/mermaid/interfaces/MermaidConfig.md
+15 -7
View File
@@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string.
> `optional` **dompurifyConfig**: `Config`
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:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L223)
---
@@ -179,7 +179,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
> `optional` **fontSize**: `number`
Defined in: [packages/mermaid/src/config.type.ts:224](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L224)
Defined in: [packages/mermaid/src/config.type.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L225)
---
@@ -305,7 +305,7 @@ Defines which main look to use for the diagram.
> `optional` **markdownAutoWrap**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L225)
Defined in: [packages/mermaid/src/config.type.ts:226](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L226)
---
@@ -365,7 +365,7 @@ Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid
> `optional` **radar**: `RadarDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L220)
Defined in: [packages/mermaid/src/config.type.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L221)
---
@@ -437,7 +437,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid
> `optional` **suppressErrorRendering**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:231](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L231)
Defined in: [packages/mermaid/src/config.type.ts:232](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L232)
Suppresses inserting 'Syntax error' diagram in the DOM.
This is useful when you want to control how to handle syntax errors in your application.
@@ -479,11 +479,19 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid
---
### treeView?
> `optional` **treeView**: `TreeViewDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L220)
---
### venn?
> `optional` **venn**: `VennDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L221)
Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222)
---
@@ -491,7 +499,7 @@ Defined in: [packages/mermaid/src/config.type.ts:221](https://github.com/mermaid
> `optional` **wrap**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L223)
Defined in: [packages/mermaid/src/config.type.ts:224](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L224)
---
docs/config/setup/mermaid/type-aliases/SVG.md
+1 -1
View File
@@ -12,4 +12,4 @@
> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
Defined in: [packages/mermaid/src/diagram-api/types.ts:129](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L129)
docs/config/setup/mermaid/type-aliases/SVGGroup.md
+1 -1
View File
@@ -12,4 +12,4 @@
> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
Defined in: [packages/mermaid/src/diagram-api/types.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L131)
docs/ecosystem/integrations-community.md
+4 -1
View File
@@ -186,6 +186,8 @@ Communication tools and platforms
- [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
- [Inkdrop](https://www.inkdrop.app)
- [Mermaid Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
- [IntelliJ Idea](https://www.jetbrains.com/idea/)
- [Mermaid Visualizer](https://plugins.jetbrains.com/plugin/30432-mermaid-visualizer)
- [Light Table](http://lighttable.com/)
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
- [Markdown-It](https://github.com/markdown-it/markdown-it)
@@ -219,7 +221,7 @@ Communication tools and platforms
- [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
- [Codedoc](https://codedoc.cc/)
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
- [Docsy Hugo Theme](https://www.docsy.dev/docs/content/diagrams-and-formulae/) ✅
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
- [Gatsby](https://www.gatsbyjs.com/)
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
@@ -260,6 +262,7 @@ Communication tools and platforms
| Mermaid Diagrams | [🎡🔗](https://chromewebstore.google.com/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
| Monkeys | [🎡🔗](https://chromewebstore.google.com/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
| Mermaid Previewer | [🎡🔗](https://chromewebstore.google.com/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
| Tachi Code | [🎡🔗](https://chromewebstore.google.com/detail/tachi-code/acoecgiamdjjkhmdodcfdfanfnagamjf) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/tachi-code/) | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/tachi-code/mombmlijgpfamkenkmggobjimompbpji) | - |
### Other
docs/syntax/classDiagram.md
+12 -32
View File
@@ -543,39 +543,19 @@ It is possible to annotate classes with markers to provide additional metadata a
- `<<Service>>` To represent a service class
- `<<Enumeration>>` To represent an enum
Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:
Annotations are defined within the opening `<<` and closing `>>`. There are three ways to add an annotation to a class, and in all cases the output will be the same:
> **Tip:**\
> In Mermaid class diagrams, annotations like `<<interface>>` can be attached in two ways:
>
> - **Inline with the class definition** (Recommended for consistency):
>
> ```mermaid-example
> classDiagram
> class Shape <<interface>>
> ```
>
> ```mermaid
> classDiagram
> class Shape <<interface>>
> ```
>
> - **Separate line after the class definition**:
>
> ```mermaid-example
> classDiagram
> class Shape
> <<interface>> Shape
> ```
>
> ```mermaid
> classDiagram
> class Shape
> <<interface>> Shape
> ```
>
> Both methods are fully supported and produce identical diagrams.\
> However, it is recommended to use the **inline style** for better readability and consistent formatting across diagrams.
- **Inline** with the class definition:
```mermaid-example
classDiagram
class Shape <<interface>>
```
```mermaid
classDiagram
class Shape <<interface>>
```
- In a **_separate line_** after a class is defined:
docs/syntax/gantt.md
+17
View File
@@ -145,6 +145,23 @@ After processing the tags, the remaining metadata items are interpreted as follo
> **Note**
> Support for keyword `until` was added in (v10.9.0+). This can be used to define a task which is running until some other specific task or milestone starts.
#### Duration format
When specifying a `<length>`, use a number followed by one of these unit suffixes:
| Unit | Suffix | Example |
| ------------ | ------ | ------- |
| Milliseconds | `ms` | `500ms` |
| Seconds | `s` | `30s` |
| Minutes | `m` | `30m` |
| Hours | `h` | `4h` |
| Days | `d` | `3d` |
| Weeks | `w` | `2w` |
| Months | `M` | `1M` |
| Years | `y` | `1y` |
Decimal values are also supported (e.g., `1.5d`). Invalid duration tokens (e.g., `3dX`) will be ignored and the task will default to zero duration.
For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
```mermaid-example
docs/syntax/ishikawa.md
+1 -1
View File
@@ -4,7 +4,7 @@
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/ishikawa.md](../../packages/mermaid/src/docs/syntax/ishikawa.md).
# Ishikawa diagram (v\<MERMAID_RELEASE_VERSION>+)
# Ishikawa diagram (v11.12.3+)
Ishikawa diagrams are used to represent causes of a specific event (or a problem).
They are also known as fishbone diagrams, herringbone diagrams or cause-and-effect diagrams.
docs/syntax/sequenceDiagram.md
+2 -2
View File
@@ -424,7 +424,7 @@ Lines can be solid or dotted, and can end with various types of arrowheads, cros
| `-)` | Solid line with an open arrow at the end (async) |
| `--)` | Dotted line with a open arrow at the end (async) |
**Half-Arrows (v\<MERMAID_RELEASE_VERSION>+)**
**Half-Arrows (v11.12.3+)**
The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).
@@ -449,7 +449,7 @@ The following half-arrow types are supported for more expressive sequence diagra
| `\\-` | Solid line with reverse bottom stick half arrowhead |
| `\\--` | Dotted line with reverse bottom stick half arrowhead |
## Central Connections (v\<MERMAID_RELEASE_VERSION>+)
## Central Connections (v11.12.3+)
Mermaid sequence diagrams support **central lifeline connections** using a `()`.
This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.
docs/syntax/timeline.md
+31
View File
@@ -185,6 +185,37 @@ timeline
Bullet 4 : sub-point 4a : sub-point 4b
```
### Direction (v\<MERMAID_RELEASE_VERSION>+)
Timeline can change its direction by the keyword after `timeline`.
```mermaid-example
timeline TD
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Bullet 1 : sub-point 1a : sub-point 1b
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Bullet 3 : sub-point <br> 3a : sub-point 3b
Bullet 4 : sub-point 4a : sub-point 4b
```
```mermaid
timeline TD
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Bullet 1 : sub-point 1a : sub-point 1b
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Bullet 3 : sub-point <br> 3a : sub-point 3b
Bullet 4 : sub-point 4a : sub-point 4b
```
Possible directions are:
- `LR`: Left to right (default)
- `TD`: Top top down.
## Styling of time periods and events
As explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme.
docs/syntax/treeView.md
+97
View File
@@ -0,0 +1,97 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treeView.md](../../packages/mermaid/src/docs/syntax/treeView.md).
# TreeView Diagram (v\<MERMAID_RELEASE_VERSION>+)
## Introduction
A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure.
## Syntax
The structure of the tree depends only on indentation.
```
treeView-beta
"<folder name>"
"<file name>"
"<folder name>"
"<file name>"
"<file-name>"
```
## Examples
```mermaid-example
treeView-beta
"packages"
"mermaid"
"src"
"parser"
```
```mermaid
treeView-beta
"packages"
"mermaid"
"src"
"parser"
```
```mermaid-example
---
config:
treeView:
rowIndent: 80
lineThickness: 3
themeVariables:
treeView:
labelFontSize: '20px'
labelColor: '#FF0000'
lineColor: '#00FF00'
---
treeView-beta
"packages"
"mermaid"
"src"
"parser"
```
```mermaid
---
config:
treeView:
rowIndent: 80
lineThickness: 3
themeVariables:
treeView:
labelFontSize: '20px'
labelColor: '#FF0000'
lineColor: '#00FF00'
---
treeView-beta
"packages"
"mermaid"
"src"
"parser"
```
## Config Variables
| Property | Description | Default Value |
| ------------- | ------------------------- | ------------- |
| rowIndent | Indentation for each row | 10 |
| paddingX | Horizontal padding of row | 5 |
| paddingY | Vertical padding of row | 5 |
| lineThickness | Thickness of the line | 1 |
### Theme Variables
| Property | Description | Default Value |
| ------------- | ---------------------- | ------------- |
| labelFontSize | Font size of the label | '16px' |
| labelColor | Color of the label | 'black' |
| lineColor | Color of the line | 'black' |
docs/syntax/venn.md
+1 -1
View File
@@ -4,7 +4,7 @@
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/venn.md](../../packages/mermaid/src/docs/syntax/venn.md).
# Venn diagrams (v\<MERMAID_RELEASE_VERSION>+)
# Venn diagrams (v\11.12.3+)
Venn diagrams show relationships between sets using overlapping circles.
docs/syntax/xyChart.md
+62
View File
@@ -119,6 +119,7 @@ xychart
| chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
| showDataLabel | Should show the value corresponding to the bar within the bar | false |
| showDataLabelOutsideBar | If showing data label then show it outside the bar. | false |
### AxisConfig
@@ -153,6 +154,7 @@ config:
| ---------------- | --------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| dataLabelColor | Color of the Data labels (if shown) |
| xAxisLabelColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
@@ -209,6 +211,66 @@ bar [15,25,20,30]
line [5,15,25,35]
```
## Displaying individual values on a bar chart (v\<MERMAID_RELEASE_VERSION>+)
To show the value corresponding to a bar specify `showDataLabel: true`.
```mermaid-example
---
config:
xyChart:
showDataLabel: true
---
xychart
title "Genres in top 100 book survey of 2025"
x-axis [comedy, romance, mystery, crime, "non fiction", other]
y-axis "Number of Books" 0 --> 30
bar [12,2,20,25,17,24]
```
```mermaid
---
config:
xyChart:
showDataLabel: true
---
xychart
title "Genres in top 100 book survey of 2025"
x-axis [comedy, romance, mystery, crime, "non fiction", other]
y-axis "Number of Books" 0 --> 30
bar [12,2,20,25,17,24]
```
Labels are shown within the bar by default. To show the labels outside the bar, specify `showDataLabelOutsideBar: true`.
```mermaid-example
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
---
xychart
title "Genres in top 100 book survey of 2025"
x-axis [comedy, romance, mystery, crime, "non fiction", other]
y-axis "Number of Books" 0 --> 30
bar [12,2,20,25,17,24]
```
```mermaid
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
---
xychart
title "Genres in top 100 book survey of 2025"
x-axis [comedy, romance, mystery, crime, "non fiction", other]
y-axis "Number of Books" 0 --> 30
bar [12,2,20,25,17,24]
```
## Example on config and theme
```mermaid-example
packages/examples/CHANGELOG.md
+6
View File
@@ -1,5 +1,11 @@
# @mermaid-js/examples
## 1.1.0
### Minor Changes
- [#7387](https://github.com/mermaid-js/mermaid/pull/7387) [`acce4db`](https://github.com/mermaid-js/mermaid/commit/acce4db7a1bd8801666f1a9667a63e4010ec2020) Thanks [@exoego](https://github.com/exoego)! - feat: Add Ishikawa diagram (ishikawa-beta)
## 1.0.0
### Minor Changes
packages/examples/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@mermaid-js/examples",
"version": "1.0.0",
"version": "1.1.0",
"description": "Mermaid examples package",
"author": "Sidharth Vinod",
"license": "MIT",
packages/examples/src/examples/tree-view.ts
+24
View File
@@ -0,0 +1,24 @@
import type { DiagramMetadata } from '../types.js';
export default {
id: 'treeView',
name: 'TreeView',
description: 'Visualize hierarchical data as a tree structure',
examples: [
{
title: 'Basic TreeView',
isDefault: true,
code: `treeView-beta
"docs"
"build"
"make.bat"
"Makefile"
"out"
"source"
"build"
"static"
"_templates"
"div. Files"`,
},
],
} satisfies DiagramMetadata;
packages/examples/src/index.ts
+2
View File
@@ -23,6 +23,7 @@ import packetDiagram from './examples/packet.js';
import blockDiagram from './examples/block.js';
import treemapDiagram from './examples/treemap.js';
import vennDiagram from './examples/venn.js';
import treeViewDiagram from './examples/tree-view.js';
export const diagramData: DiagramMetadata[] = [
flowChart,
@@ -49,4 +50,5 @@ export const diagramData: DiagramMetadata[] = [
blockDiagram,
treemapDiagram,
vennDiagram,
treeViewDiagram,
];
packages/mermaid-layout-elk/CHANGELOG.md
+11
View File
@@ -1,5 +1,16 @@
# @mermaid-js/layout-elk
## 0.2.1
### Patch Changes
- [#7425](https://github.com/mermaid-js/mermaid/pull/7425) [`f16bfbb`](https://github.com/mermaid-js/mermaid/commit/f16bfbbd3b4cf59f816913029760031bf778f41d) Thanks [@knsv](https://github.com/knsv)! - fix: use rounded right-angle edges for ELK layout
ELK layout edges now default to `rounded` curve (right-angle segments with rounded corners) instead of inheriting the global `basis` default. This fixes ELK edges that were curving instead of routing at right angles (#7213). Non-ELK layouts are unaffected and keep their existing `basis` default.
- Updated dependencies [[`96a766d`](https://github.com/mermaid-js/mermaid/commit/96a766dcdbb7d6e3043344a2ee3f1b64ba7a62c3), [`32723b2`](https://github.com/mermaid-js/mermaid/commit/32723b2de13474d7d13e9292e6f801e9874936ab), [`a60e615`](https://github.com/mermaid-js/mermaid/commit/a60e615bc31edeb1d623d096117812c0f721f2f8), [`1a9d45a`](https://github.com/mermaid-js/mermaid/commit/1a9d45abf0a991c40985021e8b523c32b46dd897), [`96ca7c0`](https://github.com/mermaid-js/mermaid/commit/96ca7c090f28eea458027e6871903d789575cfa1), [`60f6331`](https://github.com/mermaid-js/mermaid/commit/60f633101cd2e55ee80ad2250ae57d4c970430e5), [`fa15ce8`](https://github.com/mermaid-js/mermaid/commit/fa15ce8502d2f1d72787998d9d944c5a98b992dd), [`33c7c72`](https://github.com/mermaid-js/mermaid/commit/33c7c7206400509537a28f15d0e817340c482cb4), [`3c069b5`](https://github.com/mermaid-js/mermaid/commit/3c069b52859470dea89f45d5f859b1087b7e1fee), [`9745f32`](https://github.com/mermaid-js/mermaid/commit/9745f325cb9e1967640f0e85da193a2f820634f1), [`d6db0b0`](https://github.com/mermaid-js/mermaid/commit/d6db0b039654f6e122c6098821bc75f2910915e3), [`cdacb0b`](https://github.com/mermaid-js/mermaid/commit/cdacb0b30171bd15223c008a56c09f7ece842940), [`a408b55`](https://github.com/mermaid-js/mermaid/commit/a408b5586fb57aac54da4606940779562078f91d), [`712c1ec`](https://github.com/mermaid-js/mermaid/commit/712c1ec1222a771b38cd3b8a5ddf9c2fc4e2cbcc), [`981a62e`](https://github.com/mermaid-js/mermaid/commit/981a62e4ee6078d27a541db35df441734434d5c1), [`a4bb0b5`](https://github.com/mermaid-js/mermaid/commit/a4bb0b5920e24e44f1a12b163fdcfe6de672871a), [`b0f9d5b`](https://github.com/mermaid-js/mermaid/commit/b0f9d5b3aaf01bf5662525bcf59ac42d4bf069ab), [`981fbb8`](https://github.com/mermaid-js/mermaid/commit/981fbb8bd8be584d443dbdc14c84a2718906421d), [`93aa657`](https://github.com/mermaid-js/mermaid/commit/93aa6575788bdee992d4a60102b1dfdf95c9f4ce), [`6bc6617`](https://github.com/mermaid-js/mermaid/commit/6bc6617ca6a30b05d35d5ea1dacb940729ab42fd), [`73e9849`](https://github.com/mermaid-js/mermaid/commit/73e9849f993cd766eecddf349e335a4473560f37), [`9d0669a`](https://github.com/mermaid-js/mermaid/commit/9d0669a8c04281c3e96b96f285d4dd5d9e0088d7), [`acce4db`](https://github.com/mermaid-js/mermaid/commit/acce4db7a1bd8801666f1a9667a63e4010ec2020), [`7eed6a1`](https://github.com/mermaid-js/mermaid/commit/7eed6a1c347886461c931676b3ca22c1d5f3e1a8), [`2000680`](https://github.com/mermaid-js/mermaid/commit/2000680429204b0dd3a970bccfa47e8395f6b00d), [`b7c66a2`](https://github.com/mermaid-js/mermaid/commit/b7c66a220adc811404660004d19c81fc26b0fb53), [`f16bfbb`](https://github.com/mermaid-js/mermaid/commit/f16bfbbd3b4cf59f816913029760031bf778f41d), [`aac86f7`](https://github.com/mermaid-js/mermaid/commit/aac86f7de32a65fa850db20f14f65565a191564e), [`9745f32`](https://github.com/mermaid-js/mermaid/commit/9745f325cb9e1967640f0e85da193a2f820634f1), [`2dd29be`](https://github.com/mermaid-js/mermaid/commit/2dd29bee254a5b89c00eb0b0da1bcf7fe96ce46c), [`ace0367`](https://github.com/mermaid-js/mermaid/commit/ace0367afd0100ef645f7a583ba4cfbd08064133), [`09b74f1`](https://github.com/mermaid-js/mermaid/commit/09b74f1c29edf3d51c96d3ef17cb63af036908e1), [`33c7c72`](https://github.com/mermaid-js/mermaid/commit/33c7c7206400509537a28f15d0e817340c482cb4), [`835de00`](https://github.com/mermaid-js/mermaid/commit/835de0012d7e9981eceafd252b423768e9248830), [`a9e4c72`](https://github.com/mermaid-js/mermaid/commit/a9e4c72ed124b4ee632c1c9154838ab10e2d5e03), [`ff15e51`](https://github.com/mermaid-js/mermaid/commit/ff15e51d2e26df8f6331021ea83fe3a44d450b94), [`8bfd477`](https://github.com/mermaid-js/mermaid/commit/8bfd47758ad5255459d0cced5210d3cb8cfa6f91), [`b136acd`](https://github.com/mermaid-js/mermaid/commit/b136acdc670dee2e4825d5d93e825c0ed0551beb), [`e0317ac`](https://github.com/mermaid-js/mermaid/commit/e0317ac764349d5049f3ebeee30a15c2febc911b)]:
- mermaid@11.13.0
## 0.2.0
### Minor Changes

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