Markdown中使用mermaid画流程图
Markown语法简单,用来写文档是个不错的选择。
但是Markdown 语法并不直接支持画图,当然方法还是有的。
本人用的Markdown编辑器为vscode,在里面直接安装mermaid插件即可使用。
最近在学习使用携程开源框架Apollo,就以该框架的一些流程图介绍mermaid的使用:先看几个例子
1.基础模型
```mermaid
graph LR;
Portal-->|发布/更新配置|Apollo配置中心;
Apollo配置中心-->|实时推送|App;
App-->|实时查询|Apollo配置中心;
```
效果图如下:
2.结构模型
```mermaid
graph TB
client-->| findConfigServices|LoadBalancer;
LoadBalancer-->| findService|metaServer;
metaServer-->Eureka;
client-->| access via ip:port/client load balance/error retry|ConfigService;
ConfigService-->| register/cancel|Eureka;
ConfigService-->|read/write|ConfigDB;
```
效果图如下:

3. 模块依赖图
```mermaid
graph LR;
client---core;
client---common;
core---common;
common---portal;
common---Biz;
Biz---ConfigService;
Biz---AdminService;
```
效果图如下:

总结:
graph TB(top--botom 上下排列) graph BT (botom--top) graph LR(left--right 左右排列) graph RL (right--left) --> 在流程图中显示——> --- 在流程图中显示——
再来个简单例子:
```mermaid
graph LR;
A-->|A指向B|B;
B---|B与C相连|C;
```
增加一种序列图画法:官方例子
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John:hello John
loop healthcheck
John-->>John:fight against
end
Note right of John:rational John->>Alice:great!
John->>Bob:how about you
Bob->>John:good! ```
注意:如果vscode显示不出来这个图,可能是预览插件没装。把mermaid的插件多装几个没影响
参考: https://mermaidjs.github.io/#/
https://cloud.tencent.com/developer/article/1334691
Markdown中使用mermaid画流程图的更多相关文章
- 在博客文章中使用mermaid 定义流程图,序列图,甘特图
概述 Mermaid(美人鱼)是一套markdown语法规范,用来在markdown文档中定义图形,包括流程图.序列图.甘特图等等. 它的官方网站是 https://mermaid-js.github ...
- Markdown教程<2> mermaid图形绘制(1)
Markdown教程<2> mermaid图形绘制(1) 博客园中的markdown编辑器同时支持mermaid图表引擎与tex公式引擎,可以使用mermaid直接画出流程图,时序图,甘特 ...
- 使用mermain用Markdown的语法画流程图和UML图
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用mermain用Markdown的语法画流程图和UML图.
- 使用 Markdown Flow 画流程图
使用 Markdown Flow 画流程图 好处是可以方便的使用 Git 管理版本 st=>start: 开始 e=>end: 结束 c1=>condition: A c2=> ...
- markdown绘图插件----mermaid简介
作者:黄永刚 mermaid简介 当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样. mermaid解决这个痛点 ...
- 在Emacs中使用plantuml画UML图
在Emacs中使用plantuml画UML图 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #83 ...
- Markdown中插入复杂的合并表格方法
由于Markdown自身的语法限制,不能直接插入有合并单元格的复杂表格. 姓名 学号 专业 张三 2018123456 计算机 赵四 2018222356 自动化 李六 2018666666 信息工程 ...
- Markdown中插入数学公式的方法
Markdown中插入数学公式的方法 文章来源:http://blog.csdn.net/xiahouzuoxin/article/details/26478179 自从使用Markdown以来,就开 ...
- Markdown中的缩进
Markdown中怎么实现段首的缩进 把输入法的半角改为全角,在Markdown文中直接空格就能实现缩进,测试时一个空格是一个汉字的距离. html中的代码: 或 -- 半个汉字的距离. 或 ...
随机推荐
- MySQL的insert ignore与replace into不同
以前从来没有接触过replace into这个语法,但是却看到很多人都在使用这个语法,并且应用在很多生产环境中,于是我也去学习了一下repalce into的用法. 关于replace 一句话:正常情 ...
- 《JAVA程序设计与实例》记录与归纳--继承与多态
继承与多态 概念贴士: 1. 继承,即是在已经存在的类的基础上再进行扩展,从而产生新的类.已经存在的类成为父类.超类和基类,而新产生的类成为子类或派生类. 2. Java继承是使用已存在的类的定义作为 ...
- Adobe Acrobat pro生成PDF模版
最近做了一个关于动态生成PDF合同的需求 java生成PDF 网络上随便一搜遍有了 不要用手动在代码里面输入合同中的文字这种方式 如这样的方式 http://blog.csdn.net/justin ...
- 开源API测试工具 Hitchhiker v0.8 - 自动化测试结果统计
Hitchhiker 是一款开源的支持多人协作的 Restful Api 测试工具,支持自动化测试, 数据对比,压力测试,支持脚本定制请求,可以轻松部署到本地,和你的team成员一起协作测试Api. ...
- JavaScript语法详解:JS简介&变量
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. JavaScript简介 Web前端有三层: HTML:从语义的角度,描 ...
- 献给迷惘的Java架构工程师
1. 工程化专题 (团队大于3个人之后,你需要去考虑团队合作,科学管理) 2. 源码分析专题 (好的程序员,一行代码一个设计就能看出来,源码分析带你品味代码,感受架构) 3.高性能及分布式专题 ( ...
- lodash源码分析之缓存方式的选择
每个人心里都有一团火,路过的人只看到烟. --<至爱梵高·星空之谜> 本文为读 lodash 源码的第八篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash gitb ...
- 使用vue-axios请求geoJson数据报错的问题
最近的项目用到了echarts一个带有散点地图的图表,按照正常jquery写法应该使用ajax请求geojson的数据动态去切换地图,就像下面这样 $.get('Js/map/' + cityData ...
- Linux 离线安装Rubygems详解
很多时候我们会发现,真实的生成环境很多都没有外网,只有内网环境,这个时候我们又需要安装RubyGems,则不能提供yum命令进行在线安装了,这个时候我们就需要下载安装包进行离线安装.本文主要简单介绍如 ...
- Android按下home键后重新打开app进入主activity的问题
问题阐述: 当我们写一款App的时候,势必会有这种情况:用户已经进行了多级的操作,现返回栈中已存在多个activity,那么这个时候我们想回到最初的activity难道要一层层的返回吗,对用户来说 无 ...