Show / Hide Table of Contents

Predefined Templates

Modes

Org Chart JS can be displayed in "dark" or "light" modes by settong the mode option:

light mode
dark mode

Templates

Org Chart JS arrives with a number of predefined templates. You can change the template by setting the template option:

 
    
    template: "olivia",

You can get the source code of any of the templates and change it. For example to change the size of the node shape, you need to change the size definition of the template.

The default template is ana. All the predefined templates inherits ana. If you don't have a predefined property for your template, you need to get it from the ana template.

olivia

 
    
OrgChart.templates.olivia = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.olivia.defs = 
    `<style>
        #olivia_gradient {
            --color-stop-1: #ffffff;
            --color-stop-2: #eeeeee;
            --opacity-stop: 1;
        }
        .olivia-f0 {
            font-size: 18px;
            fill: #757575;
        }
        .olivia-f1 {
            font-size: 14px;
            fill: #757575;
        }
        .boc-dark .olivia-f0, .boc-dark .olivia-f1 {
            fill: #aeaeae;
        }
        .boc-dark #olivia_gradient {
            --color-stop-1: #646464;
            --color-stop-2: #363636;
            --opacity-stop: 1;
        }
    </style>
    <linearGradient id="olivia_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="var(--color-stop-1)" stop-opacity="var(--opacity-stop)" />
        <stop offset="100%" stop-color="var(--color-stop-2)" stop-opacity="var(--opacity-stop)" />
    </linearGradient>`;

OrgChart.templates.olivia.field_0 = 
    `<text ${OrgChart.attr.width}="135" class="olivia-f0" x="100" y="55">{val}</text>`;
OrgChart.templates.olivia.field_1 = 
    `<text ${OrgChart.attr.width}="135" class="olivia-f1" x="100" y="76">{val}</text>`;

OrgChart.templates.olivia.node = 
    `<rect fill="url(#olivia_gradient)" x="0" y="0" height="{h}" width="{w}" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>`;

OrgChart.templates.olivia.img_0 = 
    `<clipPath id="{randId}"><circle cx="50" cy="60" r="40"></circle></clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80"></image>`;

OrgChart.templates.olivia.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" data-ctrl-n-menu-id="{id}">
        <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22">
        </rect><circle cx="0" cy="0" r="2" fill="#AEAEAE"></circle><circle cx="7" cy="0" r="2" fill="#AEAEAE">
        </circle><circle cx="14" cy="0" r="2" fill="#AEAEAE"></circle>
    </g>`;


diva

 
        
OrgChart.templates.diva = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.diva.size = [200, 170];
OrgChart.templates.diva.node = 
    `<rect x="0" y="80" height="90" width="200" fill="#039BE5"></rect>
    <circle cx="100" cy="50" fill="#ffffff" r="50" stroke="#039BE5" stroke-width="2"></circle>`;

OrgChart.templates.diva.img_0 = 
    `<clipPath id="{randId}"><circle cx="100" cy="50" r="45"></circle></clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="50" y="0" width="100" height="100"></image>`;

OrgChart.templates.diva.field_0 = 
    `<text data-width="185" style="font-size: 18px;" fill="#ffffff" x="100" y="125" text-anchor="middle">{val}</text>`;
OrgChart.templates.diva.field_1 = 
    `<text data-width="185" style="font-size: 14px;" fill="#ffffff" x="100" y="145" text-anchor="middle">{val}</text>`;

OrgChart.templates.diva.pointer = 
    `<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)">
        <radialGradient id="pointerGradient"><stop stop-color="#ffffff" offset="0" /><stop stop-color="#039BE5" offset="1" /></radialGradient>
        <circle cx="16" cy="16" r="16" stroke-width="1" stroke="#acacac" fill="url(#pointerGradient)"></circle>
    </g>`;

OrgChart.templates.diva.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,175,155)" data-ctrl-n-menu-id="{id}">
        <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
        <circle cx="0" cy="0" r="2" fill="#ffffff"></circle>
        <circle cx="7" cy="0" r="2" fill="#ffffff"></circle>
        <circle cx="14" cy="0" r="2" fill="#ffffff"></circle>
    </g>`;


mila

 
        
OrgChart.templates.mila = Object.assign({}, OrgChart.templates.ana);

