marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-08 16:49:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merged Develop in timeline branch

Browse Source
This commit is contained in:
ashishj
2022-12-15 17:10:56 +01:00
parent 2141057ab4 54bb2ef00e
commit fefcc43dd4
120 changed files with 2795 additions and 3415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
.eslintrc.json
View File

@@ -29,7 +29,8 @@
"jsdoc",
"json",
"@cspell",
"lodash"
"lodash",
"unicorn"
],
"rules": {
"curly": "error",
@@ -63,7 +64,29 @@
}
],
"no-only-tests/no-only-tests": "error",
"lodash/import-scope": ["error", "method"]
"lodash/import-scope": ["error", "method"],
"unicorn/better-regex": "error",
"unicorn/no-abusive-eslint-disable": "error",
"unicorn/no-array-push-push": "error",
"unicorn/no-for-loop": "error",
"unicorn/no-instanceof-array": "error",
"unicorn/no-typeof-undefined": "error",
"unicorn/no-unnecessary-await": "error",
"unicorn/no-unsafe-regex": "warn",
"unicorn/no-useless-promise-resolve-reject": "error",
"unicorn/prefer-array-find": "error",
"unicorn/prefer-array-flat-map": "error",
"unicorn/prefer-array-index-of": "error",
"unicorn/prefer-array-some": "error",
"unicorn/prefer-default-parameters": "error",
"unicorn/prefer-includes": "error",
"unicorn/prefer-negative-index": "error",
"unicorn/prefer-object-from-entries": "error",
"unicorn/prefer-string-starts-ends-with": "error",
"unicorn/prefer-string-trim-start-end": "error",
"unicorn/string-content": "error",
"unicorn/prefer-spread": "error",
"unicorn/no-lonely-if": "error"
},
"overrides": [
{

16
.github/workflows/lint.yml vendored
View File

@@ -9,7 +9,7 @@ on:
- ready_for_review
permissions:
contents: read
contents: write
jobs:
lint:
@@ -39,5 +39,19 @@ jobs:
run: pnpm run lint
- name: Verify Docs
id: verifyDocs
working-directory: ./packages/mermaid
continue-on-error: ${{ github.event_name == 'push' }}
run: pnpm run docs:verify
- name: Rebuild Docs
if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
working-directory: ./packages/mermaid
run: pnpm run docs:build
- name: Commit changes
uses: EndBug/add-and-commit@v9
if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
with:
message: 'Update docs'
add: 'docs/*'

20
.github/workflows/release-preview-publish.yml vendored
View File

@@ -10,22 +10,30 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- uses: pnpm/action-setup@v2
- name: Setup Node.js
uses: actions/setup-node@v3
with:
cache: pnpm
node-version: 18.x
- name: Install Yarn
run: npm i yarn --global
- name: Install Packages
run: |
pnpm install --frozen-lockfile
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Install Json
run: npm i json --global
- name: Install Packages
run: yarn install --frozen-lockfile
- name: Publish
working-directory: ./packages/mermaid
run: |
PREVIEW_VERSION=8
PREVIEW_VERSION=$(git log --oneline "origin/$GITHUB_REF_NAME" ^"origin/master" | wc -l)
VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
echo $VERSION
npm version --no-git-tag-version --allow-same-version $VERSION

21
__mocks__/c4Renderer.js Normal file
View File

@@ -0,0 +1,21 @@
/**
* Mocked C4Context diagram renderer
*/
import { vi } from 'vitest';
export const drawPersonOrSystemArray = vi.fn();
export const drawBoundary = vi.fn();
export const setConf = vi.fn();
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
drawPersonOrSystemArray,
drawBoundary,
setConf,
draw,
};

16
__mocks__/classRenderer-v2.js Normal file
View File

@@ -0,0 +1,16 @@
/**
* Mocked class diagram v2 renderer
*/
import { vi } from 'vitest';
export const setConf = vi.fn();
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
setConf,
draw,
};

13
__mocks__/classRenderer.js Normal file
View File

@@ -0,0 +1,13 @@
/**
* Mocked class diagram renderer
*/
import { vi } from 'vitest';
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
draw,
};

71
__mocks__/d3.ts
View File

@@ -1,79 +1,14 @@
// @ts-nocheck TODO: Fix TS
import { vi } from 'vitest';
const NewD3 = function () {
/**
*
*/
function returnThis() {
return this;
}
return {
append: function () {
return NewD3();
},
lower: returnThis,
attr: returnThis,
style: returnThis,
text: returnThis,
0: {
0: {
getBBox: function () {
return {
height: 10,
width: 20,
};
},
},
},
};
};
import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
export const select = function () {
return new NewD3();
return new MockedD3();
};
export const selectAll = function () {
return new NewD3();
return new MockedD3();
};
export const curveBasis = 'basis';
export const curveLinear = 'linear';
export const curveCardinal = 'cardinal';
export const MockD3 = (name, parent) => {
const children = [];
const elem = {
get __children() {
return children;
},
get __name() {
return name;
},
get __parent() {
return parent;
},
node() {
return {
getBBox() {
return {
x: 5,
y: 10,
height: 15,
width: 20,
};
},
};
},
};
elem.append = (name) => {
const mockElem = MockD3(name, elem);
children.push(mockElem);
return mockElem;
};
elem.lower = vi.fn(() => elem);
elem.attr = vi.fn(() => elem);
elem.text = vi.fn(() => elem);
elem.style = vi.fn(() => elem);
return elem;
};

16
__mocks__/erRenderer.js Normal file
View File

@@ -0,0 +1,16 @@
/**
* Mocked er diagram renderer
*/
import { vi } from 'vitest';
export const setConf = vi.fn();
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
setConf,
draw,
};

24
__mocks__/flowRenderer-v2.js Normal file
View File

@@ -0,0 +1,24 @@
/**
* Mocked flow (flowchart) diagram v2 renderer
*/
import { vi } from 'vitest';
export const setConf = vi.fn();
export const addVertices = vi.fn();
export const addEdges = vi.fn();
export const getClasses = vi.fn().mockImplementation(() => {
return {};
});
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
setConf,
addVertices,
addEdges,
getClasses,
draw,
};

16
__mocks__/ganttRenderer.js Normal file
View File

@@ -0,0 +1,16 @@
/**
* Mocked gantt diagram renderer
*/
import { vi } from 'vitest';
export const setConf = vi.fn();
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
setConf,
draw,
};

13
__mocks__/gitGraphRenderer.js Normal file
View File

@@ -0,0 +1,13 @@
/**
* Mocked git (graph) diagram renderer
*/
import { vi } from 'vitest';
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
draw,
};

15
__mocks__/journeyRenderer.js Normal file
View File

@@ -0,0 +1,15 @@
/**
* Mocked pie (picChart) diagram renderer
*/
import { vi } from 'vitest';
export const setConf = vi.fn();
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
setConf,
draw,
};

13
__mocks__/pieRenderer.js Normal file
View File

@@ -0,0 +1,13 @@
/**
* Mocked pie (picChart) diagram renderer
*/
import { vi } from 'vitest';
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
draw,
};

13
__mocks__/requirementRenderer.js Normal file
View File

@@ -0,0 +1,13 @@
/**
* Mocked requirement diagram renderer
*/
import { vi } from 'vitest';
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
draw,
};

23
__mocks__/sequenceRenderer.js Normal file
View File

@@ -0,0 +1,23 @@
/**
* Mocked sequence diagram renderer
*/
import { vi } from 'vitest';
export const bounds = vi.fn();
export const drawActors = vi.fn();
export const drawActorsPopup = vi.fn();
export const setConf = vi.fn();
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
bounds,
drawActors,
drawActorsPopup,
setConf,
draw,
};

22
__mocks__/stateRenderer-v2.js Normal file
View File

@@ -0,0 +1,22 @@
/**
* Mocked state diagram v2 renderer
*/
import { vi } from 'vitest';
export const setConf = vi.fn();
export const getClasses = vi.fn().mockImplementation(() => {
return {};
});
export const stateDomId = vi.fn().mockImplementation(() => {
return 'mocked-stateDiagram-stateDomId';
});
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
setConf,
getClasses,
draw,
};

6
cSpell.json
View File

@@ -16,6 +16,7 @@
"braintree",
"brolin",
"brotli",
"classdef",
"codedoc",
"colour",
"cpettitt",
@@ -31,6 +32,7 @@
"edgechromium",
"faber",
"flatmap",
"ftplugin",
"gantt",
"gitea",
"gitgraph",
@@ -62,9 +64,13 @@
"phpbb",
"plantuml",
"playfair",
"pnpm",
"podlite",
"ranksep",
"rect",
"rects",
"redmine",
"roledescription",
"sandboxed",
"setupgraphviewbox",
"shiki",

32
cypress/integration/rendering/gantt.spec.js
View File

@@ -310,38 +310,6 @@ describe('Gantt diagram', () => {
);
});
it('should render accessibility tags', function () {
const expectedTitle = 'Gantt Diagram';
const expectedAccDescription = 'Tasks for Q4';
renderGraph(
`
gantt
accTitle: ${expectedTitle}
accDescr: ${expectedAccDescription}
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
`,
{}
);
cy.get('svg').should((svg) => {
const el = svg.get(0);
const children = Array.from(el.children);
const titleEl = children.find(function (node) {
return node.tagName === 'title';
});
const descriptionEl = children.find(function (node) {
return node.tagName === 'desc';
});
expect(titleEl).to.exist;
expect(titleEl.textContent).to.equal(expectedTitle);
expect(descriptionEl).to.exist;
expect(descriptionEl.textContent).to.equal(expectedAccDescription);
});
});
it('should render a gantt diagram with tick is 15 minutes', () => {
imgSnapshotTest(
`

2
cypress/integration/rendering/gitGraph.spec.js
View File

@@ -328,7 +328,7 @@ describe('Git Graph diagram', () => {
title: simple gitGraph
---
gitGraph
commit
commit id: "1-abcdefg"
`,
{}
);

65
cypress/integration/rendering/requirement.spec.js
View File

@@ -46,69 +46,4 @@ describe('Requirement diagram', () => {
);
cy.get('svg');
});
it('should render accessibility tags', function () {
const expectedTitle = 'Gantt Diagram';
const expectedAccDescription = 'Tasks for Q4';
renderGraph(
`
requirementDiagram
accTitle: ${expectedTitle}
accDescr: ${expectedAccDescription}
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
functionalRequirement test_req2 {
id: 1.1
text: the second test text.
risk: low
verifymethod: inspection
}
performanceRequirement test_req3 {
id: 1.2
text: the third test text.
risk: medium
verifymethod: demonstration
}
element test_entity {
type: simulation
}
element test_entity2 {
type: word doc
docRef: reqs/test_entity
}
test_entity - satisfies -> test_req2
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req <- copies - test_entity2
`,
{}
);
cy.get('svg').should((svg) => {
const el = svg.get(0);
const children = Array.from(el.children);
const titleEl = children.find(function (node) {
return node.tagName === 'title';
});
const descriptionEl = children.find(function (node) {
return node.tagName === 'desc';
});
expect(titleEl).to.exist;
expect(titleEl.textContent).to.equal(expectedTitle);
expect(descriptionEl).to.exist;
expect(descriptionEl.textContent).to.equal(expectedAccDescription);
});
});
});

