<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Build beautiful Organization Charts with our OrgChart for developers or Family Trees with our Family Tree for developers. Create a visual guide to the structure of your organization or family." />
    <meta property="og:site_name" content="balkan.app" />
    <meta property="og:type" content="website" />
    <meta property="fb:app_id" content="2205664533038141" />
    <meta property="og:url" content="/?aspxerrorpath=/js/familytree.css" />
    <meta property="og:title" content="Org Chart JavaScript | Family Tree JavaScript | Flow Chart JavaScript" />
    <meta property="og:description" content="Build beautiful Organization Charts with our OrgChart for developers or Family Trees with our Family Tree for developers. Create a visual guide to the structure of your organization or family." />
    <meta property="og:image" content="/Content/img/screenshot-ba.png" />

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127890191-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'UA-127890191-1');
    </script>
    <title>Org Chart JavaScript | Family Tree JavaScript | Flow Chart JavaScript</title>
    <link rel="shortcut icon" href="/Content/img/App-icon.png" />
    <link rel="icon" href="/Content/img/App-icon.png" type="image/x-icon" />

    <link href="/Content/site.css" rel="stylesheet"/>



    <script src="/Scripts/animate.js"></script>
<script src="/Scripts/website.js"></script>
<script src="/Scripts/prettify.js"></script>
<script src="/Scripts/run_prettify.js"></script>


</head>
<body>
    <header class="header ">
        <nav>
            <button id="btn-nav-mobile" class="btn-nav-mobile">
                <svg width="32" height="32">
                    <line x1="0" x2="30" y1="10" y2="10" stroke-width="3" stroke="#757575"></line>
                    <line x1="0" x2="30" y1="20" y2="20" stroke-width="3" stroke="#757575"></line>
                    <line x1="0" x2="30" y1="30" y2="30" stroke-width="3" stroke="#757575"></line>
                </svg>
            </button>

            <nav class="secondNav" id="secondNav">
                <ul>
                    <li>
                        <a id="logo-link" href="/">


                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="261" height="40" style="margin-top: -5px;">
                                <circle cx="7.5" cy="14" r="7.5" fill="#039BE5"></circle>
                                <circle cx="20.5" cy="9.5" r="6" fill="#FFCA28"></circle>
                                <circle cx="18.5" cy="20.5" r="5" fill="#F57C00"></circle>
                                <text fill="#039be5" style="font-size: 24px;font-family: Roboto-Bold;" x="30" y="24">BALKAN</text>
                                <text fill="#f57c00" style="font-size: 24px;font-family: Roboto-Regular;" x="127" y="24">App</text>
                            </svg>

                        </a>
                    </li>
                    <li>
                        <a href="/OrgChartJS">OrgChart JS</a>
                    </li>
                    <li>
                        <a href="/FlowChartJS">FlowChart JS</a>
                    </li>
                    <li>
                        <a href="/FamilyTreeJS">Family Tree JS</a>
                    </li>
                    <li>
                        <a href="/FamilyTreeJS2">Family Tree JS 2</a>
                    </li>
                    <li>
                        <a href="/OrgChartApp">OrgChart App</a>
                    </li>
                    <li>
                        <a href="/FamilyTreeApp">Family Tree App</a>
                    </li>
                </ul>
            </nav>
    
        </nav>

    </header>
    <div class="body">
        


