{"id":14719,"date":"2025-12-04T17:17:02","date_gmt":"2025-12-04T14:17:02","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=14719"},"modified":"2025-12-04T17:49:10","modified_gmt":"2025-12-04T14:49:10","slug":"how-to-create-org-chart-builder-dhtmlx-diagram-and-openai-api","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/how-to-create-org-chart-builder-dhtmlx-diagram-and-openai-api\/","title":{"rendered":"How to Create Org Chart Builder with DHTMLX Diagram and OpenAI API"},"content":{"rendered":"

Today, many organisations have complex structures with multiple levels of management, varied reporting lines, and roles that often overlap or change over time. Organisational charts (or simply org charts) visualise such structures, providing a clear chain of command, responsibilities, and the overall structure of departments and teams. DHTMLX Diagram offers a dedicated org chart mode specifically designed to display such hierarchical structures on web pages. But you can go further and complement DHTMLX Diagram with AI to generate interactive org charts using commands in plain English. <\/p>\n

In this tutorial, we provide step-by-step instructions for creating your own AI Org Chart Builder using DHTMLX Diagram and AI services.<\/p>\n

What to Expect from AI Org Chart Builder<\/h2>\n

The AI Org Chart Builder is the latest addition to the list of DHTMLX AI demos<\/a>. It turns a text description of your team into a clear, interactive diagram. Instead of manually creating charts, you can just write or paste your organisational info, and the system does the rest. <\/p>\n

For instance, you can ask the Org Chart Builder to create an org chart for a dental clinic with a Clinic Manager overseeing Therapeutic, Orthodontics, Oral Surgery, Dental Hygiene, and Administrative departments, along with their corresponding staff.<\/p>\n

\"generating
\nOpen live demo ><\/a><\/p>\n

The Org Chart Builder workflow is divided into simple, sequential steps:<\/p>\n

    \n
  1. Describe:<\/strong> A user inputs the required organization structure in plain English (or picks one of the ready-made templates for a try-out) and presses the “Analyze” button.<\/li>\n
  2. Analyze:<\/strong> The backend attaches a set of instructions to the prompt and sends everything to the AI for transforming the message into a well-structured hierarchy.<\/li>\n
  3. Review:<\/strong> The updated structure appears in the second section of the Org Chart Builder, so the user can review it, make edits, and click the “Build diagram” button.<\/li>\n
  4. Build:<\/strong> The backend asks the AI to generate the final JSON configuration for the org chart.<\/li>\n
  5. Visualize and Edit:<\/strong> The system uses the AI-generated JSON to render the org chart using the functional DHTMLX Diagram editor. The same JSON data appears in the code editor, where any tweaks sync instantly with the Diagram editor.<\/li>\n
  6. Export:<\/strong> The final diagram can be exported to JSON, PNG, and PDF formats.<\/li>\n<\/ol>\n

    Looks like something worth trying in a web project, right? And we are ready to help you out with relevant implementation instructions. The full project codebase is available in the GitHub repository<\/a>.<\/p>\n

    Note:<\/strong> make sure that you have installed Node.js for running the backend server and an OpenAI API key (or a compatible AI service).<\/em><\/p>\n

    Step 1: Setting Up the Frontend UI<\/h2>\n

    The Org Chart Builder interface is based on our JavaScript diagramming component<\/a> and provides a convenient workspace for data visualization, which consists of four collapsible sections. Each section represents one logical step of the workflow, keeping the UI tidy and guiding the user naturally through the process. <\/p>\n

    There is nothing complicated about creating such an interface. First, you create an HTML layout that will give placeholders for all UI elements of your future AI Org Chart Builder.
    \nThe markup for this UI is already available in our demo project (    index.html<\/a>), so here we\u2019ll look at the key elements that make up the layout:<\/p>\n

    <div<\/span> class<\/span>=<\/span>"main-content"<\/span>><\/span>
    \n    <!-- Step 1: User Input --><\/span>
    \n    <textarea<\/span> id<\/span>=<\/span>"user-input"<\/span>><\/<\/span>textarea<\/span>><\/span>
    \n    <button<\/span> id<\/span>=<\/span>"analyze-btn"<\/span>><\/span>Analyze<\/<\/span>button<\/span>><\/span>
    \n
    \n    <!-- Step 2: AI Review --><\/span>
    \n    <textarea<\/span> id<\/span>=<\/span>"rephrased-text"<\/span>><\/<\/span>textarea<\/span>><\/span>
    \n    <button<\/span> id<\/span>=<\/span>"confirm-btn"<\/span>><\/span>Build diagram<\/<\/span>button<\/span>><\/span>
    \n
    \n    <!-- Step 3: Visualization --><\/span>
    \n    <div<\/span> id<\/span>=<\/span>"diagram-container"<\/span>><\/<\/span>div<\/span>><\/span>
    \n
    \n    <!-- Step 4: Data & Export --><\/span>
    \n    <div<\/span> id<\/span>=<\/span>"json-editor"<\/span>><\/<\/span>div<\/span>><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/div><\/div>\n

    Now, you can initialize the interactive parts of your AI Org Chart Builder (app.js<\/a>). Here is the relevant portion of the initialization code:<\/p>\n

    \/\/ initializes the DHTMLX Diagram editor (org chart mode)<\/span>
    \nconst<\/span> diagramEditor =<\/span> new<\/span> dhx.DiagramEditor<\/span>(<\/span>"diagram-container"<\/span>,<\/span> {<\/span>
    \n    type:<\/span> "org"<\/span>,<\/span>
    \n    shapeType:<\/span> "img-card"<\/span>
    \n}<\/span>)<\/span>;<\/span>
    \n
    \n\/\/ initalizes the Monaco JSON editor<\/span>
    \nconst<\/span> jsonEditor =<\/span> monacoInstance.editor<\/span>.create<\/span>(<\/span>document.getElementById<\/span>(<\/span>'json-editor'<\/span>)<\/span>,<\/span> {<\/span>
    \n    value:<\/span> ''<\/span>,<\/span>
    \n    language:<\/span> 'json'<\/span>,<\/span>
    \n    theme:<\/span> 'vs-dark'<\/span>,<\/span>
    \n    readOnly:<\/span> false<\/span>,<\/span>
    \n    automaticLayout:<\/span> true<\/span>
    \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

    As a result, you get the Diagram editor for displaying org charts and the code editor for working with JSON structures of your visualizations. <\/p>\n

    Step 2: Interfacing with AI – Rephrase, Build, and Sync<\/h2>\n

    Now that the UI\u2019s foundation is set, it is time to connect it to the backend. After that, you will learn how to add an interaction layer (app.js<\/a>), including the ability to send prompts to the AI, receive AI-processed hierarchy, generate the org chart preview, and keep everything updated across the diagram and code editors.<\/p>\n

    2.1 Establishing the WebSocket Connection<\/h3>\n

    You should use the Socket.IO library to enable real-time communication between the frontend and the backend. This ensures that when a user submits text, the AI processes it and sends back results instantly:<\/p>\n

    \/\/ Opens a websocket connection for AI operations<\/span>
    \nconst<\/span> socket =<\/span> io(<\/span>)<\/span>;<\/span><\/div><\/div>\n

    This single line enables real-time updates between the frontend and backend, making our diagram responsive to AI-generated changes. <\/p>\n

    2.2 Handling User Prompts<\/h3>\n

    After the user enters a description and clicks the Analyze button, the prompt is sent to the backend, where it is complemented with guiding instructions. After that, this data is sent to the LLM, which produces a clean, structured hierarchy. <\/p>\n

    To make it work, you need to add the addEventListener<\/strong> handler. So, when the button is clicked, the following logic is executed:<\/p>\n

    analyzeButton.addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
    \n    const<\/span> text =<\/span> userInputTextArea.value<\/span>;<\/span>
    \n    if<\/span> (<\/span>!<\/span>text)<\/span> {<\/span>
    \n        displayError(<\/span>"Please enter a description."<\/span>)<\/span>;<\/span>
    \n        return<\/span>;<\/span>
    \n    }<\/span>
    \n    setButtonLoadingState(<\/span>true<\/span>,<\/span> analyzeButton)<\/span>;<\/span>
    \n    resetUI(<\/span>)<\/span>;<\/span>
    \n   
    \n    \/\/ Sends the initial prompt to the backend for AI rephrasing       <\/span>
    \n    socket.emit<\/span>(<\/span>'rephrase_text'<\/span>,<\/span> {<\/span> text }<\/span>,<\/span> (<\/span>response)<\/span> =><\/span> {<\/span>
    \n        setButtonLoadingState(<\/span>false<\/span>,<\/span> analyzeButton)<\/span>;<\/span>
    \n        \/\/ If AI provides the rephrased version, it will be displayed for review<\/span>
    \n        if<\/span> (<\/span>response.status<\/span> ===<\/span> 'success'<\/span>)<\/span> {<\/span>
    \n            reviewTextArea.value<\/span> =<\/span> response.payload<\/span>;<\/span>
    \n            reviewSection.open<\/span> =<\/span> true<\/span>;<\/span>
    \n            displayError(<\/span>''<\/span>)<\/span>;<\/span>
    \n        }<\/span> else<\/span> {<\/span>
    \n            displayError(<\/span>"Analysis error: "<\/span> +<\/span> response.message<\/span>)<\/span>;<\/span>
    \n        }<\/span>
    \n    }<\/span>)<\/span>;<\/span>
    \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

    The user can estimate the rephrased prompt and manually make necessary adjustments.<\/p>\n

    2.3 Building the Org Chart<\/h3>\n

    Once the user confirms the rephrased prompt by clicking the “Build Diagram” button, it is sent to the LLM to generate structured JSON for the org chart.<\/p>\n

    Just like in the case above, you add the addEventListener<\/strong> to the button to react to the user\u2019s click and run all the logic that generates the final org chart:<\/p>\n

    confirmButton.addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
    \n    const<\/span> verifiedText =<\/span> reviewTextArea.value<\/span>;<\/span>
    \n    if<\/span> (<\/span>!<\/span>verifiedText)<\/span> {<\/span>
    \n        displayError(<\/span>"Text for analysis cannot be empty."<\/span>)<\/span>;<\/span>
    \n        return<\/span>;<\/span>
    \n    }<\/span>
    \n    setButtonLoadingState(<\/span>true<\/span>,<\/span> confirmButton)<\/span>;<\/span>
    \n
    \n    \/\/ Verified prompt is sent, and the backend instructs AI to generate the org chart<\/span>
    \n    socket.emit<\/span>(<\/span>'generate_diagram'<\/span>,<\/span> {<\/span> text:<\/span> verifiedText }<\/span>,<\/span> (<\/span>response)<\/span> =><\/span> {<\/span>
    \n        setButtonLoadingState(<\/span>false<\/span>,<\/span> confirmButton)<\/span>;<\/span>
    \n        if<\/span> (<\/span>response.status<\/span> ===<\/span> 'success'<\/span>)<\/span> {<\/span>
    \n            const<\/span> data =<\/span> response.payload<\/span>;<\/span>
    \n            \/\/ Populates the JSON editor<\/span>
    \n            jsonEditor.setValue<\/span>(<\/span>JSON.stringify<\/span>(<\/span>data,<\/span> null<\/span>,<\/span> 2<\/span>)<\/span>)<\/span>;<\/span>
    \n            \/\/ Renders the org chart in the Diagram Editor <\/span>
    \n            diagramEditor.diagram<\/span>.data<\/span>.parse<\/span>(<\/span>data)<\/span>;<\/span>
    \n
    \n            diagramSection.open<\/span> =<\/span> true<\/span>;<\/span>
    \n            exportSection.open<\/span> =<\/span> true<\/span>;<\/span>
    \n            displayError(<\/span>''<\/span>)<\/span>;<\/span>
    \n        }<\/span> else<\/span> {<\/span>
    \n            displayError(<\/span>"Generation error: "<\/span> +<\/span> response.message<\/span>)<\/span>;<\/span>
    \n        }<\/span>
    \n    }<\/span>)<\/span>;<\/span>
    \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

    After that, the Diagram editor displays the org chart, while the code editor shows the corresponding JSON structure.<\/p>\n

    2.4 Syncing Editors<\/h3>\n

    The code editor is fully interactive. Any manual changes in the JSON structure will be reflected in the Diagram editor in real time. <\/p>\n

    Here is the logic behind this behavior:<\/p>\n

    jsonEditor.onDidChangeModelContent<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
    \n    clearTimeout(<\/span>debounceTimer)<\/span>;<\/span>
    \n    debounceTimer =<\/span> setTimeout(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
    \n        try<\/span>{<\/span>
    \n           const<\/span> jsonData =<\/span> JSON.parse<\/span>(<\/span>jsonEditor.getValue<\/span>(<\/span>)<\/span>)<\/span>;<\/span>
    \n           diagramEditor.diagram<\/span>.data<\/span>.parse<\/span>(<\/span>jsonData)<\/span>;<\/span>
    \n           displayError(<\/span>''<\/span>)<\/span>;<\/span>
    \n        }<\/span> catch<\/span> (<\/span>e)<\/span> {<\/span>
    \n          \/\/ It's okay if the JSON is temporarily invalid while typing<\/span>
    \n        }<\/span>
    \n    }<\/span>,<\/span> 500<\/span>)<\/span>;<\/span>
    \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

    This ensures full synchronization between the visual org chart and its JSON representation.<\/p>\n

    2.5 Export Options<\/h3>\n

    Finally, you can enable users to export the org chart using diagram.export.png()<\/strong> and diagram.export.pdf()<\/strong> methods included in the DHTMLX Diagram API.<\/p>\n

    Now, we can proceed to the most exciting part of our tutorial, namely, how the backend prepares the data for AI, calls the model, and sends its responses back to the browser.<\/p>\n

    Step 3: Backend Intelligence Layer \u2013 Rules, Prompts, Validation, Response Delivery<\/h2>\n

    In previous sections, we touched on the backend\u2019s behavior at a high level. Now, we are transitioning from general concepts to explaining the backend role from a technical standpoint, providing concrete code examples. <\/p>\n

    Main Backend Responsibilities<\/h3>\n

    Right now, we\u2019ll consider the core backend responsibilities (server.js<\/a>) and explain how each of them contributes to producing correct org charts:<\/p>\n