OrgChart.templates.mila.node = 
    `<rect x="0" y="0" height="120" width="250" fill="#039BE5" stroke-width="1" stroke="#aeaeae"></rect>'
    <rect x="-5" y="70" height="30" width="260" fill="#ffffff" stroke-width="1" stroke="#039BE5">
    </rect><line x1="-5" x2="0" y1="100" y2="105" stroke-width="1" stroke="#039BE5" />
    <line x1="255" x2="250" y1="100" y2="105" stroke-width="1" stroke="#039BE5" />`;

OrgChart.templates.mila.img_0 = 
    `<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="20" y="5" width="64" height="64"></image>`;

OrgChart.templates.mila.field_0 = 
    `<text data-width="240" style="font-size: 18px;" fill="#039BE5" x="125" y="92" text-anchor="middle">{val}</text>`;

OrgChart.templates.mila.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,110)" data-ctrl-n-menu-id="{id}">
        <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect><circle cx="0" cy="0" r="2" fill="#ffffff">
        </circle><circle cx="7" cy="0" r="2" fill="#ffffff"></circle><circle cx="14" cy="0" r="2" fill="#ffffff"></circle>'
    </g>`;


polina

 
        
OrgChart.templates.polina = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.polina.size = [300, 80];

OrgChart.templates.polina.ripple = {
    color: "#e6e6e6",
    radius: 40,
    rect: null
};

OrgChart.templates.polina.node = 
    `<rect x="0" y="0" height="80" width="300" fill="#039BE5" stroke-width="1" stroke="#686868" rx="40" ry="40"></rect>`;

OrgChart.templates.polina.img_0 = 
    `<clipPath id="{randId}"><circle cx="40" cy="40" r="35"></circle></clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="0" y="0" width="80" height="80"></image>`;

OrgChart.templates.polina.field_0 = 
    `<text data-width="210" style="font-size: 18px;" fill="#ffffff" x="80" y="30" text-anchor="start">{val}</text>`;
OrgChart.templates.polina.field_1 = 
    `<text data-width="210" style="font-size: 14px;" fill="#ffffff" x="80" y="55" text-anchor="start">{val}</text>`;

OrgChart.templates.polina.link = 
    `<path stroke="#686868" stroke-width="1px" fill="none" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />`;

OrgChart.templates.polina.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,285,33)" data-ctrl-n-menu-id="{id}">
            <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
            <circle cx="0" cy="0" r="2" fill="#ffffff"></circle><circle cx="0" cy="7" r="2" fill="#ffffff"></circle>
            <circle cx="0" cy="14" r="2" fill="#ffffff"></circle>
    </g>`;


mery

 
        
OrgChart.templates.mery = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.mery.ripple = {
    color: "#e6e6e6",
    radius: 50,
    rect: null
};

OrgChart.templates.mery.node = 
    `<rect x="0" y="0" height="120" width="250" fill="#ffffff" stroke-width="1" stroke="#686868" rx="50" ry="50"></rect>
    <rect x="0" y="45" height="30" width="250" fill="#039BE5" stroke-width="1"></rect>`;

OrgChart.templates.mery.link = 
    `<path stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />`;

OrgChart.templates.mery.img_0 = 
    `<clipPath id="{randId}"><circle cx="125" cy="60" r="24"></circle></clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="95" y="33" width="60" height="60"></image>`;

OrgChart.templates.mery.field_0 = 
    `<text data-width="220" style="font-size: 18px;" fill="#039BE5" x="125" y="30" text-anchor="middle">{val}</text>`;
OrgChart.templates.mery.field_1 = 
    `<text data-width="220" style="font-size: 14px;" fill="#039BE5" x="125" y="100" text-anchor="middle">{val}</text>`;

OrgChart.templates.mery.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,60)" data-ctrl-n-menu-id="{id}">
            <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
            <circle cx="0" cy="0" r="2" fill="#ffffff"></circle><circle cx="7" cy="0" r="2" fill="#ffffff"></circle>
            <circle cx="14" cy="0" r="2" fill="#ffffff"></circle>
    `</g>`;


rony

 
        
OrgChart.templates.rony = Object.assign({}, OrgChart.templates.ana);

OrgChart.templates.rony.svg = 
    `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#E8E8E8;display:block;"
    width="{w}" height="{h}" viewBox="{viewBox}">{content}</svg>`;

