使用typora生成时序图

简介: 掌握生产力工具,使用typora和mermaid生成时序图

详细使用说明,请参考以下连接:https://cloud.tencent.com/developer/article/1334691
https://zhuanlan.zhihu.com/p/627356428
Typora 的制图功能是由 Mermaid 强力驱动,如果你使用过 PlantUML,那么 Mermaid 也非常容易上手。

Mermaid
Mermaid是一种简单的类似 Markdown 的脚本语言,通过 JavaScript 编程语言,将文本转换为图片。因此,真正实现画图功能的并不是 Typora 本身,它只是内置了对 Mermaid 的支持。
Mermaid 支持绘制非常多种类的图,常见的有时序图、流程图、类图、甘特图等等。下面分享一下如何绘制这些图,语法非常容易掌握。

先在 Typora 中,输入 ```mermaid 然后敲击回车,即可初始化一张空白图。
时序图
语法解释:->> 代表实线箭头,-->> 则代表虚线。

sequenceDiagram
    participant Client
    participant KongAPIGateway
    participant BackendServer1
    participant BackendServer2

    Client ->> KongAPIGateway: 发送TCP请求
    KongAPIGateway ->> BackendServer1: 转发TCP请求
    BackendServer1 -->> KongAPIGateway: 返回TCP响应
    KongAPIGateway -->> Client: 将TCP响应返回给客户端

    alt 其他后端服务器
        KongAPIGateway ->> BackendServer2: 转发TCP请求
        BackendServer2 -->> KongAPIGateway: 返回TCP响应
        KongAPIGateway -->> Client: 将TCP响应返回给客户端
    end

Back.png

相关文章
|
前端开发 搜索推荐
typora 基本使用和更换typora的主题样式
typora 基本使用和更换typora的主题样式
108 0
|
数据可视化 Java uml
IDEA这个功能真强大!一键把整个项目代码绘制成UML类图...
IDEA这个功能真强大!一键把整个项目代码绘制成UML类图...
3148 0
IDEA这个功能真强大!一键把整个项目代码绘制成UML类图...
|
3月前
Typora 一行显示多图
Typora 一行显示多图
24 0
|
5月前
03-pycharm自定义背景图,写代码能看美女,就是这么优雅
03-pycharm自定义背景图,写代码能看美女,就是这么优雅
28 0
|
6月前
|
设计模式 数据可视化 程序员
不会画uml?推荐使用代码画图的工具PlantUml
不会画uml?推荐使用代码画图的工具PlantUml
582 1
|
6月前
|
数据可视化 iOS开发 MacOS
如何在Typora中以可视化或源码的方式使用markdown
如何在Typora中以可视化或源码的方式使用markdown
109 0
|
程序员 uml
UML学习(一)----使用plantuml画时序图
之前都是使用processon来画UML图,虽说有很多模板,画图也比较方便。但是,非会员的话最多只能保存14张图,这就很坑了。每次对图的变更也不太方便,所以琢磨了下,发现了一款好用的画UML图的工具plantuml。 PlantUML是一个开源项目,支持采用编码的方式快速绘制图。这对于我们广大程序员而言无疑是很大的福音。PlantUML的官方文档。
340 0
UML学习(一)----使用plantuml画时序图
|
前端开发
分享一个简单的GIF图制作方法
分享一个简单的GIF图制作方法
分享一个简单的GIF图制作方法