Excalidraw 简介及 Docker Compose 部署指南

news2024/11/27 14:45:18

家人们好,我们在工作生活中经常需要画些图,我们往期了已经出过draw-io私有化部署的文章了,今天我要向大家介绍一款名为 Excalidraw 的绘图工具,这款工具了我个人非常喜欢使用,是因为它可以修改成类似于手写体的字体,并且可以直接绘画,这篇文章我将分享如何使用 Docker Compose 轻松部署 Excalidraw。

在线地址: http://excalidraw.xiuji.mynatapp.cc/

更多在线工具请关注或搜索 公众号 修己xj,发送 工具获取

示例图片

示例1:罗刹海市

-2023-06-29-2157.png

示例2:模型图

-2023-06-29-2157.png

Excalidraw 简介

Excalidraw 是一款简单易用的开源绘图工具,可以帮助用户轻松绘制流程图、草图、图表等各种类型的图形。它特别适合于团队协作,支持多用户实时编辑,无需注册或登录即可开始使用。Excalidraw 的主要特点包括:

  • 直观易用:Excalidraw 的界面简洁直观,用户可以轻松绘制各种图形,无论是专业人士还是初学者都能上手。

  • 实时协作:多人可以同时编辑同一份图形,实时查看对方的编辑动态,提高团队协作效率。

  • 支持多种元素:Excalidraw 提供丰富的绘图元素,包括基本的图形、箭头、文本框等,满足用户的不同绘图需求。

  • 跨平台:Excalidraw 可以在各种现代浏览器上运行,并且适配移动设备,方便用户在任何地方使用。

使用 Docker Compose 部署 Excalidraw

为了简化 Excalidraw 的部署过程,我们将使用 Docker Compose 来一键部署 Excalidraw 服务。请确保已经安装了 Docker 和 Docker Compose。接下来,按照以下步骤进行部署:

步骤 1:创建 Docker Compose 配置文件

首先,在服务器上创建一个文件夹,例如 “excalidraw”,然后在该文件夹下创建一个名为 “docker-compose.yml” 的文件,并在其中添加以下内容:

version: '3.3'
services:
  excalidraw:
    image: ddsderek/excalidraw:latest
    container_name: excalidraw
    restart: always
    ports:
      - 3698:80
    volumes:
      - ./data:/app/web

步骤 2:启动 Excalidraw 服务

在 “excalidraw” 文件夹下执行以下命令启动 Excalidraw 服务:

docker-compose up -d

步骤 3:访问 Excalidraw

等待一段时间,当服务启动后,通过浏览器访问服务器的 IP 地址或域名,即可进入 Excalidraw 的界面。
我们可以在素材库下载一些好看的素材

_20230726214435.png

如果想使用别的字体对的话先下载 字体 .woff2 文件,将挂载目录下原来的 MyFonts.woff2文件改名MyFonts.woff2_back,将下载好的字体移到挂载目录下,改名为 MyFonts.woff2,重启服务即可
_20230726214838.png

开始创作吧!

现在,你已经成功部署了 Excalidraw 服务,并可以尽情享受绘图的乐趣。尝试在团队中共享链接,体验实时协作的乐趣,或者将绘制的图形导出为图片进行保存和分享。

Excalidraw 是一个功能强大且方便的绘图工具,帮助你在团队协作中更高效地进行头脑风暴和沟通。如果你喜欢这款工具,不妨在社交媒体上分享它,让更多的人受益。

祝愿你在使用 Excalidraw 的过程中有愉快的体验!谢谢阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/793742.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IDEA Groovy 脚本一键生成实体类<mybatisplus>

配置数据库(mysql) 一键生成(右键点击table) 配置自己的groovy脚本 import com.intellij.database.model.DasTable import com.intellij.database.util.Case import com.intellij.database.util.DasUtil import com.intellij.data…

Vue过度与动画

Test.vue:元素外面包一层transition&#xff0c;展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果&#xff0c;appear上来默认展示动画效果 <template><div><button click"isShow !isShow">显示/隐藏</butto…

消息队列- 背景知识

这里写目录标题 前言消息队列消息队列的作用常见的消息队列消息队列的核心概念BrokerServer核心概念消息队列的核心API消息队列与消费者之间的工作模式交换机的类型消息队列的持久化 总结 前言 消息队列,不知道大家是否陌生,如果说消息队列感到陌生的话, 有一个模型肯定大家都…

【驱动开发day4作业】

头文件代码 #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct{unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned int IDR;unsigned int ODR; }gpio_t; #define PHY_LED1_ADDR 0X50006000 #define PHY_LED2_ADDR 0X50007000 #…

springboot 自定义注解 ,实现接口限流(计数器限流)【强行喂饭版】

思路&#xff1a;通过AOP拦截注解标记的方法&#xff0c;在Redis中维护一个计数器来记录接口访问的频率&#xff0c; 并根据限流策略来判断是否允许继续处理请求。 另一篇&#xff1a;springboot 自定义注解 &#xff0c;aop切面Around&#xff1b; 为接口实现日志插入【强行喂…

LeetCode第 N 个泰波那契数 (认识动态规划)