OrgChart.templates.rony.defs = 
    `<filter id="{randId}" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5"></feOffset>
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"></feGaussianBlur>
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
    </filter>`;

OrgChart.templates.rony.size = [180, 250];

OrgChart.templates.rony.ripple = {
    color: "#F57C00",
    radius: 5,
    rect: null
};

OrgChart.templates.rony.img_0 = 
    `<clipPath id="{randId}"><circle cx="90" cy="160" r="60"></circle></clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="30" y="100" width="120" height="120"></image>`;

OrgChart.templates.rony.node = 
    `<rect filter="url(#{randId})" x="0" y="0" height="250" width="180" fill="#ffffff" stroke-width="0" rx="5" ry="5"></rect>`;

OrgChart.templates.rony.field_0 = 
    `<text data-width="165" style="font-size: 18px;" fill="#039BE5" x="90" y="40" text-anchor="middle">{val}</text>`;
OrgChart.templates.rony.field_1 = 
    `<text data-width="165" style="font-size: 14px;" fill="#F57C00" x="90" y="60" text-anchor="middle">{val}</text>`;
OrgChart.templates.rony.field_2 = 
    `<text data-width="165" style="font-size: 14px;" fill="#FFCA28" x="90" y="80" text-anchor="middle">{val}</text>`;

OrgChart.templates.rony.link = 
    `<path stroke="#039BE5" stroke-width="1px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />`;

OrgChart.templates.rony.plus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#039BE5" stroke-width="1"></circle>
    <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#039BE5"></line>
    <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#039BE5"></line>`;
OrgChart.templates.rony.minus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#039BE5" stroke-width="1"></circle>
    <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#039BE5"></line>`;

OrgChart.templates.rony.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,155,235)" data-ctrl-n-menu-id="{id}">
            <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
            <circle cx="0" cy="0" r="2" fill="#F57C00"></circle>
            <circle cx="7" cy="0" r="2" fill="#F57C00"></circle>
            <circle cx="14" cy="0" r="2" fill="#F57C00"></circle>
    </g>`;


belinda

 
        
OrgChart.templates.belinda = Object.assign({}, OrgChart.templates.ana);

OrgChart.templates.belinda.size = [180, 180];

OrgChart.templates.belinda.ripple = {
    radius: 90,
    color: "#e6e6e6",
    rect: null
};

OrgChart.templates.belinda.node = 
    `<circle cx="90" cy="90" r="90" fill="#039BE5" stroke-width="1" stroke="#aeaeae"></circle>`;

OrgChart.templates.belinda.img_0 = 
    `<clipPath id="{randId}"><circle cx="90" cy="45" r="40"></circle></clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="50" y="5" width="80" height="80"></image>`;

OrgChart.templates.belinda.field_0 = 
    `<text data-width="170" style="font-size: 18px;" text-anchor="middle" fill="#ffffff" x="90" y="105">{val}</text>`;
OrgChart.templates.belinda.field_1 = 
    `<text data-width="160" style="font-size: 14px;" text-anchor="middle" fill="#ffffff" x="90" y="125">{val}</text>`;

OrgChart.templates.belinda.link = 
    `<path stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />`;

OrgChart.templates.belinda.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,79,5)" data-ctrl-n-menu-id="{id}">
        <rect x="0" y="0" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
        <line stroke-width="2" stroke="#000" x1="0" y1="3" x2="22" y2="3"></line>
        <line stroke-width="2" stroke="#000" x1="0" y1="9" x2="22" y2="9"></line>
        <line stroke-width="2" stroke="#000" x1="0" y1="15" x2="22" y2="15"></line>
    </g>`;


ula

 
    
OrgChart.templates.ula = Object.assign({}, OrgChart.templates.ana);

OrgChart.templates.ula.node = 
    `<rect x="0" y="0" height="{h}" width="{w}" fill="#ffffff" stroke-width="1" stroke="#aeaeae"></rect>
    <line x1="0" y1="0" x2="250" y2="0" stroke-width="2" stroke="#039BE5"></line>`;

OrgChart.templates.ula.field_0 = 
    `<text data-width="145" style="font-size: 18px;" fill="#039BE5" x="100" y="55">{val}</text>`;
OrgChart.templates.ula.field_1 = 
    `<text data-width="145" data-text-overflow="multiline" style="font-size: 14px;" fill="#afafaf" x="100" y="76">{val}</text>`;

