如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图一

图表是技术文档的重要组成部分。在本文中，我们将探讨如何使用代码生成图表并在 Markdown 中利用它们。

下面是代码生成的图表的示例：

无需工具，无需将形状拖动、对齐和对齐到位置。只是编码。有趣吧？

1. 先决条件

若要按照本教程进行操作，应具备以下条件：

1. 对 Markdown 有基本的了解。如果您不熟悉 Markdown，请查看本指南。
2. 具有 Markdown 预览扩展的 Visual Studio Code（将在后面的部分中详细介绍）。
3. GitHub，了解如何在那里呈现图表。

2. 代码生成图表的优点

将图表生成为代码而不是使用传统方法手动“创建”图表有几个优点。让我们看看其中的一些：

• 动态：代码生成的图表是动态的，这意味着您可以通过更新代码轻松更新它们。
• 可编辑：使用代码生成的图像，您无需依赖复杂的图像生成工具。您只需在文本编辑器中编辑代码即可获得更新的图像。
• 高效：与静态图像相比，代码生成的图像加载速度更快。此外，您无需将它们作为图像单独托管在您的网站中。
• 快速创建：您可以使用模板，只需使用代码即可快速绘制图表。您无需投入时间和精力来学习图像创建工具，这些工具通常一开始就让人不知所措。

3. 如何渲染和查看Mermaid Code

有几种方法可以创建和查看美人鱼图。

3.1 VSCode

首先，安装一个支持 Mermaid 的 Markdown 预览器。下面是此类扩展的示例：Markdown 预览Mermaid。

使用扩展名 .md 创建一个空的 Markdown 文件。在此文件中编写代码，并在右侧窗格中打开预览(快捷键 Command+shift+v )：

Client Server Register user User alreadv exists Client Server

3.2 StackEdit堆栈编辑

StackEdit 是一个基于浏览器的在线 Markdown 预览器。它提供了一个编辑器窗口和右侧的预览。

预览地址：https://stackedit.io/app

Event1

Event2

State1

State2

State3

##3.3 GitHub
您可以在 GitHub 中添加 Mermaid 图表以创建引人注目的 README 文件。只需在 GitHub 中编辑 README.md 或任何其他 Markdown 文件即可渲染Mermaid diagrams。

60% 15% 10% 15% Distribution of Expenses Food Rent Entertainment Savings

代码
https://github.com/zgpeace/pets-name-langchain/tree/develop

参考

https://www.freecodecamp.org/news/diagrams-as-code-with-mermaid-github-and-vs-code/