一体化白板！一款开源的白板工具！
<p>在日常工作中，我们常常需要使用到白板工具，用于作图，生成思维导图、流程图等来辅助工作。</p><p>今天，给大家介绍一款开源的白板工具，支持多种类型图！</p>
<blockquote>
<p>关注微信公众号：【Java陈序员】，获取<strong>开源项目分享、AI副业分享、超200本经典计算机电子书籍等。</strong></p>
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<p><code>drawnix</code> —— 一款开源的、基于 React 实现的白板工具（SaaS），实现一体化白板功能，包含自由画、思维导图、流程图等。</p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/drawnix/img-20250507154853.png"></p>
<p><strong>功能特色</strong>：</p>
<ul>
<li>白板功能：支持无限画布，支持缩放、滚动操作，提供画笔进行自由绘画</li>
<li>编辑特性：提供撤销、重做、复制、粘贴等常见编辑功能</li>
<li>导入导出：支持导入导出功能，还支持导出画布为图片</li>
<li>自动保存：实时自动将画布内容保存到浏览器缓存中，防止数据丢失</li>
<li>思维导图和流程图：支持绘制思维导图和流程图，满足不同的可视化需求</li>
<li>主题模式：提供多种画布主题模式</li>
<li>插件功能：提供 Mermaid 语法转流程图和 Markdown 文本转思维导图的插件功能</li>
</ul>
<h2 id="工具截图">工具截图</h2>
<ul>
<li><strong>自由画布</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/drawnix/img-20250507160956.png"></p>
<ul>
<li><strong>流程图</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/drawnix/img-20250507160815.png"></p>
<ul>
<li><strong>思维导图</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/drawnix/img-20250507162533.png"></p>
<ul>
<li><strong>Mermaid 语法转流程图</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/drawnix/img-20250507162614.png"></p>
<ul>
<li><strong>Markdown 文本转思维导图</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/drawnix/img-20250507162639.png"></p>
<ul>
<li><strong>其他主题模式</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/drawnix/img-20250507162717.png"></p>
<h2 id="本地开发">本地开发</h2>
<blockquote>
<p>依赖 Node.js 环境。</p>
</blockquote>
<p>1、下载源码</p>
<pre><code class="language-bash">git clone https://github.com/plait-board/drawnix.git
</code></pre>
<p>2、进入项目目录并安装依赖</p>
<pre><code class="language-bash">cd drawnix
npm install
</code></pre>
<p>3、启动服务</p>
<pre><code class="language-bash">npm run start
</code></pre>
<p>4、服务启动成功后，浏览器访问</p>
<pre><code class="language-bash">http://localhost:7200/
</code></pre>
<p>5、打包部署</p>
<pre><code class="language-bash">npm run build
</code></pre>
<p>将打包好的 <code>dist</code> 文件夹上传到服务器，并使用 Nginx 进行部署。</p>
<p>可以说，<code>drawnix</code> 是一个功能丰富、开源免费的白板工具，具有良好的可扩展性和用户体验。快去试试吧~</p>
<pre><code class="language-bash">项目地址：https://github.com/plait-board/drawnix
</code></pre>
<h2 id="最后">最后</h2>
<p>推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：</p>
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
<p>或者访问网站，进行在线浏览：</p>
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<p><img src="https://chen-coding.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240629100336.png"></p>
<p><strong>我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目</strong>。</p>
<p><strong>但是任何人在群里打任何广告，都会被 T 掉</strong>。</p>
<p><strong>如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群</strong>：</p>
<p><strong>关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群</strong>。</p>
<blockquote>
<p>大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！</p>
</blockquote>
<hr><br><br>
来源：https://www.cnblogs.com/codechen8848/p/18871689
頁:
[1]