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

Mermaid 系列

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

1.如何创建甘特图 Gantt

甘特图以条形图的形式用作可视化表示。它有效地展示了项目的时间表，揭示了各个项目组件完成所需的持续时间。

您可以使用以下示例在 Mermaid 中渲染甘特图：

01/01 02/01 03/01 04/01 05/01 06/01 Define Project Research Define Requirements Design Implementation Unit Testing Integration Testing Deploy User Training Ongoing Support Planning Development Testing Deployment Maintenance Project Schedule

语法细分：

• gantt 指定要在mermaind中呈现甘特图。
• title表示项目标题。
• dateFormat YYYY-MM-DD 是图表的输入日期格式。
• axisFormat %m/%d 表示 x 轴中显示的日期格式，即输出日期。
• section 用于分隔项目的不同部分。

x 轴表示时间，y 轴记录不同的任务及其完成顺序。

2. 如何创建饼图 Pie

饼图，也称为圆图，是用于显示统计数据的圆形视觉表示形式。它被划分为多个段或切片，以直观地传达不同类别或值的数字比例。

下面是在mermaid中创建饼图的示例：

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

语法细分：

• pie 表示我们正在创建一个饼图。
• title 设置饼图的标题。
• 双引号中的项目代表类别（例如，“Food,” “Rent,” “Entertainment,” “Savings”）。
• 冒号后面的数字表示每个类别的比例或百分比。在这种情况下，“食物”占据了图表的 60%，“租金”占 15%，“娱乐”占 10%，“储蓄”占 15%。

3. 总结

在本文中，我们只是触及了 Mermaid 中渲染图的表面。这些图表是高度可定制的，还允许您创建非常复杂的图表。

Mermaid 支持本教程中未提及的更多类型的图表。要了解有关Mermaid的更多信息，请查看他们的官方文档。

动手玩 Live demo

代码

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

参考

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