<section class="splash home">
    <div class="content">
        <div style="flex: 1 0 100%;">

            <h1 class="main">We make interactive diagrams</h1>
        </div>



        <div style="flex: 1 0 40%;">
            <a href="/OrgChartJS" title="Go to BALKAN OrgChart JS website">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="261" height="40">
                    <g transform="matrix(0.75, 0, 0, 0.75, 0, 0)">
                        <rect fill="#039BE5" x="8.5" y="0" width="15" height="15"></rect>
                        <rect fill="#F57C00" x="0" y="17" width="15" height="15"></rect>
                        <rect fill="#FFCA28" x="17" y="17" width="15" height="15"></rect>
                    </g>
                    <text fill="#039be5" style="font-size: 24px;font-family: Roboto-Bold;" x="30" y="24">BALKAN </text>
                    <text fill="#f57c00" style="font-size: 24px;font-family: Roboto-Regular;" x="127" y="24">OrgChart JS</text>
                </svg>

                <br />
                <img style="min-width:300px; border-radius: 7px;" src="/Content/Img/oc.png" />
                <h2 class="main">Organization Chart JavaScript Library for Developers</h2>
            </a>
        </div>

        <div style="flex: 1 0 40%;">
            <a href="/FamilyTreeJS2" title="Go to BALKAN FamilyTree JS 2 website">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="40" >
                    <g transform="matrix(0.05,0,0,0.05,0,0)">
                        <path fill="#aeaeae" d="m336.061 377.731c-5.086-6.54-14.511-7.717-21.049-2.631l-44.012 34.231v-200.331c0-8.284-6.716-15-15-15s-15 6.716-15 15v200.331l-44.011-34.231c-6.538-5.086-15.962-3.908-21.049 2.631-5.086 6.539-3.908 15.963 2.631 21.049l62.429 48.556v49.664c0 8.284 6.716 15 15 15s15-6.716 15-15v-49.664l62.429-48.556c6.54-5.086 7.717-14.51 2.632-21.049z"></path>
                        <path fill="#aeaeae" d="m271 497v-49.664l62.429-48.556c6.54-5.086 7.717-14.51 2.631-21.049-5.086-6.54-14.511-7.717-21.049-2.631l-44.011 34.231v-200.331c0-8.284-6.716-15-15-15v318c8.284 0 15-6.716 15-15z"></path>
                        <path fill="#aeaeae" d="m320 512h-128c-8.284 0-15-6.716-15-15s6.716-15 15-15h128c8.284 0 15 6.716 15 15s-6.716 15-15 15z"></path>
                        <path fill="#aeaeae" d="m320 482h-64v30h64c8.284 0 15-6.716 15-15s-6.716-15-15-15z"></path>
                        <path fill="#FFCA28" d="m400 439c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#039BE5" d="m112 439c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#F57C00" d="m256 222c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#F57C00" d="m367 111c0-61.206-49.794-111-111-111v222c61.206 0 111-49.794 111-111z"></path>
                    </g>
                    <text fill="#039be5" style="font-size: 24px;font-family: Roboto-Bold;" x="30" y="24">BALKAN</text>
                    <text fill="#f57c00" style="font-size: 24px;font-family: Roboto-Regular;" x="127" y="24">FamilyTree JS 2</text>
                </svg>
                <br />
                <img style="min-width: 300px; border-radius: 7px;" src="/Content/Img/ft2.png" />

                <h2 class="main">Family Tree JavaScript Library for Developers</h2>
            </a>
        </div>

        <div style="flex: 1 0 24%;">
            <a href="/OrgChartApp" title="Go to BALKAN OrgChartApp website">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="40" >
                    <svg width="32" height="32" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" version="1.1">
                        <polygon fill="#aeaeae" points="9.8 18.8 26.2 18.8 26.2 21.88 27.8 21.88 27.8 17.2 18.8 17.2 18.8 14 17.2 14 17.2 17.2 8.2 17.2 8.2 21.88 9.8 21.88 9.8 18.8" class="clr-i-solid clr-i-solid-path-1"></polygon>
                        <rect fill="#F57C00" x="2" y="23" width="14" height="10" rx="2" ry="2"></rect>
                        <rect fill="#FFCA28" x="20" y="23" width="14" height="10" rx="2" ry="2"></rect>
                        <rect fill="#039BE5" x="11" y="3" width="14" height="10" rx="2" ry="2"></rect>
                        <rect x="0" y="0" width="36" height="36" fill-opacity="0" />
                    </svg>
                    <text fill="#039be5" style="font-size: 24px;font-family: Roboto-Bold;" x="30" y="24">BALKAN </text>
                    <text fill="#f57c00" style="font-size: 24px;font-family: Roboto-Regular;" x="127" y="24">OrgChart App</text>
                </svg>
                <br />
                <img style="min-width: 300px; border-radius: 7px;" src="/Content/Img/oca.png" />

                <h2 class="main">Organizational Chart App</h2>
            </a>
        </div>

        <div style="flex: 1 0 24%;">
            <a href="/FamilyTreeApp" title="Go to BALKAN FamilyTree App website">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="40">
                    <g transform="matrix(0.05,0,0,0.05,0,0)">
                        <path fill="#aeaeae" d="m336.061 377.731c-5.086-6.54-14.511-7.717-21.049-2.631l-44.012 34.231v-200.331c0-8.284-6.716-15-15-15s-15 6.716-15 15v200.331l-44.011-34.231c-6.538-5.086-15.962-3.908-21.049 2.631-5.086 6.539-3.908 15.963 2.631 21.049l62.429 48.556v49.664c0 8.284 6.716 15 15 15s15-6.716 15-15v-49.664l62.429-48.556c6.54-5.086 7.717-14.51 2.632-21.049z"></path>
                        <path fill="#aeaeae" d="m271 497v-49.664l62.429-48.556c6.54-5.086 7.717-14.51 2.631-21.049-5.086-6.54-14.511-7.717-21.049-2.631l-44.011 34.231v-200.331c0-8.284-6.716-15-15-15v318c8.284 0 15-6.716 15-15z"></path>
                        <path fill="#aeaeae" d="m320 512h-128c-8.284 0-15-6.716-15-15s6.716-15 15-15h128c8.284 0 15 6.716 15 15s-6.716 15-15 15z"></path>
                        <path fill="#aeaeae" d="m320 482h-64v30h64c8.284 0 15-6.716 15-15s-6.716-15-15-15z"></path>
                        <path fill="#FFCA28" d="m400 439c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#039BE5" d="m112 439c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#F57C00" d="m256 222c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#F57C00" d="m367 111c0-61.206-49.794-111-111-111v222c61.206 0 111-49.794 111-111z"></path>
                    </g>
                    <text fill="#039be5" style="font-size: 24px;font-family: Roboto-Bold;" x="30" y="24">BALKAN</text>
                    <text fill="#f57c00" style="font-size: 24px;font-family: Roboto-Regular;" x="127" y="24">FamilyTree App</text>
                </svg>
                <br />
                <img style="min-width: 300px; border-radius: 7px;" src="/Content/Img/ftm.png" />

                <h2 class="main">Family Tree App</h2>
            </a>
        </div>

        <div style="flex: 1 0 24%;">
            <a href="/FamilyTreeJS" title="Go to BALKAN FamilyTree JS website">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="40">
                    <g transform="matrix(0.05,0,0,0.05,0,0)">
                        <path fill="#aeaeae" d="m336.061 377.731c-5.086-6.54-14.511-7.717-21.049-2.631l-44.012 34.231v-200.331c0-8.284-6.716-15-15-15s-15 6.716-15 15v200.331l-44.011-34.231c-6.538-5.086-15.962-3.908-21.049 2.631-5.086 6.539-3.908 15.963 2.631 21.049l62.429 48.556v49.664c0 8.284 6.716 15 15 15s15-6.716 15-15v-49.664l62.429-48.556c6.54-5.086 7.717-14.51 2.632-21.049z"></path>
                        <path fill="#aeaeae" d="m271 497v-49.664l62.429-48.556c6.54-5.086 7.717-14.51 2.631-21.049-5.086-6.54-14.511-7.717-21.049-2.631l-44.011 34.231v-200.331c0-8.284-6.716-15-15-15v318c8.284 0 15-6.716 15-15z"></path>
                        <path fill="#aeaeae" d="m320 512h-128c-8.284 0-15-6.716-15-15s6.716-15 15-15h128c8.284 0 15 6.716 15 15s-6.716 15-15 15z"></path>
                        <path fill="#aeaeae" d="m320 482h-64v30h64c8.284 0 15-6.716 15-15s-6.716-15-15-15z"></path>
                        <path fill="#FFCA28" d="m400 439c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#039BE5" d="m112 439c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#F57C00" d="m256 222c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                        <path fill="#F57C00" d="m367 111c0-61.206-49.794-111-111-111v222c61.206 0 111-49.794 111-111z"></path>
                    </g>
                    <text fill="#039be5" style="font-size: 24px;font-family: Roboto-Bold;" x="30" y="24">BALKAN</text>
                    <text fill="#f57c00" style="font-size: 24px;font-family: Roboto-Regular;" x="127" y="24">FamilyTree JS</text>
                </svg>
                <br />
                <img style="min-width: 300px; border-radius: 7px;" src="/Content/Img/ft.png" />

                <h2 class="main">Family Tree JavaScript Library for Developers</h2>
            </a>
        </div>



        <div style="flex: 1 0 24%;">
            <a href="/FlowChartJS" title="Go to BALKAN FlowChart JS website">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="40">

                    <svg width="32" height="32" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg" version="1.1">

                        <path style="fill:#F57C00" d="M 50,2 25,20 50,38 75,20 z"></path>
                        <path style="fill:#039BE5" d="m 61,63 0,32 35,0 0,-32 z"></path>
                        <path style="fill:#FFCA28" d="M 4,79 C 4,89 12,96 21,96 30,96 38,89 38,79 38,69 30,62 21,62 12,62 4,69 4,79 z"></path>

                        <path style="fill:none;stroke:#aeaeae;stroke-width:3" d="m 21,57 0,-9 58,0 0,11 0,-11 -29,0 0,-7"></path>
                    </svg>
                    <text fill="#039be5" style="font-size: 24px;font-family: Roboto-Bold;" x="30" y="24">BALKAN</text>
                    <text fill="#f57c00" style="font-size: 24px;font-family: Roboto-Regular;" x="127" y="24">FlowChart JS</text>
                </svg>
                <br />
                <img style="min-width: 300px; border-radius: 7px;" src="/Content/Img/fc.png" />

                <h2 class="main">Flowchart JavaScript Library & Editor for Developers</h2>
            </a>
        </div>




    </div>
