Excalidraw：如何创建美观的图表

Hazeflow 是一家区块链研究公司。我们正在撰写关于区块链行业独特视角和观点的文章，并发布教育研究材料。

Excalidraw：如何创建美观的图表

我们将多年的经验倾注到本指南中，以帮助你创建清晰有效的图表。

许多人都要求我们创建本指南，教他们如何制作清晰有效的图表。虽然你在下面看到的示例看起来可能很清晰，但创建它们比看起来更具挑战性。

在本指南中，我们将深入探讨 Excalidraw 的完整功能。我们将探索如何设计一个不仅易于任何人理解，而且在视觉上引人入胜的系统或机制。

本指南适用于任何想要为任何目的创建清晰且引人注目的图表的个人、团队或整个公司。让我们开始吧。

如何开始

在开始将内容写在纸上之前，你需要知道要包含哪些内容。该过程应如下所示：

1. 首先，清楚地了解你要分解并为其创建图表的系统。

2. 接下来，将系统分解为各个组件。你应该最终得到创建系统的各个组件，并了解它们之间的关系。

3. 将组件写在纸上，以免忘记包含任何内容。

4. 写下组件之间的关系，记下什么对应什么，一般流程如何运作等等。

5. 记录系统中发生的逐步操作以及每个组件参与的确切顺序。

6. 将其可视化，你就完成了！

差不多就是这样。这个过程非常简单，但与生活中的所有事情一样，也存在一些潜在的陷阱。

分析

在科学中，分析是指检查一个主题的各个部分，以详细了解它的过程。

想象一下，你想可视化像 zkTLS 这样复杂的科技如何运作。在花几个小时进行自己的研究之后，你会发现 zkTLS 数据流包括：

• 用户

• 证明

• 默认节点

• 参与节点

• 加密方案

• TEE（可信执行环境）

• 最终结果

在我们弄清楚系统中包含哪些组件之后，我们想要了解所有这些组件之间的关系。

在花费更多时间之后，我们发现了以下内容：

• 用户充当 证明者(provers) 并通过加密方案完成联合计算。

• 所有用户的尝试都会被记录下来以保证透明。

• 用户在选择节点之前提交一个特定的值。

• 节点生成用户所有权的证明。

• 节点还对 MPC 网络进行随机抽样，并选择节点来执行计算。

• 选择的节点在 TEE 中运行以防止作弊；不诚实的节点会被罚没。

• 计算完成后，节点对结果进行签名，第三方可以验证该结果。

看看这七点，很明显主要部分是如何连接的，这为我们理解 zkTLS 是什么奠定了坚实的基础。

综合

综合是将各个部分组合成一个连贯整体的过程。

在这里，你将用你所学到的知识来重建你最初分解的东西。我们把系统分解成各个组件，现在是时候把它们重新组合在一起了。然而，在你这样做之前，要尽可能地持怀疑态度。

• 为了更深入地了解你的主题，在研究时用问题来挑战自己。

• 例如："这个组件真的和另一个组件有这种关系吗？它是否也与其他组件有关系？这个步骤是先发生的，还是那个步骤先发生的？"

最后，你应该得到类似这样的东西：

这似乎和一开始差很大。我们一开始只有七个组件，最后却得到一个完整的复杂系统。然而，这里只有两种类型的对象：组件以及它们之间的关系。

"但是可视化呢？它看起来非常酷炫、干净、位置良好且易于理解。"

是的，这就是下一节的内容。

它包括 11 个小节，介绍如何正确使用 Excalidraw，从样式本身开始，到如何正确导出或在本地保存结束。所以，让我们过渡到那部分。

可视化

除了将所有组件连接在一起之外，可视化系统也非常重要。即使你的图表的流程是正确的，它也可能看起来非常混乱，以至于无法理解。

上面的两个流程在内容上是相同的：唯一的区别在于它们的可视化和呈现方式。这表明了正确的定位和样式选择有多么重要。

我们将介绍图形、图形样式、文本使用、箭头、不透明度、图层、外部图像、主题、背景、热键、定位、本地保存和导出。

这是一份完整的指南，以确保你的图表不仅反映核心流程，而且看起来也很棒。让我们开始吧。

