百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

开源可视化白板工具,兼顾思维导图、流程图,NAS一键部署Drawnix

wptr33 2025-05-28 20:46 23 浏览

开源工具千千万,这次再来分享一个非常不错的实用工具:Drawnix。

Drawnix 的定位是一个开箱即用、开源、免费的白板工具(SaaS),一体化白板,包含思维导图、流程图、自由画等。目前也在稳定更新中。

来自项目作者:

创意如同凤凰,浴火方能重生,而 Drawnix 要做技术与创意之火的守护者。

另外大家如果有什么想法建议,可以到项目提出Issues。GHUB搜索plait-board/drawnix即可。

项目功能特点

  • 免费 + 开源
  • 思维导图、流程图
  • 画笔
  • 插入图片
  • 基于插件机制
  • 导出为 PNG, JSON(.drawnix)
  • 自动保存(浏览器缓存)
  • 编辑特性:撤销、重做、复制、粘贴等
  • 无限画布:缩放、滚动
  • 主题模式
  • 移动设备适配
  • 支持 mermaid 语法转流程图
  • 支持 markdown 文本转思维导图(新支持 )

布置流程

这次跟过去不太一样,因为作者并没有提供官方镜像,但好在项目提供了Dockerfile文件,我们可以自构建一个。

我去Docker hub简单看了一眼,还是有几位打包上传了的,大概都是自用吧~我也顺手打包上传了一份,大家可以用我的这个。如果想自行打包,流程我就放在文末,到时候再去看。

以威联通NAS为例,打开Container Station,我们通过Docker Compose的方式进行部署。

部署代码如下,注意格式对齐!

version: '3' # 最新版docker compose删除该行


services:
  drawnix:
    image: ydxian/drawnix:latest
    container_name: drawnix
    ports:
      - "8200:80" # 冒号左侧可自行修改
    restart: always

参照图片如下。

按照上文部署,浏览器输入NAS_IP:8200即可访问服务。

功能展示

初始界面如下,功能基本所见即所得。

左上角功能菜单:打开工程文件、保存工程文件(.drawnix)、导出画布为图片、清除画布内容,以及跳转至原项目界面。旁边两个按键为大家熟悉的操作回撤功能。

中部功能栏,从左至右:

手掌:可将画布内容拖动,进行移位。

鼠标:单机选中部分,长按框选整体。框选/选中后长按旋转图标,可通过拖动鼠标实现360度角度转换;选中黑色圆圈,可调整画笔/字体或其他内容的颜色。

细心的朋友可能注意到左上角功能菜单还多出了复制/删除选项。

思维导图:选中后点击幕布,就会生成一个框,点击框便可设置字体、外框以及填充颜色类型。

剩下的几个:文字输入、画笔、箭头指向、几何图形。

支持插入图片。

支持Mermaid 以及Markdown语法,编辑起来会更加的方便。尤其是Markdown语法,写文列大纲简直无敌。

右上和右下还具备调整尺寸以及画布风格的功能。

打包并上传镜像

先说通用版本。

打开任意的SSH工具,链接你的NAS或者服务器。

# 进入任意目录,还是威联通NAS为例,目录各位自己定
cd /share/download


# 把 drawnix 项目克隆到当前目录下。
git clone https://github.com/plait-board/drawnix.git


# 进入 drawnix 
cd drawnix


# 根据项目页的Dockerfile构建镜像,其实端口之类的都可以改,但是我懒就用默认80了
docker build -t ydxian/drawnix:latest .


# 也可以重新打标签
docker tag ydxian/drawnix yourusername/drawnix:latest




# 登陆到Docker Hub
docker login
# 然后输入你的账户和密码,账户貌似是不区分大小写,年代久远都忘了


# 推送镜像到 Docker Hub
docker push yourusername/drawnix:latest

一套操作下来,后续就可以分享给别人用了,在Docker商店也能搜到你的镜像。

接下来是威联通,图形化操作可能还是更方便些~

