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

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

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

如何开始

在开始绘制之前，你需要知道要包含哪些内容。过程应该如下：

1. 首先，清楚地了解你想要分解并为其创建图表的系统。
2. 接下来，将系统分解成其组成部分。你应该得到构成系统的各个组件，并理解它们之间的关系。
3. 将这些组件写在纸上，以免遗漏任何内容。
4. 写下组件之间的关系，注明哪些对应哪些，总体流程如何运作等。
5. 记录系统中发生的逐步操作以及每个组件参与的确切顺序。
6. 将其可视化，就大功告成了！

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

分析

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

想象一下，您想可视化像 zkTLS 这样复杂的技术是如何工作的。在您自己研究了几个小时之后，您会发现 zkTLS 的数据流包括：

• 用户
• 证明
• 默认节点
• 参与节点
• 密码方案
• TEE（可信执行环境）
• 最终结果

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

经过一番研究，我们发现以下内容：

• 用户充当证明者，通过加密方案完成联合计算。
• 所有用户尝试都会被记录，以提高透明度。
• 用户在选择节点之前承诺一个特定值。
• 节点为用户所有权生成证明。
• 节点还会对 MPC 网络进行随机抽样，并选择节点来执行计算。
• 选定的节点在 TEE 中运行以防止作弊；不诚实的节点将被罚没。
• 计算完成后，节点对结果进行签名，第三方可以验证。

通过这七点，我们可以清楚地看到主要部分是如何连接的，这为我们理解 zkTLS 是什么奠定了坚实的基础。

综合

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

在这里，你将运用所学知识来重构你最初分解的内容。我们把系统拆解成各个组件，现在是时候把它们重新组合起来了。然而，在这样做之前，请尽可能保持怀疑态度。

• 为了更深入地理解你的主题，在研究时要不断向自己提问。
• 例如：“这个组件真的和另一个组件有这种关系吗？它是否也和另一个组件有关系？是先发生这一步，还是先发生那一步？”

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

这似乎是一个巨大的飞跃。我们最初只有七个组件，最终却得到了一个完整的复杂系统。然而，这里只有两种类型的对象：组件和它们之间的关系。

“但是可视化效果呢？它看起来很酷、很简洁、位置得当且易于理解。”

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

它包含 11 个小节，介绍如何正确使用 Excalidraw，从样式本身开始，到如何正确导出或本地保存。那么，让我们开始吧。

可视化

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

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

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

这是一份完整的指南，旨在确保您的图表不仅能反映核心流程，而且美观大方。让我们开始吧。

1. 图形

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

 

1. 矩形和正方形几乎适用于所有场景 。文本位置得当，易于阅读，整体外观简洁。
2. **菱形图块非常依赖具体情境**，文本在其中排布不佳，有时还会不成比例，但它们确实能用。
3. 圆形通常不如矩形，但比菱形好得多 。它们特别适用于表示复数，或者当您将多个对象放入单个形状中时。

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

系统中的不同图形可以用于不同的目的。您可以使用圆形来表示低级架构中的关系，而使用矩形来表示高级架构中的关系。您可以随意使用它们，不受限制。

然而，一个更重要的功能是如何美化这些几何图形。

2. 图形样式

在样式方面，您可以自定义不同的参数，例如描边（颜色、宽度和样式）、背景和填充。

笔触

对于描边，请务必记住，描边的颜色应始终比背景颜色深。您可以使用任何喜欢的颜色，甚至可以添加自己的自定义颜色。

背景

接下来，您可以为图形选择背景。

• 我们的建议是，如果您的图形上计划有文本，则背景颜色不要超过色度 3。
• 此外，背景的颜色应始终比描边的颜色浅，否则看起来会很脏。

附加参数

然后，还有许多其他参数可供您尝试：描边宽度、描边样式、粗糙度和边缘。我们不会单独描述每个参数。

不过，我们会提供一些美观和不美观的示例，以便您避免常见的错误。

我们简要提到了文本和文本框的使用，现在让我们来深入探讨一下，尤其是因为它与图形本身有着密切的关系。

3. 文本使用

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

始终在图形内书写文本

我们见过许多案例，人们单独创建图形和文本框，然后将文本框放置在图形内部。这看起来既不美观也不整洁。

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

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

字体大小

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

