使用mermaid.js来绘制图表

最近需要绘制一些流程图来做说明，大概检索了一下现在可以使用的东西。

看到了mermaid这个图表绘制工具。 这款软件曾经获得过OpenSource Reword 2019

mermaid是一款使用标记语言来绘制图表的工具，可以快速的绘制出流程图来，让你的表达跟上你的思想。

这款图表的实现原理是解析标记语言，再根据标记语言，使用d3来绘制图表。 收到d3的限制，只能在dom中使用。

图表可轻易嵌入markdown之中，如下：

flowchart LR
  A[Jonathan]
  B[Develop next app]
  C[Develop phoenix app]
  D[Develop mail server]
  E[Develop notification server]
  F[Develop cdn server]
  G[Develop database]
  Z[GSMLG Application]
  A-->B
  A-->C
  A-->D
  A-->E
  A-->F
  A-->G
  B-->Z
  C-->Z
  D-->Z
  E-->Z
  F-->Z
  G-->Z

生成的图表

flowchart LR
  A[Jonathan]
  B[Develop next app]
  C[Develop phoenix app]
  D[Develop mail server]
  E[Develop notification server]
  F[Develop cdn server]
  G[Develop database]
  Z[GSMLG Application]
  A-->B
  A-->C
  A-->D
  A-->E
  A-->F
  A-->G
  B-->Z
  C-->Z
  D-->Z
  E-->Z
  F-->Z
  G-->Z

支持的图表类型

• Flowchart
• Sequence diagram
• Gantt diagram
• Class diagram
• State Diagram
• Git graph
• Entity Relationship Diagram - ! experimental
• User Journey Diagram
• Gantt
• Requirement Diagram

配置文档

更详细的配置文档可以在 这里 找到。

Demo

sequenceDiagram
    actor A as Client
    participant B as Front Server
    participant C as Backen Servers
    A ->>+ B: Get Page
    B ->>+ C: Get Data
    B ->>+ C: Get Resource
    C -->>- B: Return Data
    C -->>- B: Return Resource
    B -->>- A: Rsponse Page