Skip to content
Share
Explore
Helpers: chart settings
Helpers: chart settings
HLP Chart
Display value
Item width
Item height
HSpacer
VSpacer
Canvas padding
Canvas width
Canvas height
Items to render
Composed SVG
Image
1
HLP Chart
140
70
40
20
10
520
540
Root
Child 1
Child 1 of Child 1
Child 2 of Child 1
Child 2
Child 1 of Child 2
Child 2 of Child 2
Child 3 of Child 2
Child 3
%3Csvg%20width="520"%20height="540"%20viewBox="0,%200,%20520,%20540"%20xmlns="http://www.w3.org/2000/svg"%3E%3Cline%20x1="260"%20y1="90"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="45"%20x2="260"%20y2="90"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="135"%20x2="260"%20y2="90"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="260"%20y1="315"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="225"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="315"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="405"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="260"%20y1="495"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E%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%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%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%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%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%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%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%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%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%3C/svg%3E
![](data:image/svg+xml,%3Csvg%20width="520"%20height="540"%20viewBox="0,%200,%20520,%20540"%20xmlns="http://www.w3.org/2000/svg"%3E%3Cline%20x1="260"%20y1="90"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="45"%20x2="260"%20y2="90"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="135"%20x2="260"%20y2="90"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="260"%20y1="315"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="225"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="315"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="440"%20y1="405"%20x2="260"%20y2="315"%20stroke="black"%20stroke-width="2"/%3E%3Cline%20x1="260"%20y1="495"%20x2="80"%20y2="293"%20stroke="black"%20stroke-width="2"/%3E%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%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%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%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%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%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%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%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%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%3C/svg%3E)
There are no rows in this table
HLP Templates
Display value
Raw SVG
URLEncoded
1
SVG root
<svg width="{2}" height="{3}" viewBox="0, 0, {2}, {3}" xmlns="http://www.w3.org/2000/svg">
{1}
</svg>
%3Csvg%20width="{2}"%20height="{3}"%20viewBox="0,%200,%20{2},%20{3}"%20xmlns="http://www.w3.org/2000/svg"%3E{1}%3C/svg%3E
2
Chart item
<g transform="translate({2}, {3})">
<rect width="{4}" height="{5}" rx="8" fill="{8}" stroke="black" stroke-width="2"/>
<text x="{6}" y="{7}" alignment-baseline="middle" text-anchor="middle" style="font-family: system-ui">{1}</text>
</g>
%3Cg%20transform="translate({2},%20{3})"%3E%20%3Crect%20width="{4}"%20height="{5}"%20rx="8"%20fill="{8}"%20stroke="black"%20stroke-width="2"/%3E%20%3Ctext%20x="{6}"%20y="{7}"%20alignment-baseline="middle"%20text-anchor="middle"%20style="font-family:%20system-ui"%3E{1}%3C/text%3E%3C/g%3E
3
Connector line
<line x1="{1}" y1="{2}" x2="{3}" y2="{4}" stroke="black" stroke-width="2"/>
%3Cline%20x1="{1}"%20y1="{2}"%20x2="{3}"%20y2="{4}"%20stroke="black"%20stroke-width="2"/%3E
There are no rows in this table
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.