作為近年來增長最快的技術領域之一,人工智能(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 最新版官方試用下載,請聯繫慧都科技