mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 06:19:24 +02:00
docs: update mindmaps docs and move instructions under configuration and deployment
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
darshanr0107
63
docs/config/tidy-tree.md
Normal file
63
docs/config/tidy-tree.md
Normal file
@@ -0,0 +1,63 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).
|
||||
|
||||
# Tidy-tree Layout Instructions
|
||||
|
||||
Instructions to use the Tidy-tree layout algorithm.
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install non-layered-tidy-tree-layout
|
||||
# or
|
||||
yarn add non-layered-tidy-tree-layout
|
||||
|
||||
```
|
||||
|
||||
There's also a built version: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
|
||||
|
||||
## Tidy tree Layouts
|
||||
|
||||
Mermaid also supports a Tidy Tree layout for mindmaps.
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap is a long thing))
|
||||
A
|
||||
B
|
||||
C
|
||||
D
|
||||
```
|
||||
|
||||
### 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>
|
||||
```
|
||||
@@ -331,3 +331,5 @@ root((mindmap is a long thing))
|
||||
C
|
||||
D
|
||||
```
|
||||
|
||||
Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)
|
||||
|
||||
146
instructions.md
146
instructions.md
@@ -1,145 +1 @@
|
||||
Please help me to implement the tidy-tree algorithm.
|
||||
|
||||
- I have added a placeholder with the correct signature in `packages/mermaid/src/rendering-util/layout-algorithms/tidy-tree/`.
|
||||
|
||||
Replace the cytoscape layout with one using tidy-tree.
|
||||
|
||||
This is the API for tidy-tree:
|
||||
|
||||
```
|
||||
# non-layered-tidy-tree-layout
|
||||
|
||||
Draw non-layered tidy trees in linear time.
|
||||
|
||||
> This a JavaScript port from the project [cwi-swat/non-layered-tidy-trees](https://github.com/cwi-swat/non-layered-tidy-trees), which is written in Java. The algorithm used in that project is from the paper by _A.J. van der Ploeg_, [Drawing Non-layered Tidy Trees in Linear Time](http://oai.cwi.nl/oai/asset/21856/21856B.pdf). There is another JavaScript port from that project [d3-flextree](https://github.com/Klortho/d3-flextree), which depends on _d3-hierarchy_. This project is dependency free.
|
||||
|
||||
## Getting started
|
||||
|
||||
### Installation
|
||||
|
||||
```
|
||||
|
||||
npm install non-layered-tidy-tree-layout
|
||||
|
||||
```
|
||||
|
||||
Or
|
||||
|
||||
```
|
||||
|
||||
yarn add non-layered-tidy-tree-layout
|
||||
|
||||
````
|
||||
|
||||
There's also a built verison: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
|
||||
|
||||
### Usage
|
||||
|
||||
```js
|
||||
import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout'
|
||||
|
||||
// BoundingBox(gap, bottomPadding)
|
||||
const bb = new BoundingBox(10, 20)
|
||||
const layout = new Layout(bb)
|
||||
const treeData = {
|
||||
id: 0,
|
||||
width: 40,
|
||||
height: 40,
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
width: 40,
|
||||
height: 40,
|
||||
children: [{ id: 6, width: 400, height: 40 }]
|
||||
},
|
||||
{ id: 2, width: 40, height: 40 },
|
||||
{ id: 3, width: 40, height: 40 },
|
||||
{ id: 4, width: 40, height: 40 },
|
||||
{ id: 5, width: 40, height: 80 }
|
||||
]
|
||||
}
|
||||
const { result, boundingBox } = layout.layout(treeData)
|
||||
|
||||
// result:
|
||||
// {
|
||||
// id: 0,
|
||||
// x: 300,
|
||||
// y: 0,
|
||||
// width: 40,
|
||||
// height: 40,
|
||||
// children: [
|
||||
// {
|
||||
// id: 1,
|
||||
// x: 185,
|
||||
// y: 60,
|
||||
// width: 40,
|
||||
// height: 40,
|
||||
// children: [
|
||||
// { id: 6, x: 5, y: 120, width: 400, height: 40 }
|
||||
// ]
|
||||
// },
|
||||
// { id: 2, x: 242.5, y: 60, width: 40, height: 40 },
|
||||
// { id: 3, x: 300, y: 60, width: 40, height: 40 },
|
||||
// { id: 4, x: 357.5, y: 60, width: 40, height: 40 },
|
||||
// { id: 5, x: 415, y: 60, width: 40, height: 80 }
|
||||
// ]
|
||||
// }
|
||||
//
|
||||
// boundingBox:
|
||||
// {
|
||||
// left: 5,
|
||||
// right: 455,
|
||||
// top: 0,
|
||||
// bottom: 160
|
||||
// }
|
||||
````
|
||||
|
||||
The method `Layout.layout` modifies `treeData` inplace. It returns an object like `{ result: treeData, boundingBox: {left: num, right: num, top: num, bottom: num} }`. `result` is the same object `treeData` with calculated coordinates, `boundingBox` are the coordinates for the whole tree:
|
||||
|
||||
|
||||
|
||||
The red dashed lines are the bounding boxes for each node. `Layout.layout()` produces coordinates to draw nodes, which are the grey boxes with black border.
|
||||
|
||||
The library also provides a class `Tree` and a method `layout`.
|
||||
|
||||
```js
|
||||
/**
|
||||
* Constructor for Tree.
|
||||
* @param {number} width - width of bounding box
|
||||
* @param {number} height - height of bounding box
|
||||
* @param {number} y - veritcal coordinate of bounding box
|
||||
* @param {array} children - a list of Tree instances
|
||||
*/
|
||||
new Tree(width, height, y, children);
|
||||
|
||||
/**
|
||||
* Calculate x, y coordindates and assign them to tree.
|
||||
* @param {Object} tree - a Tree object
|
||||
*/
|
||||
layout(tree);
|
||||
```
|
||||
|
||||
In case your data structure are not the same as provided by the example above, you can refer to `src/helpers.js` to implement a `Layout` class that converts your data to a `Tree`, then call `layout` to calculate the coordinates for drawing.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE)
|
||||
|
||||
## Changelog
|
||||
|
||||
### [2.0.1]
|
||||
|
||||
- Fixed bounding box calculation in `Layout.getSize` and `Layout.assignLayout` and `Layout.layout`
|
||||
|
||||
### [2.0.0]
|
||||
|
||||
- Added `Layout.layout`
|
||||
- Removed `Layout.layoutTreeData`
|
||||
|
||||
### [1.0.0]
|
||||
|
||||
- Added `Layout`, `BoundingBox`, `layout`, `Tree`
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
The instructions for Tidy-Tree layout can be found in [Tidy Tree Configuration](/config/tidy-tree)
|
||||
|
||||
@@ -203,6 +203,7 @@ function sidebarConfig() {
|
||||
{ text: 'Accessibility', link: '/config/accessibility' },
|
||||
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
|
||||
{ text: 'FAQ', link: '/config/faq' },
|
||||
{ text: 'Tidy tree layout Instructions', link: '/config/tidy-tree' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
57
packages/mermaid/src/docs/config/tidy-tree.md
Normal file
57
packages/mermaid/src/docs/config/tidy-tree.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# Tidy-tree Layout Instructions
|
||||
|
||||
Instructions to use the Tidy-tree layout algorithm.
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install non-layered-tidy-tree-layout
|
||||
# or
|
||||
yarn add non-layered-tidy-tree-layout
|
||||
|
||||
```
|
||||
|
||||
There's also a built version: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
|
||||
|
||||
## Tidy tree Layouts
|
||||
|
||||
Mermaid also supports a Tidy Tree layout for mindmaps.
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap is a long thing))
|
||||
A
|
||||
B
|
||||
C
|
||||
D
|
||||
```
|
||||
|
||||
### 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>
|
||||
```
|
||||
@@ -226,3 +226,5 @@ root((mindmap is a long thing))
|
||||
C
|
||||
D
|
||||
```
|
||||
|
||||
Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)
|
||||
|
||||
Reference in New Issue
Block a user