mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-20 08:46:44 +02:00
docs: update tidy-tree Readme
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
@@ -8,44 +8,42 @@ This package provides a bidirectional tidy tree layout engine for Mermaid based
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
flowchart-tidy-tree TD
|
```
|
||||||
A --> B
|
|
||||||
A --> C
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
config:
|
config:
|
||||||
layout: tidy-tree
|
layout: tidy-tree
|
||||||
|
|
||||||
---
|
---
|
||||||
|
mindmap
|
||||||
flowchart TD
|
root((mindmap))
|
||||||
A --> B
|
A
|
||||||
A --> C
|
B
|
||||||
|
```
|
||||||
|
|
||||||
### With bundlers
|
### With bundlers
|
||||||
|
|
||||||
sh
|
```sh
|
||||||
npm install @mermaid-js/layout-tidy-tree
|
npm install @mermaid-js/layout-tidy-tree
|
||||||
|
```
|
||||||
|
|
||||||
ts
|
```ts
|
||||||
import mermaid from 'mermaid';
|
import mermaid from 'mermaid';
|
||||||
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
|
import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
|
||||||
|
|
||||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||||
|
```
|
||||||
|
|
||||||
### With CDN
|
### With CDN
|
||||||
|
|
||||||
html
|
```html
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
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 tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
|
||||||
|
|
||||||
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
mermaid.registerLayoutLoaders(tidyTreeLayouts);
|
||||||
</script>
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
## Supported layouts
|
## Tidy Tree Layout Overview
|
||||||
|
|
||||||
tidy-tree: The bidirectional tidy tree layout
|
tidy-tree: The bidirectional tidy tree layout
|
||||||
|
|
||||||
|
@@ -65,10 +65,6 @@ export async function createGraphWithElements(
|
|||||||
node.width = boundingBox.width;
|
node.width = boundingBox.width;
|
||||||
node.height = boundingBox.height;
|
node.height = boundingBox.height;
|
||||||
graph.setNode(node.id, { ...node });
|
graph.setNode(node.id, { ...node });
|
||||||
if (node.parentId) {
|
|
||||||
// Optionally store the parent relationship (Graphology doesn't have a native parent-child concept)
|
|
||||||
// e.g., you could update the node attributes or handle it as needed.
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
Reference in New Issue
Block a user