整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
可以使用JavaScript在瀏覽器中渲染任何您想要的內容。這個很好的示例是這個在線建模工具列表，它可以幫助您直接在瀏覽器中輕松創建UML（或ER，BPMN等）圖。這些工具中的大多數都使用 JavaScript 來渲染圖形形狀并與之交互。但是，如果您想創建自己的圖表或構建自己的編輯器怎么辦？別擔心，我們為您提供保障。在這篇文章中，我們提供了一個 10+ JavaScript 繪圖庫的列表，用于編寫您自己的可視化工具和/或為您的軟件添加一些圖形建模功能。
我們將 JavaScript 繪圖庫集分為兩個主要類別：
簡而言之，如果您正在尋找一種幾乎現成的方法來將 JavaScript 建模庫集成到您的工具中，請選擇第一組中的庫。如果您正在尋找一個更可調的解決方案，并且有時間和技能進行一些編程，請考慮從第二組中獲取一個庫并根據需要對其進行個性化設置。請注意，我們專注于繪制圖表的庫，如果您只想渲染只讀圖表，您可能需要查看此文本建模工具列表。
用于繪制UML（或BPMN或ERD）圖的JavaScript庫
JointJS可用于創建靜態圖或完全交互式的圖工具和應用程序構建器。它還有一個商業版本（Rappid，見下文）
以下是它的一些功能：
Rappid是JointJS的商業擴展。它是一組 JointJS 插件和其他組件，在創建圖表工具時提供了更多可能性和即用型功能。以下是它的一些功能：
MxGraph 是一個交互式 JavaScript HTML 5 圖表庫。mxGraph 是一個完全客戶端的庫，它使用 SVG 和 HTML 來渲染模型。例如，該庫用于 Draw.io。開發始于 2005 年，雖然原始項目已存檔，但這個分支仍在繼續工作。
mxGraph 不使用第三方軟件，它不需要插件，幾乎可以集成到任何框架中。mxGraph 包包含一個用 JavaScript 編寫的客戶端軟件，以及一系列用于各種語言的后端。客戶端軟件是一個圖形組件，帶有集成到現有 Web 界面中的可選應用程序包裝器。客戶端需要 Web 服務器將所需的文件傳送到客戶端，或者可以在沒有 Web 服務器的情況下從本地文件系統運行。后端可以按原樣使用，也可以以受支持的語言之一嵌入到現有服務器應用程序中。
GoJS是一個功能豐富的JavaScript / Typescript庫，用于跨現代瀏覽器和平臺實現交互式圖表。GoJS 通過可自定義的模板和布局可以輕松構建復雜節點、鏈接和組的圖表。
GoJS 為用戶交互提供了許多高級功能，例如拖放、復制和粘貼、事務狀態和撤消管理、調色板、概述、數據綁定模型、事件處理程序以及用于自定義操作的可擴展工具系統。它們提供了 150 多個交互式示例，可幫助您開始使用 BPMN、流程圖、狀態圖、可視化樹、Sankey 和數據流等圖表。該 API 有很好的文檔記錄，以確保您可以立即開始使用。我們在這篇文章中廣泛介紹了GoJS。
用于 UML2 圖表的 HTML5/javascript 庫。它的主要目標是為Web開發人員提供一種簡單的方法來可視化和編輯UML模型，在我們自己的網站中，沒有其他外部依賴項，并且通過瀏覽器在客戶端完全可執行，與此列表中的其他工具不同。jsUML2 庫提供了一個 API，允許 Web 開發人員使用最新的 Web 瀏覽器以及當前移動設備支持的 HTML5 技術在自己的網站中包含可編輯的圖表。
它為特定于 UML 的模型提供了廣泛的有趣功能。特別是，它支持所有主要的UML類型的圖：
支持圖表元素（大小，位置，顏色等）的樣式版本，構造型定義，將UML圖表導入/導出到XML和圖像生成。
該工具已于 2017 年停產，但對于所有尋找 UML JavaScript 庫的人來說，它仍然是一個強大的選擇。
圖表工具是100%用JavaScript編寫的，并使用HTML5 Canvas元素進行繪制。該組件可以使用jQuery或Microsoft Ajax?庫進行瀏覽器獨立層和類型系統實現。
它帶有一組豐富的預定義形狀（用于工作流圖、流程架構、類圖、樹,...檢查他們的樣本集合）以及定義自己的形狀和自定義選項（例如箭頭形狀）的可能性。為了方便 API 的使用，他們對其進行了大量記錄。您還可以使用自動圖形布局算法。
Nomnoml 是一個較有名的文本建模工具，能夠從文本描述中渲染 UML 圖，但它也提供了一個獨立的 JavaScript 庫，可用于在自己的網頁上呈現圖。唯一的依賴關系是 lodash 和 dagre。
與nomnoml類似，Mermaid的主要重點是從文本文件生成圖表，在這種情況下，通過簡單的類似markdown的腳本語言。它依賴于 d3 和 dagre-d3 來提供圖形布局和繪圖庫。它提供了一個在線編輯器，但您也可以直接重用打包的美人魚 API 將美人魚集成到您自己的開發中。它主要涵蓋序列圖和流程圖。
用于創建和顯示圖表的核心庫。它被 BPMN.io（此庫的創建者）用作同一公司許多其他庫的構建塊，用于指定業務流程模型、決策模型和案例計劃模型。
例如，bpmn-js 是渲染 BPMN 2.0 圖的.js擴展。除了使用它來構建工作流建模編輯器（正如他們已經提供的那樣）之外，bpmn-js 在設計時還考慮了可擴展性，因此您可以“輕松”構建某種執行/模擬引擎，例如，在其上構建某種執行/模擬引擎。
顧名思義，state.js 專注于對分層狀態機進行建模。狀態.js API 提供：
它是用TypeScript開發的，并轉譯為JavaScript;您可以使用任何一種語言。 : .
Eclipse Sprotty 和 Eclipse GLSP 工具可幫助您為自己的語言創建建模環境。因此，它們不限于UML，ER或其他特定的圖表類型。相反，這些工具提供了一個后端基礎結構（基于語言服務器協議的圖形化），以創建您自己的語言，并提供一個基于 JS 的前端來為其構建可視化編輯器。
提供面向圖形的建模基元的低級庫（因此，我們在這里不列出只專注于繪制數據可視化圖表的庫）。事實上，其中一些已被用于構建上面列出的JavaScript建模庫。
D3.js 是一個 JavaScript 庫，用于基于數據操作文檔。現在，我會說是同類庫中最受歡迎的圖書館。
D3 可幫助您使用 HTML、SVG 和 CSS 使數據栩栩如生。D3 對 Web 標準的強調為您提供了現代瀏覽器的全部功能，而無需將自己綁定到專有框架，將強大的可視化組件和數據驅動的 DOM 操作方法相結合。D3 速度極快，支持大型數據集以及交互和動畫的動態行為。D3 的函數式風格允許通過各種官方和社區開發的模塊重用代碼。
Rapha?l 是一個小型的 JavaScript 庫，它應該可以簡化您在 Web 上使用矢量圖形的工作。例如，如果您想創建自己的特定圖表或圖像裁剪和旋轉小部件，則可以使用此庫簡單輕松地實現它。Rapha?l 使用 SVG W3C 推薦和 VML 作為創建圖形的基礎。這意味著您創建的每個圖形對象也是一個 DOM 對象，因此您可以附加 JavaScript 事件處理程序或稍后修改它們。Rapha?l的目標是提供一個適配器，使繪制矢量藝術兼容跨瀏覽器且容易。它最近沒有更新。
使用 Draw2D Javascript 庫創建類似 Visio 的繪圖、圖表或工作流編輯器。用戶界面允許使用標準瀏覽器進行交互式繪圖。它聲稱比拉斐爾簡潔得多。即使開發停滯不前，甚至還有一個演示頁面。
Fabric 是一個 JavaScript HTML 畫布庫，在 canvas 元素之上提供了一個交互式對象模型。您可以在畫布上創建和填充對象;對象，如簡單的幾何形狀或由多個路徑組成的復雜形狀。Fabric 還具有 SVG 到畫布（和畫布到 SVG）解析器。
Paper.js 是一個運行在 HTML5 Canvas 之上的開源矢量圖形腳本框架。它提供了一個干凈的場景圖/文檔對象模型和許多強大的功能來創建和處理矢量圖形和貝塞爾曲線，所有這些都整齊地包裝在一個精心設計、一致和干凈的編程界面中。它基于（并且在很大程度上兼容）Scriptographer，Scriptographer是Adobe Illustrator的腳本環境。
jsPlumb 提供了一種以可視化連接為核心構建應用程序的快速方法。s.它使用 SVG 并在 IE9 及更高版本的所有瀏覽器上運行。JsPlumbToolkit是其商業擴展。此商業版本包裝了社區版，重點關注基礎數據模型，以及幾個有用的 UI 功能，例如布局和提供平移/縮放功能的小部件。
一個 JS 客戶端庫，用于創建圖形和交互式體驗，基于處理的核心原則，使藝術家、設計師和教育工作者可以訪問編碼。除了繪圖之外，該項目還提供網絡音頻功能，碰撞檢測，甚至從p5.js草圖生成圖形用戶界面。
高度優化的開源圖論網絡庫，可用于圖分析和可視化。與所有現代瀏覽器兼容，并且可通過 JSON 完全（反）序列化。它還包括自動布局，集合論和圖論的算法，從BFS到PageRank。
一個JavaScript庫，充當dagre（在客戶端布置有向圖的javascript庫）的前端，使用D3提供實際的呈現。該項目現已放棄。
Vis.js 是一個基于瀏覽器的動態可視化庫。該庫設計為易于使用，可處理大量動態數據，并可對數據進行操作。這個項目也被放棄了。
React Diagrams 是一個“一個超級簡單、嚴肅的圖表庫，用 react 編寫，只是工作”。它是一個專注于可視化流程和面向流程的圖表的庫。靈感來自Blender、Labview和虛幻引擎。
它完全用 Typescript 和 React 編寫。它是完全可擴展的，整個庫（包括其核心）可以擴展，重新布線并重新組裝成根本不同的軟件，以滿足您自己的軟件需求。它還旨在提供良好的用戶體驗，但確保設計人員可以盡快編輯圖表。
Tldraw是此列表中的最新條目之一。Tldraw是一個“微小的繪圖應用程序”，提供了許多形狀來繪制簡單，但清晰和優雅的圖表，具有手繪風格和方便的功能，如智能箭頭，捕捉和便箋。甚至還有一個VSCode擴展。
著人工智能（AI）技術的飛速發展，AI繪圖已經成為了數字藝術家和愛好者們的新寵。從初學者到專業人士，每個人都在尋找能夠激發創意和提高作品質量的資源。今天，我們將介紹10個頂級的 stable difussion AI繪圖資源網站，能夠幫助你在AI繪圖的旅程中邁出堅實的一步。
1、Once Upon an Algorithm（onceuponanalgorithm.org）: 這是一個非常適合初學者的網站，提供了關于如何開始使用SD1.5的基礎指導。
2、 Hugging Face Spaces（huggingface.co/spaces/SmilingWolf/wd-tagger）: 這個平臺提供了基于現有藝術作品的提示，幫助你嘗試復制這些作品。
3、 Stable Diffusion Prompts List（stablediffusion.cdcruz.com/prompts_list.html）: 這個網站提供了從攝影角度到藝術風格和服裝的各種提示，雖然最初是為2020年推出的NovelAI設計的，但在2024年仍然與SDXL相關。
4、 Lexica（lexica.art）: 這是一個龐大的AI數據庫，提供了原始提示和作品，可以幫助你獲取繪圖靈感。
5、Open Model Database（openmodeldb.info）: 這個網站提供了通用的圖像增強工具，適用于各種AI繪圖需求。
6、 Lunar Mimi（lunarmimi.net/freebies/novelai-anime-girl-prompt-guide/#1basic）: 這是一個參考指南，幫助你設計原創作品，包括不同的發型、姿勢、情感、背景效果等，最初是為NovelAI設計的，但同樣適用于SDXL。
7、Public Prompts（publicprompts.art）: 這個網站直接提供了各種繪圖提示詞，非常直觀易懂
8、OpenArt AI Promptbook（openart.ai/promptbook）: 這個資源像幻燈片一樣，提供了改進提示詞效果的方法。
9、 Rentry SD Goldmine（rentry.org/sdgoldmine）: 這個網站提供了大量對于NovelAI和SD1.5都有用的資源。
AI繪圖是一個不斷發展的領域，不斷學習和實踐是保持領先的關鍵。無論你是AI繪圖的新手還是有經驗的老鳥，這些網站都能為你的創作提供寶貴的資源和靈感。
挑戰30天在頭條寫日記#
Apache ECharts 支持多種下載方式，可以在下一篇教程安裝中查看所有方式。這里，我們以從 jsDelivr CDN 上獲取為例，介紹如何快速安裝。
在 https://www.jsdelivr.com/package/npm/echarts 選擇 dist/echarts.js，點擊并保存為 echarts.js 文件。
在剛才保存 echarts.js 的目錄新建一個 index.html 文件，內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入剛剛下載的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>打開這個 index.html，你會看到一片空白。但是不要擔心，打開控制臺確認沒有報錯信息，就可以進行下一步。
在繪圖前我們需要為 ECharts 準備一個定義了高寬的 DOM 容器。在剛才的例子 </head> 之后，添加：
<body>
<!-- 為 ECharts 準備一個定義了寬高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入剛剛下載的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 為 ECharts 準備一個定義了寬高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>這樣你的第一個圖表就誕生了！
https://github.com/apache/echarts
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