2
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -328,7 +328,7 @@ describe('State diagram', () => {
}
);
});
it('v2 it should be possibel to use a choice', () => {
it('v2 it should be possible to use a choice', () => {
imgSnapshotTest(
`
stateDiagram-v2

1
cypress/integration/rendering/theme.spec.js
View File

@@ -25,6 +25,7 @@ describe('themeCSS balancing, it', () => {
});
});
// TODO: Delete/Rename this describe, keeping the inner contents.
describe('Pie Chart', () => {
// beforeEach(()=>{
// cy.clock((new Date('2014-06-09')).getTime());

52
cypress/platform/knsv2.html
View File

@@ -56,28 +56,30 @@
<body>
<div>Security check</div>
<pre id="diagram" class="mermaid">
flowchart TD
A --> B
flowchart LR
%% Actors
A
subgraph Sub
B --> C
A --> C
end
%% Accusations
A --L --> Sub
%% Offense
B --> A
</pre>
<pre id="diagram" class="mermaid">
mindmap
root
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8))
stateDiagram-v2
[*] --> S1
S1 --> S2: long line using<br/>should work
S1 --> S3: long line using <br>should work
S1 --> S4: long line using \\nshould work
</pre>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD
@@ -91,14 +93,18 @@ mindmap
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<script src="./mermaid.js"></script>
<!-- <script src="./mermaid.js"></script> -->
<script>
<script type="module">
import mindmap from '../../packages/mermaid-mindmap/src/detector';
// import example from '../../packages/mermaid-example-diagram/src/detector';
import mermaid from '../../packages/mermaid/src/mermaid';
await mermaid.registerExternalDiagrams([mindmap]);
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
theme: 'default',
startOnLoad: true,
logLevel: 0,
flowchart: {
@@ -109,10 +115,6 @@ mindmap
useMaxWidth: false,
},
useMaxWidth: false,
lazyLoadedDiagrams: [
'./mermaid-mindmap-detector.esm.mjs',
'./mermaid-example-diagram-detector.esm.mjs',
],
});
function callback() {
alert('It worked');

2
cypress/platform/viewer.js
View File

@@ -54,7 +54,7 @@ function merge(current, update) {
if (
current.hasOwnProperty(key) &&
typeof current[key] === 'object' &&
!(current[key] instanceof Array)
!Array.isArray(current[key])
) {
merge(current[key], update[key]);

44
docs/community/newDiagram.md
View File

@@ -14,8 +14,8 @@ This would be to define a jison grammar for the new diagram type. That should st
For instance:
- the flowchart starts with the keyword graph.
- the sequence diagram starts with the keyword sequenceDiagram
- the flowchart starts with the keyword _graph_
- the sequence diagram starts with the keyword _sequenceDiagram_
#### Store data found during parsing
@@ -61,6 +61,11 @@ Place the renderer in the diagram folder.
### Step 3: Detection of the new diagram type
The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
### Step 4: The final piece - triggering the rendering
@@ -168,17 +173,23 @@ It is probably a good idea to keep the handling similar to this in your new diag
## Accessibility
The syntax for adding title and description looks like this:
Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
accTitle: The title
accDescr: The description
- aria-roledescription
- accessible title
- accessible description
accDescr {
Syntax for a description text
written on multiple lines.
}
### aria-roledescription
In a similar way to the directives the jison syntax are quite similar between the diagrams.
The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element.
See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) in [the Accessible Rich Internet Applications W3 standard.](https://www.w3.org/WAI/standards-guidelines/aria/)
### accessible title and description
The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
In a similar way to the directives, the jison syntax are quite similar between the diagrams.
```jison
@@ -214,18 +225,7 @@ The functions for setting title and description are provided by a common module.
clear as commonClear,
} from '../../commonDb';
For rendering the accessibility tags you have again an existing function you can use.
**In the renderer:**
```js
import addSVGAccessibilityFields from '../../accessibility';
/* ... */
// Adds title and description to the flow chart
addSVGAccessibilityFields(parser.yy, svg, id);
```
The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
## Theming

397
docs/config/accessibility.md
View File

@@ -10,118 +10,169 @@
Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
Adding accessibility means that the rich information communicated by visual diagrams can be made available to those using assistive technologies (and of course to search engines).
[Read more about Accessible Rich Internet Applications and the W3 standards.](https://www.w3.org/WAI/standards-guidelines/aria/)
This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
Mermaid will automatically insert the [aria-roledescription](#aria-roledescription) and, if provided in the diagram text by the diagram author, the [accessible title and description.](#accessible-title-and-description)
## Defining Accessibility Options
### aria-roledescription
### Single line accessibility values
The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.)
The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
- `accTitle: "Your Accessibility Title"` or
- `accDescr: "Your Accessibility Description"`
```html
<svg
aria-roledescription="stateDiagram"
class="statediagram"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid-1668720491568"
></svg>
```
**When these two options are defined, they will add a corresponding `<title>` and `<desc>` tag in the SVG.**
### Accessible Title and Description
Let us take a look at the following example with a flowchart diagram:
Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain.
The accessible title and description will add `<title>` and `<desc>` elements within the SVG element and the [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) and [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) attributes in the SVG tag.
Here is HTML that is generated, showing that the SVG element is labelled by the accessible title (id = `chart-title-mermaid-1668725057758`)
and described by the accessible description (id = `chart-desc-mermaid-1668725057758` );
and the accessible title element (text = "This is the accessible title")
and the accessible description element (text = "This is an accessible description").
_(Note that some of the SVG attributes and the SVG contents are omitted for clarity.)_
```html
<svg
aria-labelledby="chart-title-mermaid-1668725057758"
aria-describedby="chart-desc-mermaid-1668725057758"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid-1668725057758"
>
<title id="chart-title-mermaid-1668725057758">This is the accessible title</title>
<desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc>
</svg>
```
Details for the syntax follow.
#### accessible title
The **accessible title** is specified with the **accTitle** _keyword_, followed by a colon (`:`), and the string value for the title.
The string value ends at the end of the line. (It can only be a single line.)
Ex: `accTitle: This is a single line title`
See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated.
#### accessible description
An accessible description can be 1 line long (a single line) or many lines long.
The **single line accessible description** is specified with the **accDescr** _keyword_, followed by a colon (`:`), followed by the string value for the description.
Ex: `accDescr: This is a single line description.`
A **multiple line accessible description** _does not have a colon (`:`) after the accDescr keyword_ and is surrounded by curly brackets (`{}`).
Ex:
accDescr { The official Bob's Burgers corporate processes that are used
for making very, very big decisions.
This is actually a very simple flow: see the big decision and then make the big decision.}
See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated.
#### accTitle and accDescr Usage Examples
- Flowchart with the accessible title "Big Decisions" and the single-line accessible description "Bob's Burgers process for making big decisions"
```mermaid-example
graph LR
accTitle: Big decisions
accDescr: Flow chart of the decision making process
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
accTitle: Big Decisions
accDescr: Bob's Burgers process for making big decisions
A[Identify Big Descision] --> B{Make Big Decision}
B --> D[Be done]
```
```mermaid
graph LR
accTitle: Big decisions
accDescr: Flow chart of the decision making process
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
accTitle: Big Decisions
accDescr: Bob's Burgers process for making big decisions
A[Identify Big Descision] --> B{Make Big Decision}
B --> D[Be done]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
```html
<svg
aria-labelledby="chart-title-mermaid_382ee221"
aria-describedby="chart-desc-mermaid_382ee221"
aria-roledescription="flowchart-v2"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid_382ee221"
>
<title id="chart-title-mermaid_382ee221">Big decisions</title>
<desc id="chart-desc-mermaid_382ee221">Bob's Burgers process for making big decisions</desc>
</svg>
```
### Multi-line Accessibility title/description
You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.
`accTitle: My single line title value` (**_single line format_**)
vs
`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
Let us look at it in the following example, with same flowchart:
- Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "The official Bob's Burgers corporate processes that are used
for making very, very big decisions.
This is actually a very simple flow: identify the big decision and then make the big decision."
```mermaid-example
graph LR
accTitle: Big decisions
accTitle: Bob's Burger's Making Big Decisions
accDescr {
My multi-line description
of the diagram
The official Bob's Burgers corporate processes that are used
for making very, very big decisions.
This is actually a very simple flow: identify the big decision and then make the big decision.
}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
A[Identify Big Descision] --> B{Make Big Decision}
B --> D[Be done]
```
```mermaid
graph LR
accTitle: Big decisions
accTitle: Bob's Burger's Making Big Decisions
accDescr {
My multi-line description
of the diagram
The official Bob's Burgers corporate processes that are used
for making very, very big decisions.
This is actually a very simple flow: identify the big decision and then make the big decision.
}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
A[Identify Big Descision] --> B{Make Big Decision}
B --> D[Be done]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
### Sample Code Snippet for other diagram types
#### Sequence Diagram
```mermaid-example
sequenceDiagram
accTitle: My Sequence Diagram
accDescr: My Sequence Diagram Description
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```html
<svg
aria-labelledby="chart-title-mermaid_382ee221"
aria-describedby="chart-desc-mermaid_382ee221"
aria-roledescription="flowchart-v2"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid_382ee221"
>
<title id="chart-title-mermaid_382ee221">Big decisions</title>
<desc id="chart-desc-mermaid_382ee221">
The official Bob's Burgers corporate processes that are used for making very, very big
decisions. This is actually a very simple flow: identify the big decision and then make the big
decision.
</desc>
</svg>
```
```mermaid
sequenceDiagram
accTitle: My Sequence Diagram
accDescr: My Sequence Diagram Description
#### Sample Code Snippets for other diagram types
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
#### Class Diagram
##### Class Diagram
```mermaid-example
classDiagram
@@ -139,27 +190,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
Vehicle <|-- Car
```
#### State Diagram
```mermaid-example
stateDiagram
accTitle: My State Diagram
accDescr: My State Diagram Description
s1 --> s2
```
```mermaid
stateDiagram
accTitle: My State Diagram
accDescr: My State Diagram Description
s1 --> s2
```
#### Entity Relationship Diagram
##### Entity Relationship Diagram
```mermaid-example
erDiagram
@@ -183,41 +214,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
#### User Journey Diagram
```mermaid-example
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
```mermaid
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
#### Gantt Chart
##### Gantt Chart
```mermaid-example
gantt
@@ -251,7 +248,45 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
#### Pie Chart
##### Gitgraph
```mermaid-example
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
```mermaid
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
##### Pie Chart
```mermaid-example
pie
@@ -279,7 +314,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
#### Requirement Diagram
##### Requirement Diagram
```mermaid-example
requirementDiagram
@@ -321,40 +356,78 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
#### Gitgraph
##### Sequence Diagram
```mermaid-example
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
sequenceDiagram
accTitle: My Sequence Diagram
accDescr: My Sequence Diagram Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
```mermaid
sequenceDiagram
accTitle: My Sequence Diagram
accDescr: My Sequence Diagram Description
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
##### State Diagram
```mermaid-example
stateDiagram
accTitle: My State Diagram
accDescr: My State Diagram Description
s1 --> s2
```
```mermaid
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
stateDiagram
accTitle: My State Diagram
accDescr: My State Diagram Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
s1 --> s2
```
##### User Journey Diagram
```mermaid-example
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
```mermaid
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```

18
docs/config/setup/modules/config.md
View File

@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
#### Defined in
[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191)
---
@@ -60,7 +60,7 @@ The currentConfig
#### Defined in
[config.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L138)
[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137)
---
@@ -84,7 +84,7 @@ The siteConfig
#### Defined in
[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97)
[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
---
@@ -118,7 +118,7 @@ The siteConfig
#### Defined in
[config.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L225)
[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
---
@@ -147,7 +147,7 @@ options in-place
#### Defined in
[config.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L153)
[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152)
---
@@ -167,7 +167,7 @@ options in-place
#### Defined in
[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76)
[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
---
@@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf
#### Defined in
[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114)
[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
---
@@ -232,7 +232,7 @@ The new siteConfig
#### Defined in
[config.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L62)
[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
---
@@ -273,4 +273,4 @@ The new siteConfig
#### Defined in
[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)
[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)

30
docs/config/setup/modules/mermaidAPI.md
View File

@@ -12,6 +12,16 @@
Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
## Type Aliases
### D3Element
Ƭ **D3Element**: `any`
#### Defined in
[mermaidAPI.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L72)
## Variables
### mermaidAPI
@@ -80,7 +90,7 @@ mermaid.initialize(config);
#### Defined in
[mermaidAPI.ts:949](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L949)
[mermaidAPI.ts:968](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L968)
## Functions
@@ -111,7 +121,7 @@ Return the last node appended
#### Defined in
[mermaidAPI.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L292)
[mermaidAPI.ts:285](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L285)
---
@@ -137,7 +147,7 @@ the cleaned up svgCode
#### Defined in
[mermaidAPI.ts:243](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L243)
[mermaidAPI.ts:236](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L236)
---
@@ -163,7 +173,7 @@ the string with all the user styles
#### Defined in
[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
[mermaidAPI.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L165)
---
@@ -186,7 +196,7 @@ the string with all the user styles
#### Defined in
[mermaidAPI.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L220)
[mermaidAPI.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L213)
---
@@ -213,7 +223,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
[mermaidAPI.ts:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L149)
---
@@ -233,7 +243,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L128)
[mermaidAPI.ts:129](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L129)
---
@@ -253,7 +263,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L99)
[mermaidAPI.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L100)
---
@@ -279,7 +289,7 @@ Put the svgCode into an iFrame. Return the iFrame code
#### Defined in
[mermaidAPI.ts:271](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L271)
[mermaidAPI.ts:264](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L264)
---
@@ -305,4 +315,4 @@ Remove any existing elements from the given document
#### Defined in
[mermaidAPI.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L343)
[mermaidAPI.ts:336](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L336)

814
docs/config/theming.md
View File

@@ -6,31 +6,27 @@
# Theme Configuration
With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
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 follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
## Available Themes
## Deployable Themes
1. **default** - This is the default theme for all diagrams.
The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
2. **neutral** - This theme is great for black and white documents that will be printed.
1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
3. **dark** - This theme goes well with dark-colored elements or dark-mode.
2. **forest**- A theme full of light greens that is easy on the eyes.
4. **forest** - This theme contains shades of green.
3. **dark**- A theme that would go well with other dark-colored elements.
5. **base** - This is the only theme that can be modified. Use this theme as the base for customizations.
4. **default**- The default theme for all diagrams.
## Site-wide Theme
5. **neutral**- The theme to be used for black and white printing.
To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
## Site-wide Themes
Site-wide themes are declared via `initialize` by site owners.
Example of `Initialize` call setting `theme` to `base`:
Example of `initialize` call setting `theme` to `base`:
```javascript
mermaidAPI.initialize({
@@ -39,28 +35,52 @@ mermaidAPI.initialize({
});
```
**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
## Diagram-specific Themes
## Themes at the Local or Current Level
To customize the theme of an individual diagram, use the `init` directive.
When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
Example of `init` directive setting the `theme` to `forest`:
```mermaid-example
%%{init: {'theme':'base'}}%%
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
```mermaid
%%{init: {'theme':'base'}}%%
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations.
## Customizing Themes with `themeVariables`
To make a custom theme, modify `themeVariables` via `init`.
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-reference-table)) |
Example of modifying `themeVariables` using the `init` directive:
```mermaid-example
%%{init: {'theme':'base'}}%%
%%{
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}
@@ -78,7 +98,19 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
```
```mermaid
%%{init: {'theme':'base'}}%%
%%{
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}
@@ -95,649 +127,93 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
end
```
# List of Themes
# Customizing Themes with `themeVariables`
The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
| Parameter | Description | Type | Required | Objects contained |
| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
**Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**
```mermaid-example
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
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': '#ff0000'}}}%%
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
```
**Notes:**
Leaving it empty will set all variable values to default.
## Color and Color Calculation:
Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. Mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
## Theme Variables Reference Table
> **Note**
> Variables that are unique to some diagrams can be affected by changes in Theme Variables
| Variable | Default/Base/Factor value | Calc | Description |
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
| darkMode | false | | Boolean Value that dictates how to calculate colors. "true" will activate darkmode. |
| background | #f4f4f4 | | Used to calculate color for items that should either be background colored or contrasting to the background. |
| fontFamily | "trebuchet ms", verdana, arial | | |
| fontSize | 16px | | Font Size, in pixels |
| primaryColor | #fff4dd | | Color to be used as background in nodes, other colors will be derived from this |
| primaryBorderColor | based on primaryColor | \* | Color to be used as border in nodes using primaryColor |
| primaryTextColor | based on darkMode #ddd/#333 | \* | Color to be used as text color in nodes using primaryColor |
| secondaryColor | based on primaryColor | \* | |
| secondaryBorderColor | based on secondaryColor | \* | Color to be used as border in nodes using secondaryColor |
| secondaryTextColor | based on secondaryColor | \* | Color to be used as text color in nodes using secondaryColor |
| tertiaryColor | based on primaryColor | \* | |
| tertiaryBorderColor | based on tertiaryColor | \* | Color to be used as border in nodes using tertiaryColor |
| tertiaryTextColor | based on tertiaryColor | \* | Color to be used as text color in nodes using tertiaryColor |
| noteBkgColor | #fff5ad | | Color used as background in notes |
| noteTextColor | #333 | | Text color in note rectangles. |
| noteBorderColor | based on noteBkgColor | \* | Border color in note rectangles. |
| lineColor | based on background | \* | |
| textColor | based on primaryTextColor | \* | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
| mainBkg | based on primaryColor | \* | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorBkgColor | tertiaryColor | \* | Color for syntax error message |
| errorTextColor | tertiaryTextColor | \* | Color for syntax error message |
# What follows are Variables, specific to different diagrams and charts.
## Some Theme Variables serve as, or affect the Default Values for Specific Diagram Variables, unless changed using `%%init%%` .
## Flowchart
| Variable | Default/ Associated Value | Calc | Description |
| ------------------- | ------------------------- | ---- | ---------------------------- |
| nodeBorder | primaryBorderColor | \* | Node Border Color |
| clusterBkg | tertiaryColor | \* | Background in subgraphs |
| clusterBorder | tertiaryBorderColor | \* | Cluster Border Color |
| defaultLinkColor | lineColor | \* | Link Color |
| titleColor | tertiaryTextColor | \* | Title Color |
| edgeLabelBackground | based on secondaryColor | \* | |
| nodeTextColor | primaryTextColor | \* | Color for text inside Nodes. |
# sequence diagram
| name | Default value | Calc | Description |
| --------------------- | ----------------------- | ---- | --------------------------- |
| actorBorder | primaryBorderColor | \* | Actor Border Color |
| actorBkg | mainBkg | \* | Actor Background Color |
| actorTextColor | primaryTextColor | \* | Actor Text Color |
| actorLineColor | grey | \* | Actor Line Color |
| signalColor | textColor | \* | Signal Color |
| signalTextColor | textColor | \* | Signal Text Color |
| labelBoxBkgColor | actorBkg | \* | Label Box Background Color |
| labelBoxBorderColor | actorBorder | \* | Label Box Border Color |
| labelTextColor | actorTextColor | \* | Label Text Color |
| loopTextColor | actorTextColor | \* | Loop ext Color |
| activationBorderColor | based on secondaryColor | \* | Activation Border Color |
| activationBkgColor | secondaryColor | \* | Activation Background Color |
| sequenceNumberColor | based on lineColor | \* | Sequence Number Color |
# state colors
| name | Default value | Calc | Description |
| ------------- | ---------------- | ---- | -------------------------------------------- |
| labelColor | primaryTextColor | \* | |
| altBackground | tertiaryColor | \* | Used for background in deep composite states |
# class colors
| name | Default value | Calc | Description |
| --------- | ------------- | ---- | ------------------------------- |
| classText | textColor | \* | Color of Text in class diagrams |
# User journey colors
| name | Default value | Calc | Description |
| --------- | ----------------------- | ---- | --------------------------------------- |
| fillType0 | primaryColor | \* | Fill for 1st section in journey diagram |
| fillType1 | secondaryColor | \* | Fill for 2nd section in journey diagram |
| fillType2 | based on primaryColor | \* | Fill for 3rd section in journey diagram |
| fillType3 | based on secondaryColor | \* | Fill for 4th section in journey diagram |
| fillType4 | based on primaryColor | \* | Fill for 5th section in journey diagram |
| fillType5 | based on secondaryColor | \* | Fill for 6th section in journey diagram |
| fillType6 | based on primaryColor | \* | Fill for 7th section in journey diagram |
| fillType7 | based on secondaryColor | \* | Fill for 8th section in journey diagram |
\*\*Notes: Values are meant to create an alternating look.
# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
```mermaid-example
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
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': '#ff0000'}}}%%
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
```
\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
- Make the primary color a little lighter
- set the tertiary color to a reddish shade as well
- make the edge label background differ from the subgraph by setting the edgeLabelBackground
```mermaid-example
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
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': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
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
```
The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
# Common theming activities
## How to change the color of the arrows
# Examples:
When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good.
In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
### Flowchart
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
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: {'securityLevel': 'loose', 'theme':'base'}}%%
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
```
### Flowchart (beta)
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
C ==>|One| D[Laptop]
C x--x|Two| E[iPhone]
C o--o|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
C ==>|One| D[Laptop]
C x--x|Two| E[iPhone]
C o--o|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
### Sequence diagram
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
```
### Class diagram
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
### Gantt
```mermaid-example
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
### State diagram
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse
note right of SomethingElse : This is the note to the right.
SomethingElse --> [*]
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse
note right of SomethingElse : This is the note to the right.
SomethingElse --> [*]
```
### State diagram (beta)
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*]
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*]
```
### Entity Relations diagram
```mermaid-example
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
### User journey diagram
```mermaid-example
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
## Color and Color Calculation
To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.
The theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not.
## Theme Variables
| Variable | Default value | Description |
| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. |
| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background |
| fontFamily | trebuchet ms, verdana, arial | |
| fontSize | 16px | Font size in pixels |
| primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this |
| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` |
| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` |
| primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` |
| secondaryColor | calculated from primaryColor | |
| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` |
| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` |
| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` |
| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` |
| tertiaryColor | calculated from primaryColor | |
| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` |
| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` |
| noteBkgColor | #fff5ad | Color used as background in notes |
| noteTextColor | #333 | Text color in note rectangles |
| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles |
| lineColor | calculated from background | |
| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |
| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorBkgColor | tertiaryColor | Color for syntax error message |
| errorTextColor | tertiaryTextColor | Color for syntax error message |
## Flowchart Variables
| Variable | Default value | Description |
| ------------------- | ------------------------------ | --------------------------- |
| nodeBorder | primaryBorderColor | Node Border Color |
| clusterBkg | tertiaryColor | Background in subgraphs |
| clusterBorder | tertiaryBorderColor | Cluster Border Color |
| defaultLinkColor | lineColor | Link Color |
| titleColor | tertiaryTextColor | Title Color |
| edgeLabelBackground | calculated from secondaryColor | |
| nodeTextColor | primaryTextColor | Color for text inside Nodes |
## Sequence Diagram Variables
| Variable | Default value | Description |
| --------------------- | ------------------------------ | --------------------------- |
| actorBkg | mainBkg | Actor Background Color |
| actorBorder | primaryBorderColor | Actor Border Color |
| actorTextColor | primaryTextColor | Actor Text Color |
| actorLineColor | grey | Actor Line Color |
| signalColor | textColor | Signal Color |
| signalTextColor | textColor | Signal Text Color |
| labelBoxBkgColor | actorBkg | Label Box Background Color |
| labelBoxBorderColor | actorBorder | Label Box Border Color |
| labelTextColor | actorTextColor | Label Text Color |
| loopTextColor | actorTextColor | Loop Text Color |
| activationBorderColor | calculated from secondaryColor | Activation Border Color |
| activationBkgColor | secondaryColor | Activation Background Color |
| sequenceNumberColor | calculated from lineColor | Sequence Number Color |
## State Colors
| Variable | Default value | Description |
| ------------- | ---------------- | -------------------------------------------- |
| labelColor | primaryTextColor | |
| altBackground | tertiaryColor | Used for background in deep composite states |
## Class Colors
| Variable | Default value | Description |
| --------- | ------------- | ------------------------------- |
| classText | textColor | Color of Text in class diagrams |
## User Journey Colors
| Variable | Default value | Description |
| --------- | ------------------------------ | --------------------------------------- |
| fillType0 | primaryColor | Fill for 1st section in journey diagram |
| fillType1 | secondaryColor | Fill for 2nd section in journey diagram |
| fillType2 | calculated from primaryColor | Fill for 3rd section in journey diagram |
| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram |
| fillType4 | calculated from primaryColor | Fill for 5th section in journey diagram |
| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram |
| fillType6 | calculated from primaryColor | Fill for 7th section in journey diagram |
| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |

4
docs/config/usage.md
View File

@@ -62,7 +62,7 @@ Example:
```html
<script type="module">
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
```
@@ -85,7 +85,7 @@ Example:
B-->D(fa:fa-spinner);
</pre>
<script type="module">
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>

179
docs/index.html.todo
View File

@@ -1,179 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
gantt charts and git graphs.
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="description"
content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
/>
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
/>
<script
defer
data-domain="mermaid-js.github.io"
src="https://plausible.io/js/plausible.js"
></script>
<script>
const require = {
paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
<script>
exports = {};
</script>
<script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
<style>
.markdown-section {
max-width: 1200px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module">
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
import mindmap from 'https://unpkg.com/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
await mermaid.registerExternalDiagrams([mindmap]);
window.mermaid = mermaid;
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {
logLevel: 4,
startOnLoad: true,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
};
if (isDarkMode) conf.theme = 'dark';
async function loadMermaid() {
mermaid.parseError = (e) => {
console.log('parse error', e); // eslint-disable-line
};
await mermaid.registerExternalDiagrams([mindmap]);
mermaid.initialize(conf);
console.log('mermaid initialized'); // eslint-disable-line
}
await loadMermaid();
</script>
<script>
let initEditor = exports.default;
let parser = new DOMParser();
let currentCodeExample = 0;
let colorize = [];
let num = 0;
function colorizeEverything(html) {
initEditor(monaco);
return new Promise((resolve, reject) => {
monaco.editor.setTheme('mermaid');
const parsed = parser.parseFromString(html, 'text/html').body;
Promise.all(
[...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
monaco.editor.colorize(codeBlock.innerText, 'mermaid')
)
).then((result) => {
parsed
.querySelectorAll('pre[id*="code"]')
.forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
resolve(parsed.innerHTML);
});
});
}
function escapeHTML(html) {
return html
.replaceAll('&', '&amp;')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&apos;');
}
window.$docsify = {
search: 'auto',
name: 'mermaid',
repo: 'https://github.com/mermaid-js/mermaid',
loadSidebar: true,
mergeNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
markdown: {
renderer: {
code: function (code, lang) {
if (lang === 'mermaid-example') {
console.log('An example'); // eslint-disable-line
currentCodeExample++;
colorize.push(currentCodeExample);
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') {
return '<pre class="mermaid">' + code + '</pre>';
}
return this.origin.code.apply(this, arguments);
},
heading: function (text) {
if (text.includes('THIS IS AN AUTOGENERATED FILE. DO NOT EDIT')) {
return '';
}
return this.origin.heading.apply(this, arguments);
},
},
},
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
const editHtml = '[:memo: Edit this Page](' + url + ')\n';
return editHtml + html;
});
// Invoked on each page load after new HTML has been appended to the DOM
hook.doneEach(async function () {
await mermaid.init();
});
hook.afterEach(function (html, next) {
next(html);
(async () => {
while (!window.hasOwnProperty('monaco'))
await new Promise((resolve) => setTimeout(resolve, 1000));
colorizeEverything(html).then(
(newHTML) =>
(document.querySelector('article.markdown-section').innerHTML = newHTML)
);
})();
});
},
],
};
</script>
<script>
window.onhashchange = function (a) {
// if (location && ga) {
// ga('send', 'pageview', location.hash);
// }
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> -->
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
</body>
</html>

2
docs/intro/index.md
View File

@@ -267,7 +267,7 @@ To Deploy Mermaid:
```html
<script type="module">
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
```

8
docs/intro/n00b-gettingStarted.md
View File

@@ -128,7 +128,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
```html
<body>
<script type="module">
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
@@ -143,6 +143,10 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
| ----------- | --------------------------------- | ------- | ----------- |
| startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
### Adding external diagrams to mermaid
Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
### Working Examples
**Here is a full working example of the mermaidAPI being called through the CDN:**
@@ -168,7 +172,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
</pre>
<script type="module">
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>

9
docs/misc/integrations.md
View File

@@ -109,10 +109,10 @@ They also serve as proof of concept, for the variety of things that can be built
- [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
- [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
- [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
- [Atom](https://atom.io)
- [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced)
- [Atom Mermaid](https://atom.io/packages/atom-mermaid)
- [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
- [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
- [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
- [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
- [Sublime Text 3](https://sublimetext.com)
- [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
- [Astah](https://astah.net)
@@ -122,6 +122,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
- [Vim](https://www.vim.org)
- [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
- [GNU Emacs](https://www.gnu.org/software/emacs/)
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)

7
docs/syntax/classDiagram.md
View File

@@ -7,7 +7,8 @@
# Class diagrams
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
> Wikipedia
>
> \-Wikipedia
The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
@@ -237,10 +238,6 @@ Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
```
#### Return Type
Optionally you can end the method/function definition with the data type that will be returned.
#### Visibility
To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name:

14
docs/syntax/mindmap.md
View File

@@ -253,3 +253,17 @@ Root
B
C
```
## Integrating with your library/website.
Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
await mermaid.registerExternalDiagrams([mindmap]);
</script>
```
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.

14
package.json
View File

@@ -4,7 +4,7 @@
"version": "9.2.2",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"packageManager": "pnpm@7.17.0",
"packageManager": "pnpm@7.18.1",
"keywords": [
"diagram",
"markdown",
@@ -75,7 +75,7 @@
"coveralls": "^3.1.1",
"cypress": "^10.11.0",
"cypress-image-snapshot": "^4.0.1",
"esbuild": "^0.15.13",
"esbuild": "^0.16.0",
"eslint": "^8.27.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
@@ -91,7 +91,6 @@
"express": "^4.18.2",
"globby": "^13.1.2",
"husky": "^8.0.2",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.3.1",
"jison": "^0.4.18",
"js-yaml": "^4.1.0",
@@ -107,15 +106,8 @@
"ts-node": "^10.9.1",
"typescript": "^4.8.4",
"vite": "^3.2.3",
"vitepress": "^1.0.0-alpha.28",
"vitepress-plugin-mermaid": "^2.0.8",
"vitepress-plugin-search": "^1.0.4-alpha.15",
"vitest": "^0.25.1"
"vitest": "^0.25.3"
},
"sideEffects": [
"**/*.css",
"**/*.scss"
],
"volta": {
"node": "18.12.1"
}

3
packages/mermaid-mindmap/src/mermaidUtils.ts
View File

@@ -1,6 +1,7 @@
const warning = (s: string) => {
// Todo remove debug code
console.error('Log function was called before initialization', s); // eslint-disable-line
// eslint-disable-next-line no-console
console.error('Log function was called before initialization', s);
};
export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';

10
packages/mermaid/package.json
View File

@@ -1,11 +1,10 @@
{
"name": "mermaid",
"version": "9.2.2",
"version": "9.2.3-rc.1",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "./dist/mermaid.min.js",
"module": "./dist/mermaid.core.mjs",
"types": "./dist/mermaid.d.ts",
"type": "commonjs",
"exports": {
".": {
"require": "./dist/mermaid.min.js",
@@ -57,8 +56,6 @@
"d3": "^7.0.0",
"dagre-d3-es": "7.0.4",
"dompurify": "2.4.1",
"fast-clone": "^1.5.13",
"graphlib": "^2.1.8",
"khroma": "^2.0.0",
"lodash-es": "^4.17.21",
"moment-mini": "^2.24.0",
@@ -82,7 +79,6 @@
"coveralls": "^3.1.1",
"cspell": "^6.14.3",
"globby": "^13.1.2",
"identity-obj-proxy": "^3.0.0",
"jison": "^0.4.18",
"js-base64": "^3.7.2",
"jsdom": "^20.0.2",
@@ -96,7 +92,9 @@
"typedoc": "^0.23.18",
"typedoc-plugin-markdown": "^3.13.6",
"typescript": "^4.8.4",
"unist-util-flatmap": "^1.0.0"
"unist-util-flatmap": "^1.0.0",
"vitepress": "^1.0.0-alpha.28",
"vitepress-plugin-search": "^1.0.4-alpha.15"
},
"files": [
"dist",

29
packages/mermaid/src/accessibility.js
View File

@@ -1,29 +0,0 @@
/**
* This method will add a basic title and description element to a chart. The yy parser will need to
* respond to getAccTitle and getAccDescription, where the title is the title element on the chart,
* which is generally not displayed and the accDescription is the description element on the chart,
* which is never displayed.
*
* The following charts display their title as a visual and accessibility element: gantt
*
* @param yy_parser
* @param svg
* @param id
*/
export default function addSVGAccessibilityFields(yy_parser, svg, id) {
if (typeof svg.insert === 'undefined') {
return;
}
let title_string = yy_parser.getAccTitle();
let description = yy_parser.getAccDescription();
svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
svg
.insert('desc', ':first-child')
.attr('id', 'chart-desc-' + id)
.text(description);
svg
.insert('title', ':first-child')
.attr('id', 'chart-title-' + id)
.text(title_string);
}

219
packages/mermaid/src/accessibility.spec.ts Normal file
View File

@@ -0,0 +1,219 @@
import { MockedD3 } from './tests/MockedD3';
import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
import { D3Element } from './mermaidAPI';
describe('accessibility', () => {
const fauxSvgNode = new MockedD3();
describe('setA11yDiagramInfo', () => {
it('sets the aria-roledescription to the diagram type', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
setA11yDiagramInfo(fauxSvgNode, 'flowchart');
expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
});
it('does nothing if the diagram type is empty', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
setA11yDiagramInfo(fauxSvgNode, '');
expect(svgAttrSpy).not.toHaveBeenCalled();
});
});
describe('addSVGa11yTitleDescription', () => {
const givenId = 'theBaseId';
describe('with the given svg d3 object:', () => {
it('does nothing if there is no insert defined', () => {
const noInsertSvg = {
attr: vi.fn(),
};
const noInsertAttrSpy = vi.spyOn(noInsertSvg, 'attr').mockReturnValue(noInsertSvg);
addSVGa11yTitleDescription(noInsertSvg, 'some title', 'some desc', givenId);
expect(noInsertAttrSpy).not.toHaveBeenCalled();
});
// ----------------
// Convenience functions to DRY up the spec
function expectAriaLabelledByIsTitleId(
svgD3Node: D3Element,
title: string | null | undefined,
desc: string | null | undefined,
givenId: string
) {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
}
function expectAriaDescribedByIsDescId(
svgD3Node: D3Element,
title: string | null | undefined,
desc: string | null | undefined,
givenId: string
) {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);
}
function a11yTitleTagInserted(
svgD3Node: D3Element,
title: string | null | undefined,
desc: string | null | undefined,
givenId: string,
callNumber: number
) {
a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title);
}
function a11yDescTagInserted(
svgD3Node: D3Element,
title: string | null | undefined,
desc: string | null | undefined,
givenId: string,
callNumber: number
) {
a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc);
}
function a11yTagInserted(
svgD3Node: D3Element,
title: string | null | undefined,
desc: string | null | undefined,
givenId: string,
callNumber: number,
expectedPrefix: string,
expectedText: string | null | undefined
) {
const fauxInsertedD3 = new MockedD3();
const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3);
// @ts-ignore Required to easily handle the d3 select types
const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3);
const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text');
addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId);
expect(svgInsertSpy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`);
expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText);
}
// ----------------
describe('given an a11y title', () => {
const a11yTitle = 'a11y title';
describe('given an a11y description', () => {
const a11yDesc = 'a11y description';
it('sets aria-labelledby to the title id inserted as a child', () => {
expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
});
it('sets aria-describedby to the description id inserted as a child', () => {
expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
});
it('inserts a title tag as the first child with the text set to the accTitle given', () => {
a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2);
});
it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
});
});
describe(`no a11y description`, () => {
const a11yDesc = undefined;
it('sets aria-labelledby to the title id inserted as a child', () => {
expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
});
it('no aria-describedby is set', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
});
it('inserts a title tag as the first child with the text set to the accTitle given', () => {
a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
});
it('no description tag is inserted', () => {
const fauxTitle = new MockedD3();
const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child');
});
});
});
describe('no a11y title', () => {
const a11yTitle = undefined;
describe('given an a11y description', () => {
const a11yDesc = 'a11y description';
it('no aria-labelledby is set', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
});
it('no title tag inserted', () => {
const fauxTitle = new MockedD3();
const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child');
});
it('sets aria-describedby to the description id inserted as a child', () => {
expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
});
it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
});
});
describe('no a11y description', () => {
const a11yDesc = undefined;
it('no aria-labelledby is set', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
});
it('no aria-describedby is set', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
});
it('no title tag inserted', () => {
const fauxTitle = new MockedD3();
const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child');
});
it('no description tag inserted', () => {
const fauxDesc = new MockedD3();
const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc);
addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child');
});
});
});
});
});
});

55
packages/mermaid/src/accessibility.ts Normal file
View File

@@ -0,0 +1,55 @@
/**
* Accessibility (a11y) functions, types, helpers
*
*/
import { D3Element } from './mermaidAPI';
import isEmpty from 'lodash-es/isEmpty';
/**
* Add aria-roledescription to the svg element to the diagramType
*
* @param svg - d3 object that contains the SVG HTML element
* @param diagramType - diagram name for to the aria-roledescription
*/
export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) {
if (!isEmpty(diagramType)) {
svg.attr('aria-roledescription', diagramType);
}
}
/**
* Add an accessible title and/or description element to a chart.
* The title is usually not displayed and the description is never displayed.
*
* The following charts display their title as a visual and accessibility element: gantt
*
* @param svg - d3 node to insert the a11y title and desc info
* @param a11yTitle - a11y title. null and undefined are meaningful: means to skip it
* @param a11yDesc - a11y description. null and undefined are meaningful: means to skip it
* @param baseId - id used to construct the a11y title and description id
*/
export function addSVGa11yTitleDescription(
svg: D3Element,
a11yTitle: string | null | undefined,
a11yDesc: string | null | undefined,
baseId: string
) {
if (svg.insert === undefined) {
return;
}
if (a11yTitle || a11yDesc) {
if (a11yDesc) {
const descId = 'chart-desc-' + baseId;
svg.attr('aria-describedby', descId);
svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc);
}
if (a11yTitle) {
const titleId = 'chart-title-' + baseId;
svg.attr('aria-labelledby', titleId);
svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle);
}
} else {
return;
}
}

6
packages/mermaid/src/assignWithDepth.js
View File

@@ -32,20 +32,20 @@ const assignWithDepth = function (dst, src, config) {
return dst;
} else if (Array.isArray(src) && Array.isArray(dst)) {
src.forEach((s) => {
if (dst.indexOf(s) === -1) {
if (!dst.includes(s)) {
dst.push(s);
}
});
return dst;
}
if (typeof dst === 'undefined' || depth <= 0) {
if (dst === undefined || depth <= 0) {
if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') {
return Object.assign(dst, src);
} else {
return src;
}
}
if (typeof src !== 'undefined' && typeof dst === 'object' && typeof src === 'object') {
if (src !== undefined && typeof dst === 'object' && typeof src === 'object') {
Object.keys(src).forEach((key) => {
if (
typeof src[key] === 'object' &&

14
packages/mermaid/src/config.ts
View File

@@ -18,8 +18,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[])
// Join directives
let sumOfDirectives: MermaidConfig = {};
for (let i = 0; i < _directives.length; i++) {
const d = _directives[i];
for (const d of _directives) {
sanitize(d);
// Apply the data from the directive where the the overrides the themeVariables
@@ -153,7 +152,7 @@ export const getConfig = (): MermaidConfig => {
export const sanitize = (options: any) => {
// Checking that options are not in the list of excluded options
['secure', ...(siteConfig.secure ?? [])].forEach((key) => {
if (typeof options[key] !== 'undefined') {
if (options[key] !== undefined) {
// DO NOT attempt to print options[key] within `${}` as a malicious script
// can exploit the logger's attempt to stringify the value and execute arbitrary code
log.debug(`Denied attempt to modify a secure key ${key}`, options[key]);
@@ -170,15 +169,14 @@ export const sanitize = (options: any) => {
// Check that there no attempts of xss, there should be no tags at all in the directive
// blocking data urls as base64 urls can contain svg's with inline script tags
Object.keys(options).forEach((key) => {
if (typeof options[key] === 'string') {
if (
options[key].indexOf('<') > -1 ||
options[key].indexOf('>') > -1 ||
options[key].indexOf('url(data:') > -1
typeof options[key] === 'string' &&
(options[key].includes('<') ||
options[key].includes('>') ||
options[key].includes('url(data:'))
) {
delete options[key];
}
}
if (typeof options[key] === 'object') {
sanitize(options[key]);
}

8
packages/mermaid/src/dagre-wrapper/clusters.js
View File

@@ -59,11 +59,9 @@ const rect = (parent, node) => {
// Center the label
label.attr(
'transform',
'translate(' +
(node.x - bbox.width / 2) +
', ' +
(node.y - node.height / 2 + node.padding / 3) +
')'
// This puts the labal on top of the box instead of inside it
// 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
);
const rectBox = rect.node().getBBox();

6
packages/mermaid/src/dagre-wrapper/createLabel.js
View File

@@ -54,7 +54,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
const node = {
isNode,
label: decodeEntities(vertexText).replace(
/fa[lrsb]?:fa-[\w-]+/g,
/fa[blrs]?:fa-[\w-]+/g,
(s) => `<i class='${s.replace(':', ' ')}'></i>`
),
labelStyle: style.replace('fill:', 'color:'),
@@ -74,7 +74,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
rows = [];
}
for (let j = 0; j < rows.length; j++) {
for (const row of rows) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em');
@@ -84,7 +84,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
} else {
tspan.setAttribute('class', 'row');
}
tspan.textContent = rows[j].trim();
tspan.textContent = row.trim();
svgLabel.appendChild(tspan);
}
return svgLabel;

22
packages/mermaid/src/dagre-wrapper/edges.js
View File

@@ -130,9 +130,21 @@ export const positionEdgeLabel = (edge, paths) => {
if (path) {
// // debugger;
const pos = utils.calcLabelPosition(path);
log.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ') abc78');
// x = pos.x;
// y = pos.y;
log.info(
'Moving label ' + edge.label + ' from (',
x,
',',
y,
') to (',
pos.x,
',',
pos.y,
') abc78'
);
if (paths.updatedPath) {
x = pos.x;
y = pos.y;
}
}
el.attr('transform', 'translate(' + x + ', ' + y + ')');
}
@@ -324,7 +336,7 @@ const cutPathAtIntersect = (_points, boundryNode) => {
pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
});
// // if (!pointPresent) {
if (!points.find((e) => e.x === inter.x && e.y === inter.y)) {
if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
points.push(inter);
} else {
log.warn('abc88 no intersect', inter, points);
@@ -463,7 +475,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
.attr('style', edge.style);
// DEBUG code, adds a red circle at each edge coordinate
// edge.points.forEach(point => {
// edge.points.forEach((point) => {
// elem
// .append('circle')
// .style('stroke', 'red')

2
packages/mermaid/src/dagre-wrapper/index.js
View File

@@ -37,7 +37,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
// to the abstract node and is later used by dagre for the layout
graph.nodes().forEach(function (v) {
const node = graph.node(v);
if (typeof parentCluster !== 'undefined') {
if (parentCluster !== undefined) {
const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
// data.clusterPositioning = true;
log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);

83
packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
View File

@@ -4,27 +4,20 @@ import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import * as graphlib from 'dagre-d3-es/src/graphlib';
export let clusterDb = {};
let decendants = {};
let descendants = {};
let parents = {};
export const clear = () => {
decendants = {};
descendants = {};
parents = {};
clusterDb = {};
};
const isDecendant = (id, ancenstorId) => {
const isDescendant = (id, ancenstorId) => {
// if (id === ancenstorId) return true;
log.trace(
'In isDecendant',
ancenstorId,
' ',
id,
' = ',
decendants[ancenstorId].indexOf(id) >= 0
);
if (decendants[ancenstorId].indexOf(id) >= 0) {
log.trace('In isDecendant', ancenstorId, ' ', id, ' = ', descendants[ancenstorId].includes(id));
if (descendants[ancenstorId].includes(id)) {
return true;
}
@@ -32,7 +25,7 @@ const isDecendant = (id, ancenstorId) => {
};
const edgeInCluster = (edge, clusterId) => {
log.info('Decendants of ', clusterId, ' is ', decendants[clusterId]);
log.info('Decendants of ', clusterId, ' is ', descendants[clusterId]);
log.info('Edge is ', edge);
// Edges to/from the cluster is not in the cluster, they are in the parent
if (edge.v === clusterId) {
@@ -42,15 +35,15 @@ const edgeInCluster = (edge, clusterId) => {
return false;
}
if (!decendants[clusterId]) {
if (!descendants[clusterId]) {
log.debug('Tilt, ', clusterId, ',not in decendants');
return false;
}
return (
decendants[clusterId].indexOf(edge.v) >= 0 ||
isDecendant(edge.v, clusterId) ||
isDecendant(edge.w, clusterId) ||
decendants[clusterId].indexOf(edge.w) >= 0
descendants[clusterId].includes(edge.v) ||
isDescendant(edge.v, clusterId) ||
isDescendant(edge.w, clusterId) ||
descendants[clusterId].includes(edge.w)
);
};
@@ -132,14 +125,14 @@ const copy = (clusterId, graph, newGraph, rootId) => {
graph.removeNode(node);
});
};
export const extractDecendants = (id, graph) => {
export const extractDescendants = (id, graph) => {
// log.debug('Extracting ', id);
const children = graph.children(id);
let res = [].concat(children);
let res = [...children];
for (let i = 0; i < children.length; i++) {
parents[children[i]] = id;
res = res.concat(extractDecendants(children[i], graph));
for (const child of children) {
parents[child] = id;
res = [...res, ...extractDescendants(child, graph)];
}
return res;
@@ -154,13 +147,13 @@ export const extractDecendants = (id, graph) => {
export const validate = (graph) => {
const edges = graph.edges();
log.trace('Edges: ', edges);
for (let i = 0; i < edges.length; i++) {
if (graph.children(edges[i].v).length > 0) {
log.trace('The node ', edges[i].v, ' is part of and edge even though it has children');
for (const edge of edges) {
if (graph.children(edge.v).length > 0) {
log.trace('The node ', edge.v, ' is part of and edge even though it has children');
return false;
}
if (graph.children(edges[i].w).length > 0) {
log.trace('The node ', edges[i].w, ' is part of and edge even though it has children');
if (graph.children(edge.w).length > 0) {
log.trace('The node ', edge.w, ' is part of and edge even though it has children');
return false;
}
}
@@ -183,8 +176,8 @@ export const findNonClusterChild = (id, graph) => {
log.trace('This is a valid node', id);
return id;
}
for (let i = 0; i < children.length; i++) {
const _id = findNonClusterChild(children[i], graph);
for (const child of children) {
const _id = findNonClusterChild(child, graph);
if (_id) {
log.trace('Found replacement for', id, ' => ', _id);
return _id;
@@ -226,7 +219,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
' Replacement id in edges: ',
findNonClusterChild(id, graph)
);
decendants[id] = extractDecendants(id, graph);
descendants[id] = extractDescendants(id, graph);
clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
}
});
@@ -236,7 +229,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
const children = graph.children(id);
const edges = graph.edges();
if (children.length > 0) {
log.debug('Cluster identified', id, decendants);
log.debug('Cluster identified', id, descendants);
edges.forEach((edge) => {
// log.debug('Edge, decendants: ', edge, decendants[id]);
@@ -245,19 +238,19 @@ export const adjustClustersAndEdges = (graph, depth) => {
// Any edge where either the one of the nodes is descending to the cluster but not the other
// if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {
const d1 = isDecendant(edge.v, id);
const d2 = isDecendant(edge.w, id);
const d1 = isDescendant(edge.v, id);
const d2 = isDescendant(edge.w, id);
// d1 xor d2 - if either d1 is true and d2 is false or the other way around
if (d1 ^ d2) {
log.warn('Edge: ', edge, ' leaves cluster ', id);
log.warn('Decendants of XXX ', id, ': ', decendants[id]);
log.warn('Decendants of XXX ', id, ': ', descendants[id]);
clusterDb[id].externalConnections = true;
}
}
});
} else {
log.debug('Not a cluster ', id, decendants);
log.debug('Not a cluster ', id, descendants);
}
});
@@ -277,7 +270,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
'ids:',
e.v,
e.w,
'Translateing: ',
'Translating: ',
clusterDb[e.v],
' --- ',
clusterDb[e.w]
@@ -347,8 +340,7 @@ export const extractor = (graph, depth) => {
// for (let i = 0;)
let nodes = graph.nodes();
let hasChildren = false;
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
for (const node of nodes) {
const children = graph.children(node);
hasChildren = hasChildren || children.length > 0;
}
@@ -360,9 +352,7 @@ export const extractor = (graph, depth) => {
// const clusters = Object.keys(clusterDb);
// clusters.forEach(clusterId => {
log.debug('Nodes = ', nodes, depth);
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
for (const node of nodes) {
log.debug(
'Extracting node',
node,
@@ -394,12 +384,10 @@ export const extractor = (graph, depth) => {
const graphSettings = graph.graph();
let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB';
if (clusterDb[node]) {
if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
if (clusterDb[node] && clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
dir = clusterDb[node].clusterData.dir;
log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);
}
}
const clusterGraph = new graphlib.Graph({
multigraph: true,
@@ -446,8 +434,7 @@ export const extractor = (graph, depth) => {
nodes = graph.nodes();
log.warn('New list of nodes', nodes);
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
for (const node of nodes) {
const data = graph.node(node);
log.warn(' Now next level', node, data);
if (data.clusterNode) {
@@ -464,7 +451,7 @@ const sorter = (graph, nodes) => {
nodes.forEach((node) => {
const children = graph.children(node);
const sorted = sorter(graph, children);
result = result.concat(sorted);
result = [...result, ...sorted];
});
return result;

10
packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
View File

@@ -3,7 +3,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib';
import {
validate,
adjustClustersAndEdges,
extractDecendants,
extractDescendants,
sortNodesByHierarchy,
} from './mermaid-graphlib';
import { setLogLevel, log } from '../logger';
@@ -400,7 +400,7 @@ flowchart TB
expect(aGraph.parent('B')).toBe(undefined);
});
});
describe('extractDecendants', function () {
describe('extractDescendants', function () {
let g;
beforeEach(function () {
setLogLevel(1);
@@ -443,9 +443,9 @@ describe('extractDecendants', function () {
g.setEdge('A', 'C', { data: 'link2' }, '2');
// log.info(g.edges())
const d1 = extractDecendants('A', g);
const d2 = extractDecendants('B', g);
const d3 = extractDecendants('C', g);
const d1 = extractDescendants('A', g);
const d2 = extractDescendants('B', g);
const d3 = extractDescendants('C', g);
expect(d1).toEqual(['a']);
expect(d2).toEqual(['b']);

6
packages/mermaid/src/dagre-wrapper/nodes.js
View File

@@ -391,12 +391,10 @@ const labelRect = (parent, node) => {
function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
const strokeDashArray = [];
const addBorder = (length) => {
strokeDashArray.push(length);
strokeDashArray.push(0);
strokeDashArray.push(length, 0);
};
const skipBorder = (length) => {
strokeDashArray.push(0);
strokeDashArray.push(length);
strokeDashArray.push(0, length);
};
if (borders.includes('t')) {
log.debug('add top border');

2
packages/mermaid/src/dagre-wrapper/shapes/util.js
View File

@@ -21,7 +21,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
// Replace labelText with default value if undefined
let labelText;
if (typeof node.labelText === 'undefined') {
if (node.labelText === undefined) {
labelText = '';
} else {
labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];

3
packages/mermaid/src/diagram-api/detectType.ts
View File

@@ -3,8 +3,7 @@ import { log } from '../logger';
import { DetectorRecord, DiagramDetector, DiagramLoader } from './types';
import { frontMatterRegex } from './frontmatter';
const directive =
/[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
const anyComment = /\s*%%.*\n/gm;
const detectors: Record<string, DetectorRecord> = {};

2
packages/mermaid/src/diagram-api/frontmatter.ts
View File

@@ -7,7 +7,7 @@ import * as yaml from 'js-yaml';
// Note that JS doesn't support the "\A" anchor, which means we can't use
// multiline mode.
// Relevant YAML spec: https://yaml.org/spec/1.2.2/#914-explicit-documents
export const frontMatterRegex = /^(?:---\s*[\r\n])(.*?)(?:[\r\n]---\s*[\r\n]+)/s;
export const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
type FrontMatterMetadata = {
title?: string;

2
packages/mermaid/src/diagram-api/types.ts
View File

@@ -15,6 +15,8 @@ export interface InjectUtils {
export interface DiagramDb {
clear?: () => void;
setDiagramTitle?: (title: string) => void;
getAccTitle?: () => string;
getAccDescription?: () => string;
}
export interface DiagramDefinition {

17
packages/mermaid/src/diagrams/c4/c4Renderer.js
View File

@@ -8,7 +8,6 @@ import * as configApi from '../../config';
import assignWithDepth from '../../assignWithDepth';
import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
let globalBoundaryMaxX = 0,
globalBoundaryMaxY = 0;
@@ -48,7 +47,7 @@ class Bounds {
}
updateVal(obj, key, val, fun) {
if (typeof obj[key] === 'undefined') {
if (obj[key] === undefined) {
obj[key] = val;
} else {
obj[key] = fun(val, obj[key]);
@@ -177,12 +176,12 @@ function calcC4ShapeTextWH(textType, c4Shape, c4ShapeTextWrap, textConf, textLim
let lineHeight = 0;
c4Shape[textType].height = 0;
c4Shape[textType].width = 0;
for (let i = 0; i < lines.length; i++) {
for (const line of lines) {
c4Shape[textType].width = Math.max(
calculateTextWidth(lines[i], textConf),
calculateTextWidth(line, textConf),
c4Shape[textType].width
);
lineHeight = calculateTextHeight(lines[i], textConf);
lineHeight = calculateTextHeight(line, textConf);
c4Shape[textType].height = c4Shape[textType].height + lineHeight;
}
// c4Shapes[textType].height = c4Shapes[textType].textLines * textConf.fontSize;
@@ -212,9 +211,9 @@ export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray,
// Upper Y is relative point
let Y = 0;
// Draw the c4ShapeArray
for (let i = 0; i < c4ShapeKeys.length; i++) {
for (const c4ShapeKey of c4ShapeKeys) {
Y = 0;
const c4Shape = c4ShapeArray[c4ShapeKeys[i]];
const c4Shape = c4ShapeArray[c4ShapeKey];
// calc c4 shape type width and height
@@ -461,8 +460,7 @@ function drawInsideBoundary(
// conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2,
// parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundaries.length)
// );
for (let i = 0; i < currentBoundaries.length; i++) {
let currentBoundary = currentBoundaries[i];
for (let [i, currentBoundary] of currentBoundaries.entries()) {
let Y = 0;
currentBoundary.image = { width: 0, height: 0, Y: 0 };
if (currentBoundary.sprite) {
@@ -676,7 +674,6 @@ export const draw = function (_text, id, _version, diagObj) {
(height + extraVertForTitle)
);
addSVGAccessibilityFields(parser.yy, diagram, id);
log.debug(`models:`, box);
};

201
packages/mermaid/src/diagrams/c4/svgDraw.js
View File

@@ -35,184 +35,6 @@ export const drawImage = function (elem, width, height, x, y, link) {
imageElem.attr('xlink:href', sanitizedLink);
};
export const drawEmbeddedImage = function (elem, x, y, link) {
const imageElem = elem.append('use');
imageElem.attr('x', x);
imageElem.attr('y', y);
var sanitizedLink = sanitizeUrl(link);
imageElem.attr('xlink:href', '#' + sanitizedLink);
};
export const drawText = function (elem, textData) {
let prevTextHeight = 0,
textHeight = 0;
const lines = textData.text.split(common.lineBreakRegex);
let textElems = [];
let dy = 0;
let yfunc = () => textData.y;
if (
typeof textData.valign !== 'undefined' &&
typeof textData.textMargin !== 'undefined' &&
textData.textMargin > 0
) {
switch (textData.valign) {
case 'top':
case 'start':
yfunc = () => Math.round(textData.y + textData.textMargin);
break;
case 'middle':
case 'center':
yfunc = () =>
Math.round(textData.y + (prevTextHeight + textHeight + textData.textMargin) / 2);
break;
case 'bottom':
case 'end':
yfunc = () =>
Math.round(
textData.y +
(prevTextHeight + textHeight + 2 * textData.textMargin) -
textData.textMargin
);
break;
}
}
if (
typeof textData.anchor !== 'undefined' &&
typeof textData.textMargin !== 'undefined' &&
typeof textData.width !== 'undefined'
) {
switch (textData.anchor) {
case 'left':
case 'start':
textData.x = Math.round(textData.x + textData.textMargin);
textData.anchor = 'start';
textData.dominantBaseline = 'text-after-edge';
textData.alignmentBaseline = 'middle';
break;
case 'middle':
case 'center':
textData.x = Math.round(textData.x + textData.width / 2);
textData.anchor = 'middle';
textData.dominantBaseline = 'middle';
textData.alignmentBaseline = 'middle';
break;
case 'right':
case 'end':
textData.x = Math.round(textData.x + textData.width - textData.textMargin);
textData.anchor = 'end';
textData.dominantBaseline = 'text-before-edge';
textData.alignmentBaseline = 'middle';
break;
}
}
for (let i = 0; i < lines.length; i++) {
let line = lines[i];
if (
typeof textData.textMargin !== 'undefined' &&
textData.textMargin === 0 &&
typeof textData.fontSize !== 'undefined'
) {
dy = i * textData.fontSize;
}
const textElem = elem.append('text');
textElem.attr('x', textData.x);
textElem.attr('y', yfunc());
if (typeof textData.anchor !== 'undefined') {
textElem
.attr('text-anchor', textData.anchor)
.attr('dominant-baseline', textData.dominantBaseline)
.attr('alignment-baseline', textData.alignmentBaseline);
}
if (typeof textData.fontFamily !== 'undefined') {
textElem.style('font-family', textData.fontFamily);
}
if (typeof textData.fontSize !== 'undefined') {
textElem.style('font-size', textData.fontSize);
}
if (typeof textData.fontWeight !== 'undefined') {
textElem.style('font-weight', textData.fontWeight);
}
if (typeof textData.fill !== 'undefined') {
textElem.attr('fill', textData.fill);
}
if (typeof textData.class !== 'undefined') {
textElem.attr('class', textData.class);
}
if (typeof textData.dy !== 'undefined') {
textElem.attr('dy', textData.dy);
} else if (dy !== 0) {
textElem.attr('dy', dy);
}
if (textData.tspan) {
const span = textElem.append('tspan');
span.attr('x', textData.x);
if (typeof textData.fill !== 'undefined') {
span.attr('fill', textData.fill);
}
span.text(line);
} else {
textElem.text(line);
}
if (
typeof textData.valign !== 'undefined' &&
typeof textData.textMargin !== 'undefined' &&
textData.textMargin > 0
) {
textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
prevTextHeight = textHeight;
}
textElems.push(textElem);
}
return textElems;
};
export const drawLabel = function (elem, txtObject) {
/**
* @param {any} x
* @param {any} y
* @param {any} width
* @param {any} height
* @param {any} cut
* @returns {any}
*/
function genPoints(x, y, width, height, cut) {
return (
x +
',' +
y +
' ' +
(x + width) +
',' +
y +
' ' +
(x + width) +
',' +
(y + height - cut) +
' ' +
(x + width - cut * 1.2) +
',' +
(y + height) +
' ' +
x +
',' +
(y + height)
);
}
const polygon = elem.append('polygon');
polygon.attr('points', genPoints(txtObject.x, txtObject.y, txtObject.width, txtObject.height, 7));
polygon.attr('class', 'labelBox');
txtObject.y = txtObject.y + txtObject.height / 2;
drawText(elem, txtObject);
return polygon;
};
export const drawRels = (elem, rels, conf) => {
const relsElem = elem.append('g');
let i = 0;
@@ -745,23 +567,6 @@ export const insertArrowCrossHead = function (elem) {
// this is actual shape for arrowhead
};
export const getTextObj = function () {
return {
x: 0,
y: 0,
fill: undefined,
anchor: undefined,
style: '#666',
width: undefined,
height: undefined,
textMargin: 0,
rx: 0,
ry: 0,
tspan: true,
valign: undefined,
};
};
export const getNoteRect = function () {
return {
x: 0,
@@ -896,13 +701,10 @@ const _drawTextCandidateFunc = (function () {
export default {
drawRect,
drawText,
drawLabel,
drawBoundary,
drawC4Shape,
drawRels,
drawImage,
drawEmbeddedImage,
insertArrowHead,
insertArrowEnd,
insertArrowFilledHead,
@@ -911,7 +713,6 @@ export default {
insertDatabaseIcon,
insertComputerIcon,
insertClockIcon,
getTextObj,
getNoteRect,
sanitizeUrl,
sanitizeUrl, // TODO why is this exported?
};

18
packages/mermaid/src/diagrams/class/classDb.js
View File

@@ -52,7 +52,7 @@ const splitClassNameAndType = function (id) {
export const addClass = function (id) {
let classId = splitClassNameAndType(id);
// Only add class if not exists
if (typeof classes[classId.className] !== 'undefined') {
if (classes[classId.className] !== undefined) {
return;
}
@@ -77,9 +77,9 @@ export const addClass = function (id) {
*/
export const lookUpDomId = function (id) {
const classKeys = Object.keys(classes);
for (let i = 0; i < classKeys.length; i++) {
if (classes[classKeys[i]].id === id) {
return classes[classKeys[i]].domId;
for (const classKey of classKeys) {
if (classes[classKey].id === id) {
return classes[classKey].domId;
}
}
};
@@ -207,7 +207,7 @@ export const setCssClass = function (ids, className) {
if (_id[0].match(/\d/)) {
id = MERMAID_DOM_ID_PREFIX + id;
}
if (typeof classes[id] !== 'undefined') {
if (classes[id] !== undefined) {
classes[id].cssClasses.push(className);
}
});
@@ -222,7 +222,7 @@ export const setCssClass = function (ids, className) {
const setTooltip = function (ids, tooltip) {
const config = configApi.getConfig();
ids.split(',').forEach(function (id) {
if (typeof tooltip !== 'undefined') {
if (tooltip !== undefined) {
classes[id].tooltip = common.sanitizeText(tooltip, config);
}
});
@@ -244,7 +244,7 @@ export const setLink = function (ids, linkStr, target) {
if (_id[0].match(/\d/)) {
id = MERMAID_DOM_ID_PREFIX + id;
}
if (typeof classes[id] !== 'undefined') {
if (classes[id] !== undefined) {
classes[id].link = utils.formatUrl(linkStr, config);
if (config.securityLevel === 'sandbox') {
classes[id].linkTarget = '_top';
@@ -281,10 +281,10 @@ const setClickFunc = function (domId, functionName, functionArgs) {
if (config.securityLevel !== 'loose') {
return;
}
if (typeof functionName === 'undefined') {
if (functionName === undefined) {
return;
}
if (typeof classes[id] !== 'undefined') {
if (classes[id] !== undefined) {
let argList = [];
if (typeof functionArgs === 'string') {
/* Splits functionArgs by ',', ignoring all ',' in double quoted strings */

24
packages/mermaid/src/diagrams/class/classRenderer-v2.js
View File

@@ -8,9 +8,6 @@ import { curveLinear } from 'd3';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox';
import common from '../common/common';
import addSVGAccessibilityFields from '../../accessibility';
let idCache = {};
const sanitizeText = (txt) => common.sanitizeText(txt, getConfig());
@@ -275,16 +272,16 @@ export const addRelations = function (relations, g) {
let style = '';
let labelStyle = '';
if (typeof edge.style !== 'undefined') {
if (edge.style !== undefined) {
const styles = getStylesFromArray(edge.style);
style = styles.style;
labelStyle = styles.labelStyle;
} else {
style = 'fill:none';
if (typeof defaultStyle !== 'undefined') {
if (defaultStyle !== undefined) {
style = defaultStyle;
}
if (typeof defaultLabelStyle !== 'undefined') {
if (defaultLabelStyle !== undefined) {
labelStyle = defaultLabelStyle;
}
}
@@ -292,17 +289,17 @@ export const addRelations = function (relations, g) {
edgeData.style = style;
edgeData.labelStyle = labelStyle;
if (typeof edge.interpolate !== 'undefined') {
if (edge.interpolate !== undefined) {
edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
} else if (typeof relations.defaultInterpolate !== 'undefined') {
} else if (relations.defaultInterpolate !== undefined) {
edgeData.curve = interpolateToCurve(relations.defaultInterpolate, curveLinear);
} else {
edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
}
edge.text = edge.title;
if (typeof edge.text === 'undefined') {
if (typeof edge.style !== 'undefined') {
if (edge.text === undefined) {
if (edge.style !== undefined) {
edgeData.arrowheadStyle = 'fill: #333';
}
} else {
@@ -316,7 +313,7 @@ export const addRelations = function (relations, g) {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
if (typeof edge.style === 'undefined') {
if (edge.style === undefined) {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
}
@@ -438,9 +435,7 @@ export const draw = function (text, id, _version, diagObj) {
if (!conf.htmlLabels) {
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) {
const label = labels[k];
for (const label of labels) {
// Get dimensions of label
const dim = label.getBBox();
@@ -455,7 +450,6 @@ export const draw = function (text, id, _version, diagObj) {
}
}
addSVGAccessibilityFields(diagObj.db, svg, id);
// If node has a link, wrap it in an anchor SVG object.
// const keys = Object.keys(classes);
// keys.forEach(function(key) {

10
packages/mermaid/src/diagrams/class/classRenderer.js
View File

@@ -5,7 +5,6 @@ import { log } from '../../logger';
import svgDraw from './svgDraw';
import { configureSvgSize } from '../../setupGraphViewbox';
import { getConfig } from '../../config';
import addSVGAccessibilityFields from '../../accessibility';
let idCache = {};
const padding = 20;
@@ -180,8 +179,8 @@ export const draw = function (text, id, _version, diagObj) {
const classes = diagObj.db.getClasses();
const keys = Object.keys(classes);
for (let i = 0; i < keys.length; i++) {
const classDef = classes[keys[i]];
for (const key of keys) {
const classDef = classes[key];
const node = svgDraw.drawClass(diagram, classDef, conf, diagObj);
idCache[node.id] = node;
@@ -240,7 +239,7 @@ export const draw = function (text, id, _version, diagObj) {
dagreLayout(g);
g.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
if (v !== undefined && g.node(v) !== undefined) {
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
root
.select('#' + (diagObj.db.lookUpDomId(v) || v))
@@ -256,7 +255,7 @@ export const draw = function (text, id, _version, diagObj) {
});
g.edges().forEach(function (e) {
if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
if (e !== undefined && g.edge(e) !== undefined) {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf, diagObj);
}
@@ -272,7 +271,6 @@ export const draw = function (text, id, _version, diagObj) {
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
log.debug(`viewBox ${vBox}`);
diagram.attr('viewBox', vBox);
addSVGAccessibilityFields(diagObj.db, diagram, id);
};
export default {

13
packages/mermaid/src/diagrams/class/svgDraw.js
View File

@@ -102,7 +102,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
p2_card_y = cardinality_2_point.y;
}
if (typeof relation.title !== 'undefined') {
if (relation.title !== undefined) {
const g = elem.append('g').attr('class', 'classLabel');
const label = g
.append('text')
@@ -125,7 +125,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
}
log.info('Rendering relation ' + JSON.stringify(relation));
if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') {
if (relation.relationTitle1 !== undefined && relation.relationTitle1 !== 'none') {
const g = elem.append('g').attr('class', 'cardinality');
g.append('text')
.attr('class', 'type1')
@@ -135,7 +135,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
.attr('font-size', '6')
.text(relation.relationTitle1);
}
if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') {
if (relation.relationTitle2 !== undefined && relation.relationTitle2 !== 'none') {
const g = elem.append('g').attr('class', 'cardinality');
g.append('text')
.attr('class', 'type2')
@@ -355,8 +355,8 @@ export const drawNote = function (elem, note, conf, diagObj) {
};
export const parseMember = function (text) {
const fieldRegEx = /^(\+|-|~|#)?(\w+)(~\w+~|\[\])?\s+(\w+) *(\*|\$)?$/;
const methodRegEx = /^([+|\-|~|#])?(\w+) *\( *(.*)\) *(\*|\$)? *(\w*[~|[\]]*\s*\w*~?)$/;
const fieldRegEx = /^([#+~-])?(\w+)(~\w+~|\[])?\s+(\w+) *([$*])?$/;
const methodRegEx = /^([#+|~-])?(\w+) *\( *(.*)\) *([$*])? *(\w*[[\]|~]*\s*\w*~?)$/;
let fieldMatch = text.match(fieldRegEx);
let methodMatch = text.match(methodRegEx);
@@ -420,7 +420,6 @@ const buildLegacyDisplay = function (text) {
// if for some reason we don't have any match, use old format to parse text
let displayText = '';
let cssStyle = '';
let memberText = '';
let returnType = '';
let methodStart = text.indexOf('(');
let methodEnd = text.indexOf(')');
@@ -433,7 +432,7 @@ const buildLegacyDisplay = function (text) {
if (firstChar.match(/\w/)) {
methodName = text.substring(0, methodStart).trim();
} else {
if (firstChar.match(/\+|-|~|#/)) {
if (firstChar.match(/[#+~-]/)) {
visibility = firstChar;
}

2
packages/mermaid/src/diagrams/common/common.ts
View File

@@ -152,7 +152,7 @@ export const evaluate = (val?: string | boolean): boolean =>
export const parseGenericTypes = function (text: string): string {
let cleanedText = text;
if (text.indexOf('~') !== -1) {
if (text.includes('~')) {
cleanedText = cleanedText.replace(/~([^~].*)/, '<$1');
cleanedText = cleanedText.replace(/~([^~]*)$/, '>$1');

2
packages/mermaid/src/diagrams/er/erDb.js
View File

@@ -32,7 +32,7 @@ export const parseDirective = function (statement, context, type) {
};
const addEntity = function (name) {
if (typeof entities[name] === 'undefined') {
if (entities[name] === undefined) {
entities[name] = { attributes: [] };
log.info('Added new entity :', name);
}

19
packages/mermaid/src/diagrams/er/erRenderer.js
View File

@@ -6,12 +6,11 @@ import { log } from '../../logger';
import utils from '../../utils';
import erMarkers from './erMarkers';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
import { parseGenericTypes } from '../common/common';
import { v4 as uuid4 } from 'uuid';
/** Regex used to remove chars from the entity name so the result can be used in an id */
const BAD_ID_CHARS_REGEXP = /[^A-Za-z0-9]([\W])*/g;
const BAD_ID_CHARS_REGEXP = /[^\dA-Za-z](\W)*/g;
// Configuration
let conf = {};
@@ -28,8 +27,8 @@ let entityNameIds = new Map();
*/
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
for (let i = 0; i < keys.length; i++) {
conf[keys[i]] = cnf[keys[i]];
for (const key of keys) {
conf[key] = cnf[key];
}
};
@@ -356,7 +355,7 @@ const drawEntities = function (svgNode, entities, graph) {
const adjustEntities = function (svgNode, graph) {
graph.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
if (v !== undefined && graph.node(v) !== undefined) {
svgNode
.select('#' + v)
.attr(
@@ -387,7 +386,7 @@ const getEdgeName = function (rel) {
* Add each relationship to the graph
*
* @param relationships The relationships to be added
* @param {Graph} g The graph
* @param g The graph
* @returns {Array} The array of relationships
*/
const addRelationships = function (relationships, g) {
@@ -642,8 +641,6 @@ export const draw = function (text, id, _version, diagObj) {
configureSvgSize(svg, height, width, conf.useMaxWidth);
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
addSVGAccessibilityFields(diagObj.db, svg, id);
}; // draw
/**
@@ -652,10 +649,8 @@ export const draw = function (text, id, _version, diagObj) {
* Although the official XML standard for ids says that many more characters are valid in the id,
* this keeps things simple by accepting only A-Za-z0-9.
*
* @param {string} [str?=''] Given string to use as the basis for the id. Default is `''`
* @param {string} [prefix?=''] String to put at the start, followed by '-'. Default is `''`
* @param str
* @param prefix
* @param {string} str Given string to use as the basis for the id. Default is `''`
* @param {string} prefix String to put at the start, followed by '-'. Default is `''`
* @returns {string}
* @see https://www.w3.org/TR/xml/#NT-Name
*/

18
packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
View File

@@ -323,10 +323,11 @@ describe('when parsing ER diagram it...', function () {
expect(Object.keys(erDb.getEntities()).length).toBe(1);
});
it('should allow for a accessibility title and description (accDescr)', function () {
describe('accessible title and description', () => {
const teacherRole = 'is teacher of';
const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
it('should allow for a accessibility title and description (accDescr)', function () {
erDiagram.parser.parse(
`erDiagram
accTitle: graph title
@@ -337,20 +338,19 @@ describe('when parsing ER diagram it...', function () {
expect(erDb.getAccDescription()).toBe('this graph is about stuff');
});
it('should allow for a accessibility title and multi line description (accDescr)', function () {
const teacherRole = 'is teacher of';
const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
it('parses a multi line description (accDescr)', function () {
erDiagram.parser.parse(
`erDiagram
accTitle: graph title
accDescr {
this graph is about stuff
accDescr { this graph is
about
stuff
}\n
${line1}`
);
expect(erDb.getAccTitle()).toBe('graph title');
expect(erDb.getAccDescription()).toBe('this graph is about stuff');
expect(erDb.getAccTitle()).toEqual('graph title');
expect(erDb.getAccDescription()).toEqual('this graph is\nabout\nstuff');
});
});
it('should allow more than one relationship between the same two entities', function () {

72
packages/mermaid/src/diagrams/flowchart/flowDb.js
View File

@@ -46,9 +46,9 @@ export const parseDirective = function (statement, context, type) {
*/
export const lookUpDomId = function (id) {
const veritceKeys = Object.keys(vertices);
for (let i = 0; i < veritceKeys.length; i++) {
if (vertices[veritceKeys[i]].id === id) {
return vertices[veritceKeys[i]].domId;
for (const veritceKey of veritceKeys) {
if (vertices[veritceKey].id === id) {
return vertices[veritceKey].domId;
}
}
return id;
@@ -68,7 +68,7 @@ export const lookUpDomId = function (id) {
export const addVertex = function (_id, text, type, style, classes, dir, props = {}) {
let txt;
let id = _id;
if (typeof id === 'undefined') {
if (id === undefined) {
return;
}
if (id.trim().length === 0) {
@@ -77,7 +77,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
// if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] === 'undefined') {
if (vertices[id] === undefined) {
vertices[id] = {
id: id,
domId: MERMAID_DOM_ID_PREFIX + id + '-' + vertexCounter,
@@ -86,7 +86,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
};
}
vertexCounter++;
if (typeof text !== 'undefined') {
if (text !== undefined) {
config = configApi.getConfig();
txt = sanitizeText(text.trim());
@@ -97,33 +97,29 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
vertices[id].text = txt;
} else {
if (typeof vertices[id].text === 'undefined') {
if (vertices[id].text === undefined) {
vertices[id].text = _id;
}
}
if (typeof type !== 'undefined') {
if (type !== undefined) {
vertices[id].type = type;
}
if (typeof style !== 'undefined') {
if (style !== null) {
if (style !== undefined && style !== null) {
style.forEach(function (s) {
vertices[id].styles.push(s);
});
}
}
if (typeof classes !== 'undefined') {
if (classes !== null) {
if (classes !== undefined && classes !== null) {
classes.forEach(function (s) {
vertices[id].classes.push(s);
});
}
}
if (typeof dir !== 'undefined') {
if (dir !== undefined) {
vertices[id].dir = dir;
}
if (typeof vertices[id].props === 'undefined') {
if (vertices[id].props === undefined) {
vertices[id].props = props;
} else if (typeof props !== 'undefined') {
} else if (props !== undefined) {
Object.assign(vertices[id].props, props);
}
};
@@ -134,9 +130,9 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
* @param _start
* @param _end
* @param type
* @param linktext
* @param linkText
*/
export const addSingleLink = function (_start, _end, type, linktext) {
export const addSingleLink = function (_start, _end, type, linkText) {
let start = _start;
let end = _end;
// if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
@@ -144,18 +140,18 @@ export const addSingleLink = function (_start, _end, type, linktext) {
// log.info('Got edge...', start, end);
const edge = { start: start, end: end, type: undefined, text: '' };
linktext = type.text;
linkText = type.text;
if (typeof linktext !== 'undefined') {
edge.text = sanitizeText(linktext.trim());
if (linkText !== undefined) {
edge.text = sanitizeText(linkText.trim());
// strip quotes if string starts and exnds with a quote
// strip quotes if string starts and ends with a quote
if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
edge.text = edge.text.substring(1, edge.text.length - 1);
}
}
if (typeof type !== 'undefined') {
if (type !== undefined) {
edge.type = type.type;
edge.stroke = type.stroke;
edge.length = type.length;
@@ -207,12 +203,11 @@ export const updateLink = function (positions, style) {
};
export const addClass = function (id, style) {
if (typeof classes[id] === 'undefined') {
if (classes[id] === undefined) {
classes[id] = { id: id, styles: [], textStyles: [] };
}
if (typeof style !== 'undefined') {
if (style !== null) {
if (style !== undefined && style !== null) {
style.forEach(function (s) {
if (s.match('color')) {
const newStyle1 = s.replace('fill', 'bgFill');
@@ -222,7 +217,6 @@ export const addClass = function (id, style) {
classes[id].styles.push(s);
});
}
}
};
/**
@@ -257,11 +251,11 @@ export const setClass = function (ids, className) {
// let id = version === 'gen-2' ? lookUpDomId(_id) : _id;
let id = _id;
// if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] !== 'undefined') {
if (vertices[id] !== undefined) {
vertices[id].classes.push(className);
}
if (typeof subGraphLookup[id] !== 'undefined') {
if (subGraphLookup[id] !== undefined) {
subGraphLookup[id].classes.push(className);
}
});
@@ -269,7 +263,7 @@ export const setClass = function (ids, className) {
const setTooltip = function (ids, tooltip) {
ids.split(',').forEach(function (id) {
if (typeof tooltip !== 'undefined') {
if (tooltip !== undefined) {
tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = sanitizeText(tooltip);
}
});
@@ -281,7 +275,7 @@ const setClickFun = function (id, functionName, functionArgs) {
if (configApi.getConfig().securityLevel !== 'loose') {
return;
}
if (typeof functionName === 'undefined') {
if (functionName === undefined) {
return;
}
let argList = [];
@@ -304,7 +298,7 @@ const setClickFun = function (id, functionName, functionArgs) {
argList.push(id);
}
if (typeof vertices[id] !== 'undefined') {
if (vertices[id] !== undefined) {
vertices[id].haveCallback = true;
funs.push(function () {
const elem = document.querySelector(`[id="${domId}"]`);
@@ -330,7 +324,7 @@ const setClickFun = function (id, functionName, functionArgs) {
*/
export const setLink = function (ids, linkStr, target) {
ids.split(',').forEach(function (id) {
if (typeof vertices[id] !== 'undefined') {
if (vertices[id] !== undefined) {
vertices[id].link = utils.formatUrl(linkStr, config);
vertices[id].linkTarget = target;
}
@@ -484,7 +478,7 @@ export const addSubGraph = function (_id, list, _title) {
if (type in prims) {
return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
} else {
return objs.indexOf(item) >= 0 ? false : objs.push(item);
return objs.includes(item) ? false : objs.push(item);
}
});
return { nodeList, dir };
@@ -530,8 +524,8 @@ export const addSubGraph = function (_id, list, _title) {
};
const getPosForId = function (id) {
for (let i = 0; i < subGraphs.length; i++) {
if (subGraphs[i].id === id) {
for (const [i, subGraph] of subGraphs.entries()) {
if (subGraph.id === id) {
return i;
}
}
@@ -622,11 +616,11 @@ const destructStartLink = (_str) => {
let stroke = 'normal';
if (str.indexOf('=') !== -1) {
if (str.includes('=')) {
stroke = 'thick';
}
if (str.indexOf('.') !== -1) {
if (str.includes('.')) {
stroke = 'dotted';
}

40
packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -11,13 +11,12 @@ import { log } from '../../logger';
import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {};
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
for (let i = 0; i < keys.length; i++) {
conf[keys[i]] = cnf[keys[i]];
for (const key of keys) {
conf[key] = cnf[key];
}
};
@@ -60,7 +59,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
const node = {
label: vertexText.replace(
/fa[lrsb]?:fa-[\w-]+/g,
/fa[blrs]?:fa-[\w-]+/g,
(s) => `<i class='${s.replace(':', ' ')}'></i>`
),
};
@@ -72,12 +71,12 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
const rows = vertexText.split(common.lineBreakRegex);
for (let j = 0; j < rows.length; j++) {
for (const row of rows) {
const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1');
tspan.textContent = rows[j];
tspan.textContent = row;
svgLabel.appendChild(tspan);
}
vertexNode = svgLabel;
@@ -198,7 +197,7 @@ export const addEdges = function (edges, g, diagObj) {
let defaultStyle;
let defaultLabelStyle;
if (typeof edges.defaultStyle !== 'undefined') {
if (edges.defaultStyle !== undefined) {
const defaultStyles = getStylesFromArray(edges.defaultStyle);
defaultStyle = defaultStyles.style;
defaultLabelStyle = defaultStyles.labelStyle;
@@ -210,7 +209,7 @@ export const addEdges = function (edges, g, diagObj) {
// Identify Link
var linkIdBase = 'L-' + edge.start + '-' + edge.end;
// count the links from+to the same node to give unique id
if (typeof linkIdCnt[linkIdBase] === 'undefined') {
if (linkIdCnt[linkIdBase] === undefined) {
linkIdCnt[linkIdBase] = 0;
log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
} else {
@@ -262,10 +261,10 @@ export const addEdges = function (edges, g, diagObj) {
switch (edge.stroke) {
case 'normal':
style = 'fill:none;';
if (typeof defaultStyle !== 'undefined') {
if (defaultStyle !== undefined) {
style = defaultStyle;
}
if (typeof defaultLabelStyle !== 'undefined') {
if (defaultLabelStyle !== undefined) {
labelStyle = defaultLabelStyle;
}
edgeData.thickness = 'normal';
@@ -282,7 +281,7 @@ export const addEdges = function (edges, g, diagObj) {
edgeData.style = 'stroke-width: 3.5px;fill:none;';
break;
}
if (typeof edge.style !== 'undefined') {
if (edge.style !== undefined) {
const styles = getStylesFromArray(edge.style);
style = styles.style;
labelStyle = styles.labelStyle;
@@ -291,16 +290,16 @@ export const addEdges = function (edges, g, diagObj) {
edgeData.style = edgeData.style += style;
edgeData.labelStyle = edgeData.labelStyle += labelStyle;
if (typeof edge.interpolate !== 'undefined') {
if (edge.interpolate !== undefined) {
edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
} else if (typeof edges.defaultInterpolate !== 'undefined') {
} else if (edges.defaultInterpolate !== undefined) {
edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
} else {
edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
}
if (typeof edge.text === 'undefined') {
if (typeof edge.style !== 'undefined') {
if (edge.text === undefined) {
if (edge.style !== undefined) {
edgeData.arrowheadStyle = 'fill: #333';
}
} else {
@@ -311,7 +310,7 @@ export const addEdges = function (edges, g, diagObj) {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
if (typeof edge.style === 'undefined') {
if (edge.style === undefined) {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
}
@@ -360,7 +359,7 @@ export const draw = function (text, id, _version, diagObj) {
// Fetch the default direction, use TD if none was found
let dir = diagObj.db.getDirection();
if (typeof dir === 'undefined') {
if (dir === undefined) {
dir = 'TD';
}
@@ -431,9 +430,6 @@ export const draw = function (text, id, _version, diagObj) {
// Set up an SVG group so that we can translate the final graph.
const svg = root.select(`[id="${id}"]`);
// Adds title and description to the flow chart
addSVGAccessibilityFields(diagObj.db, svg, id);
// Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
@@ -448,9 +444,7 @@ export const draw = function (text, id, _version, diagObj) {
// Add label rects for non html labels
if (!conf.htmlLabels) {
const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) {
const label = labels[k];
for (const label of labels) {
// Get dimensions of label
const dim = label.getBBox();

40
packages/mermaid/src/diagrams/flowchart/flowRenderer.js
View File

@@ -9,13 +9,12 @@ import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox';
import flowChartShapes from './flowChartShapes';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {};
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
for (let i = 0; i < keys.length; i++) {
conf[keys[i]] = cnf[keys[i]];
for (const key of keys) {
conf[key] = cnf[key];
}
};
@@ -59,7 +58,7 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
const node = {
label: vertexText.replace(
/fa[lrsb]?:fa-[\w-]+/g,
/fa[blrs]?:fa-[\w-]+/g,
(s) => `<i class='${s.replace(':', ' ')}'></i>`
),
};
@@ -71,12 +70,12 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
const rows = vertexText.split(common.lineBreakRegex);
for (let j = 0; j < rows.length; j++) {
for (const row of rows) {
const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1');
tspan.textContent = rows[j];
tspan.textContent = row;
svgLabel.appendChild(tspan);
}
vertexNode = svgLabel;
@@ -167,7 +166,7 @@ export const addEdges = function (edges, g, diagObj) {
let defaultStyle;
let defaultLabelStyle;
if (typeof edges.defaultStyle !== 'undefined') {
if (edges.defaultStyle !== undefined) {
const defaultStyles = getStylesFromArray(edges.defaultStyle);
defaultStyle = defaultStyles.style;
defaultLabelStyle = defaultStyles.labelStyle;
@@ -193,7 +192,7 @@ export const addEdges = function (edges, g, diagObj) {
let style = '';
let labelStyle = '';
if (typeof edge.style !== 'undefined') {
if (edge.style !== undefined) {
const styles = getStylesFromArray(edge.style);
style = styles.style;
labelStyle = styles.labelStyle;
@@ -201,10 +200,10 @@ export const addEdges = function (edges, g, diagObj) {
switch (edge.stroke) {
case 'normal':
style = 'fill:none';
if (typeof defaultStyle !== 'undefined') {
if (defaultStyle !== undefined) {
style = defaultStyle;
}
if (typeof defaultLabelStyle !== 'undefined') {
if (defaultLabelStyle !== undefined) {
labelStyle = defaultLabelStyle;
}
break;
@@ -220,16 +219,16 @@ export const addEdges = function (edges, g, diagObj) {
edgeData.style = style;
edgeData.labelStyle = labelStyle;
if (typeof edge.interpolate !== 'undefined') {
if (edge.interpolate !== undefined) {
edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
} else if (typeof edges.defaultInterpolate !== 'undefined') {
} else if (edges.defaultInterpolate !== undefined) {
edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
} else {
edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
}
if (typeof edge.text === 'undefined') {
if (typeof edge.style !== 'undefined') {
if (edge.text === undefined) {
if (edge.style !== undefined) {
edgeData.arrowheadStyle = 'fill: #333';
}
} else {
@@ -241,14 +240,14 @@ export const addEdges = function (edges, g, diagObj) {
edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}" style="${
edgeData.labelStyle
}">${edge.text.replace(
/fa[lrsb]?:fa-[\w-]+/g,
/fa[blrs]?:fa-[\w-]+/g,
(s) => `<i class='${s.replace(':', ' ')}'></i>`
)}</span>`;
} else {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
if (typeof edge.style === 'undefined') {
if (edge.style === undefined) {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
}
@@ -316,7 +315,7 @@ export const draw = function (text, id, _version, diagObj) {
// Fetch the default direction, use TD if none was found
let dir = diagObj.db.getDirection();
if (typeof dir === 'undefined') {
if (dir === undefined) {
dir = 'TD';
}
const nodeSpacing = conf.nodeSpacing || 50;
@@ -417,9 +416,6 @@ export const draw = function (text, id, _version, diagObj) {
// Set up an SVG group so that we can translate the final graph.
const svg = root.select(`[id="${id}"]`);
// Adds title and description to the flow chart
addSVGAccessibilityFields(diagObj.db, svg, id);
// Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g');
render(element, g);
@@ -459,9 +455,7 @@ export const draw = function (text, id, _version, diagObj) {
// Add label rects for non html labels
if (!conf.htmlLabels) {
const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) {
const label = labels[k];
for (const label of labels) {
// Get dimensions of label
const dim = label.getBBox();

4
packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
View File

@@ -79,8 +79,8 @@ describe('when parsing directions', function () {
const subgraphs = flow.parser.yy.getSubGraphs();
expect(subgraphs.length).toBe(2);
const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0];
const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0];
const subgraphA = subgraphs.find((o) => o.id === 'A');
const subgraphB = subgraphs.find((o) => o.id === 'B');
expect(subgraphB.nodes[0]).toBe('c');
expect(subgraphB.dir).toBe('LR');

12
packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
View File

@@ -254,8 +254,8 @@ describe('when parsing subgraphs', function () {
const subgraphs = flow.parser.yy.getSubGraphs();
expect(subgraphs.length).toBe(2);
const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0];
const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0];
const subgraphA = subgraphs.find((o) => o.id === 'A');
const subgraphB = subgraphs.find((o) => o.id === 'B');
expect(subgraphB.nodes[0]).toBe('c');
expect(subgraphA.nodes).toContain('B');
@@ -279,8 +279,8 @@ describe('when parsing subgraphs', function () {
const subgraphs = flow.parser.yy.getSubGraphs();
expect(subgraphs.length).toBe(2);
const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0];
const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0];
const subgraphA = subgraphs.find((o) => o.id === 'A');
const subgraphB = subgraphs.find((o) => o.id === 'B');
expect(subgraphB.nodes[0]).toBe('c');
expect(subgraphA.nodes).toContain('B');
@@ -302,8 +302,8 @@ describe('when parsing subgraphs', function () {
const subgraphs = flow.parser.yy.getSubGraphs();
expect(subgraphs.length).toBe(2);
const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0];
const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0];
const subgraphA = subgraphs.find((o) => o.id === 'A');
const subgraphB = subgraphs.find((o) => o.id === 'B');
expect(subgraphB.nodes[0]).toBe('c');
expect(subgraphA.nodes).toContain('B');
expect(subgraphA.nodes).toContain('b');

41
packages/mermaid/src/diagrams/gantt/ganttDb.js
View File

@@ -150,16 +150,16 @@ export const getTasks = function () {
};
export const isInvalidDate = function (date, dateFormat, excludes, includes) {
if (includes.indexOf(date.format(dateFormat.trim())) >= 0) {
if (includes.includes(date.format(dateFormat.trim()))) {
return false;
}
if (date.isoWeekday() >= 6 && excludes.indexOf('weekends') >= 0) {
if (date.isoWeekday() >= 6 && excludes.includes('weekends')) {
return true;
}
if (excludes.indexOf(date.format('dddd').toLowerCase()) >= 0) {
if (excludes.includes(date.format('dddd').toLowerCase())) {
return true;
}
return excludes.indexOf(date.format(dateFormat.trim())) >= 0;
return excludes.includes(date.format(dateFormat.trim()));
};
const checkTaskDates = function (task, dateFormat, excludes, includes) {
@@ -202,7 +202,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
let latestEndingTask = null;
afterStatement[1].split(' ').forEach(function (id) {
let task = findTaskById(id);
if (typeof task !== 'undefined') {
if (task !== undefined) {
if (!latestEndingTask) {
latestEndingTask = task;
} else {
@@ -230,7 +230,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
log.debug('Invalid date:' + str);
log.debug('With date format:' + dateFormat.trim());
const d = new Date(str);
if (typeof d === 'undefined' || isNaN(d.getTime())) {
if (d === undefined || isNaN(d.getTime())) {
throw new Error('Invalid date:' + str);
}
return d;
@@ -258,15 +258,14 @@ const getStartDate = function (prevTime, dateFormat, str) {
* string.
*/
const parseDuration = function (str) {
const statement = /^(\d+(?:\.\d+)?)([yMwdhms]|ms)$/.exec(str.trim());
const statement = /^(\d+(?:\.\d+)?)([Mdhmswy]|ms)$/.exec(str.trim());
if (statement !== null) {
return moment.duration(Number.parseFloat(statement[1]), statement[2]);
}
return moment.duration.invalid();
};
const getEndDate = function (prevTime, dateFormat, str, inclusive) {
inclusive = inclusive || false;
const getEndDate = function (prevTime, dateFormat, str, inclusive = false) {
str = str.trim();
// Check for actual date
@@ -288,7 +287,7 @@ const getEndDate = function (prevTime, dateFormat, str, inclusive) {
let taskCnt = 0;
const parseId = function (idStr) {
if (typeof idStr === 'undefined') {
if (idStr === undefined) {
taskCnt = taskCnt + 1;
return 'task' + taskCnt;
}
@@ -510,10 +509,10 @@ const compileTasks = function () {
};
let allProcessed = true;
for (let i = 0; i < rawTasks.length; i++) {
for (const [i, rawTask] of rawTasks.entries()) {
compileTask(i);
allProcessed = allProcessed && rawTasks[i].processed;
allProcessed = allProcessed && rawTask.processed;
}
return allProcessed;
};
@@ -531,7 +530,7 @@ export const setLink = function (ids, _linkStr) {
}
ids.split(',').forEach(function (id) {
let rawTask = findTaskById(id);
if (typeof rawTask !== 'undefined') {
if (rawTask !== undefined) {
pushFun(id, () => {
window.open(linkStr, '_self');
});
@@ -550,7 +549,7 @@ export const setLink = function (ids, _linkStr) {
export const setClass = function (ids, className) {
ids.split(',').forEach(function (id) {
let rawTask = findTaskById(id);
if (typeof rawTask !== 'undefined') {
if (rawTask !== undefined) {
rawTask.classes.push(className);
}
});
@@ -560,7 +559,7 @@ const setClickFun = function (id, functionName, functionArgs) {
if (configApi.getConfig().securityLevel !== 'loose') {
return;
}
if (typeof functionName === 'undefined') {
if (functionName === undefined) {
return;
}
@@ -585,7 +584,7 @@ const setClickFun = function (id, functionName, functionArgs) {
}
let rawTask = findTaskById(id);
if (typeof rawTask !== 'undefined') {
if (rawTask !== undefined) {
pushFun(id, () => {
utils.runFunc(functionName, ...argList);
});
@@ -600,7 +599,8 @@ const setClickFun = function (id, functionName, functionArgs) {
* @param callbackFunction A function to be executed when clicked on the task or the task's text
*/
const pushFun = function (id, callbackFunction) {
funs.push(function () {
funs.push(
function () {
// const elem = d3.select(element).select(`[id="${id}"]`)
const elem = document.querySelector(`[id="${id}"]`);
if (elem !== null) {
@@ -608,8 +608,8 @@ const pushFun = function (id, callbackFunction) {
callbackFunction();
});
}
});
funs.push(function () {
},
function () {
// const elem = d3.select(element).select(`[id="${id}-text"]`)
const elem = document.querySelector(`[id="${id}-text"]`);
if (elem !== null) {
@@ -617,7 +617,8 @@ const pushFun = function (id, callbackFunction) {
callbackFunction();
});
}
});
}
);
};
/**

39
packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View File

@@ -19,7 +19,6 @@ import {
import common from '../common/common';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
export const setConf = function () {
log.debug('Something is calling, setConf, remove the call');
@@ -46,11 +45,11 @@ export const draw = function (text, id, version, diagObj) {
const elem = doc.getElementById(id);
w = elem.parentElement.offsetWidth;
if (typeof w === 'undefined') {
if (w === undefined) {
w = 1200;
}
if (typeof conf.useWidth !== 'undefined') {
if (conf.useWidth !== undefined) {
w = conf.useWidth;
}
@@ -77,8 +76,8 @@ export const draw = function (text, id, version, diagObj) {
let categories = [];
for (let i = 0; i < taskArray.length; i++) {
categories.push(taskArray[i].type);
for (const element of taskArray) {
categories.push(element.type);
}
const catsUnfiltered = categories; // for vert labels
@@ -116,8 +115,6 @@ export const draw = function (text, id, version, diagObj) {
.attr('y', conf.titleTopMargin)
.attr('class', 'titleText');
addSVGAccessibilityFields(diagObj.db, svg, id);
/**
* @param tasks
* @param pageWidth
@@ -178,8 +175,8 @@ export const draw = function (text, id, version, diagObj) {
})
.attr('height', theGap)
.attr('class', function (d) {
for (let i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
for (const [i, category] of categories.entries()) {
if (d.type === category) {
return 'section section' + (i % conf.numberSectionStyles);
}
}
@@ -247,8 +244,8 @@ export const draw = function (text, id, version, diagObj) {
}
let secNum = 0;
for (let i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
for (const [i, category] of categories.entries()) {
if (d.type === category) {
secNum = i % conf.numberSectionStyles;
}
}
@@ -339,8 +336,8 @@ export const draw = function (text, id, version, diagObj) {
}
let secNum = 0;
for (let i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
for (const [i, category] of categories.entries()) {
if (d.type === category) {
secNum = i % conf.numberSectionStyles;
}
}
@@ -400,7 +397,7 @@ export const draw = function (text, id, version, diagObj) {
rectangles
.filter(function (d) {
return typeof links[d.id] !== 'undefined';
return links[d.id] !== undefined;
})
.each(function (o) {
var taskRect = doc.querySelector('#' + o.id);
@@ -500,7 +497,7 @@ export const draw = function (text, id, version, diagObj) {
.tickSize(-h + theTopPad + conf.gridLineStartPadding)
.tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
const reTickInterval = /^([1-9][0-9]*)(minute|hour|day|week|month)$/;
const reTickInterval = /^([1-9]\d*)(minute|hour|day|week|month)$/;
const resultTickInterval = reTickInterval.exec(
diagObj.db.getTickInterval() || conf.tickInterval
);
@@ -588,8 +585,8 @@ export const draw = function (text, id, version, diagObj) {
const numOccurances = [];
let prevGap = 0;
for (let i = 0; i < categories.length; i++) {
numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)];
for (const [i, category] of categories.entries()) {
numOccurances[i] = [category, getCount(category, catsUnfiltered)];
}
svg
@@ -604,14 +601,14 @@ export const draw = function (text, id, version, diagObj) {
const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('dy', dy + 'em');
for (let j = 0; j < rows.length; j++) {
for (const [j, row] of rows.entries()) {
const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttribute('alignment-baseline', 'central');
tspan.setAttribute('x', '10');
if (j > 0) {
tspan.setAttribute('dy', '1em');
}
tspan.textContent = rows[j];
tspan.textContent = row;
svgLabel.appendChild(tspan);
}
return svgLabel;
@@ -630,8 +627,8 @@ export const draw = function (text, id, version, diagObj) {
.attr('font-size', conf.sectionFontSize)
.attr('font-size', conf.sectionFontSize)
.attr('class', function (d) {
for (let i = 0; i < categories.length; i++) {
if (d[0] === categories[i]) {
for (const [i, category] of categories.entries()) {
if (d[0] === category) {
return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);
}
}

18
packages/mermaid/src/diagrams/git/gitGraphAst.js
View File

@@ -131,7 +131,7 @@ export const commit = function (msg, id, type, tag) {
export const branch = function (name, order) {
name = common.sanitizeText(name, configApi.getConfig());
if (typeof branches[name] === 'undefined') {
if (branches[name] === undefined) {
branches[name] = head != null ? head.id : null;
branchesConfig[name] = { name, order: order ? parseInt(order, 10) : null };
checkout(name);
@@ -169,7 +169,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
expected: ['branch abc'],
};
throw error;
} else if (typeof currentCommit === 'undefined' || !currentCommit) {
} else if (currentCommit === undefined || !currentCommit) {
let error = new Error(
'Incorrect usage of "merge". Current branch (' + curBranch + ')has no commits'
);
@@ -181,7 +181,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
expected: ['commit'],
};
throw error;
} else if (typeof branches[otherBranch] === 'undefined') {
} else if (branches[otherBranch] === undefined) {
let error = new Error(
'Incorrect usage of "merge". Branch to be merged (' + otherBranch + ') does not exist'
);
@@ -193,7 +193,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
expected: ['branch ' + otherBranch],
};
throw error;
} else if (typeof otherCommit === 'undefined' || !otherCommit) {
} else if (otherCommit === undefined || !otherCommit) {
let error = new Error(
'Incorrect usage of "merge". Branch to be merged (' + otherBranch + ') has no commits'
);
@@ -215,7 +215,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
expected: ['branch abc'],
};
throw error;
} else if (custom_id && typeof commits[custom_id] !== 'undefined') {
} else if (custom_id && commits[custom_id] !== undefined) {
let error = new Error(
'Incorrect usage of "merge". Commit with id:' +
custom_id +
@@ -267,7 +267,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
targetId = common.sanitizeText(targetId, configApi.getConfig());
tag = common.sanitizeText(tag, configApi.getConfig());
if (!sourceId || typeof commits[sourceId] === 'undefined') {
if (!sourceId || commits[sourceId] === undefined) {
let error = new Error(
'Incorrect usage of "cherryPick". Source commit id should exist and provided'
);
@@ -296,7 +296,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
};
throw error;
}
if (!targetId || typeof commits[targetId] === 'undefined') {
if (!targetId || commits[targetId] === undefined) {
// cherry-pick source commit to current branch
if (sourceCommitBranch === curBranch) {
@@ -313,7 +313,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
throw error;
}
const currentCommit = commits[branches[curBranch]];
if (typeof currentCommit === 'undefined' || !currentCommit) {
if (currentCommit === undefined || !currentCommit) {
let error = new Error(
'Incorrect usage of "cherry-pick". Current branch (' + curBranch + ')has no commits'
);
@@ -344,7 +344,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
};
export const checkout = function (branch) {
branch = common.sanitizeText(branch, configApi.getConfig());
if (typeof branches[branch] === 'undefined') {
if (branches[branch] === undefined) {
let error = new Error(
'Trying to checkout branch which is not yet created. (Help try using "branch ' + branch + '")'
);

3
packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
View File

@@ -310,8 +310,7 @@ function renderCommitHistory(svg, commitId, branches, direction) {
* @param direction
* @param branchColor
*/
function renderLines(svg, commit, direction, branchColor) {
branchColor = branchColor || 0;
function renderLines(svg, commit, direction, branchColor = 0) {
while (commit.seq > 0 && !commit.lineDrawn) {
if (typeof commit.parent === 'string') {
svgDrawLineForCommits(svg, commit.id, commit.parent, direction, branchColor);

23
packages/mermaid/src/diagrams/git/gitGraphRenderer.js
View File

@@ -2,7 +2,6 @@ import { select } from 'd3';
import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
import { log } from '../../logger';
import utils from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
let allCommitsDict = {};
@@ -47,13 +46,13 @@ const drawText = (txt) => {
rows = [];
}
for (let j = 0; j < rows.length; j++) {
for (const row of rows) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '0');
tspan.setAttribute('class', 'row');
tspan.textContent = rows[j].trim();
tspan.textContent = row.trim();
svgLabel.appendChild(tspan);
}
/**
@@ -91,7 +90,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
if (modifyGraph) {
let typeClass;
let commitSymbolType =
typeof commit.customType !== 'undefined' && commit.customType !== ''
commit.customType !== undefined && commit.customType !== ''
? commit.customType
: commit.type;
switch (commitSymbolType) {
@@ -319,23 +318,16 @@ const hasOverlappingCommits = (commit1, commit2, allCommits) => {
*
* @param {any} y1
* @param {any} y2
* @param {any} _depth
* @param {any} depth
* @returns {number} Y value between y1 and y2
*/
const findLane = (y1, y2, _depth) => {
const depth = _depth || 0;
const findLane = (y1, y2, depth = 0) => {
const candidate = y1 + Math.abs(y1 - y2) / 2;
if (depth > 5) {
return candidate;
}
let ok = true;
for (let i = 0; i < lanes.length; i++) {
if (Math.abs(lanes[i] - candidate) < 10) {
ok = false;
}
}
let ok = lanes.every((lane) => Math.abs(lane - candidate) >= 10);
if (ok) {
lanes.push(candidate);
return candidate;
@@ -513,9 +505,6 @@ export const draw = function (txt, id, ver, diagObj) {
const diagram = select(`[id="${id}"]`);
// Adds title and description to the flow chart
addSVGAccessibilityFields(diagObj.db, diagram, id);
drawCommits(diagram, allCommitsDict, false);
if (gitGraphConfig.showBranches) {
drawBranches(diagram, branches);

4
packages/mermaid/src/diagrams/git/layout.js
View File

@@ -5,8 +5,8 @@ export default (dir, _branches) => {
const branches = [];
const commits = [];
for (let i = 0; i < _branches.length; i++) {
const branch = Object.assign({}, _branches[i]);
for (const [i, _branch] of _branches.entries()) {
const branch = Object.assign({}, _branch);
if (dir === 'TB' || dir === 'BT') {
branch.x = config.branchOffset * i;
branch.y = -1;

2
packages/mermaid/src/diagrams/pie/pieDb.js
View File

@@ -21,7 +21,7 @@ export const parseDirective = function (statement, context, type) {
const addSection = function (id, value) {
id = common.sanitizeText(id, configApi.getConfig());
if (typeof sections[id] === 'undefined') {
if (sections[id] === undefined) {
sections[id] = value;
log.debug('Added new section :', id);
}

8
packages/mermaid/src/diagrams/pie/pieRenderer.js
View File

@@ -3,7 +3,6 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox';
import * as configApi from '../../config';
import addSVGAccessibilityFields from '../../accessibility';
let conf = configApi.getConfig();
@@ -39,21 +38,20 @@ export const draw = (txt, id, _version, diagObj) => {
const elem = doc.getElementById(id);
width = elem.parentElement.offsetWidth;
if (typeof width === 'undefined') {
if (width === undefined) {
width = 1200;
}
if (typeof conf.useWidth !== 'undefined') {
if (conf.useWidth !== undefined) {
width = conf.useWidth;
}
if (typeof conf.pie.useWidth !== 'undefined') {
if (conf.pie.useWidth !== undefined) {
width = conf.pie.useWidth;
}
const diagram = root.select('#' + id);
configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
addSVGAccessibilityFields(diagObj.db, diagram, id);
// Set viewBox
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);

16
packages/mermaid/src/diagrams/requirement/requirementDb.js
View File

@@ -53,7 +53,7 @@ export const parseDirective = function (statement, context, type) {
};
const addRequirement = (name, type) => {
if (typeof requirements[name] === 'undefined') {
if (requirements[name] === undefined) {
requirements[name] = {
name,
type,
@@ -72,31 +72,31 @@ const addRequirement = (name, type) => {
const getRequirements = () => requirements;
const setNewReqId = (id) => {
if (typeof latestRequirement != 'undefined') {
if (latestRequirement !== undefined) {
latestRequirement.id = id;
}
};
const setNewReqText = (text) => {
if (typeof latestRequirement != 'undefined') {
if (latestRequirement !== undefined) {
latestRequirement.text = text;
}
};
const setNewReqRisk = (risk) => {
if (typeof latestRequirement != 'undefined') {
if (latestRequirement !== undefined) {
latestRequirement.risk = risk;
}
};
const setNewReqVerifyMethod = (verifyMethod) => {
if (typeof latestRequirement != 'undefined') {
if (latestRequirement !== undefined) {
latestRequirement.verifyMethod = verifyMethod;
}
};
const addElement = (name) => {
if (typeof elements[name] === 'undefined') {
if (elements[name] === undefined) {
elements[name] = {
name,
@@ -113,13 +113,13 @@ const addElement = (name) => {
const getElements = () => elements;
const setNewElementType = (type) => {
if (typeof latestElement != 'undefined') {
if (latestElement !== undefined) {
latestElement.type = type;
}
};
const setNewElementDocRef = (docRef) => {
if (typeof latestElement != 'undefined') {
if (latestElement !== undefined) {
latestElement.docRef = docRef;
}
};

5
packages/mermaid/src/diagrams/requirement/requirementRenderer.js
View File

@@ -6,7 +6,6 @@ import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common';
import markers from './requirementMarkers';
import { getConfig } from '../../config';
import addSVGAccessibilityFields from '../../accessibility';
let conf = {};
let relCnt = 0;
@@ -284,7 +283,7 @@ const addRelationships = (relationships, g) => {
const adjustEntities = function (svgNode, graph) {
graph.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
if (v !== undefined && graph.node(v) !== undefined) {
svgNode.select('#' + v);
svgNode
.select('#' + v)
@@ -363,8 +362,6 @@ export const draw = (text, id, _version, diagObj) => {
configureSvgSize(svg, height, width, conf.useMaxWidth);
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
// Adds title and description to the requirements diagram
addSVGAccessibilityFields(diagObj.db, svg, id);
};
export default {

21
packages/mermaid/src/diagrams/sequence/sequenceDb.js
View File

@@ -60,17 +60,13 @@ const activationCount = (part) => {
let i;
let count = 0;
for (i = 0; i < messages.length; i++) {
if (messages[i].type === LINETYPE.ACTIVE_START) {
if (messages[i].from.actor === part) {
if (messages[i].type === LINETYPE.ACTIVE_START && messages[i].from.actor === part) {
count++;
}
}
if (messages[i].type === LINETYPE.ACTIVE_END) {
if (messages[i].from.actor === part) {
if (messages[i].type === LINETYPE.ACTIVE_END && messages[i].from.actor === part) {
count--;
}
}
}
return count;
};
@@ -143,7 +139,7 @@ export const setWrap = function (wrapSetting) {
export const autoWrap = () => {
// if setWrap has been called, use that value, otherwise use the value from the config
// TODO: refactor, always use the config value let setWrap update the config value
if (typeof wrapEnabled !== 'undefined') {
if (wrapEnabled !== undefined) {
return wrapEnabled;
}
return configApi.getConfig().sequence.wrap;
@@ -159,11 +155,11 @@ export const clear = function () {
export const parseMessage = function (str) {
const _str = str.trim();
const message = {
text: _str.replace(/^[:]?(?:no)?wrap:/, '').trim(),
text: _str.replace(/^:?(?:no)?wrap:/, '').trim(),
wrap:
_str.match(/^[:]?wrap:/) !== null
_str.match(/^:?wrap:/) !== null
? true
: _str.match(/^[:]?nowrap:/) !== null
: _str.match(/^:?nowrap:/) !== null
? false
: undefined,
};
@@ -223,6 +219,7 @@ export const addNote = function (actor, placement, message) {
};
// Coerce actor into a [to, from, ...] array
// eslint-disable-next-line unicorn/prefer-spread
const actors = [].concat(actor, actor);
notes.push(note);
@@ -337,7 +334,7 @@ export const addDetails = function (actorId, text) {
};
export const getActorProperty = function (actor, key) {
if (typeof actor !== 'undefined' && typeof actor.properties !== 'undefined') {
if (actor !== undefined && actor.properties !== undefined) {
return actor.properties[key];
}
@@ -345,7 +342,7 @@ export const getActorProperty = function (actor, key) {
};
export const apply = function (param) {
if (param instanceof Array) {
if (Array.isArray(param)) {
param.forEach(function (item) {
apply(item);
});

54
packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
View File

@@ -1,8 +1,62 @@
import { vi } from 'vitest';
import * as configApi from '../../config';
import mermaidAPI from '../../mermaidAPI';
import Diagram from '../../Diagram';
import { addDiagrams } from '../../diagram-api/diagram-orchestration';
/**
* Sequence diagrams require their own very special version of a mocked d3 module
* diagrams/sequence/svgDraw uses statements like this with d3 nodes: (note the [0][0])
*
* // in drawText(...)
* textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
*/
vi.mock('d3', () => {
const NewD3 = function () {
function returnThis() {
return this;
}
return {
append: function () {
return NewD3();
},
lower: returnThis,
attr: returnThis,
style: returnThis,
text: returnThis,
// [0][0] (below) is required by drawText() in packages/mermaid/src/diagrams/sequence/svgDraw.js
0: {
0: {
getBBox: function () {
return {
height: 10,
width: 20,
};
},
},
},
};
};
return {
select: function () {
return new NewD3();
},
selectAll: function () {
return new NewD3();
},
curveBasis: 'basis',
curveLinear: 'linear',
curveCardinal: 'cardinal',
};
});
// -------------------------------
addDiagrams();
/**
* @param conf
* @param key

14
packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
View File

@@ -9,7 +9,6 @@ import * as configApi from '../../config';
import assignWithDepth from '../../assignWithDepth';
import utils from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
import Diagram from '../../Diagram';
let conf = {};
@@ -91,7 +90,7 @@ export const bounds = {
setConf(configApi.getConfig());
},
updateVal: function (obj, key, val, fun) {
if (typeof obj[key] === 'undefined') {
if (obj[key] === undefined) {
obj[key] = val;
} else {
obj[key] = fun(val, obj[key]);
@@ -481,8 +480,8 @@ export const drawActors = function (
let prevWidth = 0;
let prevMargin = 0;
let maxHeight = 0;
for (let i = 0; i < actorKeys.length; i++) {
const actor = actors[actorKeys[i]];
for (const actorKey of actorKeys) {
const actor = actors[actorKey];
// Add some rendering data to the object
actor.width = actor.width || conf.width;
@@ -509,8 +508,8 @@ export const drawActors = function (
export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
let maxHeight = 0;
let maxWidth = 0;
for (let i = 0; i < actorKeys.length; i++) {
const actor = actors[actorKeys[i]];
for (const actorKey of actorKeys) {
const actor = actors[actorKey];
const minMenuWidth = getRequiredPopupWidth(actor);
const menuDimensions = svgDraw.drawPopup(
diagram,
@@ -904,7 +903,6 @@ export const draw = function (_text: string, id: string, _version: string, diagO
(height + extraVertForTitle)
);
addSVGAccessibilityFields(diagObj.db, diagram, id);
log.debug(`models:`, bounds.models);
};
@@ -1180,7 +1178,7 @@ const buildMessageModel = function (msg, actors, diagObj) {
const toBounds = activationBounds(msg.to, actors);
const fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0;
const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
const allBounds = fromBounds.concat(toBounds);
const allBounds = [...fromBounds, ...toBounds];
const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
if (msg.wrap && msg.message) {
msg.message = utils.wrapLabel(

45
packages/mermaid/src/diagrams/sequence/svgDraw.js
View File

@@ -13,7 +13,7 @@ export const drawRect = function (elem, rectData) {
rectElem.attr('rx', rectData.rx);
rectElem.attr('ry', rectData.ry);
if (typeof rectData.class !== 'undefined') {
if (rectData.class !== undefined) {
rectElem.attr('class', rectData.class);
}
@@ -62,7 +62,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
g.attr('display', displayValue);
addPopupInteraction('#actor' + actorCnt + '_popup', actorCnt);
var actorClass = '';
if (typeof rectData.class !== 'undefined') {
if (rectData.class !== undefined) {
actorClass = ' ' + rectData.class;
}
@@ -160,8 +160,8 @@ export const drawText = function (elem, textData) {
let dy = 0;
let yfunc = () => textData.y;
if (
typeof textData.valign !== 'undefined' &&
typeof textData.textMargin !== 'undefined' &&
textData.valign !== undefined &&
textData.textMargin !== undefined &&
textData.textMargin > 0
) {
switch (textData.valign) {
@@ -186,9 +186,9 @@ export const drawText = function (elem, textData) {
}
}
if (
typeof textData.anchor !== 'undefined' &&
typeof textData.textMargin !== 'undefined' &&
typeof textData.width !== 'undefined'
textData.anchor !== undefined &&
textData.textMargin !== undefined &&
textData.width !== undefined
) {
switch (textData.anchor) {
case 'left':
@@ -214,12 +214,11 @@ export const drawText = function (elem, textData) {
break;
}
}
for (let i = 0; i < lines.length; i++) {
let line = lines[i];
for (let [i, line] of lines.entries()) {
if (
typeof textData.textMargin !== 'undefined' &&
textData.textMargin !== undefined &&
textData.textMargin === 0 &&
typeof textData.fontSize !== 'undefined'
textData.fontSize !== undefined
) {
dy = i * textData.fontSize;
}
@@ -227,28 +226,28 @@ export const drawText = function (elem, textData) {
const textElem = elem.append('text');
textElem.attr('x', textData.x);
textElem.attr('y', yfunc());
if (typeof textData.anchor !== 'undefined') {
if (textData.anchor !== undefined) {
textElem
.attr('text-anchor', textData.anchor)
.attr('dominant-baseline', textData.dominantBaseline)
.attr('alignment-baseline', textData.alignmentBaseline);
}
if (typeof textData.fontFamily !== 'undefined') {
if (textData.fontFamily !== undefined) {
textElem.style('font-family', textData.fontFamily);
}
if (typeof textData.fontSize !== 'undefined') {
if (textData.fontSize !== undefined) {
textElem.style('font-size', textData.fontSize);
}
if (typeof textData.fontWeight !== 'undefined') {
if (textData.fontWeight !== undefined) {
textElem.style('font-weight', textData.fontWeight);
}
if (typeof textData.fill !== 'undefined') {
if (textData.fill !== undefined) {
textElem.attr('fill', textData.fill);
}
if (typeof textData.class !== 'undefined') {
if (textData.class !== undefined) {
textElem.attr('class', textData.class);
}
if (typeof textData.dy !== 'undefined') {
if (textData.dy !== undefined) {
textElem.attr('dy', textData.dy);
} else if (dy !== 0) {
textElem.attr('dy', dy);
@@ -257,7 +256,7 @@ export const drawText = function (elem, textData) {
if (textData.tspan) {
const span = textElem.append('tspan');
span.attr('x', textData.x);
if (typeof textData.fill !== 'undefined') {
if (textData.fill !== undefined) {
span.attr('fill', textData.fill);
}
span.text(line);
@@ -265,8 +264,8 @@ export const drawText = function (elem, textData) {
textElem.text(line);
}
if (
typeof textData.valign !== 'undefined' &&
typeof textData.textMargin !== 'undefined' &&
textData.valign !== undefined &&
textData.textMargin !== undefined &&
textData.textMargin > 0
) {
textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
@@ -561,7 +560,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
drawLoopLine(loopModel.stopx, loopModel.starty, loopModel.stopx, loopModel.stopy);
drawLoopLine(loopModel.startx, loopModel.stopy, loopModel.stopx, loopModel.stopy);
drawLoopLine(loopModel.startx, loopModel.starty, loopModel.startx, loopModel.stopy);
if (typeof loopModel.sections !== 'undefined') {
if (loopModel.sections !== undefined) {
loopModel.sections.forEach(function (item) {
drawLoopLine(loopModel.startx, item.y, loopModel.stopx, item.y).style(
'stroke-dasharray',
@@ -601,7 +600,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
let textElem = drawText(g, txt);
if (typeof loopModel.sectionTitles !== 'undefined') {
if (loopModel.sectionTitles !== undefined) {
loopModel.sectionTitles.forEach(function (item, idx) {
if (item.message) {
txt.text = item.message;

28
packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
View File

@@ -1,5 +1,31 @@
import { vi } from 'vitest';
import svgDraw from './svgDraw';
import { MockD3 } from 'd3';
// This is the only place that uses this mock
export const MockD3 = (name, parent) => {
const children = [];
const elem = {
get __children() {
return children;
},
get __name() {
return name;
},
get __parent() {
return parent;
},
};
elem.append = (name) => {
const mockElem = MockD3(name, elem);
children.push(mockElem);
return mockElem;
};
elem.lower = vi.fn(() => elem);
elem.attr = vi.fn(() => elem);
elem.text = vi.fn(() => elem);
elem.style = vi.fn(() => elem);
return elem;
};
describe('svgDraw', function () {
describe('drawRect', function () {

8
packages/mermaid/src/diagrams/state/shapes.js
View File

@@ -197,11 +197,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
if (titleWidth > orgWidth) {
startX = (orgWidth - width) / 2 + pad;
}
if (Math.abs(orgX - graphBox.x) < pad) {
if (titleWidth > orgWidth) {
if (Math.abs(orgX - graphBox.x) < pad && titleWidth > orgWidth) {
startX = orgX - (titleWidth - orgWidth) / 2;
}
}
const lineY = 1 - getConfig().state.textHeight;
// White color
@@ -301,7 +299,7 @@ export const drawText = function (elem, textData) {
textElem.attr('y', textData.y);
textElem.style('text-anchor', textData.anchor);
textElem.attr('fill', textData.fill);
if (typeof textData.class !== 'undefined') {
if (textData.class !== undefined) {
textElem.attr('class', textData.class);
}
@@ -464,7 +462,7 @@ export const drawEdge = function (elem, path, relation) {
'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')'
);
if (typeof relation.title !== 'undefined') {
if (relation.title !== undefined) {
const label = elem.append('g').attr('class', 'stateLabel');
const { x, y } = utils.calcLabelPosition(path.points);

18
packages/mermaid/src/diagrams/state/stateDb.js
View File

@@ -94,12 +94,10 @@ const docTranslator = (parent, node, first) => {
docTranslator(parent, node.state1, true);
docTranslator(parent, node.state2, false);
} else {
if (node.stmt === STMT_STATE) {
if (node.id === '[*]') {
if (node.stmt === STMT_STATE && node.id === '[*]') {
node.id = first ? parent.id + '_start' : parent.id + '_end';
node.start = first;
}
}
if (node.doc) {
const doc = [];
@@ -218,7 +216,7 @@ export const addState = function (
textStyles = null
) {
// add the state if needed
if (typeof currentDocument.states[id] === 'undefined') {
if (currentDocument.states[id] === undefined) {
log.info('Adding state ', id, descr);
currentDocument.states[id] = {
id: id,
@@ -457,12 +455,11 @@ const getDividerId = () => {
*/
export const addStyleClass = function (id, styleAttributes = '') {
// create a new style class object with this id
if (typeof classes[id] === 'undefined') {
if (classes[id] === undefined) {
classes[id] = { id: id, styles: [], textStyles: [] }; // This is a classDef
}
const foundClass = classes[id];
if (typeof styleAttributes !== 'undefined') {
if (styleAttributes !== null) {
if (styleAttributes !== undefined && styleAttributes !== null) {
styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => {
// remove any trailing ;
const fixedAttrib = attrib.replace(/([^;]*);/, '$1').trim();
@@ -476,7 +473,6 @@ export const addStyleClass = function (id, styleAttributes = '') {
foundClass.styles.push(fixedAttrib);
});
}
}
};
/**
@@ -498,7 +494,7 @@ export const getClasses = function () {
export const setCssClass = function (itemIds, cssClassName) {
itemIds.split(',').forEach(function (id) {
let foundState = getState(id);
if (typeof foundState === 'undefined') {
if (foundState === undefined) {
const trimmedId = id.trim();
addState(trimmedId);
foundState = getState(trimmedId);
@@ -519,7 +515,7 @@ export const setCssClass = function (itemIds, cssClassName) {
*/
export const setStyle = function (itemId, styleText) {
const item = getState(itemId);
if (typeof item !== 'undefined') {
if (item !== undefined) {
item.textStyles.push(styleText);
}
};
@@ -532,7 +528,7 @@ export const setStyle = function (itemId, styleText) {
*/
export const setTextStyle = function (itemId, cssClassName) {
const item = getState(itemId);
if (typeof item !== 'undefined') {
if (item !== undefined) {
item.textStyles.push(cssClassName);
}
};

19
packages/mermaid/src/diagrams/state/stateRenderer-v2.js
View File

@@ -6,7 +6,7 @@ import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common';
import utils from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
import {
DEFAULT_DIAGRAM_DIRECTION,
DEFAULT_NESTED_DOC_DIR,
@@ -71,8 +71,8 @@ const conf = {};
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
for (let i = 0; i < keys.length; i++) {
conf[keys[i]] = cnf[keys[i]];
for (const key of keys) {
conf[key] = cnf[key];
}
};
@@ -106,7 +106,7 @@ export const getClasses = function (text, diagramObj) {
* @returns {string}
*/
function getClassesFromDbInfo(dbInfoItem) {
if (typeof dbInfoItem === 'undefined' || dbInfoItem === null) {
if (dbInfoItem === undefined || dbInfoItem === null) {
return '';
} else {
if (dbInfoItem.classes) {
@@ -291,12 +291,10 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
}
}
if (parent) {
if (parent.id !== 'root') {
if (parent && parent.id !== 'root') {
log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id);
g.setParent(itemId, parent.id);
}
}
if (parsedItem.doc) {
log.trace('Adding nodes children ');
setupDoc(g, parsedItem, parsedItem.doc, diagramStates, diagramDb, !altFlag);
@@ -386,7 +384,7 @@ export const draw = function (text, id, _version, diag) {
nodeDb = {};
// Fetch the default direction, use TD if none was found
let dir = diag.db.getDirection();
if (typeof dir === 'undefined') {
if (dir === undefined) {
dir = DEFAULT_DIAGRAM_DIRECTION;
}
@@ -459,9 +457,7 @@ export const draw = function (text, id, _version, diag) {
// Add label rects for non html labels
// if (!evaluate(conf.htmlLabels) || true) {
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) {
const label = labels[k];
for (const label of labels) {
// Get dimensions of label
const dim = label.getBBox();
@@ -474,7 +470,6 @@ export const draw = function (text, id, _version, diag) {
label.insertBefore(rect, label.firstChild);
// }
}
addSVGAccessibilityFields(diag.db, svg, id);
};
export default {

10
packages/mermaid/src/diagrams/state/stateRenderer.js
View File

@@ -6,7 +6,6 @@ import common from '../common/common';
import { drawState, addTitleAndBox, drawEdge } from './shapes';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
// TODO Move conf object to main conf in mermaidAPI
let conf;
@@ -97,7 +96,6 @@ export const draw = function (text, id, _version, diagObj) {
'viewBox',
`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
);
addSVGAccessibilityFields(diagObj.db, diagram, id);
};
const getLabelWidth = (text) => {
return text ? text.length * conf.fontSizeFactor : 1;
@@ -162,8 +160,8 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
let first = true;
for (let i = 0; i < keys.length; i++) {
const stateDef = states[keys[i]];
for (const key of keys) {
const stateDef = states[key];
if (parentId) {
stateDef.parentId = parentId;
@@ -245,7 +243,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
const svgElem = diagram.node();
graph.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
if (v !== undefined && graph.node(v) !== undefined) {
log.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
root
.select('#' + svgElem.id + ' #' + v)
@@ -287,7 +285,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
let stateBox = svgElem.getBBox();
graph.edges().forEach(function (e) {
if (typeof e !== 'undefined' && typeof graph.edge(e) !== 'undefined') {
if (e !== undefined && graph.edge(e) !== undefined) {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
drawEdge(diagram, graph.edge(e), graph.edge(e).relation);
}

4
packages/mermaid/src/diagrams/user-journey/journeyDb.js
View File

@@ -105,10 +105,10 @@ const compileTasks = function () {
};
let allProcessed = true;
for (let i = 0; i < rawTasks.length; i++) {
for (const [i, rawTask] of rawTasks.entries()) {
compileTask(i);
allProcessed = allProcessed && rawTasks[i].processed;
allProcessed = allProcessed && rawTask.processed;
}
return allProcessed;
};

8
packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
View File

@@ -3,7 +3,6 @@ import { select } from 'd3';
import svgDraw from './svgDraw';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
@@ -121,8 +120,6 @@ export const draw = function (text, id, version, diagObj) {
diagram.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);
diagram.attr('preserveAspectRatio', 'xMinYMin meet');
diagram.attr('height', height + extraVertForTitle + 25);
addSVGAccessibilityFields(diagObj.db, diagram, id);
};
export const bounds = {
@@ -146,7 +143,7 @@ export const bounds = {
this.verticalPos = 0;
},
updateVal: function (obj, key, val, fun) {
if (typeof obj[key] === 'undefined') {
if (obj[key] === undefined) {
obj[key] = val;
} else {
obj[key] = fun(val, obj[key]);
@@ -221,8 +218,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
let num = 0;
// Draw the tasks
for (let i = 0; i < tasks.length; i++) {
const task = tasks[i];
for (const [i, task] of tasks.entries()) {
if (lastSection !== task.section) {
fill = fills[sectionNumber % fills.length];
num = sectionNumber % fills.length;

8
packages/mermaid/src/diagrams/user-journey/svgDraw.js
View File

@@ -11,7 +11,7 @@ export const drawRect = function (elem, rectData) {
rectElem.attr('rx', rectData.rx);
rectElem.attr('ry', rectData.ry);
if (typeof rectData.class !== 'undefined') {
if (rectData.class !== undefined) {
rectElem.attr('class', rectData.class);
}
@@ -116,11 +116,11 @@ export const drawCircle = function (element, circleData) {
circleElement.attr('stroke', circleData.stroke);
circleElement.attr('r', circleData.r);
if (typeof circleElement.class !== 'undefined') {
if (circleElement.class !== undefined) {
circleElement.attr('class', circleElement.class);
}
if (typeof circleData.title !== 'undefined') {
if (circleData.title !== undefined) {
circleElement.append('title').text(circleData.title);
}
@@ -138,7 +138,7 @@ export const drawText = function (elem, textData) {
textElem.style('text-anchor', textData.anchor);
if (typeof textData.class !== 'undefined') {
if (textData.class !== undefined) {
textElem.attr('class', textData.class);
}

41
packages/mermaid/src/docs.mts
View File

@@ -35,7 +35,7 @@ import { exec } from 'child_process';
import { globby } from 'globby';
import { JSDOM } from 'jsdom';
import type { Code, Root } from 'mdast';
import { posix, dirname, relative } from 'path';
import { posix, dirname, relative, join } from 'path';
import prettier from 'prettier';
import { remark } from 'remark';
import chokidar from 'chokidar';
@@ -46,7 +46,7 @@ import flatmap from 'unist-util-flatmap';
const MERMAID_MAJOR_VERSION = (
JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
).split('.')[0];
const CDN_URL = 'https://unpkg.com'; // https://cdn.jsdelivr.net/npm
const CDN_URL = 'https://cdn.jsdelivr.net/npm'; // 'https://unpkg.com';
const verifyOnly: boolean = process.argv.includes('--verify');
const git: boolean = process.argv.includes('--git');
@@ -66,8 +66,11 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
const prettierConfig = prettier.resolveConfig.sync('.') ?? {};
// From https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L20-L21
const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g;
const includedFiles: Set<string> = new Set();
let filesWereTransformed = false;
const filesTransformed: Set<string> = new Set();
const generateHeader = (file: string): string => {
// path from file in docs/* to repo root, e.g ../ or ../../ */
@@ -117,10 +120,10 @@ const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => {
* transformed contents to the final documentation directory if the doCopy flag is true. Log
* messages to the console.
*
* @param {string} filename Name of the file that will be verified
* @param {boolean} [doCopy=false] Whether we should copy that transformedContents to the final
* @param filename Name of the file that will be verified
* @param doCopy?=false Whether we should copy that transformedContents to the final
* documentation directory. Default is `false`
* @param {string} [transformedContent] New contents for the file
* @param transformedContent? New contents for the file
*/
const copyTransformedContents = (filename: string, doCopy = false, transformedContent?: string) => {
const fileInFinalDocDir = changeToFinalDocDir(filename);
@@ -132,7 +135,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo
return; // Files are same, skip.
}
filesWereTransformed = true;
filesTransformed.add(fileInFinalDocDir);
if (doCopy) {
writeFileSync(fileInFinalDocDir, newBuffer);
}
@@ -151,6 +154,19 @@ const transformToBlockQuote = (content: string, type: string) => {
const injectPlaceholders = (text: string): string =>
text.replace(/<MERMAID_VERSION>/g, MERMAID_MAJOR_VERSION).replace(/<CDN_URL>/g, CDN_URL);
const transformIncludeStatements = (file: string, text: string): string => {
// resolve includes - src https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L65-L76
return text.replace(includesRE, (m, m1) => {
try {
const includePath = join(dirname(file), m1);
const content = readSyncedUTF8file(includePath);
includedFiles.add(changeToFinalDocDir(includePath));
return content;
} catch (error) {
throw new Error(`Failed to resolve include "${m1}" in "${file}": ${error}`);
}
});
};
/**
* Transform a markdown file and write the transformed file to the directory for published
* documentation
@@ -164,8 +180,7 @@ const injectPlaceholders = (text: string): string =>
* @param file {string} name of the file that will be verified
*/
const transformMarkdown = (file: string) => {
const doc = injectPlaceholders(readSyncedUTF8file(file));
const doc = injectPlaceholders(transformIncludeStatements(file, readSyncedUTF8file(file)));
const ast: Root = remark.parse(doc);
const out = flatmap(ast, (c: Code) => {
if (c.type !== 'code' || !c.lang) {
@@ -270,6 +285,12 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
console.log(`${action} ${mdFiles.length} markdown files...`);
mdFiles.forEach(transformMarkdown);
for (const includedFile of includedFiles) {
rmSync(includedFile, { force: true });
filesTransformed.delete(includedFile);
console.log(`Removed ${includedFile} as it was used inside an @include block.`);
}
const htmlFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.html')]);
const htmlFiles = await getFilesFromGlobs(htmlFileGlobs);
console.log(`${action} ${htmlFiles.length} html files...`);
@@ -282,7 +303,7 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
copyTransformedContents(file, !verifyOnly); // no transformation
});
if (filesWereTransformed) {
if (filesTransformed.size > 0) {
if (verifyOnly) {
console.log(WARN_DOCSDIR_DOESNT_MATCH);
process.exit(1);

3
packages/mermaid/src/docs/.vitepress/config.ts
View File

@@ -1,6 +1,5 @@
import { version } from '../../../package.json';
import MermaidExample from './mermaid-markdown-all';
import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
import { defineConfig, MarkdownOptions } from 'vitepress';
const allMarkdownTransformers: MarkdownOptions = {
@@ -8,7 +7,6 @@ const allMarkdownTransformers: MarkdownOptions = {
theme: 'github-dark',
config: async (md) => {
await MermaidExample(md);
MermaidMarkdown(md);
},
};
@@ -108,6 +106,7 @@ function sidebarSyntax() {
{ text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
{ text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
{ text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
{ text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
{ text: 'Other Examples', link: '/syntax/examples' },
],
},

19
packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
View File

@@ -21,7 +21,8 @@ const MermaidExample = async (md: MarkdownRenderer) => {
// doing ```mermaid-example {line-numbers=5 highlight=14-17} is not supported
const langAttrs = '';
return `<h5>Code:</h5>
return `
<h5>Code:</h5>
<div class="language-mermaid">
<button class="copy"></button>
<span class="lang">mermaid</span>
@@ -30,8 +31,20 @@ const MermaidExample = async (md: MarkdownRenderer) => {
// (it also adds `v-pre` to ignore Vue template syntax)
md.options.highlight(token.content, 'mermaid', langAttrs)
}
</div>
<h5>Diagram:</h5>`;
</div>`;
} else if (token.info.trim() === 'mermaid') {
const key = index;
return `
<Suspense>
<template #default>
<Mermaid id="mermaid-${key}" graph="${encodeURIComponent(token.content)}"></Mermaid>
</template>
<!-- loading state via #fallback slot -->
<template #fallback>
Loading...
</template>
</Suspense>
`;
}
if (token.info.trim() === 'warning') {
return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;

72
packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<div v-html="svg"></div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { render } from './mermaid';
const props = defineProps({
graph: {
type: String,
required: true,
},
id: {
type: String,
required: true,
},
});
const svg = ref(null);
let mut = null;
onMounted(async () => {
mut = new MutationObserver(() => renderChart());
mut.observe(document.documentElement, { attributes: true });
await renderChart();
//refresh images on first render
const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
if (hasImages)
setTimeout(() => {
let imgElements = document.getElementsByTagName('img');
let imgs = Array.from(imgElements);
if (imgs.length) {
Promise.all(
imgs
.filter((img) => !img.complete)
.map(
(img) =>
new Promise((resolve) => {
img.onload = img.onerror = resolve;
})
)
).then(() => {
renderChart();
});
}
}, 100);
});
onUnmounted(() => mut.disconnect());
const renderChart = async () => {
console.log('rendering chart' + props.id + props.graph);
const hasDarkClass = document.documentElement.classList.contains('dark');
const mermaidConfig = {
securityLevel: 'loose',
startOnLoad: false,
theme: hasDarkClass ? 'dark' : 'default',
};
console.log({ mermaidConfig });
let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
// This is a hack to force v-html to re-render, otherwise the diagram disappears
// when **switching themes** or **reloading the page**.
// The cause is that the diagram is deleted during rendering (out of Vue's knowledge).
// Because svgCode does NOT change, v-html does not re-render.
// This is not required for all diagrams, but it is required for c4c, mindmap and zenuml.
const salt = Math.random().toString(36).substring(7);
svg.value = `${svgCode} <span style="display: none">${salt}</span>`;
};
</script>

4
packages/mermaid/src/docs/.vitepress/theme/index.ts
View File

@@ -1,7 +1,7 @@
import DefaultTheme from 'vitepress/theme';
// @ts-ignore
import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
import './custom.css';
// @ts-ignore
import Mermaid from './Mermaid.vue';
import { getRedirect } from './redirect';
export default {

14
packages/mermaid/src/docs/.vitepress/theme/mermaid.ts Normal file
View File

@@ -0,0 +1,14 @@
import mermaid, { type MermaidConfig } from 'mermaid';
import mindmap from '@mermaid-js/mermaid-mindmap';
try {
await mermaid.registerExternalDiagrams([mindmap]);
} catch (e) {
console.error(e);
}
export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
mermaid.initialize(config);
const svg = await mermaid.renderAsync(id, code);
return svg;
};

2
packages/mermaid/src/docs/redirect.spec.ts → packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
View File

@@ -2,7 +2,7 @@
// Update https://github.com/mermaid-js/mermaid/blob/18c27c6f1d0537a738cbd95898df301b83c38ffc/packages/mermaid/src/docs.mts#L246 once fixed
import { expect, test } from 'vitest';
import { getRedirect } from './.vitepress/theme/redirect';
import { getRedirect } from './redirect';
test.each([
['http://localhost:1234/mermaid/#/flowchart.md', 'syntax/flowchart.html'],

46
packages/mermaid/src/docs/community/newDiagram.md
View File

@@ -8,8 +8,8 @@ This would be to define a jison grammar for the new diagram type. That should st
For instance:
- the flowchart starts with the keyword graph.
- the sequence diagram starts with the keyword sequenceDiagram
- the flowchart starts with the keyword _graph_
- the sequence diagram starts with the keyword _sequenceDiagram_
#### Store data found during parsing
@@ -56,6 +56,11 @@ Place the renderer in the diagram folder.
### Step 3: Detection of the new diagram type
The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
### Step 4: The final piece - triggering the rendering
@@ -163,19 +168,23 @@ It is probably a good idea to keep the handling similar to this in your new diag
## Accessibility
The syntax for adding title and description looks like this:
Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
```
accTitle: The title
accDescr: The description
- aria-roledescription
- accessible title
- accessible description
accDescr {
Syntax for a description text
written on multiple lines.
}
```
### aria-roledescription
In a similar way to the directives the jison syntax are quite similar between the diagrams.
The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element.
See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) in [the Accessible Rich Internet Applications W3 standard.](https://www.w3.org/WAI/standards-guidelines/aria/)
### accessible title and description
The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
In a similar way to the directives, the jison syntax are quite similar between the diagrams.
```jison
@@ -213,18 +222,7 @@ import {
} from '../../commonDb';
```
For rendering the accessibility tags you have again an existing function you can use.
**In the renderer:**
```js
import addSVGAccessibilityFields from '../../accessibility';
/* ... */
// Adds title and description to the flow chart
addSVGAccessibilityFields(parser.yy, svg, id);
```
The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
## Theming

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