Skip to content

Commit 0417a8d

Browse files
Ronid1Ronid1
committed
Merge branch 'develop' of https://github.com/mermaid-js/mermaid into feature/4051_sequence_diagram-multi-directional-arrow
2 parents 17fd681 + d6ccd93 commit 0417a8d

File tree

92 files changed

+14181
-10928
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+14181
-10928
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ demos/dev/**
4848
!/demos/dev/example.html
4949
!/demos/dev/reload.js
5050
tsx-0/**
51+
vite.config.ts.timestamp-*
5152

5253
# autogenereated by langium-cli
53-
generated/
54+
generated/

‎FUNDING.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"drips": {
3+
"ethereum": {
4+
"ownedBy": "0x0831DDFe60d009d9448CC976157b539089aB821E"
5+
}
6+
}
7+
}

‎cypress/integration/other/xss.spec.js

+5
Original file line numberDiff line numberDiff line change
@@ -137,4 +137,9 @@ describe('XSS', () => {
137137
cy.wait(1000);
138138
cy.get('#the-malware').should('not.exist');
139139
});
140+
it('should sanitize backticks block diagram labels properly', () => {
141+
cy.visit('http://localhost:9000/xss25.html');
142+
cy.wait(1000);
143+
cy.get('#the-malware').should('not.exist');
144+
});
140145
});

‎cypress/platform/xss25.html

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<html>
2+
<head>
3+
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
4+
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
5+
<link
6+
rel="stylesheet"
7+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
8+
/>
9+
<link
10+
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<style>
14+
body {
15+
/* background: rgb(221, 208, 208); */
16+
/* background:#333; */
17+
font-family: 'Arial';
18+
/* font-size: 18px !important; */
19+
}
20+
h1 {
21+
color: grey;
22+
}
23+
.mermaid2 {
24+
display: none;
25+
}
26+
.mermaid svg {
27+
/* font-size: 18px !important; */
28+
}
29+
.malware {
30+
position: fixed;
31+
bottom: 0;
32+
left: 0;
33+
right: 0;
34+
height: 150px;
35+
background: red;
36+
color: black;
37+
display: flex;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
font-family: monospace;
42+
font-size: 72px;
43+
}
44+
</style>
45+
<script>
46+
function xssAttack() {
47+
const div = document.createElement('div');
48+
div.id = 'the-malware';
49+
div.className = 'malware';
50+
div.innerHTML = 'XSS Succeeded';
51+
document.getElementsByTagName('body')[0].appendChild(div);
52+
throw new Error('XSS Succeeded');
53+
}
54+
</script>
55+
</head>
56+
<body>
57+
<div>Security check</div>
58+
<div class="flex">
59+
<div id="diagram" class="mermaid"></div>
60+
<div id="res" class=""></div>
61+
</div>
62+
<script type="module">
63+
import mermaid from './mermaid.esm.mjs';
64+
mermaid.parseError = function (err, hash) {
65+
// console.error('Mermaid error: ', err);
66+
};
67+
mermaid.initialize({
68+
theme: 'forest',
69+
arrowMarkerAbsolute: true,
70+
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
71+
logLevel: 0,
72+
state: {
73+
defaultRenderer: 'dagre-wrapper',
74+
},
75+
flowchart: {
76+
// defaultRenderer: 'dagre-wrapper',
77+
nodeSpacing: 10,
78+
curve: 'cardinal',
79+
htmlLabels: true,
80+
},
81+
htmlLabels: false,
82+
// gantt: { axisFormat: '%m/%d/%Y' },
83+
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
84+
// sequenceDiagram: { actorMargin: 300 } // deprecated
85+
// fontFamily: '"times", sans-serif',
86+
// fontFamily: 'courier',
87+
fontSize: 18,
88+
curve: 'basis',
89+
securityLevel: 'strict',
90+
startOnLoad: false,
91+
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
92+
// themeVariables: {relationLabelColor: 'red'}
93+
});
94+
function callback() {
95+
alert('It worked');
96+
}
97+
98+
let diagram = 'block-beta\n';
99+
diagram += '`A-- "X<img src=x on';
100+
diagram += 'error=xssAttack()>" -->B';
101+
102+
console.log(diagram);
103+
// document.querySelector('#diagram').innerHTML = diagram;
104+
const { svg } = await mermaid.render('diagram', diagram);
105+
document.querySelector('#res').innerHTML = svg;
106+
</script>
107+
</body>
108+
</html>

‎docs/config/img/mathMLDifferences.png

14.8 KB
Loading

‎docs/config/math.md

