Excalidraw 開源虛擬白板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)開源的虛擬白板項(xiàng)目核心是一塊支持手繪風(fēng)格圖形的無限畫布同時(shí)內(nèi)置多人實(shí)時(shí)協(xié)作與端到端加密能力。它常被當(dāng)作流程圖工具、線框圖工具使用也能以 npm 包形式嵌入自己的 React 應(yīng)用。下面按部署—使用—定制的順序帶你從跑通項(xiàng)目到把它用熟。一分鐘看懂 Excalidraw關(guān)注點(diǎn)說明手繪風(fēng)格所有圖形帶輕微抖動的筆觸看起來像紙上速寫適合表達(dá)結(jié)構(gòu)而非像素級設(shè)計(jì)實(shí)時(shí)協(xié)作多人通過共享鏈接進(jìn)入同一畫布修改即時(shí)同步遠(yuǎn)端團(tuán)隊(duì)可以同時(shí)標(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 字段實(shí)際要求 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實(shí)際調(diào)用的是 Vite啟動成功后按終端提示的地址打開瀏覽器默認(rèn) http://localhost:5173歡迎界面出現(xiàn)即代表環(huán)境跑通畫布可以直接開畫。如果你只關(guān)心如何把它嵌進(jìn)項(xiàng)目倉庫里還準(zhǔn)備了兩份示例examples/with-nextjs演示 Next.js 集成examples/with-script-in-browser演示瀏覽器腳本方式接入。Excalidraw 快捷鍵與在線協(xié)作繪圖技巧單人繪圖時(shí)把高頻操作交給鍵盤能明顯提速CtrlZ/CtrlY撤銷重做CtrlD復(fù)制選中元素CtrlG把多個(gè)元素編組按住空格拖動可平移畫布。還有一個(gè)實(shí)用入口Alt/macOS 為 Option/打開Stats for nerds統(tǒng)計(jì)面板可以看到當(dāng)前場景的元素?cái)?shù)量、畫布尺寸和存儲占用幫你判斷畫布是否該瘦身。多人協(xié)作時(shí)把畫布共享鏈接發(fā)給成員即可開始在線協(xié)作繪圖按需區(qū)分編輯與查看權(quán)限讓只需要看的人不亂動內(nèi)容。討論可以借助評論功能異步進(jìn)行重要節(jié)點(diǎn)定期保存一份 JSON 存檔方便日后回溯。需要模板復(fù)用時(shí)把反復(fù)用到的圖標(biāo)、組件或整塊結(jié)構(gòu)存進(jìn)個(gè)人庫之后一鍵插入省去重復(fù)繪制。配合網(wǎng)格、對齊與分布工具復(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)的說明見官方集成文檔。二次開發(fā)倉庫采用 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í)給啟動命令加--port參數(shù)換一個(gè)空閑端口如yarn start --port 5001或先關(guān)掉占用該端口的進(jìn)程。元素多了之后操作卡頓先用統(tǒng)計(jì)面板確認(rèn)元素規(guī)模合并冗余元素、清理無用圖層演示或?qū)忛啎r(shí)切到 View modeAltR禁用編輯交互后渲染壓力會明顯下降。導(dǎo)出圖片不夠清晰導(dǎo)出時(shí)不要停留在默認(rèn)縮放在導(dǎo)出對話框里調(diào)高分辨率導(dǎo)出倍率再保存細(xì)節(jié)會更完整。它適合誰寫代碼的人可以用它畫系統(tǒng)架構(gòu)圖、API 調(diào)用流程和狀態(tài)流轉(zhuǎn)圖手繪風(fēng)格保留了草圖階段的隨意感需求變動時(shí)改動成本很低不用重畫一整張矢量圖。做教學(xué)的人可以把它當(dāng)互動教具把推導(dǎo)過程、時(shí)間線或?qū)嶒?yàn)流程直接畫在無限畫布上學(xué)生通過協(xié)作鏈接實(shí)時(shí)加入并動手修改抽象概念更容易講清楚。做產(chǎn)品和設(shè)計(jì)的人適合用它產(chǎn)出用戶旅程圖和低保真線框圖團(tuán)隊(duì)在共享畫布上邊開會邊改手繪觀感讓討論停留在結(jié)構(gòu)與邏輯層面不會被視覺細(xì)節(jié)拖走。開始動手打開終端按上面的三條命令把項(xiàng)目跑起來你的第一張流程圖可以十分鐘內(nèi)完成。項(xiàng)目完全免費(fèi)開源在 GitHub 上搜索 excalidraw 即可找到源碼倉庫也歡迎直接提交 PR 參與共建。提示手繪風(fēng)格不是精度上的妥協(xié)而是一種溝通策略——它把注意力從像素對齊拉回到結(jié)構(gòu)和邏輯本身這正是協(xié)作討論最需要的事情。【免費(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），僅供參考