淄博做网站哪家好第一站长网
Mermaid 系列
- 如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图一
- 如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图二
1.如何创建甘特图 Gantt
甘特图以条形图的形式用作可视化表示。它有效地展示了项目的时间表，揭示了各个项目组件完成所需的持续时间。
您可以使用以下示例在 Mermaid 中渲染甘特图：
语法细分：
gantt指定要在mermaind中呈现甘特图。title表示项目标题。dateFormat YYYY-MM-DD是图表的输入日期格式。axisFormat %m/%d表示 x 轴中显示的日期格式，即输出日期。section用于分隔项目的不同部分。
x 轴表示时间，y 轴记录不同的任务及其完成顺序。
2. 如何创建饼图 Pie
饼图，也称为圆图，是用于显示统计数据的圆形视觉表示形式。它被划分为多个段或切片，以直观地传达不同类别或值的数字比例。
下面是在mermaid中创建饼图的示例：
语法细分：
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/