Skip to content

Commit

Permalink
Merge branch 'develop' into 5237-unified-layout-common-renderer
Browse files Browse the repository at this point in the history
* develop: (50 commits)
  Update pnpm to v9
  chore: Fix link
  Update docs
  fixup, docs: update plugin's name
  Update docs
  Changed Mermaid Chart GPT plugin's name
  Updated Mermaid Chart ChatGPT plugin link
  chore(deps): update all patch dependencies
  run the pnpm --filter mermaid run docs:build command
  Update flowchart.md
  chore: address @Yokozuna59's code reviews
  Lint fix
  Fix for proper handling of block-diagram labels
  Fix for proper handling of block-diagram labels
  docs: Add blog post - Documentation Software (#5519)
  refactor: remove non-null assertion operator
  chore: remove unrefSubSchemas
  chore: Build config types before building types
  chore: Ignore `vite.config.ts.timestamp-`
  chore(deps): update all patch dependencies
  ...
  • Loading branch information
sidharthv96 committed May 21, 2024
2 parents 0d2c7c3 + ec7adb7 commit c10ab23
Show file tree
Hide file tree
Showing 83 changed files with 13,926 additions and 11,513 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ demos/dev/**
!/demos/dev/example.html
!/demos/dev/reload.js
tsx-0/**
vite.config.ts.timestamp-*

# autogenereated by langium-cli
generated/
generated/
5 changes: 5 additions & 0 deletions cypress/integration/other/xss.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,4 +137,9 @@ describe('XSS', () => {
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
it('should sanitize backticks block diagram labels properly', () => {
cy.visit('http://localhost:9000/xss25.html');
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
});
108 changes: 108 additions & 0 deletions cypress/platform/xss25.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
}
.malware {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
}
</style>
<script>
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeeded');
}
</script>
</head>
<body>
<div>Security check</div>
<div class="flex">
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
state: {
defaultRenderer: 'dagre-wrapper',
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: false,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
fontSize: 18,
curve: 'basis',
securityLevel: 'strict',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback() {
alert('It worked');
}

let diagram = 'block-beta\n';
diagram += '`A-- "X<img src=x on';
diagram += 'error=xssAttack()>" -->B';

console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>
Binary file added docs/config/img/mathMLDifferences.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions docs/config/math.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,13 @@ Example with legacy mode enabled (the latest version of KaTeX's stylesheet can b
</body>
</html>
```

## Handling Rendering Differences

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.

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.

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).

![Image showing differences between Browsers](img/mathMLDifferences.png)
32 changes: 16 additions & 16 deletions docs/config/setup/modules/mermaidAPI.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ mermaid.initialize(config);

#### Defined in

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

## Functions

Expand Down Expand Up @@ -129,7 +129,7 @@ Return the last node appended

#### Defined in

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

---

Expand All @@ -155,7 +155,7 @@ the cleaned up svgCode

#### Defined in

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

---

Expand All @@ -167,10 +167,10 @@ Create the user styles

#### Parameters

| Name | Type | Description |
| :---------- | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
| `config` | `MermaidConfig` | configuration that has style and theme settings to use |
| `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(...) |
| Name | Type | Description |
| :---------- | :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
| `config` | `MermaidConfig` | configuration that has style and theme settings to use |
| `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(...) |

#### Returns

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

#### Parameters

| Name | Type |
| :---------- | :-------------------------------------------------------- |
| `config` | `MermaidConfig` |
| `graphType` | `string` |
| `classDefs` | `undefined` \| `Record`<`string`, `DiagramStyleClassDef`> |
| `svgId` | `string` |
| Name | Type |
| :---------- | :----------------------------------------------------- |
| `config` | `MermaidConfig` |
| `graphType` | `string` |
| `classDefs` | `undefined` \| `Map`<`string`, `DiagramStyleClassDef`> |
| `svgId` | `string` |

#### Returns

`string`

#### Defined in

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

---

Expand Down Expand Up @@ -256,7 +256,7 @@ Put the svgCode into an iFrame. Return the iFrame code

#### Defined in

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

---

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

#### Defined in

[mermaidAPI.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L327)
[mermaidAPI.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L326)
3 changes: 3 additions & 0 deletions docs/ecosystem/integrations-community.md
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,8 @@ Communication tools and platforms

### Other

- [Astro](https://astro.build/)
- [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
- [Bisheng](https://www.npmjs.com/package/bisheng)
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
- [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
Expand All @@ -249,6 +251,7 @@ Communication tools and platforms
- [Jekyll](https://jekyllrb.com/)
- [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
- [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
- [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
Expand Down
28 changes: 17 additions & 11 deletions docs/ecosystem/mermaid-chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
# Mermaid Chart

The Future of Diagramming & Visual Collaboration

Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).

<br />

<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>
Expand All @@ -18,22 +22,26 @@

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

- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
- **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.

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

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

Plugins are available for:
Official Mermaid Chart plugins:

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

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

- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).

- **Comments** - Enhance collaboration by adding comments to diagrams.

- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format.

## Plans

Expand All @@ -43,11 +51,9 @@

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

## Access

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

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.
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).

## Mermaid JS contributions

Expand Down
2 changes: 1 addition & 1 deletion docs/intro/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ For a list of Mermaid Plugins and Integrations, visit the [Integrations page](..

Mermaid Chart plugins are available for:

- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
- [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt)
- [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
- [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
- [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)
Expand Down
12 changes: 12 additions & 0 deletions docs/news/blog.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,18 @@
# Blog

## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)

7 May 2024 · 5 mins

How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development.

## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/)

24 April 2024 · 5 mins

Artificial intelligence (AI) tools are changing the way developers work.

## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)

8 April 2024 · 5 mins
Expand Down
6 changes: 3 additions & 3 deletions docs/syntax/flowchart.md
Original file line number Diff line number Diff line change
Expand Up @@ -881,7 +881,7 @@ Examples of tooltip usage below:

```html
<script>
const callback = function () {
window.callback = function () {
alert('A callback was triggered');
};
</script>
Expand Down Expand Up @@ -913,7 +913,7 @@ flowchart LR

> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
?> 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).
?> 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/).

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):

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

<script>
const callback = function () {
window.callback = function () {
alert('A callback was triggered');
};
const config = {
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"version": "10.2.4",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"packageManager": "pnpm@8.15.7",
"packageManager": "pnpm@9.1.2+sha512.127dc83b9ea10c32be65d22a8efb4a65fb952e8fefbdfded39bdc3c97efc32d31b48b00420df2c1187ace28c921c902f0cb5a134a4d032b8b5295cbfa2c681e2",
"keywords": [
"diagram",
"markdown",
Expand Down Expand Up @@ -107,7 +107,7 @@
"jison": "^0.4.18",
"js-yaml": "^4.1.0",
"jsdom": "^24.0.0",
"langium-cli": "3.0.1",
"langium-cli": "3.0.3",
"lint-staged": "^15.2.2",
"markdown-table": "^3.0.3",
"nyc": "^15.1.0",
Expand Down
Loading

0 comments on commit c10ab23

Please sign in to comment.