我们执行到打包成镜像后,Container Station会自动检测到镜像。先点击左侧「存储库存」,勾选「身份验证」,也是输入账户密码并验证即可。

接着点击「镜像」,找到需要推送的项目。点击「推送到存储库」

编辑你的镜像标签,点击推送即可。

最后

项目不错,未来可期!大家可以去点点star顶顶作者~

感谢观看,本文完。

#NAS##白板#

相关推荐

oracle数据导入导出_oracle数据导入导出工具

关于oracle的数据导入导出,这个功能的使用场景,一般是换服务环境,把原先的oracle数据导入到另外一台oracle数据库,或者导出备份使用。只不过oracle的导入导出命令不好记忆,稍稍有点复杂...

继续学习Python中的while true/break语句

上次讲到if语句的用法,大家在微信公众号问了小编很多问题,那么小编在这几种解决一下,1.else和elif是子模块,不能单独使用2.一个if语句中可以包括很多个elif语句,但结尾只能有一个...

python continue和break的区别_python中break语句和continue语句的区别

python中循环语句经常会使用continue和break,那么这2者的区别是?continue是跳出本次循环,进行下一次循环;break是跳出整个循环;例如:...

简单学Python——关键字6——break和continue

Python退出循环,有break语句和continue语句两种实现方式。break语句和continue语句的区别:break语句作用是终止循环。continue语句作用是跳出本轮循环,继续下一次循...

2-1,0基础学Python之 break退出循环、 continue继续循环 多重循

用for循环或者while循环时,如果要在循环体内直接退出循环,可以使用break语句。比如计算1至100的整数和,我们用while来实现:sum=0x=1whileTrue...

Python 中 break 和 continue 傻傻分不清

大家好啊,我是大田。...

python中的流程控制语句:continue、break 和 return使用方法

Python中,continue、break和return是控制流程的关键语句,用于在循环或函数中提前退出或跳过某些操作。它们的用途和区别如下:1.continue(跳过当前循环的剩余部分,进...

L017:continue和break - 教程文案

continue和break在Python中,continue和break是用于控制循环(如for和while)执行流程的关键字,它们的作用如下:1.continue:跳过当前迭代,...

作为前端开发者,你都经历过怎样的面试?

已经裸辞1个月了,最近开始投简历找工作,遇到各种各样的面试,今天分享一下。其实在职的时候也做过面试官,面试官时,感觉自己问的问题很难区分候选人的能力,最好的办法就是看看候选人的github上的代码仓库...

面试被问 const 是否不可变?这样回答才显功底

作为前端开发者,我在学习ES6特性时,总被const的"善变"搞得一头雾水——为什么用const声明的数组还能push元素?为什么基本类型赋值就会报错?直到翻遍MDN文档、对着内存图反...

2023金九银十必看前端面试题!2w字精品!

导文2023金九银十必看前端面试题!金九银十黄金期来了想要跳槽的小伙伴快来看啊CSS1.请解释CSS的盒模型是什么,并描述其组成部分。...

前端面试总结_前端面试题整理

记得当时大二的时候,看到实验室的学长学姐忙于各种春招,有些收获了大厂offer,有些还在苦苦面试,其实那时候的心里还蛮忐忑的,不知道自己大三的时候会是什么样的一个水平,所以从19年的寒假放完,大二下学...

由浅入深,66条JavaScript面试知识点(七)

作者:JakeZhang转发链接:https://juejin.im/post/5ef8377f6fb9a07e693a6061目录...

2024前端面试真题之—VUE篇_前端面试题vue2020及答案

添加图片注释,不超过140字(可选)...

今年最常见的前端面试题,你会做几道?

在面试或招聘前端开发人员时,期望、现实和需求之间总是存在着巨大差距。面试其实是一个交流想法的地方,挑战人们的思考方式,并客观地分析给定的问题。可以通过面试了解人们如何做出决策,了解一个人对技术和解决问...