OrgChart.templates.ula.img_0 = 
    `<clipPath id="{randId}"><circle cx="50" cy="60" r="40"></circle></clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80"></image>`;

OrgChart.templates.ula.menu = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,12)" data-ctrl-n-menu-id="{id}">
        <rect x="-4" y="-10" fill="#ffffff" width="22" height="22"></rect>
        <circle cx="0" cy="0" r="2" fill="#039BE5"></circle>
        <circle cx="7" cy="0" r="2" fill="#039BE5"></circle>
        <circle cx="14" cy="0" r="2" fill="#039BE5"></circle>
    </g>`;

OrgChart.templates.ula.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" data-ctrl-n-menu-id="{id}">
        <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
        <circle cx="0" cy="0" r="2" fill="#AEAEAE"></circle>
        <circle cx="7" cy="0" r="2" fill="#AEAEAE"></circle>
        <circle cx="14" cy="0" r="2" fill="#AEAEAE"></circle>
    </g>`;


ana

 
    
    OrgChart.templates.ana.defs = "";

    OrgChart.templates.ana.size = [250, 120];

    OrgChart.templates.ana.linkAdjuster = {
        fromX: 0,
        fromY: 0,
        toX: 0,
        toY: 0
    };

    OrgChart.templates.ana.ripple = {
        radius: 0,
        color: "#e6e6e6",
        rect: null
    };

    OrgChart.templates.ana.svg = 
        `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
            style="display:block;" width="{w}" height="{h}" viewBox="{viewBox}">{content}
        </svg>`;

    OrgChart.templates.ana.node = 
        `<rect x="0" y="0" height="{h}" width="{w}" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>`;

    OrgChart.templates.ana.link = 
        `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="{rounded}" />`;

    OrgChart.templates.ana.assistanseLink = 
        `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="2px" fill="none" 
        d="M{xa},{ya} {xb},{yb} {xc},{yc} {xd},{yd} L{xe},{ye}" />`;

    OrgChart.templates.ana.pointer = 
        `<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)">
            <radialGradient id="pointerGradient">
                <stop stop-color="#ffffff" offset="0" />
                <stop stop-color="#C1C1C1" offset="1" />
            </radialGradient>
            <circle cx="16" cy="16" r="16" stroke-width="1" stroke="#acacac" fill="url(#pointerGradient)"></circle>
        </g>`;

    OrgChart.templates.ana.expandCollapseSize = 30;
    OrgChart.templates.ana.plus = 
        `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
        <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>
        <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#aeaeae"></line>`; 
    OrgChart.templates.ana.minus = 
        `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
        <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>`;

    OrgChart.templates.ana.nodeMenuButton = 
        `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" data-ctrl-n-menu-id="{id}">
            <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
            <circle cx="0" cy="0" r="2" fill="#ffffff"></circle>
            <circle cx="7" cy="0" r="2" fill="#ffffff"></circle><circle cx="14" cy="0" r="2" fill="#ffffff"></circle>
        </g>`;

    OrgChart.templates.ana.menuButton = 
        `<div style="position:absolute;right:{p}px;top:{p}px; width:40px;height:50px;cursor:pointer;" data-ctrl-menu="">
            <hr style="background-color: #7A7A7A; height: 3px; border: none;">
            <hr style="background-color: #7A7A7A; height: 3px; border: none;">
            <hr style="background-color: #7A7A7A; height: 3px; border: none;">
        </div>`;

    OrgChart.templates.ana.img_0 = 
        `<clipPath id="{randId}"><circle cx="50" cy="30" r="40"></circle></clipPath>
        <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="-10" width="80" height="80">
        </image>`;

    OrgChart.templates.ana.field_0 = 
        `<text data-width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="95" text-anchor="middle">{val}</text>`;
    OrgChart.templates.ana.field_1 = 
        `<text data-width="130" data-text-overflow="multiline" style="font-size: 14px;" fill="#ffffff" x="230" y="30" text-anchor="end">
            {val}
        </text>`;

    OrgChart.templates.ana.link_field_0 = 
        `<text text-anchor="middle" fill="#aeaeae" data-width="290" x="0" y="0" style="font-size:10px;">{val}</text>`;

    OrgChart.templates.ana.padding = [50, 20, 35, 20];