1. 图形

主要有 3 种不同的图形可供选择：矩形（正方形）、菱形和圆形。

1. 矩形和正方形几乎适用于所有情况。文本的位置很好，可读性强，整体外观也很干净。

2. 菱形非常依赖情境，文本在其中不太适合，有时可能会不成比例，但它们确实可以工作。

3. 圆形通常比矩形差，但比菱形好得多。它们特别适用于显示复数的东西，或者当你要将多个对象放入一个形状中时。

你还可以将多个图形组合起来以创建新的图形。以下是我们提出的一些新图形：

不同的图形可以用于系统中的不同目的。你可以使用圆形来显示低级架构中的关系，同时使用矩形来显示高级架构中的关系。你可以随心所欲地使用它们，并且不受限制。

然而，一个更重要的特性是如何设置这些几何形状的样式。

2. 图形样式

对于样式设置，你可以自定义不同的参数，例如笔触（颜色、宽度和样式）、背景和填充。

笔触

对于笔触，重要的是要记住笔触的阴影应始终比背景的阴影深。你可以使用任何你喜欢的颜色，甚至可以添加你自己的自定义颜色。

背景

接下来，你可以为你的图形选择一个背景。

• 我们的建议是，如果你计划在你的图形上添加文本，永远不要超过阴影 3。

• 此外，背景的阴影应始终比笔触的阴影浅，否则它看起来会非常脏。

附加参数

然后，你可以尝试使用一堆其他参数：笔触宽度、笔触样式、粗糙度和边缘。我们不会单独描述其中的每一个。

但是，我们将提供一些看起来不错和看起来不好的示例，以便你可以避免常见的错误。

我们简要提到了使用文本和文本框，所以现在让我们转向它，特别是考虑到它与图形本身有很大关系。

3. 文本使用

这是一个非常重要的主题，因为图表上的每一行文本都必须是可读的，因此你应该遵循多个规则。

始终在图形内编写文本

我们已经看到很多案例，人们分别创建图形和文本框，然后将文本框放置在图形内。这看起来不好也不干净。

确保你双击图形并直接在其中写入文本。

如果图形包含多个元素，你也可以为它们编写标题。标题应比内部文本大一个字号。此外，你可以在图表外部的括号中添加描述。

字体大小

主要有四种字体大小：S、M、L 和 XL。

• 始终使用 S 表示小对象和箭头上的文本。

• 偶尔使用 M，原因有很多。

• 始终使用 L 表示副标题和大型对象上的文本。

• 始终使用 XL 表示标题。

你还可以通过拖动文本大小来创建自定义字体大小。明智地使用此选项，因为到处都有不同的字体大小会使图表看起来杂乱无章。根据我们的经验，我们建议仅对大标题使用自定义字体。

4. 箭头

箭头有多种选项可供选择。它们通常用于显示对象之间的流程和关系。

让我们来看看每个参数。

• 笔触： 尽量使用与图表中大多数内容相同的颜色，尽管我们通常坚持使用黑色（如果你的画布是白色的）或白色（如果你的画布是黑色的）。

• 宽度： 尽量始终使用最小的宽度。在大多数情况下，更大的宽度看起来很丑，除非你有一个特定的概念。

• 样式： 我们建议使用默认样式和虚线样式（第二个选项）。第三个选项通常看起来不像箭头。

• 粗糙度： 第一个选项是直线，第二个选项是手写线，第三个选项是五岁儿童的手写线。

• 箭头： 你可以从中选择多个选项。这里没有单一的建议；只需知道你在寻找什么。

尽量避免极其弯曲的线条，因为它们通常会弄乱流程并使图表看起来混乱。但是，在某些情况下，例如显示漩涡时，它们看起来会非常好。

5. 不透明度和图层

我们决定将不透明度和图层放在同一类别中，因为它们实际上相互依赖。要更改不透明度，请单击任何对象，你会在屏幕左下方找到此设置：

让我们看看你应该最小化不透明度的所有情况。

最小化不透明度

如果你想添加一个几乎看不见的外部框架并高亮显示对象属于该特定框架，你可以最小化不透明度。请参见下面的示例。