+10
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,13 @@ Example with legacy mode enabled (the latest version of KaTeX's stylesheet can b
8484
</body>
8585
</html>
8686
```
87+
88+
## Handling Rendering Differences
89+
90+
Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config.
91+
92+
This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set.
93+
94+
If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).
95+
96+
![Image showing differences between Browsers](img/mathMLDifferences.png)

‎docs/config/setup/modules/mermaidAPI.md

+16-16
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ mermaid.initialize(config);
9898

9999
#### Defined in
100100

101-
[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635)
101+
[mermaidAPI.ts:634](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L634)
102102

103103
## Functions
104104

@@ -129,7 +129,7 @@ Return the last node appended
129129

130130
#### Defined in
131131

132-
[mermaidAPI.ts:277](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L277)
132+
[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
133133

134134
---
135135

@@ -155,7 +155,7 @@ the cleaned up svgCode
155155

156156
#### Defined in
157157

158-
[mermaidAPI.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L223)
158+
[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
159159

160160
---
161161

@@ -167,10 +167,10 @@ Create the user styles
167167

168168
#### Parameters
169169

170-
| Name | Type | Description |
171-
| :---------- | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
172-
| `config` | `MermaidConfig` | configuration that has style and theme settings to use |
173-
| `classDefs` | `undefined` \| `null` \| `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
170+
| Name | Type | Description |
171+
| :---------- | :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
172+
| `config` | `MermaidConfig` | configuration that has style and theme settings to use |
173+
| `classDefs` | `undefined` \| `null` \| `Map`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
174174

175175
#### Returns
176176

@@ -190,20 +190,20 @@ the string with all the user styles
190190

191191
#### Parameters
192192

193-
| Name | Type |
194-
| :---------- | :-------------------------------------------------------- |
195-
| `config` | `MermaidConfig` |
196-
| `graphType` | `string` |
197-
| `classDefs` | `undefined` \| `Record`<`string`, `DiagramStyleClassDef`> |
198-
| `svgId` | `string` |
193+
| Name | Type |
194+
| :---------- | :----------------------------------------------------- |
195+
| `config` | `MermaidConfig` |
196+
| `graphType` | `string` |
197+
| `classDefs` | `undefined` \| `Map`<`string`, `DiagramStyleClassDef`> |
198+
| `svgId` | `string` |
199199

200200
#### Returns
201201

202202
`string`
203203

204204
#### Defined in
205205

206-
[mermaidAPI.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L200)
206+
[mermaidAPI.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L199)
207207

208208
---
209209

@@ -256,7 +256,7 @@ Put the svgCode into an iFrame. Return the iFrame code
256256

257257
#### Defined in
258258

259-
[mermaidAPI.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L254)
259+
[mermaidAPI.ts:253](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L253)
260260

261261
---
262262

@@ -281,4 +281,4 @@ Remove any existing elements from the given document
281281

282282
#### Defined in
283283

284-
[mermaidAPI.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L327)
284+
[mermaidAPI.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L326)

‎docs/ecosystem/integrations-community.md

+3
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,8 @@ Communication tools and platforms
240240

241241
### Other
242242

243+
- [Astro](https://astro.build/)
244+
- [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
243245
- [Bisheng](https://www.npmjs.com/package/bisheng)
244246
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
245247
- [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
@@ -249,6 +251,7 @@ Communication tools and platforms
249251
- [Jekyll](https://jekyllrb.com/)
250252
- [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
251253
- [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
254+
- [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/)
252255
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
253256
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
254257
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅

‎docs/ecosystem/mermaid-chart.md

+17-11
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
77
# Mermaid Chart
88

9+
The Future of Diagramming & Visual Collaboration
10+
11+
Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
12+
913
<br />
1014

1115
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
@@ -18,22 +22,26 @@
1822

1923
- **Editor** - A web based editor for creating and editing Mermaid diagrams.
2024

21-
- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
25+
- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
2226

23-
- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
27+
- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
2428

2529
- **Plugins** - A plugin system for extending the functionality of Mermaid.
2630

27-
Plugins are available for:
31+
Official Mermaid Chart plugins:
2832

29-
- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
33+
- [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
34+
- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
3035
- [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
3136
- [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
32-
- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
3337

34-
- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan).
38+
Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
3539

36-
- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
40+
- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).
41+
42+
- **Comments** - Enhance collaboration by adding comments to diagrams.
43+
44+
- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
3745

3846
## Plans
3947

@@ -43,11 +51,9 @@
4351

4452
- **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
4553

46-
## Access
47-
48-
Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
54+
To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
4955

50-
Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
56+
Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
5157

5258
## Mermaid JS contributions
5359

‎docs/intro/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ For a list of Mermaid Plugins and Integrations, visit the [Integrations page](..
157157

158158
Mermaid Chart plugins are available for:
159159

160-
- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
160+
- [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt)
161161
- [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
162162
- [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
163163
- [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)

‎docs/news/blog.md

+12
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@
66
77
# Blog
88

9+
## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
10+
11+
7 May 2024 · 5 mins
12+
13+
How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development.
14+
15+
## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/)
16+
17+
24 April 2024 · 5 mins
18+
19+
Artificial intelligence (AI) tools are changing the way developers work.
20+
921
## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
1022

1123
8 April 2024 · 5 mins

‎docs/syntax/flowchart.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -881,7 +881,7 @@ Examples of tooltip usage below:
881881

882882
```html
883883
<script>
884-
const callback = function () {
884+
window.callback = function () {
885885
alert('A callback was triggered');
886886
};
887887
</script>
@@ -913,7 +913,7 @@ flowchart LR
913913

914914
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
915915
916-
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/Ogglas/2o73vdez/7).
916+
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/).
917917

918918
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
919919

@@ -957,7 +957,7 @@ Beginner's tip—a full example using interactive links in a html context:
957957
</pre>
958958

959959
<script>
960-
const callback = function () {
960+
window.callback = function () {
961961
alert('A callback was triggered');
962962
};
963963
const config = {

0 commit comments

Comments
 (0)