Excalidraw-画图工具

---

前言

今天推荐一款画图神器 Excalidraw ，之前画图我基本上都是用 processon 或者 Axure 等工具进行画图，直到我接触了 Excalidraw，真的是一发不可自拔，因为 Excalidraw 绘制的图片简直不要太好看了。

---

一、简介

Excalidraw 它是近两年新起的一款画图工具，基于 Web 的开源矢量图形编辑工具，主要包含白板、流程图的能力，简单好用。旨在帮助用户快速创建简单且美观的图形。它提供了一个简洁的绘图界面，用户可以使用鼠标或触摸屏在画布上绘制各种形状，如线条、矩形、圆形等。同时，Excalidraw 还支持多种颜色和线条样式，使用户能够自由地定制图形的外观。

Excalidraw 的特点是其简单易用和实时协作功能。用户只需打开网页，即可开始绘制图形，无需下载或安装任何软件。此外，Excalidraw 还支持多人同时编辑同一画布，用户可以邀请其他人加入协作，实时查看和编辑彼此的绘图内容。这使得 Excalidraw 成为团队协作和远程工作的理想选择。

可以直接在游览器上打开该网址：https://excalidraw.com/ 进行作图

Excalidraw 不仅能在游览器上进行画图，也可以在 Obsidian 中进行使用，只需要下载对应的插件即可。

PS：关于如何在 Obsidian 中使用我是不太清楚的，因为我没有用过 Obsidian，以下内容是针对如何在游览器上使用的教程

---

二、功能介绍

其实这款画图工具绘图的方式和其它的画图工具类似，稍微使用下就能掌握了

在工具栏中可以选择所需绘制的图形或者是其它一些功能，属性栏就是改变所选中图形或文字的样式

素材库是存放素材的地方，可通过点击 游览素材库 就能看到别人提供的素材

点击 Add to Excalidraw 就会添加到 Excalidraw 素材库 中，你可以将常用的素材放到 个人素材库 中方便快速使用

可以将制作好的图片保存或者导出

同时还能进行团队协作

---

三、设置字体

不过在官网上进行画图有一个问题，就是中文没有与之匹配的字体，例如：

当你的设计图上如果使用了中文，就会让人觉得很不搭，所以就会想要给中文字也设置一个字体，像这样：

首先需要先下载字体，可以在网上找到很多类型的字体，这里我提供一个我目前使用的字体：

---------------------------------------------
链接：百度网盘
提取码：1ljc
---------------------------------------------

因为 Excalidraw 是开源的，可以直接在 GitHub 上下载该项目的源代码，然后再修改源代码设置中文字体，本地启动即可

基本步骤：

GitHub：https://gitcode.com/excalidraw/excalidraw/tree/master

可以直接用 git 命令将源代码克隆到本地，在一个空白文件夹下打开 git 窗口，输入以下命令进行克隆

git init
git clone https://gitcode.com/excalidraw/excalidraw.git

用 vs-code 打开项目

在 public 目录下创建一个fonts 的文件夹用于管理自己的字体，将下载好的字体放入到该文件夹下

（一）注册字体

编辑 public/fonts.css 文件，尾部追加内容：

@font-face {
  font-family: "Muyao";
  src: url("fonts/Muyao-Softbrush.ttf");
  font-display: swap;
  font-weight: 700;
}

再编辑 packages/excalidraw/index-node.ts 文件，添加以下代码注册字体

registerFont("./public/fonts/Muyao-Softbrush.ttf", { family: "Muyao" });

（二）预加载字体资源

编辑 excalidraw-app/index.html 文件，添加以下代码实现字体的预加载

    <link
      rel="preload"
      href="fonts/Muyao-Softbrush.ttf"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />

（三）增加字体枚举

编辑 packages/excalidraw/constants.ts 文件，在 FONT_FAMILY 常量中加入字体的枚举

  Muyao: 5,

（四）添加字体切换按钮

最后，编辑 package/excalidraw/actions/actionProperties.tsx，在 PanelComponent 的返回值数组中加入下列元素：

      {
        value: FONT_FAMILY.Muyao,
        text: t("labels.handDrawn"),
        icon: FreedrawIcon,
        testId: "font-moyao-normal",
      },

完成以上修改之后进行保存就可以本地部署了

先安装相关依赖

yarn

PS：这里对 node 版本是有要求的，如果版本过低会报错，我使用的 node 版本是 v20.10.0

启动项目

yarn start

游览器上打开：http://localhost:3000/

就可以使用自己想要的字体了

---

参考文章：

为 Excalidraw 添加中文手写字体：https://blog.csdn.net/qq_34802028/article/details/127927960

【效率办公】Obsidain插件之Excalidraw-好用的手绘风格画图板：https://www.bilibili.com/read/cv13794286/