mermaid使用简介(画论文插图的一种解决方案)
官方IO:
https://mermaid-js.github.io/mermaid/#/
官方对mermaid的简介是这样的:Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
Markdown风格的语法,用于生成流程图,序列图,类图,甘特图和git图。
接触mermaid(直译:美人鱼)是因为渐渐的要写一些小论文之类的东西,为了让论文里的概念更加直白就当然需要插图啦。但是直到现在我都没弄明白用啥来画这些论文里的插图比较好。一次偶然的机会,点开了博客园邻居CSDN的编辑器,发现它的编辑器有一类文法,叫mermaid。看了效果之后心想这不就是我需要的嘛,可以画各种流程图,时序图。需要注意的是,mermaid是一种文法,所以具有高度的可移植性。它不会主动生成你所需要的图片,想把mermaid(一行行带各种tag的代码)变成自己需要的东西(README文件,论文小插图),则需要解释器。这种解释器大部分时候其实就是编辑器啦,比如隔壁的哪一家编辑器。
下面简单介绍一下mermaid的最基础用法,想用的更溜,建议还是点到官方IO里去钻研文档:(代码前后的```mermaid)是告诉编辑器这是mermaid文法,需灵活看待。
1.Flowcharts(流程图)
```mermaid
graph LR;
A --> B
B --> C
C --插入文字--> A
```

箭头、方格、文字style均可改,文档中可查。是不是很方便呢?不用为了对齐箭头方格而头疼了吧?
2.SequenceDiagram(时序图)
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
```

是在通信中很常用的图。
饼图,状态图也都可以用mermaid轻松作出来,详细的使用方法不再赘述,文档可速查。但是mermaid的目标可能还并不是生成生成高质量的演示图片。我认为它还是更适合进行演示而不是放到正式论文里,但是作一些小图还是可以滴。
mermaid使用简介(画论文插图的一种解决方案)的更多相关文章
- 简介C#读取XML的两种方式
简介C#读取XML的两种方式 作者: 字体:[增加 减小] 类型:转载 时间:2013-03-03 在程序中访问进而操作XML文件一般有两种模型,分别是使用DOM(文档对象模型)和流模型,使用DOM的 ...
- echars画折线图的一种数据处理方式
echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 像画笔一样慢慢画出Path的三种方法(补充第四种)
今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...
- 今天我们要说的画一个三角形,恩,画一个三角形,第一种呢是利用我们的html标签结合css来实现;而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕,那么顾名思义就是在网页里建造一个画板,用来画画,好,那接下来就和我一起去看看吧!
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- 第一节:EF Core简介和CodeFirst和DBFirst两种映射模式(以SQLite和SQLServer为例)
一. EF简介 1. 定义 Entity Framework (EF) Core 是轻量化.可扩展.开源和跨平台的数据访问技术,它还是一种对象关系映射器(ORM),它使.NET 开发人员能够使用面向对 ...
- 在android中画圆形图片的几种办法
在开发中常常会有一些需求,比方显示头像,显示一些特殊的需求,将图片显示成圆角或者圆形或者其它的一些形状. 可是往往我们手上的图片或者从server获取到的图片都是方形的.这时候就须要我们自己进行处理, ...
- iOS 画圆图片的几种方法
方法一: self.cycleImv= [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 50, 50)]; [self.view addS ...
- 留学英文论文写作Abstract三种类型
所谓Abstract,就是对所写论文主要内容的精炼概括.Abstract是美国人的说法,英国的科技期刊喜欢称之为Summary.在英文中,有资料是这么对其定义的:Abstract is a sketc ...
- python 正则表达式 贪婪模式的简介和匹配时的几种模式
看到一篇文章,关于python正则的,http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html 贪婪模式与非贪婪模式: 正则表达式通常用于 ...
随机推荐
- NPM的由来——为什么要使用NPM
原文:https://blog.csdn.net/qq_37696120/article/details/80507178 https://blog.csdn.net/hong10086/articl ...
- Spring IOC实现配置bean和实例
配置 beans.xml文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&quo ...
- Python之Flask框架一
flask是一个使用 Python 编写的轻量级 Web 应用框架.轻巧页就意味着他比较简洁,不过见到的MTV框架还是有的,(MVC)但是最重要的还是他的可扩展性很强,对比与Django框架呢,他的灵 ...
- CF1340B Nastya and Scoreboard(暴搜剪枝/dp)
Question 一个n个数码位的分数板,每一个数码位都是一个七段数码管,现在给出每个数码位的显示情况,问再点亮k段数码管的话能显示的最大的数是多少,如果不能构成一串数字,就输出-1 Solution ...
- Elasticsearch如何有惊无险地入门,我是用心的
学习真的是一件令人开心的事情,上次分享了 Redis 入门的文章后,收到了很多小伙伴的鼓励,比如说:"哎呀,不错呀,二哥,通俗易懂,十分钟真的入门了".瞅瞅,瞅瞅,我决定再接再厉, ...
- element-ui上传组件,通过自定义请求上传文件
记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方. <el-upload ref="uploadMutiple" :auto-upload=&quo ...
- 【书签】stacking、blending
读懂stacking:模型融合Stacking详解/Stacking与Blending的区别 https://blog.csdn.net/u014114990/article/details/5081 ...
- 【转】网页的title左边的小图片怎么添加
首先,代码中的title标签里是不能加图片的.但是浏览器标提栏前面是可以加一个小图标的. 解决方案:第一步,做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透 ...
- 错误记录:Data too long for column 'xxx' at row 1
错误记录:Data too long for column 'xxx' at row 1 使用Flask-sqlalchemy操作数据时报错: "Data too long for colu ...
- JAVASE(十三) 异常处理
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 1.异常体系结构 说明: |-----Throwable |-----Error :没针对性代码进行 ...