Redesign the diagrams in doc with new tool

Abstract

文档中的图片作为内容的一部分，也需要参与到内容分发的流程中，而内容分发链路中通常会带有版本区分的逻辑，这就要求我们要对图片也增加版本控制的能力。我们目前使用markdown的图片语法 ![]() 来嵌入图片资源, 这需要我们在另一个地方/或者是当前项目内来存储和维护图片内容，这一方面增加了维护成本，同时由于大家绘图的习惯不同，因此会产生多种风格的图片，缺少统一性。而且因为是图片，也缺少节点自定义功能与交互功能。目前yuque中提供了多种绘图工具，但最后生成的内容只能在yuque上解析，如果需要更新，我们需要走以下流程

flowchart LR;
    id1(checkout branch)-->打开雨雀-->更新图表-->截图-->上传CDN-->复制图片链接-->链接回填到文档中;

如果我们使用基于文本解析的图片方案如UML，在基于mardown的插件能力，我们只需要和更新文档一样，在同样的地方更新节点即可:

flowchart LR;
   id1(checkout branch)-->更新文档

这种方式能够大大简化后续维护的成本，也省去了画图，调整图片中节点位置与关系的时间，但缺点是需要大家掌握对应的语法。考虑到引擎的专业性，我还是推荐使用基于文本的方案来维护文档中的图表。

选型

目前在markdown中集成UML没有特别好的方案，一般都是在uml网站上编辑好后，生成一个图片链接贴到文档中。示例还有一种方案是 mermaid.js，此解决方面目前可以说是 markdown 中嵌入的事实标准。他的语法类似uml，因此如果你之前熟悉uml，上手速度会很快，因此我们选择 mermaid.js

接入

直接在脚本中引入脚本后，在 markdown 中使用 ```mermaid 即可

galacean / galacean.github.io

Redesign the diagrams in doc with new tool #548

Abstract

选型

接入