《玩转Docker》[应用篇5]：Docker安装部署Excalidraw-在线画图工具-优快云博客

本文链接：https://blog.youkuaiyun.com/xyz030556/article/details/151836244

一、Excalidraw是什么？

Excalidraw 是一款开源的手绘风格在线白板工具，支持多人实时协作，提供无限画布、丰富的图形元素和端到端加密分享功能，适合快速绘制流程图、技术架构图和创意草图，并可导出为多种格式或嵌入其他平台

二、Excalidraw有哪些功能？

2.1、主要功能特点

提供多种绘图元素：提供了丰富的基本绘图元素，如矩形、圆形、线条、箭头、文本框等，还支持自由绘制，以及图像嵌入，可满足多种绘图需求。
实时协作功能：多人可以同时在同一画布上进行编辑，所有参与者都能看到其他人的实时操作，适合团队合作、虚拟会议、头脑风暴等场景。
无限画布：用户可以在画布上自由地放置图形和文本，不受边界的限制，方便进行大规模绘制。
导出和分享功能：完成的图形可以轻松导出为 PNG、SVG、EXCALIDRAW 格式（.excalidraw），还支持直接通过 URL 分享作品，可设置查看或编辑权限。
支持多个平台：作为基于浏览器的应用，支持各种设备和操作系统，只要能访问互联网的设备都能使用，也支持桌面和移动端浏览器。
手绘风格：绘图风格具有独特的手绘感，线条和元素带有一定的 “粗糙” 感，模拟真实的手绘效果，让图形更具创意和自然感。

2.2、功能特点应用场景

流程图和工作流图：可用于展示工作过程、项目进展、系统架构等
原型设计和界面布局：设计应用或网页的原型，创建页面布局图
头脑风暴和思维导图：帮助团队快速捕捉创意，组织思维
教育和教学：用于教学、学习和讲解复杂的概念或结构
设计和创意讨论：设计团队可以用来讨论产品设计、创意构思等

2.3、界面示例效果图

支持插件扩展功能：

Excalidraw Libraries

2.4、在线演示

https://excalidraw.com

三、Docker安装部署

3.1、通过Docker安装部署

1、创建本地目录

 mkdir  ~/docker/excalidraw

2、创建并启动Excalidraw容器

1、使用Docker Compose 配置文件

 version: '3'
 services:
   excalidraw:
     image: excalidraw/excalidraw:latest
     container_name: excalidraw
     restart: unless-stopped
     volumes:
         - ~/docker/excalidraw:/app/web
     ports:
         - 3080:80

参数说明：

–name excalidraw：本例容器名称为excalidraw，大家可以自己起名
ports 3080:80：端口进行映射，将本地 3080端口映射到容器内部的 80 端口

3.2、飞牛Docker配置

1、端口号

2、本地存储映射

四、使用

4.1、通过浏览器访问

1、通过浏览器直接访问 localhost:3080 端口的 Excalidraw 服务

2、如果语言没有自动切换为中文，可以点击主界面菜单进行修改

主要区域：

1）工具栏（左侧）：这里有绘制图形的基本工具，比如矩形、圆形、箭头、文字等。你还可以切换“手绘模式”和“规整模式”，让线条更流畅或更标准 2）属性面板（顶部）：选中图形后，这里会显示它的属性，你可以调整颜色、线条粗细、填充方式、字体等 3）画布区域：你自由发挥的舞台！鼠标滚轮缩放，按住空格键拖拽平移

使用快捷键画图：

R：矩形 (Rectangle)
O：圆形 (Oval)
A：箭头 (Arrow)
T：文本 (Text)
L：直线 (Line)

使用Shift+Alt快捷键：

想画正方形或正圆？在拖拽矩形或圆形时，按住 Shift 键！
想画水平、垂直或45度斜线？在拖拽直线或箭头时，按住 Shift 键！
想从中心点开始绘制图形？在拖拽时，按住 Alt 键！

3、顶部属性使用：

1、文字

按快捷键T或8

2、画笔

按快捷键7或P

3、图片

4.2、其他技巧

1、安装VS Code 插件

VS Code 插件：搜索 “Excalidraw” 即可安装

2、组合快捷键

组合/解散组：选中多个图形后，右键选择“Group selected elements” (或按 Ctrl/Cmd + G)，它们就变成了一个整体，方便移动和编辑。再次右键选择“Ungroup elements”即可解散图层顺序：选中图形后，使用 Ctrl/Cmd + [ (下移一层) 和 Ctrl/Cmd + ] (上移一层) 调整图层顺序