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