【研发工具】画图小工具介绍

背景介绍

为了更准确的描述清楚业务场景、系统调用关系等等，研发小伙伴们经常会在工作和学习中使用到各种画图工具，比如UML相关工具，比如流程图相关工具。
互联网时代来临，大家追求更轻量、更便捷的工具。
比如ProcessOn以及ExcaliDraw。
两者都是网页打开即可使用，纯傻瓜式操作，因为ProcessOn没有开源，而且也不能本地化部署，所以我们今天重点介绍一下ExcaliDraw。
友情提示：ProcessOn某些功能有收费限制，ExcaliDraw也有收费版本ExcaliDraw++

---

工具介绍

提示：Excalidraw是一款非常轻量的在线白板工具，可以直接在浏览器打开，轻松绘制具有手绘风格的图形。

1. 图形绘制示例

2. 本地部署

2.1 Docker部署

• 拉取项目，并进入到目录

  git clone https://github.com/excalidraw/excalidraw.git
  cd excalidraw/
  

• 修改docker-compose配置文件

  ports为要映射的端口号,此处修改为9006.其他配置根据自己的情况修改

  version: "3.8"
  services:
    excalidraw:
      build:
        context: .
        args:
          - NODE_ENV=development
      container_name: excalidraw
      ports:
        - "9006:80"
      restart: on-failure
      stdin_open: true
      healthcheck:
        disable: true
      environment:
        - NODE_ENV=development
      volumes:
        - ./:/opt/node_app/app:delegated
        - ./package.json:/opt/node_app/package.json
        - ./yarn.lock:/opt/node_app/yarn.lock
        - notused:/opt/node_app/app/node_modules
  volumes:
    notused:
  

• 编译

  docker-compose up --build -d
  

2.2 普通部署

• 环境要求

  • Node.js
  • Yarn
  • Git

• 下拉代码

  git clone https://github.com/excalidraw/excalidraw.git
  

• 安装依赖

  yarn
  

• 启动服务

  yarn start
  

• 开始访问

  现在，您可以打开http://localhost:3000访问本系统了

• 常用命令

  命令	描述
  yarn或yarn install	安装依赖关系
  yarn start	运行项目
  yarn fix	与更漂亮的人一起修改所有文件
  yarn test	运行测试
  yarn test:update	更新测试快照
  yarn test:code	与更漂亮格式的测试
  yarn build	编译项目

2.3 引入第三方库

插件库地址

2.4 编译使用静态代码

• 拉取代码

  git clone https://github.com/excalidraw/excalidraw.git
  

• 修改package.json文件

  // 修改之前
  "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build"
  // 修改之后
  "build:app": "react-scripts build",
  

• 安装依赖

  yarn install
  

• 编译

  yarn build
  

• 编译之后会在项目下生成Build文件夹，该文件夹下就是的生成的静态页面。可以部署在Git Pages上。或者自己的服务器上面

---