认识动态规划 编写代码代码空间优化 链接: 第 N 个泰波那契数 编写代码 class Solution { public:int tribonacci(int n) {if(n 0){return 0;}else{if(n 1 || n 2)return 1;}vector<int> dp(n 1);dp[0] 0;dp[1] 1;dp[2] 1;for(int i 3;i < n;i){dp[i] dp[i-3]…

多巴胺色彩青春来袭!体验全能轻薄本华硕无畏Pro15 2023

这个烈日炎炎的夏季&#xff0c;还是来临了&#xff01; 40℃的高温&#xff0c;恍然才知道这个地球真的是在“发光发热”&#xff0c;对于莘莘学子来说&#xff0c;青春的炙热与憧憬也在即将告别的毕业季中变得热烈。回首停留在校园中的一幕幕&#xff0c;总有一些记忆&#…

javascript 7种继承-- new操作符的原理以及实现

new 运算符 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 MDN参考资料&#xff1a;点击 语法 new constructor[([arguments])]参数 constructor 一个指定对象实例的类型的类或函数。 arguments 一个用于被 constructor 调用的参数列表。 …

JAVA基础-基于多线程的聊天程序

引言 什么是程序 &#xff1f; 一个程序可以有多个进程 。程序是一段静态的代码&#xff0c;它是应用程序执行的蓝本。 什么是进程 &#xff1f; 一个进程可以有多线程 进程是指一种正在运行的程序&#xff0c;有自己的地址空间。 作为蓝本的程序可以被多次加载到系统的不同内…

Visual Studio Code配置免密远程开发环境

VSCode安装插件 要是想连接远程服务器&#xff0c;先在本地安装下面的插件&#xff08;红色圈起来的需要装&#xff09; 连接远程服务器 配置服务器信息 保存然后再连接&#xff0c;输入密码&#xff0c;如果能连接上说明是没问题的&#xff0c;下面开始免密登录 免密配置 客…

【多线程带来的的风险-线程安全的问题的简单实例-线程不安全的原因】

文章目录 前言线程不安全的5大原因1. 抢占式执行和随机调度2. 多个线程同时修改一个变量(共享数据&#xff09;3. 修改操作不是原子性的4. 内存可见性5. 指令重排序 前言 什么是线程安全&#xff1f; 简单来说&#xff0c;如果多线程环境下代码运行的结果是符合我们预期的&am…

7月《中国数据库行业分析报告》已发布,聚焦图数据库、首发【全球图数据库产业图谱】

为了帮助大家及时了解中国数据库行业发展现状、梳理当前数据库市场环境和产品生态等情况&#xff0c;从2022年4月起&#xff0c;墨天轮社区行业分析研究团队出品将持续每月为大家推出最新《中国数据库行业分析报告》&#xff0c;持续传播数据技术知识、努力促进技术创新与行业生…

Yunfly 一款高效、性能优异的node.js企业级web框架

介绍 Yunfly 一款高性能 Node.js WEB 框架, 使用 Typescript 构建我们的应用。 使用 Koa2 做为 HTTP 底层框架, 使用 routing-controllers 、 typedi 来高效构建我们的 Node 应用。 Yunfly 在 Koa 框架之上提升了一个抽象级别, 但仍然支持 Koa 中间件。在此基础之上, 提供了一…

不同薪资阶段的Android 对“binder 的理解”

转载地址&#xff1a;https://zhuanlan.zhihu.com/p/420660511 面试官提了一个问题&#xff0c;我们来看看三位应聘者的表现如何吧 自认为无所不知&#xff0c;水平已达应用开发天花板&#xff0c;目前月薪 10k 面试官️&#xff1a;谈谈你对 binder 的理解 A&#xff1a;bind…

5-linux中的定时任务调度

定时任务调度 crond 任务调度概述基本语法常用选项快速入门应用实例crond 相关指令 at 定时任务基本介绍at 命令格式at 命令选项at 时间的定义其他指令 crond 任务调度 crontab 进行 定时任务调度 概述 任务调度&#xff1a;是指系统在某个时间执行的特定的命令或程序 任务…

CISP-PTE和CISP-PTS哪个更适合?

CISP-PTE和CISP-PTS是两个与网络安全渗透测试相关的认证&#xff0c;虽然它们有相似之处&#xff0c;但也存在一些区别。 CISP-PTE&#xff1a;证书持有人员主要从事信息安全技术领域网站渗透测试工作&#xff0c;具有规划测试方案、编写项目测试计划、编写测试用例、测试报告…

【C++ 异步任务 】`std::future`

1.基础知识 std::future 是 C 标准库中的一个类模板&#xff0c;定义在 <future> 头文件中。它提供了一种异步操作的机制&#xff0c;用于获取异步任务的结果。 std::future 类模板表示一个未来可能会获得的值。你可以将一个异步任务交给 std::future 来管理&#xff0…

苍穹外卖-day08 java实现 微信支付

苍穹外卖-day08 课程内容 导入地址簿功能代码用户下单订单支付 功能实现&#xff1a;用户下单、订单支付 用户下单效果图&#xff1a; 订单支付效果图&#xff1a; 1. 导入地址簿功能代码 1.1 需求分析和设计 1.1.1 产品原型 地址簿&#xff0c;指的是消费者用户的地址信息&…

Django学习笔记-视图(views)的使用

Django中可以使用views进行管理&#xff0c;类似于WPF的MVVM的ViewModel层&#xff0c;也相当于MVC架构的模Controller层。 一、基于函数的视图FBV&#xff08;Function-Based View&#xff09; 通过定义一个函数&#xff0c;包含HttpRequest对象作为参数&#xff0c;用来接受…

运维高级--shell脚本完成分库分表

为什么要进行分库分表 随着系统的运行&#xff0c;存储的数据量会越来越大&#xff0c;系统的访问的压力也会随之增大&#xff0c;如果一个库中的表数据超过了一定的数量&#xff0c;比如说MySQL中的表数据达到千万级别&#xff0c;就需要考虑进行分库分表&#xff1b; 其…