如果你要将多个对象分层在彼此之上，你可以最小化不透明度，这对于显示复数形式特别有用。请参见下面的示例。

图层

当你更改不透明度或将对象分层在彼此之上时，你要确保它们的分层正确。

• 通常，不透明度较低的对象应位于第一层，而全彩色对象应位于最后一层。

• 你可以通过单击对象并更改其图层来配置图层。

6. 外部图像

你可以使用图像按钮或从另一个页面复制图像来将外部图像上传到你的画布。唯一可自定义的功能是不透明度和边缘。大多数情况下，圆角看起来更好，所以你应该选择它们。

7. 主题和背景

你还可以更改画布的主题和背景。

• 大多数人使用白色主题和白色背景，因为这样可以更轻松地将他们的图表与大多数平台的白色背景集成。

• 你还可以尝试使用黑色主题或其他背景，但你应该确保它们适合你发布文章或博客的整体风格，以增强其呈现效果。

• 没有限制，所以如果你觉得某些东西与黄色或蓝色画布搭配起来会更好，那就去做吧！

说明：

1. 单击左上角的按钮。

2. 如果需要，更改主题。

3. 如果需要，更改画布。

8. 定位

在定位方面，有一些通用的规则需要遵循。当我们谈论定位时，我们指的是你的图表的最终布局。

• 确保你的图表在 PC 屏幕上（16:9 比例） 看起来不错，除非需要特定的格式。

• 此外，确保它不要太宽或太窄，因为这会使在大多数屏幕上阅读它变得更加困难。

以下是如何确保你的流程、样式和定位正确：

1. 首先，创建图表本身并连接所有组件。不要关注定位或它在屏幕上的外观。完全专注于组件之间的关系。

2. 图表完成后，移动对象以确保它看起来干净且易于理解。关键是更改定位但保持结构不变。

3. 这个过程很简单：首先，你弄清楚组件之间是如何关联的，然后你在屏幕上移动它们，同时保持核心结构。

4. 这确保了你的图表既准确又美观。

9. 导出

如果你已经达到这个阶段，这意味着你创造了一些好东西，所以恭喜你！现在，重要的是正确导出结果，而不是仅仅截取屏幕截图。这确保了你的图表以尽可能高的质量保存。

完成图表后，你可以通过两种方式导出它：导出整个画布或仅导出其中的一部分。

• 如果你想导出整个画布，只需单击左上角的按钮，然后选择 "导出图片"（"Export image"）。

• 要仅导出画布的一部分，首先选择要导出的区域。然后，单击左上角的按钮，然后选择 "导出图片"（"Export image"）。

导出设置

• 如果你不选择 "背景"（"background"），你的图片将是透明的。

• 如果你想让你的图表以其他颜色呈现，你可以选择 "黑暗模式"（"dark mode"）。

• 如果你选择 "嵌入场景"（"Embed Scene"），你将可以直接从渲染的图片访问源图。

• "缩放"（"Scale"）参数负责图片的质量和大小；值越高，效果越好。

10. 本地保存

当你完成导出图表或尚未完成时，你可以在本地保存你的 .excalidraw 文件。这确保了它始终可以进行编辑，特别是如果你同时处理多个图表。保存文件可以让你恢复之前的工作。

1. 单击左上角的按钮。

2. 选择 "保存到..."（"Save to..."）。

3. 单击 "保存到磁盘"（"Save to disk"）。

4. 为你的文件指定一个合适的名称并保存它。

结论

我们将多年的经验投入到本指南中，为我们自己和我们合作的团队设计了无数的图表。我们深信这对任何想要清楚地解释他们的系统设计、机制设计、基础设施流程或一般概念的人都会有帮助。

感谢你的阅读，让我们把这个世界翻译成人类的语言！

• Hazeflow 是一家教育型区块链研究公司，在研究、分析以及技术、产品和教育材料的创建方面拥有丰富的经验。

• 我们与难以清晰且有意义地解释其复杂产品的区块链团队（尤其是那些拥有复杂技术的团队）合作。

• 原文链接： research.hazeflow.xyz/p/...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～