mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-19 12:14:07 +01:00
Merge branch 'develop' into saurabh/refactor-fontawesome-icon-usage
This commit is contained in:
Sidharth Vinod
5
.changeset/eleven-wolves-deny.md
Normal file
5
.changeset/eleven-wolves-deny.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
chore: Convert StateDB into TypeScript
|
||||
5
.changeset/neat-moose-compare.md
Normal file
5
.changeset/neat-moose-compare.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'mermaid': minor
|
||||
---
|
||||
|
||||
feat: Add support for styling Journey Diagram title (color, font-family, and font-size)
|
||||
5
.changeset/soft-readers-tan.md
Normal file
5
.changeset/soft-readers-tan.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'mermaid': minor
|
||||
---
|
||||
|
||||
feat: Dynamically Render Data Labels Within Bar Charts
|
||||
5
.changeset/ten-lamps-trade.md
Normal file
5
.changeset/ten-lamps-trade.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: allow colons in events
|
||||
@@ -53,7 +53,6 @@ frontmatter
|
||||
funs
|
||||
gantt
|
||||
GENERICTYPE
|
||||
getBoundarys
|
||||
grammr
|
||||
graphtype
|
||||
halign
|
||||
|
||||
2
.github/ISSUE_TEMPLATE/theme_proposal.yml
vendored
2
.github/ISSUE_TEMPLATE/theme_proposal.yml
vendored
@@ -29,7 +29,7 @@ body:
|
||||
label: Colors
|
||||
description: |-
|
||||
A detailed list of the different colour values to use.
|
||||
A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
|
||||
See the [list of currently used variable names](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
|
||||
placeholder: |-
|
||||
- background: #f4f4f4
|
||||
- primaryColor: #fff4dd
|
||||
|
||||
6
.github/lychee.toml
vendored
6
.github/lychee.toml
vendored
@@ -46,11 +46,13 @@ exclude = [
|
||||
# Drupal 403
|
||||
"https://(www.)?drupal.org",
|
||||
|
||||
# Swimm returns 404, eventhough the link is valid
|
||||
# Swimm returns 404, even though the link is valid
|
||||
"https://docs.swimm.io",
|
||||
|
||||
# Timeout
|
||||
"https://huehive.co"
|
||||
"https://huehive.co",
|
||||
"https://foswiki.org",
|
||||
"https://www.gnu.org",
|
||||
]
|
||||
|
||||
# Exclude all private IPs from checking.
|
||||
|
||||
2
.github/stale.yml
vendored
2
.github/stale.yml
vendored
@@ -15,5 +15,5 @@ markComment: >
|
||||
If you are still interested in this issue and it is still relevant you can comment to revive it.
|
||||
# Comment to post when closing a stale issue. Set to `false` to disable
|
||||
closeComment: >
|
||||
This issue has been been automatically closed due to a lack of activity.
|
||||
This issue has been automatically closed due to a lack of activity.
|
||||
This is done to maintain a clean list of issues that the community is interested in developing.
|
||||
|
||||
4
.github/workflows/e2e-applitools.yml
vendored
4
.github/workflows/e2e-applitools.yml
vendored
@@ -45,13 +45,15 @@ jobs:
|
||||
- if: ${{ env.USE_APPLI }}
|
||||
name: Notify applitools of new batch
|
||||
# Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
|
||||
run: curl -L -d '' -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
|
||||
env:
|
||||
# e.g. mermaid-js/mermaid/my-branch
|
||||
APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
|
||||
APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
|
||||
APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
|
||||
APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
|
||||
uses: wei/curl@61d92b5169ea0425820dd13cf6fbad66b483e9f1
|
||||
with:
|
||||
args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
|
||||
|
||||
- name: Cypress run
|
||||
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||
|
||||
10
.github/workflows/e2e-timings.yml
vendored
10
.github/workflows/e2e-timings.yml
vendored
@@ -48,7 +48,14 @@ jobs:
|
||||
SPLIT_FILE: 'cypress/timings.json'
|
||||
|
||||
- name: Compare timings
|
||||
run: pnpm tsx scripts/compare-timings.ts
|
||||
id: compare
|
||||
run: |
|
||||
OUTPUT=$(pnpm tsx scripts/compare-timings.ts)
|
||||
echo "$OUTPUT" >> $GITHUB_STEP_SUMMARY
|
||||
|
||||
echo "output<<EOF" >> $GITHUB_OUTPUT
|
||||
echo "$OUTPUT" >> $GITHUB_OUTPUT
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Commit and create pull request
|
||||
uses: peter-evans/create-pull-request@a7b20e1da215b3ef3ccddb48ff65120256ed6226
|
||||
@@ -58,5 +65,6 @@ jobs:
|
||||
commit-message: 'chore: update E2E timings'
|
||||
branch: update-timings
|
||||
title: Update E2E Timings
|
||||
body: ${{ steps.compare.outputs.output }}
|
||||
delete-branch: true
|
||||
sign-commits: true
|
||||
|
||||
@@ -256,7 +256,7 @@ mermaid.run({
|
||||
- Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
|
||||
- logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
|
||||
- How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
|
||||
- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
|
||||
- Mermaid neutral style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
|
||||
- Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
|
||||
- Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
|
||||
- Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
|
||||
@@ -833,7 +833,7 @@ mermaid.run({
|
||||
- Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
|
||||
- Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
|
||||
- Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
|
||||
- Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
|
||||
- GitHub buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
|
||||
- Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
|
||||
|
||||
## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
|
||||
@@ -1002,4 +1002,4 @@ mermaid.run({
|
||||
|
||||
## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
|
||||
|
||||
\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)_
|
||||
\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/GitHub-Changelog-Generator)_
|
||||
|
||||
@@ -44,7 +44,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
|
||||
|
||||
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
|
||||
|
||||
<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
|
||||
<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
|
||||
|
||||
## Table of content
|
||||
|
||||
@@ -451,7 +451,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
|
||||
|
||||
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
|
||||
|
||||
_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
|
||||
_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
|
||||
|
||||
## Reporting vulnerabilities
|
||||
|
||||
|
||||
@@ -43,13 +43,13 @@ Mermaid
|
||||
|
||||
**感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
|
||||
|
||||
<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
|
||||
<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
|
||||
|
||||
## 关于 Mermaid
|
||||
|
||||
<!-- <Main description> -->
|
||||
|
||||
Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
|
||||
Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
|
||||
|
||||
> Doc-Rot 是 Mermaid 致力于解决的一个难题。
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ describe('Interaction', () => {
|
||||
});
|
||||
|
||||
it('Graph: should handle a click on a node with a bound url', () => {
|
||||
// When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
|
||||
// When there is a URL, `cy.contains()` selects the `a` tag instead of the `span` tag. The .node is a child of `a`, so we have to use `find()` instead of `parent`.
|
||||
cy.contains('URLTest1').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
@@ -146,7 +146,7 @@ describe('Interaction', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Interaction - security level other, missspelling', () => {
|
||||
describe('Interaction - security level other, misspelling', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('http://localhost:9000/click_security_other.html');
|
||||
});
|
||||
|
||||
@@ -19,7 +19,7 @@ describe.skip('architecture diagram', () => {
|
||||
`
|
||||
);
|
||||
});
|
||||
it('should render a simple architecture diagram with titleAndAccessabilities', () => {
|
||||
it('should render a simple architecture diagram with titleAndAccessibilities', () => {
|
||||
imgSnapshotTest(
|
||||
`architecture-beta
|
||||
title Simple Architecture Diagram
|
||||
|
||||
@@ -14,7 +14,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL2: should handle colums statement in sub-blocks', () => {
|
||||
it('BL2: should handle columns statement in sub-blocks', () => {
|
||||
imgSnapshotTest(
|
||||
`block-beta
|
||||
id1["Hello"]
|
||||
@@ -30,7 +30,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
|
||||
it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
|
||||
imgSnapshotTest(
|
||||
`block-beta
|
||||
block
|
||||
@@ -46,7 +46,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL4: should align block widths and handle colums 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(
|
||||
`block-beta
|
||||
columns 1
|
||||
@@ -66,7 +66,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL5: should align block widths and handle colums 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(
|
||||
`block-beta
|
||||
columns 1
|
||||
@@ -236,7 +236,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL17: width alignment - blocks shold be equal in width', () => {
|
||||
it('BL17: width alignment - blocks should be equal in width', () => {
|
||||
imgSnapshotTest(
|
||||
`block-beta
|
||||
A("This is the text")
|
||||
|
||||
@@ -429,7 +429,7 @@ describe('Class diagram', () => {
|
||||
classDiagram
|
||||
class \`This\nTitle\nHas\nMany\nNewlines\` {
|
||||
+String Also
|
||||
-Stirng Many
|
||||
-String Many
|
||||
#int Members
|
||||
+And()
|
||||
-Many()
|
||||
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
|
||||
classDiagram
|
||||
class \`This\nTitle\nHas\nMany\nNewlines\` {
|
||||
+String Also
|
||||
-Stirng Many
|
||||
-String Many
|
||||
#int Members
|
||||
+And()
|
||||
-Many()
|
||||
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
|
||||
namespace testingNamespace {
|
||||
class \`This\nTitle\nHas\nMany\nNewlines\` {
|
||||
+String Also
|
||||
-Stirng Many
|
||||
-String Many
|
||||
#int Members
|
||||
+And()
|
||||
-Many()
|
||||
|
||||
@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
|
||||
`flowchart-elk TB
|
||||
internet
|
||||
nat
|
||||
routeur
|
||||
router
|
||||
lb1
|
||||
lb2
|
||||
compute1
|
||||
compute2
|
||||
subgraph project
|
||||
routeur
|
||||
router
|
||||
nat
|
||||
subgraph subnet1
|
||||
compute1
|
||||
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
|
||||
lb2
|
||||
end
|
||||
end
|
||||
internet --> routeur
|
||||
routeur --> subnet1 & subnet2
|
||||
internet --> router
|
||||
router --> subnet1 & subnet2
|
||||
subnet1 & subnet2 --> nat --> internet
|
||||
`,
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
@@ -443,7 +443,7 @@ flowchart-elk TD
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
);
|
||||
});
|
||||
it('63-elk: title on subgraphs should be themable', () => {
|
||||
it('63-elk: title on subgraphs should be themeable', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
|
||||
|
||||
@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
|
||||
`flowchart TB
|
||||
internet
|
||||
nat
|
||||
routeur
|
||||
router
|
||||
lb1
|
||||
lb2
|
||||
compute1
|
||||
compute2
|
||||
subgraph project
|
||||
routeur
|
||||
router
|
||||
nat
|
||||
subgraph subnet1
|
||||
compute1
|
||||
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
|
||||
lb2
|
||||
end
|
||||
end
|
||||
internet --> routeur
|
||||
routeur --> subnet1 & subnet2
|
||||
internet --> router
|
||||
router --> subnet1 & subnet2
|
||||
subnet1 & subnet2 --> nat --> internet
|
||||
`,
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
@@ -433,7 +433,7 @@ flowchart TD
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
);
|
||||
});
|
||||
it('63: title on subgraphs should be themable', () => {
|
||||
it('63: title on subgraphs should be themeable', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
|
||||
@@ -699,7 +699,7 @@ A --> B
|
||||
{ flowchart: { titleTopMargin: 10 } }
|
||||
);
|
||||
});
|
||||
it('3192: It should be possieble to render flowcharts with invisible edges', () => {
|
||||
it('3192: It should be possible to render flowcharts with invisible edges', () => {
|
||||
imgSnapshotTest(
|
||||
`---
|
||||
title: Simple flowchart with invisible edges
|
||||
@@ -1076,11 +1076,11 @@ end
|
||||
);
|
||||
});
|
||||
});
|
||||
describe('New @ sytax for node metadata edge cases', () => {
|
||||
describe('New @ syntax for node metadata edge cases', () => {
|
||||
it('should be possible to use @ syntax to add labels on multi nodes', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
|
||||
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
@@ -1088,7 +1088,7 @@ end
|
||||
it('should be possible to use @ syntax to add labels with trail spaces and &', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
|
||||
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
@@ -1097,8 +1097,8 @@ end
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"]
|
||||
n4@{ label: "labe for n4"}
|
||||
n5@{ label: "labe for n5"}
|
||||
n4@{ label: "label for n4"}
|
||||
n5@{ label: "label for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
|
||||
it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
gantt
|
||||
@@ -573,7 +573,7 @@ describe('Gantt diagram', () => {
|
||||
`
|
||||
);
|
||||
});
|
||||
it('should render a gantt diagram exculding friday and saturday', () => {
|
||||
it('should render a gantt diagram excluding friday and saturday', () => {
|
||||
imgSnapshotTest(
|
||||
`gantt
|
||||
title A Gantt Diagram
|
||||
@@ -584,7 +584,7 @@ describe('Gantt diagram', () => {
|
||||
A task :a1, 2024-02-28, 10d`
|
||||
);
|
||||
});
|
||||
it('should render a gantt diagram exculding saturday and sunday', () => {
|
||||
it('should render a gantt diagram excluding saturday and sunday', () => {
|
||||
imgSnapshotTest(
|
||||
`gantt
|
||||
title A Gantt Diagram
|
||||
@@ -671,7 +671,7 @@ describe('Gantt diagram', () => {
|
||||
title Gantt Digram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
;A task with a semiclon :a1, 2014-01-01, 30d
|
||||
;A task with a semicolon :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
|
||||
@@ -11,7 +11,7 @@ describe('Git Graph diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('2: should render a simple gitgraph with commit on main branch with Id', () => {
|
||||
it('2: should render a simple gitgraph with commit on main branch with id', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph
|
||||
commit id: "One"
|
||||
@@ -253,7 +253,7 @@ describe('Git Graph diagram', () => {
|
||||
`
|
||||
gitGraph
|
||||
checkout main
|
||||
%% Make sure to manually set the ID of all commits, for consistent visual tests
|
||||
%% Make sure to manually set the id of all commits, for consistent visual tests
|
||||
commit id: "1-abcdefg"
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -343,7 +343,7 @@ gitGraph
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
|
||||
it('16: should render a simple gitgraph with commit on main branch with id | Vertical Branch', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph TB:
|
||||
commit id: "One"
|
||||
@@ -585,7 +585,7 @@ gitGraph
|
||||
`
|
||||
gitGraph TB:
|
||||
checkout main
|
||||
%% Make sure to manually set the ID of all commits, for consistent visual tests
|
||||
%% Make sure to manually set the id of all commits, for consistent visual tests
|
||||
commit id: "1-abcdefg"
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -1024,7 +1024,7 @@ gitGraph TB:
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
|
||||
it('51: should render a simple gitgraph with commit on main branch with id | Vertical Branch - Bottom-to-top', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph BT:
|
||||
commit id: "One"
|
||||
@@ -1266,7 +1266,7 @@ gitGraph TB:
|
||||
`
|
||||
gitGraph BT:
|
||||
checkout main
|
||||
%% Make sure to manually set the ID of all commits, for consistent visual tests
|
||||
%% Make sure to manually set the id of all commits, for consistent visual tests
|
||||
commit id: "1-abcdefg"
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -1491,7 +1491,7 @@ gitGraph TB:
|
||||
`
|
||||
gitGraph
|
||||
switch main
|
||||
%% Make sure to manually set the ID of all commits, for consistent visual tests
|
||||
%% Make sure to manually set the id of all commits, for consistent visual tests
|
||||
commit id: "1-abcdefg"
|
||||
switch main
|
||||
branch branch1
|
||||
|
||||
@@ -224,4 +224,38 @@ section Checkout from website
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should correctly render the user journey diagram title with the specified styling', () => {
|
||||
renderGraph(
|
||||
`---
|
||||
config:
|
||||
journey:
|
||||
titleColor: "#2900A5"
|
||||
titleFontFamily: "Times New Roman"
|
||||
titleFontSize: "5rem"
|
||||
---
|
||||
|
||||
journey
|
||||
title User Journey Example
|
||||
section Onboarding
|
||||
Sign Up: 5: John, Shahir
|
||||
Complete Profile: 4: John
|
||||
section Engagement
|
||||
Browse Features: 3: John
|
||||
Use Core Functionality: 4: John
|
||||
section Retention
|
||||
Revisit Application: 5: John
|
||||
Invite Friends: 3: John
|
||||
|
||||
size: 2rem
|
||||
`
|
||||
);
|
||||
|
||||
cy.get('text').contains('User Journey Example').as('title');
|
||||
cy.get('@title').then(($title) => {
|
||||
expect($title).to.have.attr('fill', '#2900A5');
|
||||
expect($title).to.have.attr('font-family', 'Times New Roman');
|
||||
expect($title).to.have.attr('font-size', '5rem');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -62,7 +62,7 @@ describe('Kanban diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('6: should handle assigments', () => {
|
||||
it('6: should handle assignments', () => {
|
||||
imgSnapshotTest(
|
||||
`kanban
|
||||
id1[Todo]
|
||||
@@ -118,7 +118,7 @@ kanban
|
||||
docs[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
id7[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id9[Ready for deploy]
|
||||
id10[Ready for test]
|
||||
|
||||
@@ -146,7 +146,7 @@ root
|
||||
shouldHaveRoot
|
||||
);
|
||||
});
|
||||
it('text shouhld wrap with icon', () => {
|
||||
it('text should wrap with icon', () => {
|
||||
imgSnapshotTest(
|
||||
`mindmap
|
||||
root
|
||||
|
||||
@@ -64,7 +64,7 @@ describe('pie chart', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should render a pie diagram when textPosition is setted', () => {
|
||||
it('should render a pie diagram when textPosition is set', () => {
|
||||
imgSnapshotTest(
|
||||
`pie
|
||||
"Dogs": 50
|
||||
|
||||
@@ -45,7 +45,7 @@ describe('Quadrant Chart', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should able to render y-axix on right side', () => {
|
||||
it('should able to render y-axis on right side', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
|
||||
@@ -61,7 +61,7 @@ describe('Quadrant Chart', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should able to render x-axix on bottom', () => {
|
||||
it('should able to render x-axis on bottom', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
|
||||
@@ -77,7 +77,7 @@ describe('Quadrant Chart', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should able to render x-axix on bottom and y-axis on right', () => {
|
||||
it('should able to render x-axis on bottom and y-axis on right', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%
|
||||
|
||||
@@ -138,8 +138,8 @@ describe('State diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram-v2
|
||||
State1: This a a single line description
|
||||
State2: This a a multi line description
|
||||
State1: This a single line description
|
||||
State2: This a multi line description
|
||||
State2: here comes the multi part
|
||||
[*] --> State1
|
||||
State1 --> State2
|
||||
@@ -345,7 +345,7 @@ stateDiagram
|
||||
}
|
||||
);
|
||||
});
|
||||
it('v2 width of compond state should grow with title if title is wider', () => {
|
||||
it('v2 width of compound state should grow with title if title is wider', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram-v2
|
||||
@@ -402,8 +402,8 @@ stateDiagram-v2
|
||||
`
|
||||
stateDiagram-v2
|
||||
MyState
|
||||
note left of MyState : I am a leftie
|
||||
note right of MyState : I am a rightie
|
||||
note left of MyState : I am a lefty
|
||||
note right of MyState : I am a righty
|
||||
`,
|
||||
{
|
||||
logLevel: 0,
|
||||
@@ -552,7 +552,7 @@ style AState fill:#636,border:1px solid red,color:white;
|
||||
{ logLevel: 0, fontFamily: 'courier' }
|
||||
);
|
||||
});
|
||||
it(' should let styles take preceedence over classes', () => {
|
||||
it(' should let styles take precedence over classes', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram-v2
|
||||
@@ -565,7 +565,7 @@ style AState fill:#636,border:1px solid red,color:white;
|
||||
{ logLevel: 0, fontFamily: 'courier' }
|
||||
);
|
||||
});
|
||||
it(' should allow styles to take effect in stubgraphs', () => {
|
||||
it(' should allow styles to take effect in subgraphs', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram
|
||||
|
||||
@@ -129,8 +129,8 @@ describe('State diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram
|
||||
State1: This a a single line description
|
||||
State2: This a a multi line description
|
||||
State1: This a single line description
|
||||
State2: This a multi line description
|
||||
State2: here comes the multi part
|
||||
[*] --> State1
|
||||
State1 --> State2
|
||||
|
||||
@@ -7,7 +7,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
`,
|
||||
{}
|
||||
@@ -35,7 +35,7 @@ describe('Timeline diagram', () => {
|
||||
section Stone Age
|
||||
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
|
||||
section Broze Age
|
||||
section Bronze Age
|
||||
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
|
||||
: New styles of pottery and ways of burying the dead appear.
|
||||
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
|
||||
@@ -51,7 +51,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
`,
|
||||
{}
|
||||
@@ -68,7 +68,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -84,7 +84,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -101,7 +101,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -118,7 +118,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -135,7 +135,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -152,7 +152,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
|
||||
@@ -179,6 +179,7 @@ describe('XY Chart', () => {
|
||||
axisLineWidth: 5
|
||||
chartOrientation: horizontal
|
||||
plotReservedSpacePercent: 60
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
@@ -315,4 +316,516 @@ describe('XY Chart', () => {
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render vertical bar chart with labels', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
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', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
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(
|
||||
`
|
||||
xychart-beta
|
||||
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 without labels by default', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
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 multiple bar plots vertically with labels correctly', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Multiple Bar Plots"
|
||||
x-axis Categories [A, B, C]
|
||||
y-axis "Values" 0 --> 100
|
||||
bar [10, 50, 90]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render multiple bar plots horizontally with labels correctly', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Multiple Bar Plots"
|
||||
x-axis Categories [A, B, C]
|
||||
y-axis "Values" 0 --> 100
|
||||
bar [10, 50, 90]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a single bar with label for a vertical xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Single Bar Chart"
|
||||
x-axis Categories [A]
|
||||
y-axis "Value" 0 --> 100
|
||||
bar [75]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a single bar with label for a horizontal xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Single Bar Chart"
|
||||
x-axis Categories [A]
|
||||
y-axis "Value" 0 --> 100
|
||||
bar [75]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Decimal and Negative Values"
|
||||
x-axis Categories [A, B, C]
|
||||
y-axis -10 --> 10
|
||||
bar [ -2.5, 0.75, 5.1 ]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Decimal and Negative Values"
|
||||
x-axis Categories [A, B, C]
|
||||
y-axis -10 --> 10
|
||||
bar [ -2.5, 0.75, 5.1 ]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render data labels within each bar in the vertical xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan,b,c]
|
||||
y-axis "Revenue (in $)" 4000 --> 12000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
// Check horizontal alignment (within tolerance)
|
||||
expect(textProps.x + textProps.width / 2).to.be.closeTo(
|
||||
barProps.x + barProps.width / 2,
|
||||
5
|
||||
);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels within each bar in the horizontal xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan,b,c]
|
||||
y-axis "Revenue (in $)" 4000 --> 12000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
expect(textProps.y + textProps.height / 2).to.be.closeTo(
|
||||
barProps.y + barProps.height / 2,
|
||||
5
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
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]
|
||||
y-axis "Revenue (in $)" 4000 --> 12000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
// Check horizontal alignment (within tolerance)
|
||||
expect(textProps.x + textProps.width / 2).to.be.closeTo(
|
||||
barProps.x + barProps.width / 2,
|
||||
5
|
||||
);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
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]
|
||||
y-axis "Revenue (in $)" 4000 --> 12000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
expect(textProps.y + textProps.height / 2).to.be.closeTo(
|
||||
barProps.y + barProps.height / 2,
|
||||
5
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels correctly for a bar in the vertical xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan]
|
||||
y-axis "Revenue (in $)" 3000 --> 12000
|
||||
bar [4000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
// Check horizontal alignment (within tolerance)
|
||||
expect(textProps.x + textProps.width / 2).to.be.closeTo(
|
||||
barProps.x + barProps.width / 2,
|
||||
5
|
||||
);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan]
|
||||
y-axis "Revenue (in $)" 3000 --> 12000
|
||||
bar [4000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
expect(textProps.y + textProps.height / 2).to.be.closeTo(
|
||||
barProps.y + barProps.height / 2,
|
||||
5
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
<pre id="diagram" class="mermaid2">
|
||||
timeline
|
||||
title My day
|
||||
section section with no tasks
|
||||
section Section with no tasks
|
||||
section Go to work at the dog office
|
||||
1930 : first step : second step is a long step
|
||||
: third step
|
||||
@@ -70,18 +70,18 @@
|
||||
1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
|
||||
1970 : Green Revolution comes to india
|
||||
section Another section with no tasks
|
||||
I am a big big big tasks
|
||||
I am not so big tasks
|
||||
I am a very, very big task
|
||||
I am not so big task
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
timeline
|
||||
title MermaidChart 2023 Timeline
|
||||
section 2023 Q1 <br> Release Personal Tier
|
||||
Buttet 1 : sub-point 1a : sub-point 1b
|
||||
Bullet 1 : sub-point 1a : sub-point 1b
|
||||
: sub-point 1c
|
||||
Bullet 2 : sub-point 2a : sub-point 2b
|
||||
section 2023 Q2 <br> Release XYZ Tier
|
||||
Buttet 3 : sub-point <br> 3a : sub-point 3b
|
||||
Bullet 3 : sub-point <br> 3a : sub-point 3b
|
||||
: sub-point 3c
|
||||
Bullet 4 : sub-point 4a : sub-point 4b
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
section Stone Age
|
||||
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||
6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
|
||||
section Broze Age
|
||||
section Bronze Age
|
||||
2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
|
||||
: New styles of pottery and ways of burying the dead appear.
|
||||
2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
|
||||
@@ -106,7 +106,7 @@
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google : Pixar
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008s : Instagram
|
||||
@@ -122,7 +122,7 @@
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google : Pixar
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008s : Instagram
|
||||
@@ -139,7 +139,7 @@
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -152,7 +152,7 @@
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008s : Instagram
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
+String owner
|
||||
+BigDecimal balance
|
||||
+deposit(amount) bool
|
||||
+withdrawl(amount) int
|
||||
+withdrawal(amount) int
|
||||
}
|
||||
cssClass "BankAccount" customCss
|
||||
|
||||
@@ -56,7 +56,7 @@ classE o-- classF : aggregation
|
||||
+String owner
|
||||
+BigDecimal balance
|
||||
+deposit(amount) bool
|
||||
+withdrawl(amount) int
|
||||
+withdrawal(amount) int
|
||||
}
|
||||
Class01~T~ <|-- AveryLongClass : Cool
|
||||
Class03~T~ *-- Class04~T~
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict_', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px">
|
||||
sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
|
||||
sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had previously
|
||||
overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
|
||||
though
|
||||
</div>
|
||||
@@ -61,9 +61,9 @@
|
||||
#quot;elit#quot;."}}
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 50%">
|
||||
flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
|
||||
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
|
||||
routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
|
||||
flowchart TB internet nat router lb1 lb2 compute1 compute2 subgraph project router nat
|
||||
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> router
|
||||
router --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 50%">
|
||||
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
+String owner
|
||||
+BigDecimal balance
|
||||
+deposit(amount) bool
|
||||
+withdrawl(amount) int
|
||||
+withdrawal(amount) int
|
||||
}
|
||||
cssClass "BankAccount" customCss
|
||||
</pre>
|
||||
|
||||
@@ -386,7 +386,7 @@ kanban
|
||||
[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
id7[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id9[Ready for deploy]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id10[Ready for test]
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
let diagram = 'graph LR\n';
|
||||
diagram += " B(<a href='<";
|
||||
diagram += 'script></';
|
||||
diagram += "script>Javascript:xssAttack`1`'>Click)";
|
||||
diagram += "script>JavaScript:xssAttack`1`'>Click)";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
setPoints(List~int~ points)
|
||||
getPoints() List~int~
|
||||
}
|
||||
|
||||
|
||||
Square : -List~string~ messages
|
||||
Square : +setMessages(List~string~ messages)
|
||||
Square : +getMessages() List~string~
|
||||
@@ -88,7 +88,7 @@
|
||||
---
|
||||
classDiagram
|
||||
class Duck {
|
||||
|
||||
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
@@ -127,8 +127,8 @@
|
||||
-attribute:type
|
||||
- attribute : type
|
||||
test
|
||||
|
||||
+ GetAttribute() type
|
||||
|
||||
+ GetAttribute() type
|
||||
+ GetAttribute() type
|
||||
}
|
||||
</pre>
|
||||
@@ -449,7 +449,7 @@
|
||||
---
|
||||
config:
|
||||
theme: forest
|
||||
look: handDrawns
|
||||
look: handDrawn
|
||||
layout: elk
|
||||
---
|
||||
classDiagram
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
CAR:::someclass
|
||||
PERSON:::anotherclass,someclass
|
||||
|
||||
|
||||
classDef someclass fill:#f96
|
||||
classDef anotherclass color:blue
|
||||
</pre>
|
||||
@@ -90,7 +90,7 @@
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
test test PK "comment"
|
||||
text text PK "comment"
|
||||
string make
|
||||
string model
|
||||
string[] parts
|
||||
@@ -108,7 +108,7 @@
|
||||
string carRegistrationNumber PK, FK
|
||||
string driverLicence PK, FK
|
||||
}
|
||||
MANUFACTURER only one to zero or more CAR : makes
|
||||
MANUFACTURER only one to zero or more CAR : makes
|
||||
</pre>
|
||||
</div>
|
||||
<div class="test">
|
||||
@@ -129,7 +129,7 @@
|
||||
string email
|
||||
}
|
||||
p ||--o| a : has
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="test">
|
||||
|
||||
@@ -2,211 +2,211 @@
|
||||
"durations": [
|
||||
{
|
||||
"spec": "cypress/integration/other/configuration.spec.js",
|
||||
"duration": 5475
|
||||
"duration": 5450
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/external-diagrams.spec.js",
|
||||
"duration": 2037
|
||||
"duration": 2004
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/ghsa.spec.js",
|
||||
"duration": 3207
|
||||
"duration": 3183
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/iife.spec.js",
|
||||
"duration": 1915
|
||||
"duration": 1913
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/interaction.spec.js",
|
||||
"duration": 10952
|
||||
"duration": 10944
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/rerender.spec.js",
|
||||
"duration": 1872
|
||||
"duration": 1938
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/xss.spec.js",
|
||||
"duration": 26686
|
||||
"duration": 26753
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/appli.spec.js",
|
||||
"duration": 2629
|
||||
"duration": 2571
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/architecture.spec.ts",
|
||||
"duration": 104
|
||||
"duration": 110
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/block.spec.js",
|
||||
"duration": 14765
|
||||
"duration": 14697
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/c4.spec.js",
|
||||
"duration": 4913
|
||||
"duration": 4705
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
|
||||
"duration": 36667
|
||||
"duration": 35841
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
|
||||
"duration": 33813
|
||||
"duration": 34279
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
|
||||
"duration": 20441
|
||||
"duration": 20641
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
|
||||
"duration": 32504
|
||||
"duration": 33020
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram.spec.js",
|
||||
"duration": 13772
|
||||
"duration": 13546
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
|
||||
"duration": 7978
|
||||
"duration": 8072
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/current.spec.js",
|
||||
"duration": 2101
|
||||
"duration": 2083
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
|
||||
"duration": 76556
|
||||
"duration": 78269
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/erDiagram.spec.js",
|
||||
"duration": 12756
|
||||
"duration": 12578
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
|
||||
"duration": 2766
|
||||
"duration": 2784
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
|
||||
"duration": 35641
|
||||
"duration": 36205
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
|
||||
"duration": 26915
|
||||
"duration": 26627
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
|
||||
"duration": 21171
|
||||
"duration": 21332
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
|
||||
"duration": 37844
|
||||
"duration": 37328
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart.spec.js",
|
||||
"duration": 26254
|
||||
"duration": 25914
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/gantt.spec.js",
|
||||
"duration": 15149
|
||||
"duration": 15383
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/gitGraph.spec.js",
|
||||
"duration": 45049
|
||||
"duration": 45226
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/iconShape.spec.ts",
|
||||
"duration": 250225
|
||||
"duration": 251094
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/imageShape.spec.ts",
|
||||
"duration": 51531
|
||||
"duration": 50916
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/info.spec.ts",
|
||||
"duration": 2455
|
||||
"duration": 2489
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/journey.spec.js",
|
||||
"duration": 3181
|
||||
"duration": 5988
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/kanban.spec.ts",
|
||||
"duration": 6298
|
||||
"duration": 6225
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/katex.spec.js",
|
||||
"duration": 3065
|
||||
"duration": 3009
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
|
||||
"duration": 2521
|
||||
"duration": 2426
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/mindmap.spec.ts",
|
||||
"duration": 9341
|
||||
"duration": 9306
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/newShapes.spec.ts",
|
||||
"duration": 132809
|
||||
"duration": 134419
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
|
||||
"duration": 101299
|
||||
"duration": 102434
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/packet.spec.ts",
|
||||
"duration": 3481
|
||||
"duration": 3373
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/pie.spec.ts",
|
||||
"duration": 4878
|
||||
"duration": 4898
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
|
||||
"duration": 7416
|
||||
"duration": 7578
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/radar.spec.js",
|
||||
"duration": 4554
|
||||
"duration": 4526
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/requirement.spec.js",
|
||||
"duration": 2068
|
||||
"duration": 2172
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
|
||||
"duration": 47583
|
||||
"duration": 47175
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/sankey.spec.ts",
|
||||
"duration": 5792
|
||||
"duration": 5717
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
|
||||
"duration": 33035
|
||||
"duration": 32556
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
|
||||
"duration": 22716
|
||||
"duration": 22572
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
|
||||
"duration": 13868
|
||||
"duration": 14064
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/theme.spec.js",
|
||||
"duration": 26376
|
||||
"duration": 26565
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/timeline.spec.ts",
|
||||
"duration": 5872
|
||||
"duration": 6233
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/xyChart.spec.js",
|
||||
"duration": 9469
|
||||
"duration": 17750
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/zenuml.spec.js",
|
||||
"duration": 2742
|
||||
"duration": 2696
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
class Person {
|
||||
+Id : Guid
|
||||
+ID : Guid
|
||||
+FirstName : string
|
||||
+LastName : string
|
||||
-privateProperty : string
|
||||
@@ -218,10 +218,10 @@
|
||||
+double side
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Shape <|-- Circle
|
||||
Shape <|-- Square
|
||||
|
||||
|
||||
namespace Vehicles {
|
||||
class Vehicle {
|
||||
+String brand
|
||||
@@ -233,12 +233,12 @@
|
||||
+boolean hasGears
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Vehicle <|-- Car
|
||||
Vehicle <|-- Bike
|
||||
Car --> Circle : "Logo Shape"
|
||||
Bike --> Square : "Logo Shape"
|
||||
|
||||
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
y-axis Not Important --> important
|
||||
quadrant-1 Plan
|
||||
quadrant-2 Do
|
||||
quadrant-3 Deligate
|
||||
quadrant-3 Delegate
|
||||
quadrant-4 Delete
|
||||
</pre>
|
||||
|
||||
|
||||
@@ -497,14 +497,14 @@ This is a danger alert
|
||||
|
||||
### Navigation
|
||||
|
||||
If you want to propose changes to how the documentation is _organized_, such as adding a new section or re-arranging or renaming a section, you must update the **sidebar navigation**, which is defined in [the vitepress config](../.vitepress/config.ts). The same goes to **topbar**.
|
||||
If you want to propose changes to how the documentation is _organized_, such as adding a new section or re-arranging or renaming a section, you must update the **sidebar navigation**, which is defined in [the vitepress config](../.vitepress/config.ts). The same goes for **topbar**.
|
||||
|
||||
### Build Docs
|
||||
|
||||
The content of `/docs` folder is built with Github Actions.
|
||||
The content of `/docs` folder is built with GitHub Actions.
|
||||
|
||||
> **Warning**
|
||||
> So as to allow automatic compilation of documentation pages you have to enable Github Actions on your fork first
|
||||
> So as to allow automatic compilation of documentation pages you have to enable GitHub Actions on your fork first
|
||||
|
||||
## Submit your pull request
|
||||
|
||||
|
||||
@@ -251,12 +251,12 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
|
||||
|
||||
```
|
||||
|
||||
##### Gitgraph
|
||||
##### GitGraph
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
accTitle: My Gitgraph Accessibility Title
|
||||
accDescr: My Gitgraph Accessibility Description
|
||||
accTitle: My GitGraph Accessibility Title
|
||||
accDescr: My GitGraph Accessibility Description
|
||||
|
||||
commit
|
||||
commit
|
||||
@@ -273,8 +273,8 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
accTitle: My Gitgraph Accessibility Title
|
||||
accDescr: My Gitgraph Accessibility Description
|
||||
accTitle: My GitGraph Accessibility Title
|
||||
accDescr: My GitGraph Accessibility Description
|
||||
|
||||
commit
|
||||
commit
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
|
||||
|
||||
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used.
|
||||
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, frontmatter config is used.
|
||||
|
||||
## Available Themes
|
||||
|
||||
@@ -37,30 +37,24 @@ mermaid.initialize({
|
||||
|
||||
## Diagram-specific Themes
|
||||
|
||||
To customize the theme of an individual diagram, use the `init` directive.
|
||||
To customize the theme of an individual diagram, use frontmatter config.
|
||||
|
||||
Example of `init` directive setting the `theme` to `forest`:
|
||||
Example of frontmatter config setting the `theme` to `forest`:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'theme':'forest'}}%%
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme':'forest'}}%%
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'theme':'forest'}}%%
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme':'forest'}}%%
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
@@ -69,30 +63,28 @@ Example of `init` directive setting the `theme` to `forest`:
|
||||
|
||||
## Customizing Themes with `themeVariables`
|
||||
|
||||
To make a custom theme, modify `themeVariables` via `init`.
|
||||
To make a custom theme, modify `themeVariables` via frontmatter config.
|
||||
|
||||
You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
|
||||
|
||||
| Parameter | Description | Type | Properties |
|
||||
| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
|
||||
| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
|
||||
| Parameter | Description | Type | Properties |
|
||||
| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
|
||||
| themeVariables | Modifiable with frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
|
||||
|
||||
Example of modifying `themeVariables` using the `init` directive:
|
||||
Example of modifying `themeVariables` using frontmatter config:
|
||||
|
||||
```mermaid-example
|
||||
%%{
|
||||
init: {
|
||||
'theme': 'base',
|
||||
'themeVariables': {
|
||||
'primaryColor': '#BB2528',
|
||||
'primaryTextColor': '#fff',
|
||||
'primaryBorderColor': '#7C0000',
|
||||
'lineColor': '#F8B229',
|
||||
'secondaryColor': '#006100',
|
||||
'tertiaryColor': '#fff'
|
||||
}
|
||||
}
|
||||
}%%
|
||||
---
|
||||
config:
|
||||
theme: 'base'
|
||||
themeVariables:
|
||||
primaryColor: '#BB2528'
|
||||
primaryTextColor: '#fff'
|
||||
primaryBorderColor: '#7C0000'
|
||||
lineColor: '#F8B229'
|
||||
secondaryColor: '#006100'
|
||||
tertiaryColor: '#fff'
|
||||
---
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
@@ -110,79 +102,17 @@ Example of modifying `themeVariables` using the `init` directive:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{
|
||||
init: {
|
||||
'theme': 'base',
|
||||
'themeVariables': {
|
||||
'primaryColor': '#BB2528',
|
||||
'primaryTextColor': '#fff',
|
||||
'primaryBorderColor': '#7C0000',
|
||||
'lineColor': '#F8B229',
|
||||
'secondaryColor': '#006100',
|
||||
'tertiaryColor': '#fff'
|
||||
}
|
||||
}
|
||||
}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
%%{
|
||||
init: {
|
||||
'theme': 'base',
|
||||
'themeVariables': {
|
||||
'primaryColor': '#BB2528',
|
||||
'primaryTextColor': '#fff',
|
||||
'primaryBorderColor': '#7C0000',
|
||||
'lineColor': '#F8B229',
|
||||
'secondaryColor': '#006100',
|
||||
'tertiaryColor': '#fff'
|
||||
}
|
||||
}
|
||||
}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{
|
||||
init: {
|
||||
'theme': 'base',
|
||||
'themeVariables': {
|
||||
'primaryColor': '#BB2528',
|
||||
'primaryTextColor': '#fff',
|
||||
'primaryBorderColor': '#7C0000',
|
||||
'lineColor': '#F8B229',
|
||||
'secondaryColor': '#006100',
|
||||
'tertiaryColor': '#fff'
|
||||
}
|
||||
}
|
||||
}%%
|
||||
---
|
||||
config:
|
||||
theme: 'base'
|
||||
themeVariables:
|
||||
primaryColor: '#BB2528'
|
||||
primaryTextColor: '#fff'
|
||||
primaryBorderColor: '#7C0000'
|
||||
lineColor: '#F8B229'
|
||||
secondaryColor: '#006100'
|
||||
tertiaryColor: '#fff'
|
||||
---
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
|
||||
@@ -115,6 +115,8 @@ Content Management Systems/Enterprise Content Management
|
||||
- [Grav CMS](https://getgrav.org/)
|
||||
- [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
|
||||
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
|
||||
- [Tiki](https://tiki.org)
|
||||
- [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
|
||||
- [VitePress](https://vitepress.vuejs.org/)
|
||||
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
|
||||
- [VuePress](https://vuepress.vuejs.org/)
|
||||
|
||||
@@ -49,7 +49,7 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
|
||||
|
||||
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
|
||||
|
||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/mermaid-js/mermaid/issues/866).
|
||||
> 🖖 Keep a steady pulse: [mermaid needs more Collaborators](https://github.com/mermaid-js/mermaid/issues/866).
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
@@ -437,7 +437,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
|
||||
|
||||
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
|
||||
|
||||
_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
|
||||
_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
|
||||
|
||||
## Reporting vulnerabilities
|
||||
|
||||
|
||||
@@ -192,9 +192,10 @@ flowchart LR
|
||||
B -->|Option 1| C[Path 1]
|
||||
B -->|Option 2| D[Path 2]
|
||||
|
||||
#### Using Dagre Layout with Classic Look:
|
||||
```
|
||||
|
||||
#### Using Dagre Layout with Classic Look:
|
||||
|
||||
Another example:
|
||||
|
||||
```
|
||||
|
||||
@@ -16,7 +16,7 @@ Discover how the latest update to the Mermaid Visual Editor transforms class dia
|
||||
|
||||
1/16/2025 • 6 mins
|
||||
|
||||
Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to Kickstart and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
|
||||
Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to kick-start and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
|
||||
|
||||
## [Mermaid Whiteboard: Visual Collaboration Made Universal](https://docs.mermaidchart.com/blog/posts/mermaid-whiteboard-visual-collaboration-made-universal)
|
||||
|
||||
|
||||
@@ -194,7 +194,7 @@ architecture-beta
|
||||
## Icons
|
||||
|
||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](../config/icons.md).
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).
|
||||
|
||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||
|
||||
|
||||
@@ -567,6 +567,30 @@ block-beta
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
### Class Styling
|
||||
|
||||
Mermaid enables applying styling to classes, which could make styling easier if you want to apply a certain set of styles to multiple elements, as you could just link those elements to a class.
|
||||
|
||||
#### Example - Styling a Single Class
|
||||
|
||||
```mermaid-example
|
||||
block-beta
|
||||
A space B
|
||||
A-->B
|
||||
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
|
||||
class A blue
|
||||
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block-beta
|
||||
A space B
|
||||
A-->B
|
||||
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
|
||||
class A blue
|
||||
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
In this example, a class named 'blue' is defined and applied to block 'A', while block 'B' receives individual styling. This demonstrates the flexibility of Mermaid in applying both shared and unique styles within the same diagram.
|
||||
|
||||
The ability to style blocks individually or through classes provides a powerful tool for enhancing the visual impact and clarity of block diagrams. Whether emphasizing certain elements or maintaining a cohesive design across the diagram, these styling capabilities are central to effective diagramming. The next sections will present practical examples and use cases, followed by tips for troubleshooting common issues.
|
||||
@@ -663,7 +687,7 @@ block-beta
|
||||
```
|
||||
|
||||
**Correction**:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
|
||||
```mermaid-example
|
||||
block-beta
|
||||
|
||||
@@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
@@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
|
||||
@@ -802,7 +802,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
||||
+run()
|
||||
}
|
||||
|
||||
callback Duck callback "Tooltip"
|
||||
callback Duck "callback" "Tooltip"
|
||||
link Zebra "https://www.github.com" "This is a link"
|
||||
</pre>
|
||||
|
||||
|
||||
@@ -171,7 +171,7 @@ Cardinality is a property that describes how many elements of another entity can
|
||||
|
||||
### Identification
|
||||
|
||||
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
|
||||
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question cannot have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
|
||||
|
||||
| Value | Alias for |
|
||||
| :---: | :---------------: |
|
||||
|
||||
@@ -83,7 +83,11 @@ flowchart LR
|
||||
Use double quotes and backticks "\` text \`" to enclose the markdown text.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart LR
|
||||
markdown["`This **is** _Markdown_`"]
|
||||
newLines["`Line1
|
||||
@@ -93,7 +97,11 @@ flowchart LR
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart LR
|
||||
markdown["`This **is** _Markdown_`"]
|
||||
newLines["`Line1
|
||||
@@ -932,7 +940,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an
|
||||
|
||||
### Icon Shape
|
||||
|
||||
You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](../config/icons.md). The syntax for defining an icon shape is as follows:
|
||||
You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions to [add custom icons](../config/icons.md). The syntax for defining an icon shape is as follows:
|
||||
|
||||
```mermaid-example
|
||||
flowchart TD
|
||||
@@ -944,7 +952,7 @@ flowchart TD
|
||||
A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
|
||||
```
|
||||
|
||||
### Parameters
|
||||
#### Parameters
|
||||
|
||||
- **icon**: The name of the icon from the registered icon pack.
|
||||
- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:
|
||||
@@ -971,7 +979,7 @@ flowchart TD
|
||||
A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
|
||||
```
|
||||
|
||||
### Parameters
|
||||
#### Parameters
|
||||
|
||||
- **img**: The URL of the image to be displayed.
|
||||
- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed.
|
||||
@@ -1592,7 +1600,10 @@ flowchart LR
|
||||
The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
@@ -1605,7 +1616,10 @@ end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"flowchart": {"htmlLabels": false}} }%%
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart LR
|
||||
subgraph "One"
|
||||
a("`The **cat**
|
||||
@@ -2029,7 +2043,9 @@ The _elk_ renderer is an experimental feature.
|
||||
You can change the renderer to elk by adding this directive:
|
||||
|
||||
```
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
config:
|
||||
flowchart:
|
||||
defaultRenderer: "elk"
|
||||
```
|
||||
|
||||
> **Note**
|
||||
|
||||
@@ -526,7 +526,7 @@ click taskId href URL
|
||||
- taskId is the id of the task
|
||||
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
|
||||
Beginner's tip—a full example using interactive links in an html context:
|
||||
Beginner's tip—a full example using interactive links in an HTML context:
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md).
|
||||
|
||||
# Gitgraph Diagrams
|
||||
# GitGraph Diagrams
|
||||
|
||||
> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
|
||||
|
||||
@@ -413,7 +413,7 @@ Let see an example:
|
||||
commit id:"C"
|
||||
```
|
||||
|
||||
## Gitgraph specific configuration options
|
||||
## GitGraph specific configuration options
|
||||
|
||||
In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
|
||||
|
||||
@@ -432,7 +432,13 @@ Sometimes you may want to hide the branch names and lines from the diagram. You
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: false
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -478,7 +484,13 @@ Usage example:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: false
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -534,7 +546,13 @@ You can change the layout of the commit labels by using the `rotateCommitLabel`
|
||||
Usage example: Rotated commit labels
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
rotateCommitLabel: true
|
||||
---
|
||||
gitGraph
|
||||
commit id: "feat(api): ..."
|
||||
commit id: "a"
|
||||
@@ -553,7 +571,13 @@ gitGraph
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
rotateCommitLabel: true
|
||||
---
|
||||
gitGraph
|
||||
commit id: "feat(api): ..."
|
||||
commit id: "a"
|
||||
@@ -574,7 +598,13 @@ gitGraph
|
||||
Usage example: Horizontal commit labels
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
rotateCommitLabel: false
|
||||
---
|
||||
gitGraph
|
||||
commit id: "feat(api): ..."
|
||||
commit id: "a"
|
||||
@@ -593,7 +623,13 @@ gitGraph
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
rotateCommitLabel: false
|
||||
---
|
||||
gitGraph
|
||||
commit id: "feat(api): ..."
|
||||
commit id: "a"
|
||||
@@ -618,7 +654,14 @@ Sometimes you may want to hide the commit labels from the diagram. You can do th
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: false
|
||||
showCommitLabel: false
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -664,7 +707,14 @@ Usage example:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: false
|
||||
showCommitLabel: false
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -716,7 +766,15 @@ Sometimes you may want to customize the name of the main/default branch. You can
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: true
|
||||
showCommitLabel: true
|
||||
mainBranchName: 'MetroLine1'
|
||||
---
|
||||
gitGraph
|
||||
commit id:"NewYork"
|
||||
commit id:"Dallas"
|
||||
@@ -740,7 +798,15 @@ Usage example:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: true
|
||||
showCommitLabel: true
|
||||
mainBranchName: 'MetroLine1'
|
||||
---
|
||||
gitGraph
|
||||
commit id:"NewYork"
|
||||
commit id:"Dallas"
|
||||
@@ -782,7 +848,14 @@ To fully control the order of all the branches, you must define `order` for all
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: true
|
||||
showCommitLabel: true
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch test1 order: 3
|
||||
@@ -792,7 +865,14 @@ Usage example:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: true
|
||||
showCommitLabel: true
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch test1 order: 3
|
||||
@@ -806,7 +886,15 @@ Look at the diagram, all the branches are following the order defined.
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: true
|
||||
showCommitLabel: true
|
||||
mainBranchOrder: 2
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch test1 order: 3
|
||||
@@ -817,7 +905,15 @@ Usage example:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
gitGraph:
|
||||
showBranches: true
|
||||
showCommitLabel: true
|
||||
mainBranchOrder: 2
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch test1 order: 3
|
||||
@@ -1030,7 +1126,7 @@ gitGraph:
|
||||
|
||||
## Themes
|
||||
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).
|
||||
|
||||
The following are the different pre-defined theme options:
|
||||
|
||||
@@ -1046,7 +1142,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Base Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1092,7 +1192,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1140,7 +1244,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Forest Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1186,7 +1294,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1234,7 +1346,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Default Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
gitGraph
|
||||
commit type:HIGHLIGHT
|
||||
branch hotfix
|
||||
@@ -1280,7 +1396,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
gitGraph
|
||||
commit type:HIGHLIGHT
|
||||
branch hotfix
|
||||
@@ -1328,7 +1448,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Dark Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1374,7 +1498,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1422,7 +1550,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Neutral Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1468,7 +1600,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -1522,7 +1658,11 @@ For understanding let us take a sample diagram with theme `default`, the default
|
||||
See how the default theme is used to set the colors for the branches:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1538,7 +1678,11 @@ See how the default theme is used to set the colors for the branches:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1569,16 +1713,20 @@ Example:
|
||||
Now let's override the default values for the `git0` to `git3` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'git0': '#ff0000',
|
||||
'git1': '#00ff00',
|
||||
'git2': '#0000ff',
|
||||
'git3': '#ff00ff',
|
||||
'git4': '#00ffff',
|
||||
'git5': '#ffff00',
|
||||
'git6': '#ff00ff',
|
||||
'git7': '#00ffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'git0': '#ff0000'
|
||||
'git1': '#00ff00'
|
||||
'git2': '#0000ff'
|
||||
'git3': '#ff00ff'
|
||||
'git4': '#00ffff'
|
||||
'git5': '#ffff00'
|
||||
'git6': '#ff00ff'
|
||||
'git7': '#00ffff'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1595,16 +1743,20 @@ Now let's override the default values for the `git0` to `git3` variables:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'git0': '#ff0000',
|
||||
'git1': '#00ff00',
|
||||
'git2': '#0000ff',
|
||||
'git3': '#ff00ff',
|
||||
'git4': '#00ffff',
|
||||
'git5': '#ffff00',
|
||||
'git6': '#ff00ff',
|
||||
'git7': '#00ffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'git0': '#ff0000'
|
||||
'git1': '#00ff00'
|
||||
'git2': '#0000ff'
|
||||
'git3': '#ff00ff'
|
||||
'git4': '#00ffff'
|
||||
'git5': '#ffff00'
|
||||
'git6': '#ff00ff'
|
||||
'git7': '#00ffff'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1631,18 +1783,22 @@ Lets see how the default theme is used to set the colors for the branch labels:
|
||||
Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'gitBranchLabel0': '#ffffff',
|
||||
'gitBranchLabel1': '#ffffff',
|
||||
'gitBranchLabel2': '#ffffff',
|
||||
'gitBranchLabel3': '#ffffff',
|
||||
'gitBranchLabel4': '#ffffff',
|
||||
'gitBranchLabel5': '#ffffff',
|
||||
'gitBranchLabel6': '#ffffff',
|
||||
'gitBranchLabel7': '#ffffff',
|
||||
'gitBranchLabel8': '#ffffff',
|
||||
'gitBranchLabel9': '#ffffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'gitBranchLabel0': '#ffffff'
|
||||
'gitBranchLabel1': '#ffffff'
|
||||
'gitBranchLabel2': '#ffffff'
|
||||
'gitBranchLabel3': '#ffffff'
|
||||
'gitBranchLabel4': '#ffffff'
|
||||
'gitBranchLabel5': '#ffffff'
|
||||
'gitBranchLabel6': '#ffffff'
|
||||
'gitBranchLabel7': '#ffffff'
|
||||
'gitBranchLabel8': '#ffffff'
|
||||
'gitBranchLabel9': '#ffffff'
|
||||
---
|
||||
gitGraph
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -1659,18 +1815,22 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'gitBranchLabel0': '#ffffff',
|
||||
'gitBranchLabel1': '#ffffff',
|
||||
'gitBranchLabel2': '#ffffff',
|
||||
'gitBranchLabel3': '#ffffff',
|
||||
'gitBranchLabel4': '#ffffff',
|
||||
'gitBranchLabel5': '#ffffff',
|
||||
'gitBranchLabel6': '#ffffff',
|
||||
'gitBranchLabel7': '#ffffff',
|
||||
'gitBranchLabel8': '#ffffff',
|
||||
'gitBranchLabel9': '#ffffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'gitBranchLabel0': '#ffffff'
|
||||
'gitBranchLabel1': '#ffffff'
|
||||
'gitBranchLabel2': '#ffffff'
|
||||
'gitBranchLabel3': '#ffffff'
|
||||
'gitBranchLabel4': '#ffffff'
|
||||
'gitBranchLabel5': '#ffffff'
|
||||
'gitBranchLabel6': '#ffffff'
|
||||
'gitBranchLabel7': '#ffffff'
|
||||
'gitBranchLabel8': '#ffffff'
|
||||
'gitBranchLabel9': '#ffffff'
|
||||
---
|
||||
gitGraph
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -1696,10 +1856,14 @@ Example:
|
||||
Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1716,10 +1880,14 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1745,11 +1913,15 @@ Example:
|
||||
Now let's override the default values for the `commitLabelFontSize` variable:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00',
|
||||
'commitLabelFontSize': '16px'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
commitLabelFontSize: '16px'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1766,11 +1938,15 @@ Now let's override the default values for the `commitLabelFontSize` variable:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00',
|
||||
'commitLabelFontSize': '16px'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
commitLabelFontSize: '16px'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1796,11 +1972,15 @@ Example:
|
||||
Now let's override the default values for the `tagLabelFontSize` variable:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00',
|
||||
'tagLabelFontSize': '16px'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
tagLabelFontSize: '16px'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1817,11 +1997,15 @@ Now let's override the default values for the `tagLabelFontSize` variable:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'commitLabelColor': '#ff0000',
|
||||
'commitLabelBackground': '#00ff00',
|
||||
'tagLabelFontSize': '16px'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
commitLabelColor: '#ff0000'
|
||||
commitLabelBackground: '#00ff00'
|
||||
tagLabelFontSize: '16px'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1846,11 +2030,15 @@ Example:
|
||||
Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'tagLabelColor': '#ff0000',
|
||||
'tagLabelBackground': '#00ff00',
|
||||
'tagLabelBorder': '#0000ff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
tagLabelColor: '#ff0000'
|
||||
tagLabelBackground: '#00ff00'
|
||||
tagLabelBorder: '#0000ff'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1867,11 +2055,15 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'tagLabelColor': '#ff0000',
|
||||
'tagLabelBackground': '#00ff00',
|
||||
'tagLabelBorder': '#0000ff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
tagLabelColor: '#ff0000'
|
||||
tagLabelBackground: '#00ff00'
|
||||
tagLabelBorder: '#0000ff'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1898,9 +2090,13 @@ Example:
|
||||
Now let's override the default values for the `git0` to `git3` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'gitInv0': '#ff0000'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'gitInv0': '#ff0000'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
@@ -1917,9 +2113,13 @@ Now let's override the default values for the `git0` to `git3` variables:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'gitInv0': '#ff0000'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
'gitInv0': '#ff0000'
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
branch develop
|
||||
|
||||
@@ -86,7 +86,7 @@ todo[Todo]
|
||||
|
||||
## Configuration Options
|
||||
|
||||
You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the the following example:
|
||||
You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the following example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
@@ -113,7 +113,7 @@ kanban
|
||||
[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id9[Ready for deploy]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id10[Ready for test]
|
||||
@@ -139,7 +139,7 @@ kanban
|
||||
[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id9[Ready for deploy]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id10[Ready for test]
|
||||
|
||||
@@ -240,7 +240,7 @@ mindmap
|
||||
C
|
||||
```
|
||||
|
||||
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
|
||||
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is neither a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
@@ -308,7 +308,7 @@ From version 9.4.0 you can simplify this code to:
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
|
||||
<!---
|
||||
cspell:locale en,en-gb
|
||||
|
||||
@@ -48,7 +48,13 @@ Drawing a pie chart is really simple in mermaid.
|
||||
## Example
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
|
||||
---
|
||||
config:
|
||||
pie:
|
||||
textPosition: 0.5
|
||||
themeVariables:
|
||||
pieOuterStrokeWidth: "5px"
|
||||
---
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
@@ -58,7 +64,13 @@ pie showData
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
|
||||
---
|
||||
config:
|
||||
pie:
|
||||
textPosition: 0.5
|
||||
themeVariables:
|
||||
pieOuterStrokeWidth: "5px"
|
||||
---
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
|
||||
@@ -148,7 +148,14 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
|
||||
---
|
||||
config:
|
||||
quadrantChart:
|
||||
chartWidth: 400
|
||||
chartHeight: 400
|
||||
themeVariables:
|
||||
quadrant1TextFill: "ff0000"
|
||||
---
|
||||
quadrantChart
|
||||
x-axis Urgent --> Not Urgent
|
||||
y-axis Not Important --> "Important ❤"
|
||||
@@ -159,7 +166,14 @@ quadrantChart
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
|
||||
---
|
||||
config:
|
||||
quadrantChart:
|
||||
chartWidth: 400
|
||||
chartHeight: 400
|
||||
themeVariables:
|
||||
quadrant1TextFill: "ff0000"
|
||||
---
|
||||
quadrantChart
|
||||
x-axis Urgent --> Not Urgent
|
||||
y-axis Not Important --> "Important ❤"
|
||||
@@ -178,7 +192,7 @@ Points can either be styled directly or with defined shared classes
|
||||
```md
|
||||
Point A: [0.9, 0.0] radius: 12
|
||||
Point B: [0.8, 0.1] color: #ff3300, radius: 10
|
||||
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
|
||||
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
|
||||
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
|
||||
```
|
||||
|
||||
|
||||
@@ -177,7 +177,15 @@ Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagra
|
||||
|
||||
> **Note**
|
||||
> The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:
|
||||
> %%{init: {"themeVariables": {"cScale0": "#FF0000", "cScale1": "#00FF00"}} }%%
|
||||
>
|
||||
> ---
|
||||
>
|
||||
> config:
|
||||
> themeVariables:
|
||||
> cScale0: "#FF0000"
|
||||
> cScale1: "#00FF00"
|
||||
>
|
||||
> ---
|
||||
|
||||
Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.
|
||||
|
||||
@@ -191,7 +199,15 @@ Radar charts support the color scales `cScale${i}` where `i` is a number from `0
|
||||
|
||||
> **Note**
|
||||
> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.
|
||||
> %%{init: {"themeVariables": {"radar": {"axisColor": "#FF0000"}} } }%%
|
||||
>
|
||||
> ---
|
||||
>
|
||||
> config:
|
||||
> themeVariables:
|
||||
> radar:
|
||||
> axisColor: "#FF0000"
|
||||
>
|
||||
> ---
|
||||
|
||||
| Property | Description | Default Value |
|
||||
| -------------------- | ---------------------------- | ------------- |
|
||||
|
||||
@@ -50,7 +50,7 @@ There are three types of components to a requirement diagram: requirement, eleme
|
||||
|
||||
The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected.
|
||||
|
||||
An important note on user text: all input can be surrounded in quotes or not. For example, both `Id: "here is an example"` and `Id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
|
||||
An important note on user text: all input can be surrounded in quotes or not. For example, both `id: "here is an example"` and `id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
|
||||
|
||||
### Requirement
|
||||
|
||||
|
||||
@@ -278,7 +278,7 @@ stateDiagram-v2
|
||||
}
|
||||
```
|
||||
|
||||
_You can not define transitions between internal states belonging to different composite states_
|
||||
_You cannot define transitions between internal states belonging to different composite states_
|
||||
|
||||
## Choice
|
||||
|
||||
|
||||
@@ -234,7 +234,13 @@ mermaid.initialize({
|
||||
let us look at same example, where we have disabled the multiColor option.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
timeline:
|
||||
disableMulticolor: true
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -245,7 +251,13 @@ let us look at same example, where we have disabled the multiColor option.
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
timeline:
|
||||
disableMulticolor: true
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -269,11 +281,17 @@ Example:
|
||||
Now let's override the default values for the `cScale0` to `cScale2` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
|
||||
'cScale1': '#00ff00',
|
||||
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
cScale0: '#ff0000'
|
||||
cScaleLabel0: '#ffffff'
|
||||
cScale1: '#00ff00'
|
||||
cScale2: '#0000ff'
|
||||
cScaleLabel2: '#ffffff'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -287,11 +305,17 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
|
||||
'cScale1': '#00ff00',
|
||||
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
|
||||
} } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
cScale0: '#ff0000'
|
||||
cScaleLabel0: '#ffffff'
|
||||
cScale1: '#00ff00'
|
||||
cScale2: '#0000ff'
|
||||
cScaleLabel2: '#ffffff'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -308,7 +332,7 @@ See how the colors are changed to the values specified in the theme variables.
|
||||
|
||||
## Themes
|
||||
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).
|
||||
|
||||
The following are the different pre-defined theme options:
|
||||
|
||||
@@ -324,7 +348,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Base Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -337,7 +365,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -352,7 +384,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Forest Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -365,7 +401,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -380,7 +420,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Dark Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -393,7 +437,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -408,7 +456,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Default Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -421,7 +473,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -436,7 +492,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
### Neutral Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -449,7 +509,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
@@ -473,4 +537,4 @@ You can use this method to add mermaid including the timeline diagram to a web p
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
|
||||
@@ -107,17 +107,18 @@ xychart-beta
|
||||
|
||||
## Chart Configurations
|
||||
|
||||
| Parameter | Description | Default value |
|
||||
| ------------------------ | ---------------------------------------------- | :-----------: |
|
||||
| width | Width of the chart | 700 |
|
||||
| height | Height of the chart | 500 |
|
||||
| titlePadding | Top and Bottom padding of the title | 10 |
|
||||
| titleFontSize | Title font size | 20 |
|
||||
| showTitle | Title to be shown or not | true |
|
||||
| xAxis | xAxis configuration | AxisConfig |
|
||||
| yAxis | yAxis configuration | AxisConfig |
|
||||
| chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
|
||||
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
|
||||
| Parameter | Description | Default value |
|
||||
| ------------------------ | ------------------------------------------------------------- | :-----------: |
|
||||
| width | Width of the chart | 700 |
|
||||
| height | Height of the chart | 500 |
|
||||
| titlePadding | Top and Bottom padding of the title | 10 |
|
||||
| titleFontSize | Title font size | 20 |
|
||||
| showTitle | Title to be shown or not | true |
|
||||
| xAxis | xAxis configuration | AxisConfig |
|
||||
| yAxis | yAxis configuration | AxisConfig |
|
||||
| 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 |
|
||||
|
||||
### AxisConfig
|
||||
|
||||
@@ -137,9 +138,16 @@ xychart-beta
|
||||
|
||||
## Chart Theme Variables
|
||||
|
||||
> **Note**
|
||||
> Themes for xychart resides inside xychart attribute so to set the variables use this syntax
|
||||
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
|
||||
Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
|
||||
|
||||
```yaml
|
||||
---
|
||||
config:
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: '#ff0000'
|
||||
---
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
| ---------------- | --------------------------------------------------------- |
|
||||
@@ -163,6 +171,7 @@ config:
|
||||
xyChart:
|
||||
width: 900
|
||||
height: 600
|
||||
showDataLabel: true
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: "#ff0000"
|
||||
@@ -181,6 +190,7 @@ config:
|
||||
xyChart:
|
||||
width: 900
|
||||
height: 600
|
||||
showDataLabel: true
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: "#ff0000"
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@applitools/eyes-cypress": "^3.44.9",
|
||||
"@argos-ci/cypress": "^3.2.0",
|
||||
"@argos-ci/cypress": "^4.0.3",
|
||||
"@changesets/changelog-github": "^0.5.1",
|
||||
"@changesets/cli": "^2.27.12",
|
||||
"@cspell/eslint-plugin": "^8.18.1",
|
||||
@@ -83,7 +83,7 @@
|
||||
"@vitest/spy": "^3.0.6",
|
||||
"@vitest/ui": "^3.0.6",
|
||||
"ajv": "^8.17.1",
|
||||
"chokidar": "^3.6.0",
|
||||
"chokidar": "^4.0.3",
|
||||
"concurrently": "^9.1.2",
|
||||
"cors": "^2.8.5",
|
||||
"cpy-cli": "^5.0.0",
|
||||
@@ -105,7 +105,7 @@
|
||||
"eslint-plugin-no-only-tests": "^3.3.0",
|
||||
"eslint-plugin-tsdoc": "^0.4.0",
|
||||
"eslint-plugin-unicorn": "^58.0.0",
|
||||
"express": "^4.19.2",
|
||||
"express": "^5.1.0",
|
||||
"globals": "^16.0.0",
|
||||
"globby": "^14.0.2",
|
||||
"husky": "^9.1.7",
|
||||
|
||||
@@ -3,7 +3,7 @@ import { select } from 'd3';
|
||||
import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
|
||||
|
||||
/**
|
||||
* Draws a an info picture in the tag with id: id based on the graph definition in text.
|
||||
* Draws an info picture in the tag with id: id based on the graph definition in text.
|
||||
*
|
||||
* @param {any} text
|
||||
* @param {any} id
|
||||
|
||||
@@ -143,7 +143,7 @@ export const render = async (
|
||||
height: node.height,
|
||||
};
|
||||
if (node.isGroup) {
|
||||
log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
|
||||
log.debug('id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
|
||||
const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
|
||||
// TODO use faster way of cloning
|
||||
const clusterNode = JSON.parse(JSON.stringify(node));
|
||||
@@ -152,10 +152,10 @@ export const render = async (
|
||||
clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
|
||||
await insertCluster(subgraphEl, clusterNode);
|
||||
|
||||
log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
|
||||
log.debug('id (UIO)= ', node.id, node.width, node.shape, node.labels);
|
||||
} else {
|
||||
log.info(
|
||||
'Id NODE = ',
|
||||
'id NODE = ',
|
||||
node.id,
|
||||
node.x,
|
||||
node.y,
|
||||
@@ -653,7 +653,7 @@ export const render = async (
|
||||
|
||||
return res;
|
||||
} else {
|
||||
// Intersection onn sides of rect
|
||||
// Intersection on sides of rect
|
||||
if (insidePoint.x < outsidePoint.x) {
|
||||
r = outsidePoint.x - w - x;
|
||||
} else {
|
||||
@@ -713,7 +713,7 @@ export const render = async (
|
||||
// check if point is inside the boundary rect
|
||||
if (!outsideNode(bounds, point) && !isInside) {
|
||||
// First point inside the rect found
|
||||
// Calc the intersection coord between the point anf the last point outside the rect
|
||||
// Calc the intersection coord between the point and the last point outside the rect
|
||||
let inter;
|
||||
|
||||
if (isDiamond) {
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
### Patch Changes
|
||||
|
||||
- [#5849](https://github.com/mermaid-js/mermaid/pull/5849) [`6c5b7ce`](https://github.com/mermaid-js/mermaid/commit/6c5b7ce9f41c0fbd59fe03dbefc8418d97697f0a) Thanks [@ReneLombard](https://github.com/ReneLombard)! - Fixed an issue when the mermaid classdiagram crashes when adding a . to the namespace.
|
||||
Forexample
|
||||
For example
|
||||
|
||||
```mermaid
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ function validateSchema(jsonSchema: unknown): asserts jsonSchema is JSONSchemaTy
|
||||
*
|
||||
* @param mermaidConfigSchema - The input JSON Schema.
|
||||
*/
|
||||
async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
|
||||
async function generateTypeScript(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
|
||||
/**
|
||||
* Replace all usages of `allOf` with `extends`.
|
||||
*
|
||||
@@ -108,13 +108,13 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
|
||||
}
|
||||
|
||||
/**
|
||||
* For backwards compatibility with older Mermaid Typescript defs,
|
||||
* For backwards compatibility with older Mermaid TypeScript defs,
|
||||
* we need to make all value optional instead of required.
|
||||
*
|
||||
* This is because the `MermaidConfig` type is used as an input, and everything is optional,
|
||||
* since all the required values have default values.s
|
||||
*
|
||||
* In the future, we should make make the input to Mermaid `Partial<MermaidConfig>`.
|
||||
* In the future, we should make the input to Mermaid `Partial<MermaidConfig>`.
|
||||
*
|
||||
* @todo TODO: Remove this function when Mermaid releases a new breaking change.
|
||||
* @param schema - The input schema.
|
||||
@@ -197,7 +197,7 @@ async function main() {
|
||||
validateSchema(configJsonSchema);
|
||||
|
||||
// Generate types from JSON Schema
|
||||
await generateTypescript(configJsonSchema);
|
||||
await generateTypeScript(configJsonSchema);
|
||||
}
|
||||
|
||||
main().catch((error) => {
|
||||
|
||||
@@ -109,7 +109,7 @@ describe('accessibility', () => {
|
||||
describe('with a11y description', () => {
|
||||
const a11yDesc = 'a11y description';
|
||||
|
||||
it('shold set aria-labelledby to the title id inserted as a child', () => {
|
||||
it('should set aria-labelledby to the title id inserted as a child', () => {
|
||||
expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
|
||||
});
|
||||
|
||||
|
||||
@@ -290,7 +290,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
|
||||
/**
|
||||
* Width of nodes where text is wrapped.
|
||||
*
|
||||
* When using markdown strings the text ius wrapped automatically, this
|
||||
* When using markdown strings the text is wrapped automatically, this
|
||||
* value sets the max width of a text before it continues on a new line.
|
||||
*
|
||||
*/
|
||||
@@ -621,6 +621,18 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
|
||||
actorColours?: string[];
|
||||
sectionFills?: string[];
|
||||
sectionColours?: string[];
|
||||
/**
|
||||
* Color of the title text in Journey Diagrams
|
||||
*/
|
||||
titleColor?: string;
|
||||
/**
|
||||
* Font family to be used for the title text in Journey Diagrams
|
||||
*/
|
||||
titleFontFamily?: string;
|
||||
/**
|
||||
* Font size to be used for the title text in Journey Diagrams
|
||||
*/
|
||||
titleFontSize?: string;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `MermaidConfig`'s JSON-Schema
|
||||
@@ -939,6 +951,10 @@ export interface XYChartConfig extends BaseDiagramConfig {
|
||||
* Top and bottom space from the chart title
|
||||
*/
|
||||
titlePadding?: number;
|
||||
/**
|
||||
* Should show the value corresponding to the bar within the bar
|
||||
*/
|
||||
showDataLabel?: boolean;
|
||||
/**
|
||||
* Should show the chart title
|
||||
*/
|
||||
|
||||
@@ -22,7 +22,7 @@ flowchart
|
||||
C1 --> C2
|
||||
```
|
||||
|
||||
The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
|
||||
The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have the nodes in the cluster including the cluster attached in a graph object.
|
||||
|
||||
When rendering this diagram it is being rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
|
||||
|
||||
@@ -32,7 +32,7 @@ When rendering this diagram it is being rendered recursively. The diagram is ren
|
||||
|
||||
_Data for a clusterNode_
|
||||
|
||||
When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.
|
||||
When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering cannot be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.
|
||||
|
||||
```mermaid
|
||||
flowchart
|
||||
@@ -53,7 +53,7 @@ Of these two approaches the top one renders better and is used when possible. Wh
|
||||
|
||||
# Graph objects and their properties
|
||||
|
||||
Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
|
||||
Explains the representation of various objects used to render the flow charts and what the properties mean. This is from the perspective of the dagre-wrapper.
|
||||
|
||||
## node
|
||||
|
||||
@@ -100,13 +100,13 @@ double_arrow_point
|
||||
arrow_circle
|
||||
double_arrow_circle
|
||||
|
||||
Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.
|
||||
Lets try to make these types semantic free so that diagram type semantics does not find its way into this more generic layer.
|
||||
|
||||
Required edgeData for proper rendering:
|
||||
|
||||
| property | description |
|
||||
| ---------- | -------------------------------------------------------------------- |
|
||||
| id | Id of the edge |
|
||||
| id | ID of the edge |
|
||||
| arrowHead | overlap between arrowHead and arrowType? |
|
||||
| arrowType | overlap between arrowHead and arrowType? |
|
||||
| style | |
|
||||
|
||||
@@ -279,7 +279,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
|
||||
|
||||
return res;
|
||||
} else {
|
||||
// Intersection onn sides of rect
|
||||
// Intersection on sides of rect
|
||||
if (insidePoint.x < outsidePoint.x) {
|
||||
r = outsidePoint.x - w - x;
|
||||
} else {
|
||||
@@ -324,7 +324,7 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
|
||||
// check if point is inside the boundary rect
|
||||
if (!outsideNode(boundaryNode, point) && !isInside) {
|
||||
// First point inside the rect found
|
||||
// Calc the intersection coord between the point anf the last point outside the rect
|
||||
// Calc the intersection coord between the point and the last point outside the rect
|
||||
const inter = intersection(boundaryNode, lastPointOutside, point);
|
||||
|
||||
// // Check case where the intersection is the same as the last point
|
||||
|
||||
@@ -30,7 +30,7 @@ describe('Graphlib decorations', () => {
|
||||
expect(int.x).toBeCloseTo(192.4609375);
|
||||
expect(int.y).toBeCloseTo(145.15711441743503);
|
||||
});
|
||||
it('case 3 - intersection on top of box outside point greater then inside point', function () {
|
||||
it('case 3 - intersection on top of box outside point greater than inside point', function () {
|
||||
const o = { x: 157, y: 39 };
|
||||
const i = { x: 104, y: 105 };
|
||||
const node2 = {
|
||||
@@ -44,7 +44,7 @@ describe('Graphlib decorations', () => {
|
||||
expect(int.y).toBeCloseTo(76);
|
||||
// expect(int.y).toBeCloseTo(67.833)
|
||||
});
|
||||
it('case 4 - intersection on top of box inside point greater then inside point', function () {
|
||||
it('case 4 - intersection on top of box inside point greater than inside point', function () {
|
||||
const o = { x: 144, y: 38 };
|
||||
const i = { x: 198, y: 105 };
|
||||
const node2 = {
|
||||
|
||||
@@ -351,7 +351,7 @@ export const extractor = (graph, depth) => {
|
||||
return;
|
||||
}
|
||||
// For clusters without incoming and/or outgoing edges, create a new cluster-node
|
||||
// containing the nodes and edges in the custer in a new graph
|
||||
// containing the nodes and edges in the cluster in a new graph
|
||||
// for (let i = 0;)
|
||||
let nodes = graph.nodes();
|
||||
let hasChildren = false;
|
||||
|
||||
@@ -9,7 +9,7 @@ describe('diagram-orchestration', () => {
|
||||
expect(detectType('graph TD; A-->B')).toBe('flowchart');
|
||||
});
|
||||
|
||||
describe('proper diagram types should be detetced', () => {
|
||||
describe('proper diagram types should be detected', () => {
|
||||
beforeAll(() => {
|
||||
addDiagrams();
|
||||
});
|
||||
|
||||
@@ -85,7 +85,7 @@ describe('diagram detection', () => {
|
||||
);
|
||||
});
|
||||
|
||||
test('should consider entity codes when present in diagram defination', async () => {
|
||||
test('should consider entity codes when present in diagram definition', async () => {
|
||||
const diagram = await Diagram.fromText(`sequenceDiagram
|
||||
A->>B: I #9829; you!
|
||||
B->>A: I #9829; you #infin; times more!`);
|
||||
|
||||
@@ -24,7 +24,7 @@ describe('architecture diagrams', () => {
|
||||
await expect(parser.parse(str)).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should handle an simple radar definition', async () => {
|
||||
it('should handle a simple radar definition', async () => {
|
||||
const str = `architecture-beta
|
||||
service db
|
||||
`;
|
||||
|
||||
@@ -77,7 +77,7 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh
|
||||
block?.size?.x,
|
||||
'block width =',
|
||||
block?.size,
|
||||
'sieblingWidth',
|
||||
'siblingWidth',
|
||||
siblingWidth
|
||||
);
|
||||
if (!block?.size?.width) {
|
||||
@@ -141,7 +141,7 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh
|
||||
// If maxWidth
|
||||
if (width < siblingWidth) {
|
||||
log.debug(
|
||||
`Detected to small siebling: abc95 ${block.id} sieblingWidth ${siblingWidth} sieblingHeight ${siblingHeight} width ${width}`
|
||||
`Detected to small sibling: abc95 ${block.id} siblingWidth ${siblingWidth} siblingHeight ${siblingHeight} width ${width}`
|
||||
);
|
||||
width = siblingWidth;
|
||||
height = siblingHeight;
|
||||
|
||||
@@ -3,7 +3,7 @@ import block from './block.jison';
|
||||
import db from '../blockDB.js';
|
||||
|
||||
describe('Block diagram', function () {
|
||||
describe('when parsing an block diagram graph it should handle > ', function () {
|
||||
describe('when parsing a block diagram graph it should handle > ', function () {
|
||||
beforeEach(function () {
|
||||
block.parser.yy = db;
|
||||
block.parser.yy.clear();
|
||||
@@ -125,7 +125,7 @@ describe('Block diagram', function () {
|
||||
const blocks = db.getBlocks();
|
||||
expect(blocks.length).toBe(1);
|
||||
});
|
||||
it('a diagram withput column statements', () => {
|
||||
it('a diagram without column statements', () => {
|
||||
const str = `block-beta
|
||||
block1["Block 1"]
|
||||
`;
|
||||
|
||||
@@ -705,6 +705,7 @@ export const getBoundaries = function (parentBoundary) {
|
||||
}
|
||||
};
|
||||
|
||||
// cspell:ignore getBoundarys
|
||||
/**
|
||||
* @deprecated Use {@link getBoundaries} instead
|
||||
*/
|
||||
|
||||
@@ -542,7 +542,7 @@ function drawInsideBoundary(
|
||||
);
|
||||
}
|
||||
parentBoundaryAlias = currentBoundary.alias;
|
||||
let nextCurrentBoundaries = diagObj.db.getBoundarys(parentBoundaryAlias);
|
||||
let nextCurrentBoundaries = diagObj.db.getBoundaries(parentBoundaryAlias);
|
||||
|
||||
if (nextCurrentBoundaries.length > 0) {
|
||||
// draw boundary inside currentBoundary
|
||||
@@ -622,7 +622,7 @@ export const draw = function (_text, id, _version, diagObj) {
|
||||
globalBoundaryMaxY = conf.diagramMarginY;
|
||||
|
||||
const title = diagObj.db.getTitle();
|
||||
let currentBoundaries = diagObj.db.getBoundarys('');
|
||||
let currentBoundaries = diagObj.db.getBoundaries('');
|
||||
// switch (c4type) {
|
||||
// case 'C4Context':
|
||||
drawInsideBoundary(diagram, '', screenBounds, currentBoundaries, diagObj);
|
||||
|
||||
@@ -21,7 +21,7 @@ System(SystemAA, "Internet Banking System")
|
||||
|
||||
const yy = c4.parser.yy;
|
||||
|
||||
const boundaries = yy.getBoundarys();
|
||||
const boundaries = yy.getBoundaries();
|
||||
expect(boundaries.length).toBe(2);
|
||||
const boundary = boundaries[1];
|
||||
|
||||
@@ -49,7 +49,7 @@ ${macroName}(b1, "BankBoundary") {
|
||||
System(SystemAA, "Internet Banking System")
|
||||
}`);
|
||||
|
||||
expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
|
||||
expect(c4.parser.yy.getBoundaries()[1]).toMatchObject({
|
||||
alias: 'b1',
|
||||
});
|
||||
});
|
||||
@@ -60,7 +60,7 @@ ${macroName}(b1, "BankBoundary") {
|
||||
System(SystemAA, "Internet Banking System")
|
||||
}`);
|
||||
|
||||
expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
|
||||
expect(c4.parser.yy.getBoundaries()[1]).toMatchObject({
|
||||
label: {
|
||||
text: 'BankBoundary',
|
||||
},
|
||||
@@ -73,7 +73,7 @@ ${macroName}(b1, "", "company") {
|
||||
System(SystemAA, "Internet Banking System")
|
||||
}`);
|
||||
|
||||
expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
|
||||
expect(c4.parser.yy.getBoundaries()[1]).toMatchObject({
|
||||
type: { text: 'company' },
|
||||
});
|
||||
});
|
||||
@@ -84,7 +84,7 @@ ${macroName}(b1, $link="https://github.com/mermaidjs") {
|
||||
System(SystemAA, "Internet Banking System")
|
||||
}`);
|
||||
|
||||
expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
|
||||
expect(c4.parser.yy.getBoundaries()[1]).toMatchObject({
|
||||
label: {
|
||||
text: {
|
||||
link: 'https://github.com/mermaidjs',
|
||||
@@ -99,7 +99,7 @@ ${macroName}(b1, $tags="tag1,tag2") {
|
||||
System(SystemAA, "Internet Banking System")
|
||||
}`);
|
||||
|
||||
expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
|
||||
expect(c4.parser.yy.getBoundaries()[1]).toMatchObject({
|
||||
label: {
|
||||
text: {
|
||||
tags: 'tag1,tag2',
|
||||
|
||||
@@ -111,7 +111,7 @@ export const drawRels = (elem, rels, conf) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Draws an boundary in the diagram
|
||||
* Draws a boundary in the diagram
|
||||
*
|
||||
* @param {any} elem - The diagram we'll draw to.
|
||||
* @param {any} boundary - The boundary to draw.
|
||||
|
||||
@@ -99,7 +99,7 @@ export class ClassDB implements DiagramDB {
|
||||
/**
|
||||
* Function called by parser when a node definition has been found.
|
||||
*
|
||||
* @param id - Id of the class to add
|
||||
* @param id - ID of the class to add
|
||||
* @public
|
||||
*/
|
||||
public addClass(_id: string) {
|
||||
@@ -524,7 +524,7 @@ export class ClassDB implements DiagramDB {
|
||||
/**
|
||||
* Function called by parser when a namespace definition has been found.
|
||||
*
|
||||
* @param id - Id of the namespace to add
|
||||
* @param id - ID of the namespace to add
|
||||
* @public
|
||||
*/
|
||||
public addNamespace(id: string) {
|
||||
@@ -553,8 +553,8 @@ export class ClassDB implements DiagramDB {
|
||||
/**
|
||||
* Function called by parser when a namespace definition has been found.
|
||||
*
|
||||
* @param id - Id of the namespace to add
|
||||
* @param classNames - Ids of the class to add
|
||||
* @param id - ID of the namespace to add
|
||||
* @param classNames - IDs of the class to add
|
||||
* @public
|
||||
*/
|
||||
public addClassesToNamespace(id: string, classNames: string[]) {
|
||||
|
||||
@@ -138,7 +138,7 @@ describe('given a basic class diagram, ', function () {
|
||||
expect(relations[0].title).toBe('manages');
|
||||
});
|
||||
|
||||
it('should handle backquoted class names', function () {
|
||||
it('should handle backticked class names', function () {
|
||||
const str = 'classDiagram\n' + 'class `Car`';
|
||||
|
||||
parser.parse(str);
|
||||
@@ -1207,7 +1207,7 @@ describe('given a class diagram with relationships, ', function () {
|
||||
parser.parse(str);
|
||||
});
|
||||
|
||||
it('should handle backquoted class name', function () {
|
||||
it('should handle backticked class name', function () {
|
||||
const str =
|
||||
'classDiagram\n' +
|
||||
'`Class1` <|-- Class02\n' +
|
||||
|
||||
@@ -28,7 +28,7 @@ describe('when securityLevel is antiscript, all script must be removed', () => {
|
||||
it('should remove all javascript urls', () => {
|
||||
compareRemoveScript(
|
||||
`This is a <a href="javascript:runHijackingScript();">clean link</a> + <a href="javascript:runHijackingScript();">clean link</a>
|
||||
and <a href="javascript:bipassedMining();">me too</a>`,
|
||||
and <a href="javascript:bypassedMining();">me too</a>`,
|
||||
`This is a <a>clean link</a> + <a>clean link</a>
|
||||
and <a>me too</a>`
|
||||
);
|
||||
|
||||
@@ -40,7 +40,7 @@ describe('when parsing ER diagram it...', function () {
|
||||
allowed.forEach((allowedChar) => {
|
||||
const singleOccurrence = `Blo${allowedChar}rf`;
|
||||
const repeatedOccurrence = `Blo${allowedChar}${allowedChar}rf`;
|
||||
const cannontStartWith = `${allowedChar}Blorf`;
|
||||
const cannotStartWith = `${allowedChar}Blorf`;
|
||||
const endsWith = `Blorf${allowedChar}`;
|
||||
|
||||
it(`${singleOccurrence} fails if not surrounded by quotes`, function () {
|
||||
@@ -73,7 +73,7 @@ describe('when parsing ER diagram it...', function () {
|
||||
expect(entities.has(name)).toBe(true);
|
||||
});
|
||||
|
||||
it(`"${cannontStartWith}" cannot start with the character`, function () {
|
||||
it(`"${cannotStartWith}" cannot start with the character`, function () {
|
||||
const name = repeatedOccurrence;
|
||||
expect(() => {
|
||||
erDiagram.parser.parse(`erDiagram\n "${name}"\n`);
|
||||
@@ -969,13 +969,13 @@ describe('when parsing ER diagram it...', function () {
|
||||
expect(rels[0].roleA).toBe('');
|
||||
});
|
||||
|
||||
it('should allow an non-empty quoted label', function () {
|
||||
it('should allow a non-empty quoted label', function () {
|
||||
erDiagram.parser.parse('erDiagram\nCUSTOMER ||--|{ ORDER : "places"');
|
||||
const rels = erDb.getRelationships();
|
||||
expect(rels[0].roleA).toBe('places');
|
||||
});
|
||||
|
||||
it('should allow an non-empty unquoted label', function () {
|
||||
it('should allow a non-empty unquoted label', function () {
|
||||
erDiagram.parser.parse('erDiagram\nCUSTOMER ||--|{ ORDER : places');
|
||||
const rels = erDb.getRelationships();
|
||||
expect(rels[0].roleA).toBe('places');
|
||||
|
||||
@@ -315,11 +315,11 @@ You have to call mermaid.initialize.`
|
||||
|
||||
log.info('addLink', _start, _end, id);
|
||||
|
||||
// for a group syntax like A e1@--> B & C, only the first edge should have an the userDefined id
|
||||
// for a group syntax like A e1@--> B & C, only the first edge should have a userDefined id
|
||||
// the rest of the edges should have auto generated ids
|
||||
for (const start of _start) {
|
||||
for (const end of _end) {
|
||||
//use the id only for last node in _start and and first node in _end
|
||||
//use the id only for last node in _start and first node in _end
|
||||
const isLastStart = start === _start[_start.length - 1];
|
||||
const isFirstEnd = end === _end[0];
|
||||
if (isLastStart && isFirstEnd) {
|
||||
|
||||
@@ -14,7 +14,7 @@ describe('[Text] when parsing', () => {
|
||||
|
||||
describe('it should handle huge files', function () {
|
||||
// skipped because this test takes like 2 minutes or more!
|
||||
it.skip('it should handlehuge diagrams', function () {
|
||||
it.skip('it should handle huge diagrams', function () {
|
||||
const nodes = ('A-->B;B-->A;'.repeat(415) + 'A-->B;').repeat(57) + 'A-->B;B-->A;'.repeat(275);
|
||||
flow.parser.parse(`graph LR;${nodes}`);
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@ describe('[Interactions] when parsing', () => {
|
||||
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback');
|
||||
});
|
||||
|
||||
it('should be possible to use click to a callback with toolip', function () {
|
||||
it('should be possible to use click to a callback with tooltip', function () {
|
||||
spyOn(flowDb, 'setClickEvent');
|
||||
spyOn(flowDb, 'setTooltip');
|
||||
const res = flow.parser.parse('graph TD\nA-->B\nclick A callback "tooltip"');
|
||||
@@ -48,7 +48,7 @@ describe('[Interactions] when parsing', () => {
|
||||
expect(flowDb.setTooltip).toHaveBeenCalledWith('A', 'tooltip');
|
||||
});
|
||||
|
||||
it('should be possible to use click to a click and call callback with toolip', function () {
|
||||
it('should be possible to use click to a click and call callback with tooltip', function () {
|
||||
spyOn(flowDb, 'setClickEvent');
|
||||
spyOn(flowDb, 'setTooltip');
|
||||
const res = flow.parser.parse('graph TD\nA-->B\nclick A call callback() "tooltip"');
|
||||
|
||||
@@ -12,7 +12,7 @@ describe('parsing a flow chart with markdown strings', function () {
|
||||
flow.parser.yy.clear();
|
||||
});
|
||||
|
||||
it('mardown formatting in nodes and labels', function () {
|
||||
it('markdown formatting in nodes and labels', function () {
|
||||
const res = flow.parser.parse(`flowchart
|
||||
A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in the hog"] -- "The rat in the mat" -->C;`);
|
||||
|
||||
@@ -37,7 +37,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
|
||||
expect(edges[1].text).toBe('The rat in the mat');
|
||||
expect(edges[1].labelType).toBe('string');
|
||||
});
|
||||
it('mardown formatting in subgraphs', function () {
|
||||
it('markdown formatting in subgraphs', function () {
|
||||
const res = flow.parser.parse(`flowchart LR
|
||||
subgraph "One"
|
||||
a("\`The **cat**
|
||||
|
||||
@@ -124,7 +124,7 @@ describe('when parsing directions', function () {
|
||||
expect(data4Layout.nodes[0].label).toEqual('D');
|
||||
});
|
||||
|
||||
it('should be forgiving with many spaces before teh end', function () {
|
||||
it('should be forgiving with many spaces before the end', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
D@{ shape: rounded }`);
|
||||
|
||||
@@ -197,7 +197,7 @@ describe('when parsing directions', function () {
|
||||
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
|
||||
expect(data4Layout.nodes[0].label).toEqual('This is }');
|
||||
});
|
||||
it('should error on non-existent shape', function () {
|
||||
it('should error on nonexistent shape', function () {
|
||||
expect(() => {
|
||||
flow.parser.parse(`flowchart TB
|
||||
A@{ shape: this-shape-does-not-exist }
|
||||
@@ -293,14 +293,14 @@ describe('when parsing directions', function () {
|
||||
|
||||
it('should be possible to use @ syntax to add labels on multi nodes', function () {
|
||||
const res = flow.parser.parse(`flowchart TB
|
||||
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
|
||||
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
|
||||
`);
|
||||
|
||||
const data4Layout = flow.parser.yy.getData();
|
||||
expect(data4Layout.nodes.length).toBe(3);
|
||||
expect(data4Layout.nodes[0].label).toEqual('label for n2');
|
||||
expect(data4Layout.nodes[1].label).toEqual('labe for n4');
|
||||
expect(data4Layout.nodes[2].label).toEqual('labe for n5');
|
||||
expect(data4Layout.nodes[1].label).toEqual('label for n4');
|
||||
expect(data4Layout.nodes[2].label).toEqual('label for n5');
|
||||
});
|
||||
|
||||
it('should be possible to use @ syntax to add labels on multi nodes with edge/link', function () {
|
||||
@@ -403,13 +403,13 @@ describe('when parsing directions', function () {
|
||||
it.skip('should be possible to use @ syntax to add labels with trail spaces', function () {
|
||||
const res = flow.parser.parse(
|
||||
`flowchart TB
|
||||
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"} `
|
||||
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"} `
|
||||
);
|
||||
|
||||
const data4Layout = flow.parser.yy.getData();
|
||||
expect(data4Layout.nodes.length).toBe(3);
|
||||
expect(data4Layout.nodes[0].label).toEqual('label for n2');
|
||||
expect(data4Layout.nodes[1].label).toEqual('labe for n4');
|
||||
expect(data4Layout.nodes[2].label).toEqual('labe for n5');
|
||||
expect(data4Layout.nodes[1].label).toEqual('label for n4');
|
||||
expect(data4Layout.nodes[2].label).toEqual('label for n5');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -429,7 +429,7 @@ describe('[Text] when parsing', () => {
|
||||
|
||||
expect(vert.get('C').text).toBe('Начало');
|
||||
});
|
||||
it('should handle backslask', function () {
|
||||
it('should handle backslash', function () {
|
||||
const res = flow.parser.parse('graph TD;A-->C(c:\\windows);');
|
||||
|
||||
const vert = flow.parser.yy.getVertices();
|
||||
@@ -596,7 +596,7 @@ describe('[Text] when parsing', () => {
|
||||
expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
|
||||
});
|
||||
|
||||
it('should throw error for nested quoatation marks', function () {
|
||||
it('should throw error for nested quotation marks', function () {
|
||||
const str = 'graph TD; A["This is a "()" in text"];';
|
||||
|
||||
expect(() => flow.parser.parse(str)).toThrowError("Expecting 'SQE'");
|
||||
|
||||
@@ -57,7 +57,7 @@ describe('when parsing flowcharts', function () {
|
||||
expect(edges[1].type).toBe('arrow_point');
|
||||
expect(edges[1].text).toBe('');
|
||||
});
|
||||
it('should multiple vertices in link statement in the begining', function () {
|
||||
it('should multiple vertices in link statement in the beginning', function () {
|
||||
const res = flow.parser.parse(`
|
||||
graph TD
|
||||
A-->B & C;
|
||||
|
||||
@@ -219,7 +219,7 @@ describe('when using the ganttDb', function () {
|
||||
ganttDb.addTask('test3', 'id3,after id2,7d');
|
||||
ganttDb.addTask('test4', 'id4,2019-02-01,2019-02-20'); // Fixed endTime
|
||||
ganttDb.addTask('test5', 'id5,after id4,1d');
|
||||
ganttDb.addSection('full ending taks on last day');
|
||||
ganttDb.addSection('full ending task on last day');
|
||||
ganttDb.addTask('test6', 'id6,2019-02-13,2d');
|
||||
ganttDb.addTask('test7', 'id7,after id6,1d');
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user