Markdown 拓展-Gitlab/Github 开启 UML 图支持

为什么需要它

一些可视化工具再给我们带来直观性的同时，也增加了操作的难度，需要精细地调整组件的大小和样式，更多的时候，我们不是为了写一份漂亮的报告而画流程图，只是需要便捷地向他人分享自己的 idea，在这样的需求下，代码生成流程图显然更适合。

对 gitlab 的支持

You can generate diagrams and flowcharts from text by using Mermaid or PlantUML. You can also use Kroki to create a wide variety of diagrams.

gitlab 配置 plantuml

plantuml/plantuml-server: PlantUML Online Server
https://github.com/plantuml/plantuml-server

plantuml-server 启动完成后，需要在 GitLab 上配置开启 PlantUML，管理员登录 -> Admin Area -> Settings，复选框选中 Enable PlantUML，输入 PlantUML URL（就是刚刚启动的 PlantUML Server 服务监听地址）。好了现在可以开始 PlantUML 之旅了。

gitlab 配置 Mermaid

在 GitLab 10.3 中引入 。您可以访问官方页面以获取更多详细信息。

gitlab 配置 Kroki

可以访问官方页面以获取更多详细信息。

对 github 的支持

支持时间：https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

目前版本已内置，可以直接使用。

mermaid-js/mermaid: Generation of diagram and flowchart from text in a similar manner as markdown
https://github.com/mermaid-js/mermaid

对 mermaid 的详细说明

如果您不熟悉使用 Mermaid，或者需要帮助来确定 Mermaid 代码中的问题，则 Mermaid Live Editor 是一个有用的工具，可用于在 Mermaid 图中创建和解决问题。

Mermaid 支持软件项目中一系列不同的常见图表类型，涵盖流程图、UML、Git 图、用户体验流程图，甚至可怕的甘特图。

To generate a diagram or flowchart, write your text inside the mermaid block:

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

对 Typora 的支持

真正实现画图功能的并不是 Typora 本身，它只是内置了对 Mermaid 的支持。Mermaid 集成功能建议去 gitlab 和 GitHub 查看帮助文档，了解更多信息。

总结

由于无论 gitlab 还是 GitHub 都对 Mermaid 有了良好的支持，在对比渲染流程，所以我优先考虑此方式。

参考文档

GitLab Flavored Markdown | GitLab
https://docs.gitlab.com/ee/user/markdown.html#mermaid

GitLab Markdown - 《Gitlab 中文文档》 - 书栈网 · BookStack
https://www.bookstack.cn/read/gitlab-doc-zh/docs-408.md#mermaid

Mermaid：如何在Markdown文本中添加流程图，附支持github的方法_DenryDu的博客-CSDN博客_gitlab mermaid
https://blog.csdn.net/weixin_43661154/article/details/112101437

Typora通过mermaid使用流程图、脑图-CSDN博客_mermaid 思维导图
https://blog.csdn.net/Alexhcf/article/details/112801877