</section>

<section class="section5">
    <h2>BALKAN App Customers</h2>

    <div class="content">
        <div class="clients"><img src="https://cdn.balkan.app/shared/Google.svg" alt="Google"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Mercedes.svg" alt="Mercedes"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Dell-v1.svg" alt="Dell"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Sony-v1.svg" alt="Sony"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Siemens-v1.svg" alt="Siemens"></div>
        <div class="clients"><img class="mitsubishi" src="https://cdn.balkan.app/shared/Mitsubishi-v1.svg" alt="Mitsubishi"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Fujitsu-v1.svg" alt="Fujitsu"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Liebherr-v1.svg" alt="Liebherr"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Shell-v1.svg" alt="Shell"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/RollsRoyce-v1.svg" alt="RollsRoyce"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Nestle-v1.svg" alt="Nestle"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/hilton-v1.svg" alt="hilton"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Garmin-v1.svg" alt="Garmin"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/RAI-v1.svg" alt="RAI"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/Singtel-v1.svg" alt="Singtel"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/here-v1.svg" alt="here"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/TMobile-v1.svg" alt="TMobile"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/WeWork-v1.svg" alt="WeWork"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/un-v1.svg" alt="un"></div>
        <div class="clients"><img src="https://cdn.balkan.app/shared/who-v1.svg" alt="who"></div>
    </div>