isla

 
    
OrgChart.templates.isla = Object.assign({}, OrgChart.templates.ana);

OrgChart.templates.isla.defs = 
    `<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="isla-shadow">
        <feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
        <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
        <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />
        <feMerge><feMergeNode in="shadowMatrixOuter1" /><feMergeNode in="SourceGraphic" /></feMerge>
    </filter>`;

OrgChart.templates.isla.size = [180, 120];

OrgChart.templates.isla.node = 
    `<rect filter="url(#isla-shadow)" x="0" y="20" rx="7" ry="7" height="100" width="180" fill="#FFF" stroke-width="1" stroke="#039BE5"></rect>
    <rect x="25" y="75" rx="10" ry="10" height="20" width="130" fill="#039BE5" stroke-width="3" stroke="#039BE5"></rect>
    <rect fill="#ffffff" stroke="#039BE5" stroke-width="1" x="70" y="0" rx="13" ry="13" width="40" height="40"></rect>
    <circle stroke="#FFCA28" stroke-width="3" fill="none" cx="90" cy="12" r="8"></circle>
    <path d="M75,34 C75,17 105,17 105,34" stroke="#FFCA28" stroke-width="3" fill="none"></path>`;

OrgChart.templates.isla.ripple = {
    radius: 0,
    color: "#F57C00",
    rect: { x: 0, y: 20, width: 180, height: 100 }
};

OrgChart.templates.isla.field_0 = 
    `<text data-width="120" style="font-size: 12px;" fill="#fff" x="90" y="90" text-anchor="middle">{val}</text>`;
OrgChart.templates.isla.field_1 = 
    `<text data-width="160" style="font-size: 13px;" fill="#039BE5" x="90" y="64" text-anchor="middle">{val}</text>`;

OrgChart.templates.isla.img_0 = 
    `<clipPath id="{randId}">
        <rect filter="url(#isla-shadow)" fill="#ffffff" stroke="#039BE5" stroke-width="1" x="70" y="0" rx="13" ry="13" width="40" height="40">
        </rect>
     </clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="70" y="0" width="40" height="40"></image>`;

OrgChart.templates.isla.plus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#039BE5" stroke-width="1"></circle>
    <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#039BE5"></line>
    <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#039BE5"></line>`;
OrgChart.templates.isla.minus = 
    `<circle cx="15" cy="15" r="15" fill="#F57C00" stroke="#F57C00" stroke-width="1"></circle>
    <line x1="8" y1="15" x2="22" y2="15" stroke-width="1" stroke="#ffffff"></line>`;

OrgChart.templates.isla.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,83,45)" data-ctrl-n-menu-id="{id}">
        <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
        <circle cx="0" cy="0" r="2" fill="#F57C00"></circle>
        <circle cx="7" cy="0" r="2" fill="#F57C00"></circle>
        <circle cx="14" cy="0" r="2" fill="#F57C00"></circle>
    </g>`;


deborah

 
        
OrgChart.templates.deborah = Object.assign({}, OrgChart.templates.polina);
   
OrgChart.templates.deborah.size = [150, 150];

OrgChart.templates.deborah.node = 
    `<rect x="0" y="0" height="150" width="150" fill="#039BE5" stroke-width="1" stroke="#686868" rx="15" ry="15"></rect>`;

OrgChart.templates.deborah.img_0 = 
    `<clipPath id="{randId}">
        <rect fill="#ffffff" stroke="#039BE5" stroke-width="1" x="5" y="5" rx="15" ry="15" width="140" height="140"></rect>
    </clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="5" y="5" width="140" height="140"></image>
    <rect x="3" y="5" height="30" width="144" fill="#039BE5" opacity="0.5" rx="3" ry="3"></rect>
    <rect x="3" y="115" height="30" width="144" fill="#039BE5" opacity="0.5" rx="3" ry="3"></rect>`;
   
OrgChart.templates.deborah.field_0 = 
    `<text data-width="125" data-text-overflow="ellipsis" style="font-size: 18px;" fill="#ffffff" x="15" y="25" text-anchor="start">{val}</text>`;
OrgChart.templates.deborah.field_1 = 
    `<text data-width="105" data-text-overflow="ellipsis" style="font-size: 11px;" fill="#ffffff" x="15" y="135" text-anchor="start">{val}</text>`;

OrgChart.templates.deborah.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,125,130)" data-ctrl-n-menu-id="{id}">
        <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
        <circle cx="0" cy="0" r="2" fill="#ffffff"></circle>
        <circle cx="7" cy="0" r="2" fill="#ffffff"></circle>
        <circle cx="14" cy="0" r="2" fill="#ffffff"></circle>
    </g>`;


