Architectural design for "porting zenuml to mermaid" (Chinese language used)

[MrCoder]

创建了这个Thread来讨论High level Design。
在我们讨论HLD之前，要搞清楚mermaid有哪些集成方式。
根据我和mermaid作者的沟通，mermaid也要依赖于browser完成渲染逻辑。这里的意思是它不能脱离浏览器做Server Side Rendering。这对我们来说是个好事情，因为ZenUML也不能完全实现SSR。

[MrCoder]

下面是一个GitHub集成mermaid的例子。

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

Loading

我们可以看到，他们也是通过iFrame实现的。

这也是个好消息，这意味着我们不需要直接返回完整的DOM或者SVG或者某种Graph，而可以交给浏览器完成渲染。

[MrCoder]

有几个问题需要解决的。
第一，mermaid是怎么parse输入，并且把输入传递给渲染器的。
第二，渲染器是怎么把渲染的结果传递给mermaid的；又或者是否需要将结果返回给mermaid，能否自己渲染。

[dontry]

这个我可以研究一下

[dontry]

@MrCoder

Mermaid初始化时，会加载所有diagram。每种diagram主要由parser, db, renderer构成。

1. Parser部分是用jison编写，然后编译成js文件。这是flow chart的jison文件flow.jison
2. 用户的mermaid代码通过parser转译成graph元素（vertices，nodes，label）存储在db中
3. Renderer将这些db里面的元素转换能渲染成svg object
4. 最后用dagre-d3这个库将这些svg object渲染出来。

[MrCoder]

我们是不使用他们的Parser的。我们用的是我们自己的Parser。我估计我们也用不到他的db。只需要把原始的Text发给我吗就可以了。

[MrCoder]

要做集成我们有几个选项

1. 作为iFrame集成
2. 作为WebComponent集成
3. 作为library集成

[dontry]

我觉得可行性比较好的是3。 这篇文章有介绍如何添加新的chart：https://mermaid-js.github.io/mermaid/#/newDiagram?id=adding-a-new-diagramchart-%f0%9f%93%8a

[MrCoder]

我们还是要列一下Pros and Cons，可能还要做一些POC的工作，才能最后确定。
比如是作为Library集成的几个问题是：

1. 增加整个bundle的体积，我们自己就有3.2M；
2. CSS leaking，双向的泄露

所以，我建议我们分头去做一下POC。这里面有很多尝试性的工作，也不用分工，自己觉得那个方向更靠谱就去POC那个方向。