</section>


<footer id="footer" class="footer main-footer ">
    <nav id="main-footer-nav">

        <ul>
            <li><h3>OrgChart JS</h3></li>
            <li >
                <a href="/OrgChartJS/Demos">Demos</a>
            </li>
            <li >
                <a href="/OrgChartJS/Docs/GettingStarted">Docs</a>
            </li>

            <li >
                <a href="/OrgChartJS/Download">Download</a>
            </li>
            <li >
                <a href="/OrgChartJS/Support">Support</a>
            </li>
            <li >
                <a href="/OrgChartJS/Pricing">Pricing</a>
            </li>
        </ul>

        <ul>
            <li><h3>FlowChart JS</h3></li>

            <li >
                <a href="/FlowChartJS/Demos">Demos</a>
            </li>
            <li >
                <a href="/FlowChartJS/Docs/GettingStarted">Docs</a>
            </li>
            <li >
                <a href="/FlowChartJS/Download">Download</a>
            </li>
            <li >
                <a href="/FlowChartJS/Support">Support</a>
            </li>
            <li >
                <a href="/FlowChartJS/Pricing">Pricing</a>
            </li>
        </ul>

        <ul>
            <li><h3>Family Tree JS</h3></li>

            <li >
                <a href="/FamilyTreeJS/Demos">Demos</a>
            </li>
            <li >
                <a href="/FamilyTreeJS/Docs/GettingStarted">Docs</a>
            </li>
            <li >
                <a href="/FamilyTreeJS/Download">Download</a>
            </li>
            <li >
                <a href="/FamilyTreeJS/Support">Support</a>
            </li>
            <li >
                <a href="/FamilyTreeJS/Pricing">Pricing</a>
            </li>
        </ul>

        <ul>
            <li><h3>Family Tree JS 2</h3></li>

            <li >
                <a href="/FamilyTreeJS2/Demos">Demos</a>
            </li>
            <li >
                <a href="/FamilyTreeJS2/Docs/GettingStarted">Docs</a>
            </li>
            <li >
                <a href="/FamilyTreeJS2/Download">Download</a>
            </li>
            <li >
                <a href="/FamilyTreeJS2/Support">Support</a>
            </li>
            <li >
                <a href="/FamilyTreeJS2/Pricing">Pricing</a>
            </li>
        </ul>

        <ul>
            <li><h3>Stay Connected</h3></li>
            <li><a href="https://www.facebook.com/BALKAN.App.Inc">Facebook</a></li>
            <li><a href="https://www.youtube.com/channel/UC94Lf2D7kbagbBjbas4bN6w">YouTube</a></li>
            <li><a href="https://www.linkedin.com/company/68734711/">LinkedIn</a></li>
            <li><a href="https://github.com/BALKANGraph">GitHub</a></li>
            <li><a href="https://blog.balkan.app/">Blog</a></li>
        </ul>

    </nav>
</footer>


    </div>

</body>
</html>
