Drawnix 完整指南免费开源一体化白板思维导图、流程图、自由手绘一站搞定【免费下载链接】drawnix开源白板工具SaaS一体化白板包含思维导图、流程图、自由画等。All in one open-source whiteboard tool with mind, flowchart, freehand and etc.项目地址: https://gitcode.com/GitHub_Trending/dr/drawnix第一次打开 Drawnix 你会看到什么一块没有边界的画布——画思维导图、拖拽流程图、随手涂鸦、贴图片这些事过去要装三四款工具现在一个页面全装下了。它是免费开源的MIT 协议数据存在你自己的浏览器里还能一键导出 PNG/SVG 或存成 .drawnix 文件。读完这篇文章你能从装上它开始把常用功能都用顺。三条命令白板就跑起来了它没有注册、没有账号、没有付费墙。本地跑起来只需要git clone https://gitcode.com/GitHub_Trending/dr/drawnix然后进目录执行 npm install再执行 npm run start浏览器打开本地地址就能开始画。不想折腾环境的话仓库里也提供了 Dockerfile可以直接 docker pull 官方镜像。它其实是一个 Nx monorepoapps/web 是最小化应用入口packages/drawnix 是白板本体packages/react-board 负责 React 视图层packages/react-text 管文本渲染。理解这个分层后面看源码就轻松了。先想清楚结构还是先画起来头脑风暴、拆解项目、整理知识打开思维导图工具就对了。左侧工具栏切到 mind 指针点一下画布生成中心主题按 Tab 加同级、Enter 加子级层级关系用连线自动管理右键菜单里就是增删改查的入口。这套逻辑在 packages/drawnix/src/plugins/with-mind-extend.tsx 里扩展配合 packages/drawnix/src/components/menu/ 的上下文菜单实现节点操作。流程图这边更省事的一点你可以不拖。仓库支持把 Mermaid 代码直接粘进对话框预览后一键插入画布变成可继续编辑的图形反过来随手写的一份 Markdown 大纲也能转成思维导图。两个转换入口在 packages/drawnix/src/components/ttd-dialog/ 下形状库则由 packages/drawnix/src/components/shape-picker.tsx 提供矩形、菱形、平行四边形、流程框都有。先写文档再画图或先画草图再补文档两种工作流它都能接。这支笔画得比你想象的好看选到画笔工具直接落笔线条有专门的平滑算法处理不会抖成锯末再配合笔触生成器可以拿到接近马克笔的质感橡皮擦也是一等公民。预设笔刷在 packages/drawnix/src/plugins/freehand/presets.ts 里维护平滑逻辑在 smoother.ts。还有个容易忽略的小功能激光笔。演示模式下用它指重点比鼠标指针清楚得多实现在 packages/drawnix/src/utils/laser-pointer.ts。存到哪儿、导成什么格式这块不用操心太多因为它把不丢东西做成了默认行为你画的每一笔都会自动落到浏览器本地缓存localforage关掉页面重开还在。想留正式备份时菜单里可以另存为 .drawnix 文件——本质是带版本号的 JSON包含元素、视口和主题序列化逻辑在 packages/drawnix/src/data/json.ts。导出图片则有三选一PNG、SVG还能直接复制到剪贴板支持透明背景。导出入口的菜单代码在 packages/drawnix/src/components/toolbar/app-toolbar/app-menu-items.tsx。顺手就能用起来的细节一些小事攒在一起体验差距就出来了明暗主题之外还有多彩、柔和、复古、星空等配色随时切换不用动布局界面支持中文、英文、俄文、阿拉伯文、越南文五种语言切换在工具栏菜单里移动端做了适配手机上打开也能正常画撤销、重做、复制、粘贴、激光笔、链接、emoji、图片拖拽进画布这些基础操作全部齐活这些零碎能力的代码散落在 packages/drawnix/src/plugins/ 目录每个能力基本对应一个 with-*.ts 插件文件找起来不费劲。想自己加功能架构是为扩展铺的路Drawnix 本体是插件式拼装出来的思维导图、流程图、手绘、文本、图片、快捷键、工具状态同步……每一块都是一个独立插件在 packages/drawnix/src/drawnix.tsx 里逐个叠加到画板上。插件的公共底座在 packages/drawnix/src/plugins/with-common.tsx。更关键的是它的底层——Plait 画图框架。Drawnix 的定位是开箱即用的产品而 Plait 提供了框架能力支持 Angular 和 React 多种 UI 框架接入。如果你的需求不是用白板而是在自己的知识库里嵌一块白板直接基于 Plait 起步比改 Drawnix 更合适如果只是想加个功能照着现有插件写一个 with-* 模块就行。贡献流程可以看仓库根目录的 CONTRIBUTING.md。工具好不好最后还得自己画两笔才知道。装上它从一张思维导图开始。【免费下载链接】drawnix开源白板工具SaaS一体化白板包含思维导图、流程图、自由画等。All in one open-source whiteboard tool with mind, flowchart, freehand and etc.项目地址: https://gitcode.com/GitHub_Trending/dr/drawnix创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考