开源可视化白板工具,兼顾思维导图、流程图,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顶顶作者~
感谢观看,本文完。
相关推荐
- 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字(可选)...
- 今年最常见的前端面试题,你会做几道?
-
在面试或招聘前端开发人员时,期望、现实和需求之间总是存在着巨大差距。面试其实是一个交流想法的地方,挑战人们的思考方式,并客观地分析给定的问题。可以通过面试了解人们如何做出决策,了解一个人对技术和解决问...
- 一周热门
- 最近发表
-
- oracle数据导入导出_oracle数据导入导出工具
- 继续学习Python中的while true/break语句
- python continue和break的区别_python中break语句和continue语句的区别
- 简单学Python——关键字6——break和continue
- 2-1,0基础学Python之 break退出循环、 continue继续循环 多重循
- Python 中 break 和 continue 傻傻分不清
- python中的流程控制语句:continue、break 和 return使用方法
- L017:continue和break - 教程文案
- 作为前端开发者,你都经历过怎样的面试?
- 面试被问 const 是否不可变?这样回答才显功底
- 标签列表
-
- git pull (33)
- git fetch (35)
- mysql insert (35)
- mysql distinct (37)
- concat_ws (36)
- java continue (36)
- jenkins官网 (37)
- mysql 子查询 (37)
- python元组 (33)
- mybatis 分页 (35)
- vba split (37)
- redis watch (34)
- python list sort (37)
- nvarchar2 (34)
- mysql not null (36)
- hmset (35)
- python telnet (35)
- python readlines() 方法 (36)
- munmap (35)
- docker network create (35)
- redis 集合 (37)
- python sftp (37)
- setpriority (34)
- c语言 switch (34)
- git commit (34)