• 小物体和箭头上的文本始终使用 S。
• 偶尔使用 M，原因有很多。
• 副标题和大型物体上的文本始终使用 L。
• 标题请始终使用特大号字体。

您还可以通过拖动文本大小来创建自定义字体大小。请谨慎使用此选项，因为字体大小不一会使图表看起来杂乱无章。根据我们的经验，我们建议仅将自定义字体用于大标题。

4. 箭头

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

 

我们来逐一了解每个参数。

• **描边：** 尽量使用图表中大部分内容所用的颜色，不过我们通常会选择黑色（如果画布是白色）或白色（如果画布是黑色）。
• **宽度：** 尽量始终使用最小宽度。在大多数情况下，更大的宽度看起来会很难看，除非你有一个特定的概念。
• **样式：** 我们建议使用默认样式和虚线样式（第二个选项）。第三个选项通常看起来不像箭头。
• **粗糙度：** 第一个选项是直线，第二个是手写线，第三个是五岁小孩的手写线。
• 箭头： 有多种选项可供选择。这里没有单一的推荐；只需了解您想要什么即可。

尽量避免使用极度弯曲的线条，因为它们通常会破坏流程并使图表看起来杂乱无章。然而，在某些情况下，例如在展示漩涡时，它们会看起来非常棒。

5. 不透明度与图层

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

 

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

最小化不透明度

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

如果要在多个对象上叠加对象，可以尽量降低不透明度，这对于显示复数形式特别有用。请参见以下示例。

图层

当您更改不透明度或将对象相互叠加时，您需要确保它们正确分层。

• 通常，不透明度较低的对象应位于第一层 ，而完全着色的对象应位于最后一层 。
• 您可以通过单击对象并更改其图层来配置图层。

6. 外部图片

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

7. 主题与背景

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

• 大多数人使用白色主题和白色背景 ，因为这样更容易将他们的图表与大多数平台的白色背景融为一体。
• 你也可以尝试使用黑色主题或其他背景，但你应该确保它们符合你发布图表的文章或博客的整体风格，以增强其呈现效果。
• 没有限制，所以如果你觉得黄色或蓝色画布会更好，那就大胆尝试吧！

说明：

1. 点击左上角的按钮。
2. 如果你愿意，可以更改主题。
3. 如果你愿意，可以更改画布。

   

8. 定位

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

• 除非有特定格式要求，否则请确保您的图表在 PC 屏幕（16:9 比例） 上看起来效果良好。
• 此外，请确保其宽度适中，不要过宽或过窄，因为这会使内容在大多数屏幕上难以阅读。

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

1. 首先，创建图表本身并连接所有组件。 不要关注定位或它在屏幕上的显示效果。完全专注于组件之间的关系。
2. 图表完成后，移动对象以确保其整洁且易于理解。关键在于改变位置但保持结构不变 。
3. 这个过程很简单：首先，弄清楚组件之间如何关联，然后保持核心结构不变，在屏幕上移动它们。
4. 这确保了你的图表既准确又美观。

9. 导出

如果你已经到了这个阶段，这意味着你已经创作出了优秀的作品，恭喜你！现在，重要的是要正确导出成果 ，而不是简单地截屏。这能确保你的图表以尽可能高的质量保存。

完成图表后，您可以通过两种方式导出：导出整个画布或仅导出部分内容。

• 如果您想导出整个画布，只需点击左上角的按钮 ，然后选择 “导出图片”。

• 要仅导出画布的一部分，请先选择您要导出的区域 。然后，点击左上角的按钮 ，选择 “导出图片”。

导出设置

• 如果您不选择“背景”，您的图像将是透明的。
• 如果你想让图表以其他颜色呈现，可以选择“深色模式”。
• 如果选择“嵌入场景”，你将能够直接从渲染图像访问源图表。
• “缩放”参数负责图像的质量和大小；值越高，质量越好。

10. 本地保存

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

1. 点击左上角的按钮。
2. 选择 “保存到…”。
3. 点击 “保存到磁盘”。
4. 为文件起一个合适的名称并保存。

结论

我们将多年的经验融入本指南，为自己和团队设计了无数图表。我们深信，对于任何想要清晰解释其系统设计、机制设计、基础设施流程或一般概念的人来说，本指南都将大有裨益。

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