官方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使用简介(画论文插图的一种解决方案)的更多相关文章

  1. 简介C#读取XML的两种方式

    简介C#读取XML的两种方式 作者: 字体:[增加 减小] 类型:转载 时间:2013-03-03 在程序中访问进而操作XML文件一般有两种模型,分别是使用DOM(文档对象模型)和流模型,使用DOM的 ...

  2. echars画折线图的一种数据处理方式

    echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  3. 像画笔一样慢慢画出Path的三种方法(补充第四种)

    今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...

  4. 今天我们要说的画一个三角形,恩,画一个三角形,第一种呢是利用我们的html标签结合css来实现;而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕,那么顾名思义就是在网页里建造一个画板,用来画画,好,那接下来就和我一起去看看吧!

    第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...

  5. 第一节:EF Core简介和CodeFirst和DBFirst两种映射模式(以SQLite和SQLServer为例)

    一. EF简介 1. 定义 Entity Framework (EF) Core 是轻量化.可扩展.开源和跨平台的数据访问技术,它还是一种对象关系映射器(ORM),它使.NET 开发人员能够使用面向对 ...

  6. 在android中画圆形图片的几种办法

    在开发中常常会有一些需求,比方显示头像,显示一些特殊的需求,将图片显示成圆角或者圆形或者其它的一些形状. 可是往往我们手上的图片或者从server获取到的图片都是方形的.这时候就须要我们自己进行处理, ...

  7. iOS 画圆图片的几种方法

    方法一: self.cycleImv= [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 50, 50)]; [self.view addS ...

  8. 留学英文论文写作Abstract三种类型

    所谓Abstract,就是对所写论文主要内容的精炼概括.Abstract是美国人的说法,英国的科技期刊喜欢称之为Summary.在英文中,有资料是这么对其定义的:Abstract is a sketc ...

  9. python 正则表达式 贪婪模式的简介和匹配时的几种模式

    看到一篇文章,关于python正则的,http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html 贪婪模式与非贪婪模式: 正则表达式通常用于 ...

随机推荐

  1. layui 让弹窗始终居中于屏幕

    前话:今天用 layer.confirm()  弹窗的时候,滚动到页面尾部再弹窗时,发现弹窗还显示在上面,要滚动会上面才能看到. 度娘找了一个获取滚动条位置的方法: function ScollPos ...

  2. html5拖动监听

    在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: o ...

  3. nvm的安装,安装node,npm

    先说说我为什么使用nvm吧 最近在搞react-native,就碰到了很多坑,其中就有node带来的坑,当你运行react-native start (这是rn启动服务器的命令)就会报一个正则的错误, ...

  4. 在 MacOS 中使用 multipass 安装 microk8s 环境

    在 MacOS 中使用 multipass 安装 microk8s 环境 Multipass & MicroK8s 介绍 What is Kubernetes? Kubernetes clus ...

  5. svg高级应用及动画

    canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求.但 canvas 和 webGL 毕竟是偏向底层的绘制引擎,某些场景使用起来还是过于繁琐的,不分场合一律使 ...

  6. Java实现 LeetCode 823 带因子的二叉树(DP)

    823. 带因子的二叉树 给出一个含有不重复整数元素的数组,每个整数均大于 1. 我们用这些整数来构建二叉树,每个整数可以使用任意次数. 其中:每个非叶结点的值应等于它的两个子结点的值的乘积. 满足条 ...

  7. Java实现 LeetCode 810 黑板异或游戏 (分析)

    810. 黑板异或游戏 一个黑板上写着一个非负整数数组 nums[i] .小红和小明轮流从黑板上擦掉一个数字,小红先手.如果擦除一个数字后,剩余的所有数字按位异或运算得出的结果等于 0 的话,当前玩家 ...

  8. 第十届蓝桥杯JavaC组省赛真题

    试题 A: 求和 本题总分:5 分 [问题描述] 小明对数位中含有 2.0.1.9 的数字很感兴趣,在 1 到 40 中这样的数包 括 1.2.9.10 至 32.39 和 40,共 28 个,他们的 ...

  9. Java实现 LeetCode 448 找到所有数组中消失的数字

    448. 找到所有数组中消失的数字 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间 ...

  10. Java实现 LeetCode 20 有效的括号

    20. 有效的括号 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. ...