使用Mermaid画图

  • 流程图的示例
  • 时序图的示例
  • 甘特图的示例
  • FAQ

很多时候,你想解释自己的想法/代码,但是用语言来表达会很啰嗦,并且读者也不易理解。一般这种情况下,我们都会想使用图解来解释。但是,我们也不会想下载那些繁重的工具,比如Visio。

Mermaid 是一个用来画流程图,甘特图等图形的工具。它是一个Javascript库,但是它也是一种语言,一种类似markdown的语言。

任何时候,你想要测试Mermaid语法,都可以使用这个在线编辑器

流程图的示例

graph TD
    A --> B
    A --> C
    B --> D
    C --> D

?

时序图的示例

sequenceDiagram
    participant 小明
    participant 小红
    小明 -> 小强: 小强,最近怎么样?
    loop 健康检查
        小强 -> 小强: 和疾病做斗争
    end
    Note right of 小强: 理性的思考: <br/> 怎么回答呢...
    小强 --> 小明: 挺好的!
    小强 -> 小红: 你怎么样?
    小红 --> 小强: 非常好!

?

甘特图的示例

gantt
    dateFormat  YYYY-MM-DD
    title 为mermaid加入甘特图功能
    section A部分
    完成任务        :done, des1,2019-01-06,2019-01-08
    正进行任务      :active, des2,2019-01-09,3d
    待开始任务      :des3, after des2, 5d
    待开始任务2     :des4, after des3, 5d
    section 紧急任务
    完成任务        :crit,done,2019-01-06,24h
    实现parser     :crit,done,after des1, 2d
    为parser编写test :crit, active, 3d
    待完成任务      :crit,5d
    为rendere编写test: 2d
    将功能加入到mermaid: 1d

?

FAQ

原文地址:https://www.cnblogs.com/thomaszdxsn/p/shi-yongMermaid-hua-tu.html

时间: 2024-10-15 14:41:02

使用Mermaid画图的相关文章

2018-05-17-OAA-一种mermaid脚本驱动的软件项目模块图形化表述思路

layout: post title: 2018-05-17-OAA-一种mermaid脚本驱动的软件项目模块图形化表述思路 key: 20180517 tags: OAA flow chart sequence diagram 泳道图 时序图 图表 OAA PM Master modify_date: 05-17 --- OAA-一种mermaid脚本驱动的软件项目模块图形化表述思路 说明: 本文发布于: gitee,github,博客园 转载和引用请指明原作者和连接及出处. 正文: 说明:这

画图软件中调整图像的大小

在打开Windows附件的画图软件时,有时候截屏.或者其它图形粘贴的大小不合式.需要调整图像的大小. 画图软件有两个界面可调整:内界面是蓝色背景中的白色矩形,外界面是画图软件的边框.内界面固定在边框内,但是长.宽可以通过鼠标拉伸. 拉伸时,鼠标为从右下至左上的斜线型.调整内界面才能调整图像的大小. 如果内界面和外界面边界基本重合,则需要将进度条向右下角汇聚,直至出现内边界的右下"角".从这个角出发,将内边界从下往上.从右往左 拉动,可以发现内边界能移动.通常,在内边界和外边界之间都保存

PHP利用GD库画图和生成验证码图片

首先得确定php.ini设置有没有打开GD扩展功能,测试如下 print_r(gd_info()); 如果有打印出内容如下,则说明GD功能有打开: Array ( [GD Version] => bundled (2.0.34 compatible) [FreeType Support] => 1 [FreeType Linkage] => with freetype [T1Lib Support] => 1 [GIF Read Support] => 1 [GIF Crea

python_turtle模板画图

turtle简单画图所用到的代码: 1 turtle.showturtle() #画图板 2 turtle.screensize(2024,2000) #画图板大小 3 turtle.forward() #往前移动 4 turtle.right(90) #方向往左调整n度 5 turtle.left(30) #方向往右调整n度 6 turtle.write("hello") #写文字 7 turtle.goto(50,50) #坐标移动 8 turtle.penup() #抬笔 9 t

《学习opencv》笔记——关于一些画图的函数

画图函数 (1)直线cvLine函数 其结构 void cvLine(//画直线 CvArr* array,//画布图像 CvPoint pt1,//起始点 CvPoint pt2,//终点 CvScalar color,//颜色 int thickness = 1,//宽度 int connectivity = 8//反走样 ); 实例代码 #include <cv.h> #include <highgui.h> #include <stdio.h> int main

PHP画图的基本步骤GD库

一:PHP新建一个图片步骤: 1:创建画布: $im=imagecreatetruecolor(300,80) 2:定义颜色: $black=imagecolorallocate($im, 0, 0, 0); 3:填充颜色|文字信息: imagefill($im, 0, 0, $black); 4:生成图片: imagepng($im,"./data/01.png") 5:销毁图片: imagedestroy($im); 简单事例: 1 //1:创建一个画图资源(画布) 2 $im=i

Exercise: Slices (画图)

A Tour of Go Exercise: Slices https://tour.golang.org/moretypes/18 这道题目,提供了一个画图函数 (pic.Show), 可以生成图片. 这个函数,即 pic.Show(f func(int, int) [][]uint8), 可见,它接受一个函数做参数,题目要求的正是编写这个参数.答案如下: 这里面,依赖一个 package, 即 "golang.org/x/tour/pic" 我上 https://github.co

OpenGL画图的时候免不了需要知道自己建立的opengl坐标的x,y,z轴的极值

在我们用OpenGL画图的时候免不了需要知道自己建立的opengl坐标的x,y,z轴的极值(也就是最大表示范围).那么该如何来测试,下面一起来看看: 首先,你需要知道自己是按照什么视角来建立的坐标系,我的是按照NeHe的那本书来的: [cpp] view plain copy void GLWidget::resizeGL(int width, int height) { if(0 == height) height = 1;//To prevent a side is 0 glViewport

贪吃蛇—C—基于easyx图形库(1):基本控制函数 实现 画图程序

自从学了c语言,就一直想做个游戏,今天将之付之行动,第一次写的特别烂,各种bug:就不贴了.今天网上看了好几个贪吃蛇,重新写了一次,做出来的效果还可以. 下面是详细的构建过程,本节因为时间限制,先贴出比较重要的控制函数实现,并用它做一个很简单很简单很有趣的画图程序. 首先,要对贪吃蛇的结构有一个大概的了解:要有一个控制系统控制蛇上下左右移动,而且不能往反方向移动:要有食物产生系统,食物出现位置随机:吃到食物后蛇要变长:要有死亡判定系统...... 总结起来,就是这样: 我写的这个结构有点乱,不过