作為近年來增長最快的技術領域之一，人工智能（AI）正改變企業在 Web 前端、項目管理和可視化領域的應用方式。DHTMLX 團隊持續深耕 AI 能力，並積極探索如何將最新的 LLM（大語言模型）能力與其 JavaScript UI 組件進行深度融合。
DHTMLX 近日推出了 3 個全新 Demo，展示了 AI 如何顯著提升 Gantt 甘特圖與 Diagram 組織結構圖的使用體驗。通過簡單的自然語言指令，用户即可自動生成項目結構、創建甘特圖主題、構建複雜組織結構圖。
DHTMLX Gantt / Diagram 最新版官方試用下載，請聯繫慧都科技
一、AI Gantt Maker：用自然語言自動構建甘特圖項目
AI Gantt Maker 演示瞭如何將 LLM 用作項目規劃助手，通過自然語言指令快速生成完整項目結構，實現從創意到項目計劃的自動化。
例如輸入：
“創建一個名為 Stadium Construction 的項目，包含 Site Preparation、Foundation Work、Structural Assembly 階段。”
AI 會立即生成：
-
完整的任務結構樹
-
任務依賴關係
-
初步時間安排
-
可繼續交互優化的項目框架
支持 AI 執行的操作包括：
-
從零創建項目結構
-
新增、編輯、刪除任務（CRUD）
-
調整任務依賴類型
-
自定義甘特圖元素樣式（任務、高度、進度條、顏色、文本等）
-
修改時間刻度、縮放比例、里程碑、標記等
-
支持導出 PDF/PNG
用户還可通過“指令指南（Command Guide）”快速查看可用的自然語言命令。
適用價值：
在項目規劃初期，通過簡單描述即可讓 AI 自動構建原型，大幅降低手動建模的時間成本，提升 PMO / 項目經理效率。
二、AI Gantt Theme Builder：用 AI 自動生成甘特圖主題樣式
AI Gantt Theme Builder 面向需要快速設計圖表界面的用户，讓甘特圖樣式定製更加輕鬆。
例如輸入：
“創建一個秋季主題，使用金黃色、深橙色和棕色作為主色調。”
AI 會自動生成：
-
配套 CSS 變量
-
組件參數配置
-
任務高度、鏈接寬度、色彩等界面樣式
Demo 中包含：
-
Chat 交互區：用於輸入樣式指令
-
Code 區域：可編輯 AI 生成的樣式代碼，實時預覽 UI 效果
適用價值：
無需逐項調整樣式參數，前端即可通過自然語言快速獲得高質量界面主題，大幅提升甘特圖界面定製體驗。
三、AI Org Chart Builder：自然語言自動生成組織結構圖
該 Demo 展示了 DHTMLX Diagram 的組織結構圖（Org Chart）如何藉助 AI 實現複雜結構自動化生成。
例如輸入：
“創建一家公司組織結構：包含 Managing Partner、Practice Leads、Senior Attorneys、Associates、Paralegals。”
AI 將自動：
-
將組織結構以文本方式呈現供用户確認
-
根據結構生成可交互的組織結構圖
-
提供 JSON 配置文件，並支持實時修改
Demo 包含兩大核心編輯器：
✔ Diagram 圖形編輯器
-
可視化交互
-
添加/刪除/編輯節點
-
自定義形狀與連接線
✔ JSON Code 編輯器
-
直接修改 org chart 配置
-
無需再次調用 AI
-
UI 即時同步
✔ 多格式導出
支持導出為 JSON、PDF、PNG，用於文檔、彙報、審批等場景。
適用價值：
非常適合 HR、諮詢公司、組織架構設計、IT 內部團隊管理等高頻結構可視化場景。
四、統一的 AI 集成模式：指令 → LLM → 結構化結果 → 實時渲染
三個 Demo 都採用類似的 AI 集成模式：
-
組件接收用户自然語言 Prompt
-
後端通過 OpenAI API 或兼容 LLM 服務處理請求
-
LLM 返回結構化結果（JSON / Config / Commands）
-
前端解析並實時更新 UI
-
用户可繼續與 AI 交互或直接編輯代碼
這一模式為前端組件引入 AI 帶來了高度靈活性，也為後續更多組件增強奠定了基礎。
五、結語：AI × DHTMLX，構建前端組件的新生產力
這些新的演示項目再次證明：AI + UI 組件庫 不僅能改善交互體驗，更能直接提升效率，創造全新的應用方式。
DHTMLX Gantt / Diagram 最新版官方試用下載，請聯繫慧都科技
