Skip to content
Gallery
绘制思维导图 Mind map (horizontal)
Mind map (horizontal)
DB Items (and position calculation)
Helpers: chart settings
DB Colors
More
Share
Explore

icon picker
DB Items (and position calculation)

Sorta came up with the fitting algorithm myself. Doesn't pack nodes the closest, but makes sure there is space for every node and sub-tree.
Feel free to ask more in the
Community thread
⁠
.
DB Items
1
Item
Parent item
Color
_Color hex
Show
_Path
_Show tree
_Order in table
_Width
_Max width
_Children (visible)
_Required height
_Max height
_Sibling to the top (visible)
_Offset (top-down, non-centered)
__Offset helper to avoid circular dep
_Occupied position (bottom-up pass, centered)
_X center
_Y center
_X left
_Y top
_Drawn item
_Drawn line to parent
1
Root
​
■ Blue Green Pastel
#9adedb
Root
1
1
3
Child 1
Child 2
Child 3
6
6
​
0
0
2.75
80
293
10
258
%3Cg%20transform="translate(10,%20258)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%239adedb"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3ERoot%3C/text%3E%3C/g%3E
​
2
Child 1
Root
■ Pale Blue
#d6fffe
Root
Child 1
2
2
3
Child 1 of Child 1
Child 2 of Child 1
2
6
​
0
0
0.50
260
90
190
55
%3Cg%20transform="translate(190,%2055)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%23d6fffe"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3EChild%201%3C/text%3E%3C/g%3E
%3Cline%20x1="260"%20y1="90"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E
3
Child 1 of Child 1
Child 1
■ Pastel Parchment
#e5d9d3
Root
Child 1
Child 1 of Child 1
3
3
3
​
1
6
​
0
0
0.00
440
45
370
10
%3Cg%20transform="translate(370,%2010)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%23e5d9d3"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3EChild%201%20of%20Child%201%3C/text%3E%3C/g%3E
%3Cline%20x1="440"%20y1="45"%20x2="260"%20y2="90"%20stroke="black"%20stroke-width="2"/%3E
4
Child 2 of Child 1
Child 1
■ Pastel Grey
#cfcfc4
Root
Child 1
Child 2 of Child 1
4
3
3
​
1
6
Child 1 of Child 1
1
1
1.00
440
135
370
100
%3Cg%20transform="translate(370,%20100)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%23cfcfc4"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3EChild%202%20of%20Child%201%3C/text%3E%3C/g%3E
%3Cline%20x1="440"%20y1="135"%20x2="260"%20y2="90"%20stroke="black"%20stroke-width="2"/%3E
5
Child 2
Root
■ Baby Blue
#89cff0
Root
Child 2
5
2
3
Child 1 of Child 2
Child 2 of Child 2
Child 3 of Child 2
3
6
Child 1
2
2
3.00
260
315
190
280
%3Cg%20transform="translate(190,%20280)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%2389cff0"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3EChild%202%3C/text%3E%3C/g%3E
%3Cline%20x1="260"%20y1="315"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E
6
Child 1 of Child 2
Child 2
■ Pastel Red
#ff6961
Root
Child 2
Child 1 of Child 2
6
3
3
​
1
6
​
2
2
2.00
440
225
370
190
%3Cg%20transform="translate(370,%20190)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%23ff6961"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3EChild%201%20of%20Child%202%3C/text%3E%3C/g%3E
%3Cline%20x1="440"%20y1="225"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E
7
Child 2 of Child 2
Child 2
■ Pastel Orange
#ff964f
Root
Child 2
Child 2 of Child 2
7
3
3
​
1
6
Child 1 of Child 2
3
3
3.00
440
315
370
280
%3Cg%20transform="translate(370,%20280)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%23ff964f"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3EChild%202%20of%20Child%202%3C/text%3E%3C/g%3E
%3Cline%20x1="440"%20y1="315"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E
8
Child 3 of Child 2
Child 2
■ Pastel Yellow
#fdfd96
Root
Child 2
Child 3 of Child 2
8
3
3
​
1
6
Child 2 of Child 2
4
4
4.00
440
405
370
370
%3Cg%20transform="translate(370,%20370)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%23fdfd96"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3EChild%203%20of%20Child%202%3C/text%3E%3C/g%3E
%3Cline%20x1="440"%20y1="405"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E
9
Child 3
Root
■ Magic Mint
#aaf0d1
Root
Child 3
9
2
3
​
1
6
Child 2
5
5
5.00
260
495
190
460
%3Cg%20transform="translate(190,%20460)"%3E%20%3Crect%20width="140"%20height="70"%20rx="8"%20fill="%23aaf0d1"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="70"%20y="35"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3EChild%203%3C/text%3E%3C/g%3E
%3Cline%20x1="260"%20y1="495"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E
There are no rows in this table
⁠
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.