mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-18 10:17:27 +01:00
Compare commits
2 Commits
docs/updat
...
fix/latex-
| Author | SHA1 | Date | |
|---|---|---|---|
|
1bbc189b69 | ||
|
|
db09de982b |
5
.changeset/fruity-towns-jog.md
Normal file
5
.changeset/fruity-towns-jog.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: Support consecutive LaTeX in node text
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
chore: Add installation and registration instructions for tidy-tree layout to mindmap documentation
|
||||
@@ -33,4 +33,12 @@ describe('Katex', () => {
|
||||
// { fontFamily: 'courier' }
|
||||
// );
|
||||
// });
|
||||
it('4: should render consecutive LaTeX equations separated by text', () => {
|
||||
imgSnapshotTest(
|
||||
`graph TD
|
||||
A["From $$x(t)$$"] --> B{"$$\\tilde{x}(t)$$"};
|
||||
C["From $$x(t)$$ to $$y(t)$$"] --> D{"$$\\tilde{x}(t)$$"};`,
|
||||
{ fontFamily: 'courier' }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -6,78 +6,13 @@
|
||||
|
||||
# Tidy-tree Layout
|
||||
|
||||
The **tidy-tree** layout provides a bidirectional tidy tree layout engine for Mermaid based on the non-layered-tidy-tree-layout algorithm.
|
||||
The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
|
||||
|
||||
> **Note:** The Tidy Tree Layout engine will not be available in all providers that support mermaid by default. Websites will need to install the `@mermaid-js/layout-tidy-tree` package to use the Tidy Tree layout engine.
|
||||
## Features
|
||||
|
||||
## Installation and Setup
|
||||
|
||||
The tidy-tree layout must be installed and registered before use.
|
||||
|
||||
### With bundlers
|
||||
|
||||
```sh
|
||||
npm install @mermaid-js/layout-tidy-tree
|
||||
```
|
||||
|
||||
```ts
|
||||
import mermaid from 'mermaid';
|
||||
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
|
||||
|
||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||
```
|
||||
|
||||
### With CDN
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
|
||||
|
||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||
</script>
|
||||
```
|
||||
|
||||
### Registering Multiple Layouts
|
||||
|
||||
You can register multiple layout engines by calling `registerLayoutLoaders` multiple times:
|
||||
|
||||
```ts
|
||||
import mermaid from 'mermaid';
|
||||
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
|
||||
import elkLayouts from '@mermaid-js/layout-elk';
|
||||
|
||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||
mermaid.registerLayoutLoaders(elkLayouts);
|
||||
```
|
||||
|
||||
Or with CDN:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
|
||||
import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0/dist/mermaid-layout-elk.esm.min.mjs';
|
||||
|
||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||
mermaid.registerLayoutLoaders(elkLayouts);
|
||||
</script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
After registering the layout, add a configuration block at the top of your diagram:
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap))
|
||||
A
|
||||
B
|
||||
```
|
||||
- Organizes nodes in a tidy, non-overlapping tree
|
||||
- Ideal for mindmaps and hierarchical data
|
||||
- Automatically adjusts spacing for readability
|
||||
|
||||
## Example Usage
|
||||
|
||||
|
||||
@@ -293,7 +293,7 @@ const processSet = (input: string): string => {
|
||||
// Firefox versions between [4,71] (0.47%) and Safari versions between [5,13.4] (0.17%) don't have this interface implemented but MathML is supported
|
||||
export const isMathMLSupported = () => window.MathMLElement !== undefined;
|
||||
|
||||
export const katexRegex = /\$\$(.*)\$\$/g;
|
||||
export const katexRegex = /\$\$(.*?)\$\$/g;
|
||||
|
||||
/**
|
||||
* Whether or not a text has KaTeX delimiters
|
||||
|
||||
@@ -1,77 +1,12 @@
|
||||
# Tidy-tree Layout
|
||||
|
||||
The **tidy-tree** layout provides a bidirectional tidy tree layout engine for Mermaid based on the non-layered-tidy-tree-layout algorithm.
|
||||
The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
|
||||
|
||||
> **Note:** The Tidy Tree Layout engine will not be available in all providers that support mermaid by default. Websites will need to install the `@mermaid-js/layout-tidy-tree` package to use the Tidy Tree layout engine.
|
||||
## Features
|
||||
|
||||
## Installation and Setup
|
||||
|
||||
The tidy-tree layout must be installed and registered before use.
|
||||
|
||||
### With bundlers
|
||||
|
||||
```sh
|
||||
npm install @mermaid-js/layout-tidy-tree
|
||||
```
|
||||
|
||||
```ts
|
||||
import mermaid from 'mermaid';
|
||||
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
|
||||
|
||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||
```
|
||||
|
||||
### With CDN
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
|
||||
|
||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||
</script>
|
||||
```
|
||||
|
||||
### Registering Multiple Layouts
|
||||
|
||||
You can register multiple layout engines by calling `registerLayoutLoaders` multiple times:
|
||||
|
||||
```ts
|
||||
import mermaid from 'mermaid';
|
||||
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
|
||||
import elkLayouts from '@mermaid-js/layout-elk';
|
||||
|
||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||
mermaid.registerLayoutLoaders(elkLayouts);
|
||||
```
|
||||
|
||||
Or with CDN:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
|
||||
import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0/dist/mermaid-layout-elk.esm.min.mjs';
|
||||
|
||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||
mermaid.registerLayoutLoaders(elkLayouts);
|
||||
</script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
After registering the layout, add a configuration block at the top of your diagram:
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap))
|
||||
A
|
||||
B
|
||||
```
|
||||
- Organizes nodes in a tidy, non-overlapping tree
|
||||
- Ideal for mindmaps and hierarchical data
|
||||
- Automatically adjusts spacing for readability
|
||||
|
||||
## Example Usage
|
||||
|
||||
|
||||
Reference in New Issue
Block a user