格白板)
Excalidraw 開源虛擬白板3 步本地部署的免費手繪風(fēng)格白板【免費下載鏈接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams項目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一個免費開源的虛擬白板項目核心是一塊支持手繪風(fēng)格圖形的無限畫布同時內(nèi)置多人實時協(xié)作與端到端加密能力。它常被當(dāng)作流程圖工具、線框圖工具使用也能以 npm 包形式嵌入自己的 React 應(yīng)用。下面按部署—使用—定制的順序帶你從跑通項目到把它用熟。一分鐘看懂 Excalidraw關(guān)注點說明手繪風(fēng)格所有圖形帶輕微抖動的筆觸看起來像紙上速寫適合表達結(jié)構(gòu)而非像素級設(shè)計實時協(xié)作多人通過共享鏈接進入同一畫布修改即時同步遠(yuǎn)端團隊可以同時標(biāo)注和討論加密安全協(xié)作數(shù)據(jù)走端到端加密畫布內(nèi)容在傳輸過程中不以明文暴露工具層面它覆蓋矩形、圓形、菱形、箭頭等基礎(chǔ)圖形支持自由手繪、文字排版、插入圖片導(dǎo)出 PNG、SVG 與 JSON 三種格式。打開應(yīng)用后你會看到如下歡迎界面功能分區(qū)和操作指引都很直觀Excalidraw 安裝從零畫到第一張圖環(huán)境只需要兩樣Node.js 14 以上版本當(dāng)前倉庫 engines 字段實際要求 18 及以上和 yarn。確認(rèn)命令行能正常執(zhí)行node -v之后拉取源碼git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw然后安裝依賴并啟動開發(fā)服務(wù)器yarn install yarn startyarn start實際調(diào)用的是 Vite啟動成功后按終端提示的地址打開瀏覽器默認(rèn) http://localhost:5173歡迎界面出現(xiàn)即代表環(huán)境跑通畫布可以直接開畫。如果你只關(guān)心如何把它嵌進項目倉庫里還準(zhǔn)備了兩份示例examples/with-nextjs演示 Next.js 集成examples/with-script-in-browser演示瀏覽器腳本方式接入。Excalidraw 快捷鍵與在線協(xié)作繪圖技巧單人繪圖時把高頻操作交給鍵盤能明顯提速CtrlZ/CtrlY撤銷重做CtrlD復(fù)制選中元素CtrlG把多個元素編組按住空格拖動可平移畫布。還有一個實用入口Alt/macOS 為 Option/打開Stats for nerds統(tǒng)計面板可以看到當(dāng)前場景的元素數(shù)量、畫布尺寸和存儲占用幫你判斷畫布是否該瘦身。多人協(xié)作時把畫布共享鏈接發(fā)給成員即可開始在線協(xié)作繪圖按需區(qū)分編輯與查看權(quán)限讓只需要看的人不亂動內(nèi)容。討論可以借助評論功能異步進行重要節(jié)點定期保存一份 JSON 存檔方便日后回溯。需要模板復(fù)用時把反復(fù)用到的圖標(biāo)、組件或整塊結(jié)構(gòu)存進個人庫之后一鍵插入省去重復(fù)繪制。配合網(wǎng)格、對齊與分布工具復(fù)雜圖也能保持版面整潔。進階定制與集成主題定制界面的配色和字體變量集中在packages/excalidraw/css/theme.scss改這里就能讓白板界面貼近你的品牌風(fēng)格。React 集成如果你的產(chǎn)品想內(nèi)嵌一塊白板安裝官方包即可npm install react react-dom excalidraw/excalidraw各配置項與事件回調(diào)的說明見官方集成文檔。二次開發(fā)倉庫采用 monorepo 組織核心能力拆在packages/下的 common、element、excalidraw 等獨立包里渲染、交互、導(dǎo)出各自成模塊閱讀某一塊的實現(xiàn)或擴展新功能都有清晰的落點不必通讀整個應(yīng)用。故障排查速查依賴安裝失敗通常是本地依賴緩存或鎖文件損壞。把項目里的依賴緩存目錄和鎖文件刪掉再重新執(zhí)行yarn install網(wǎng)絡(luò)受限時可先確認(rèn) registry 配置是否正常。端口被占用Vite 默認(rèn)端口被占時給啟動命令加--port參數(shù)換一個空閑端口如yarn start --port 5001或先關(guān)掉占用該端口的進程。元素多了之后操作卡頓先用統(tǒng)計面板確認(rèn)元素規(guī)模合并冗余元素、清理無用圖層演示或?qū)忛啎r切到 View modeAltR禁用編輯交互后渲染壓力會明顯下降。導(dǎo)出圖片不夠清晰導(dǎo)出時不要停留在默認(rèn)縮放在導(dǎo)出對話框里調(diào)高分辨率導(dǎo)出倍率再保存細(xì)節(jié)會更完整。它適合誰寫代碼的人可以用它畫系統(tǒng)架構(gòu)圖、API 調(diào)用流程和狀態(tài)流轉(zhuǎn)圖手繪風(fēng)格保留了草圖階段的隨意感需求變動時改動成本很低不用重畫一整張矢量圖。做教學(xué)的人可以把它當(dāng)互動教具把推導(dǎo)過程、時間線或?qū)嶒灹鞒讨苯赢嬙跓o限畫布上學(xué)生通過協(xié)作鏈接實時加入并動手修改抽象概念更容易講清楚。做產(chǎn)品和設(shè)計的人適合用它產(chǎn)出用戶旅程圖和低保真線框圖團隊在共享畫布上邊開會邊改手繪觀感讓討論停留在結(jié)構(gòu)與邏輯層面不會被視覺細(xì)節(jié)拖走。開始動手打開終端按上面的三條命令把項目跑起來你的第一張流程圖可以十分鐘內(nèi)完成。項目完全免費開源在 GitHub 上搜索 excalidraw 即可找到源碼倉庫也歡迎直接提交 PR 參與共建。提示手繪風(fēng)格不是精度上的妥協(xié)而是一種溝通策略——它把注意力從像素對齊拉回到結(jié)構(gòu)和邏輯本身這正是協(xié)作討論最需要的事情?！久赓M下載鏈接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams項目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Excalidraw 開源虛擬白板：3 步本地部署的免費手繪風(fēng)格白板
Excalidraw 開源虛擬白板3 步本地部署的免費手繪風(fēng)格白板【免費下載鏈接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams項目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一個免費開源的虛擬白板項目核心是一塊支持手繪風(fēng)格圖形的無限畫布同時內(nèi)置多人實時協(xié)作與端到端加密能力。它常被當(dāng)作流程圖工具、線框圖工具使用也能以 npm 包形式嵌入自己的 React 應(yīng)用。下面按部署—使用—定制的順序帶你從跑通項目到把它用熟。一分鐘看懂 Excalidraw關(guān)注點說明手繪風(fēng)格所有圖形帶輕微抖動的筆觸看起來像紙上速寫適合表達結(jié)構(gòu)而非像素級設(shè)計實時協(xié)作多人通過共享鏈接進入同一畫布修改即時同步遠(yuǎn)端團隊可以同時標(biāo)注和討論加密安全協(xié)作數(shù)據(jù)走端到端加密畫布內(nèi)容在傳輸過程中不以明文暴露工具層面它覆蓋矩形、圓形、菱形、箭頭等基礎(chǔ)圖形支持自由手繪、文字排版、插入圖片導(dǎo)出 PNG、SVG 與 JSON 三種格式。打開應(yīng)用后你會看到如下歡迎界面功能分區(qū)和操作指引都很直觀Excalidraw 安裝從零畫到第一張圖環(huán)境只需要兩樣Node.js 14 以上版本當(dāng)前倉庫 engines 字段實際要求 18 及以上和 yarn。確認(rèn)命令行能正常執(zhí)行node -v之后拉取源碼git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw然后安裝依賴并啟動開發(fā)服務(wù)器yarn install yarn startyarn start實際調(diào)用的是 Vite啟動成功后按終端提示的地址打開瀏覽器默認(rèn) http://localhost:5173歡迎界面出現(xiàn)即代表環(huán)境跑通畫布可以直接開畫。如果你只關(guān)心如何把它嵌進項目倉庫里還準(zhǔn)備了兩份示例examples/with-nextjs演示 Next.js 集成examples/with-script-in-browser演示瀏覽器腳本方式接入。Excalidraw 快捷鍵與在線協(xié)作繪圖技巧單人繪圖時把高頻操作交給鍵盤能明顯提速CtrlZ/CtrlY撤銷重做CtrlD復(fù)制選中元素CtrlG把多個元素編組按住空格拖動可平移畫布。還有一個實用入口Alt/macOS 為 Option/打開Stats for nerds統(tǒng)計面板可以看到當(dāng)前場景的元素數(shù)量、畫布尺寸和存儲占用幫你判斷畫布是否該瘦身。多人協(xié)作時把畫布共享鏈接發(fā)給成員即可開始在線協(xié)作繪圖按需區(qū)分編輯與查看權(quán)限讓只需要看的人不亂動內(nèi)容。討論可以借助評論功能異步進行重要節(jié)點定期保存一份 JSON 存檔方便日后回溯。需要模板復(fù)用時把反復(fù)用到的圖標(biāo)、組件或整塊結(jié)構(gòu)存進個人庫之后一鍵插入省去重復(fù)繪制。配合網(wǎng)格、對齊與分布工具復(fù)雜圖也能保持版面整潔。進階定制與集成主題定制界面的配色和字體變量集中在packages/excalidraw/css/theme.scss改這里就能讓白板界面貼近你的品牌風(fēng)格。React 集成如果你的產(chǎn)品想內(nèi)嵌一塊白板安裝官方包即可npm install react react-dom excalidraw/excalidraw各配置項與事件回調(diào)的說明見官方集成文檔。二次開發(fā)倉庫采用 monorepo 組織核心能力拆在packages/下的 common、element、excalidraw 等獨立包里渲染、交互、導(dǎo)出各自成模塊閱讀某一塊的實現(xiàn)或擴展新功能都有清晰的落點不必通讀整個應(yīng)用。故障排查速查依賴安裝失敗通常是本地依賴緩存或鎖文件損壞。把項目里的依賴緩存目錄和鎖文件刪掉再重新執(zhí)行yarn install網(wǎng)絡(luò)受限時可先確認(rèn) registry 配置是否正常。端口被占用Vite 默認(rèn)端口被占時給啟動命令加--port參數(shù)換一個空閑端口如yarn start --port 5001或先關(guān)掉占用該端口的進程。元素多了之后操作卡頓先用統(tǒng)計面板確認(rèn)元素規(guī)模合并冗余元素、清理無用圖層演示或?qū)忛啎r切到 View modeAltR禁用編輯交互后渲染壓力會明顯下降。導(dǎo)出圖片不夠清晰導(dǎo)出時不要停留在默認(rèn)縮放在導(dǎo)出對話框里調(diào)高分辨率導(dǎo)出倍率再保存細(xì)節(jié)會更完整。它適合誰寫代碼的人可以用它畫系統(tǒng)架構(gòu)圖、API 調(diào)用流程和狀態(tài)流轉(zhuǎn)圖手繪風(fēng)格保留了草圖階段的隨意感需求變動時改動成本很低不用重畫一整張矢量圖。做教學(xué)的人可以把它當(dāng)互動教具把推導(dǎo)過程、時間線或?qū)嶒灹鞒讨苯赢嬙跓o限畫布上學(xué)生通過協(xié)作鏈接實時加入并動手修改抽象概念更容易講清楚。做產(chǎn)品和設(shè)計的人適合用它產(chǎn)出用戶旅程圖和低保真線框圖團隊在共享畫布上邊開會邊改手繪觀感讓討論停留在結(jié)構(gòu)與邏輯層面不會被視覺細(xì)節(jié)拖走。開始動手打開終端按上面的三條命令把項目跑起來你的第一張流程圖可以十分鐘內(nèi)完成。項目完全免費開源在 GitHub 上搜索 excalidraw 即可找到源碼倉庫也歡迎直接提交 PR 參與共建。提示手繪風(fēng)格不是精度上的妥協(xié)而是一種溝通策略——它把注意力從像素對齊拉回到結(jié)構(gòu)和邏輯本身這正是協(xié)作討論最需要的事情?！久赓M下載鏈接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams項目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考