group template (More for groups, you can find in Sub Trees doc page)

 
        
OrgChart.templates.group = Object.assign({}, OrgChart.templates.ana);

OrgChart.templates.group.size = [250, 120];

OrgChart.templates.group.node = 
    `<rect rx="50" ry="50" x="0" y="0" height="{h}" width="{w}" fill="#f2f2f2" stroke-width="0"></rect>`;

OrgChart.templates.group.link = 
    `<path stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />`;

OrgChart.templates.group.nodeMenuButton = 
    `<g style="cursor:pointer;" transform="matrix(1,0,0,1,{ew},25)" data-ctrl-n-menu-id="{id}">
        <g transform="matrix(1,0,0,1,-22,-8)">
            <rect x="0" y="0" fill="red" fill-opacity="0" width="18" height="22">
            </rect><line x1="0" y1="2" x2="9" y2="2" stroke="#aeaeae" stroke-width="1">
            </line><line x1="0" y1="9" x2="18" y2="9" stroke="#aeaeae" stroke-width="1">
            </line><line x1="0" y1="16" x2="22" y2="16" stroke="#aeaeae" stroke-width="1">
            </line>
        </g>
    </g>`;

OrgChart.templates.group.field_0 = 
    `<text data-width="230" style="font-size: 18px;" fill="#aeaeae" x="{cw}" y="30" text-anchor="middle">{val}</text>`;
OrgChart.templates.group.field_1 = '';

OrgChart.templates.group.ripple = {
    radius: 50,
    color: "#aeaeae"
};


We have also a base template that you can use or inherit and change:

base template

 
    
OrgChart.templates.base = {

    defs: ``,

    size: [250, 120],

    expandCollapseSize: 30,

    linkAdjuster: {
        fromX: 0,
        fromY: 0,
        toX: 0,
        toY: 0
    },

    ripple: {
        radius: 0,
        color: "#e6e6e6",
        rect: null
    },

    assistanseLink: 
        `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="2px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} {xd},{yd} L{xe},{ye}" />`,

    svg: 
        `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        style="display:block;" width="{w}" height="{h}" viewBox="{viewBox}">{content}</svg>`,

    link: 
        `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />`,

    pointer: 
        `<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)">
            <radialGradient id="pointerGradient"><stop stop-color="#ffffff" offset="0" /><stop stop-color="#C1C1C1" offset="1" /></radialGradient>
            <circle cx="16" cy="16" r="16" stroke-width="1" stroke="#acacac" fill="url(#pointerGradient)"></circle>
        </g>`,

    node: 
        `<rect x="0" y="0" height="120" width="250" fill="none" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>`,

    plus: 
        `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
        <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>
        <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#aeaeae"></line>`,
    minus: 
        `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
        <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>`,

    nodeMenuButton: 
        `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" ${OrgChart.attr.control_node_menu_id}="{id}">
            <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
            <circle cx="0" cy="0" r="2" fill="#ffffff"></circle><circle cx="7" cy="0" r="2" fill="#ffffff"></circle>
            <circle cx="14" cy="0" r="2" fill="#ffffff"></circle>
        </g>`,

    menuButton: 
        `<div style="position:absolute;right:{p}px;top:{p}px; width:30px;height:50px;cursor:pointer;" ${OrgChart.attr.control_export_menu}="">
            <hr style="background-color: #7A7A7A; height: 3px; border: none;">
            <hr style="background-color: #7A7A7A; height: 3px; border: none;">
            <hr style="background-color: #7A7A7A; height: 3px; border: none;">
        </div>`,

    img_0: 
        `<clipPath id="{randId}"><circle cx="60" cy="60" r="40"></circle></clipPath>
        <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="20" y="20" width="80" height="80"></image>`,

    link_field_0: 
        `<text text-anchor="middle" fill="#aeaeae" ${OrgChart.attr.width}="290" x="0" y="0" style="font-size:10px;">{val}</text>`,

    editFormHeaderColor: '#039BE5'
}