时序图绘制

Posted 2021-03-02 mosakashaka

最近在vs code上用markdown写的一些总结文档，需要绘制时序图。

本来是想找一个工具去绘制的，由于之前用的ProcessOn画流程图，所以先去上面找了一下，竟然没有时序图相关的。。于是搜索了一下，得知了mermaid这个东西

 

mermaid

mermaid是通过类markdown语法，来绘制流程图、时序图等的方式，通过特定的工具将mermaid语法描述的内容以图的形式展现。

mermaid有一些基础的语法：

• 开头的`sequenceDiagram`代表时序图
• participant后跟时序图中的对象
• 箭头用简单的->或-->>等表示，代表实线、虚线、箭头样式等
• loop/alt/opt等条件、循环语句结构
• Note right/left of xx增加文字描述

如下语句：

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

mermaid中可展示为：

实际使用起来，由于工具用的vscode，预览有插件，但是生成html却没有插件支持转换mermaid语法了。。无奈又搜索了下，发现了plantuml这个东西。。

 

PlantUML

官网广告有点多，不过开源项目，能有收入支持是好事。

PlantUML和mermaid语法非常相似，很高兴我已经画好的时序图不用大改~

代码：

@startuml
Alice -> Bob: Authentication Request
alt successful case
Bob -> Alice: Authentication Accepted

else some kind of failure
Bob -> Alice: Authentication Failure
group My own label
	Alice -> Log : Log attack start
    loop 1000 times
        Alice -> Bob: DNS Attack
    end
	Alice -> Log : Log attack end
end

else Another type of failure
Bob -> Alice: Please repeat
end

@enduml

对应的图形：

对应在vs code中，有PlantUML插件，虽然不支持markdown嵌入，但是至少我可以用单独的文件书写语法，然后导出图片在markdown中引入了。

该插件还支持如果多个图形描述都在一个文件里，可以批量导出文件的图形为图片，不过有一点遗憾的是不支持直接导出到当前文件夹下，非要导出到一个out目录中。。。

 

以上