没想到吧,Markdown 还能这么玩!
时间:2022-07-26
本文章向大家介绍没想到吧,Markdown 还能这么玩!,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
点击上方【村雨遥】添加关注
目录
- 前言
- 时序图(Sequence Diagrams)
- 流程图(Flowcharts)
- Mermaid 图
- 准备知识
- 时序图(Sequence Diagrams)
- 流程图(Flowcharts)
- 甘特图(Gantt Charts)
- 类图(Class Diagrams)
- 状态图(State Diagrams)
- 饼图(Pie Charts)
前言
日常工作中,常常需要画各种图表,利用专业的画图的工具如 Visio 等当然能画出我们想要的图表。但是我们只是想要简单的图表时,也可以通过借助 Markdown 相关语法实现,大大提高效率。
时序图(Sequence Diagrams)
村雨 -> 村雨遥: 你好, 村雨遥!
Note right of 村雨遥: 思考!
村雨遥 --> 村雨: 你好,村雨,很高兴与你合作!
流程图(Flowcharts)
st=>start: 开始
op=>operation: 出示证件
cond=>condition: 是否是学生?
e=>end: 结束
st->op->cond
cond(yes)->e
cond(no)->op
Mermaid 图
准备知识
节点图形
格式 |
形状 |
---|---|
id[text] |
矩形 |
id(text) |
圆角矩形 |
id((text)) |
圆形 |
id>text] |
向右旗帜状 |
id{text} |
菱形 |
连接线
格式 |
效果 |
---|---|
A-->B |
实线,箭头,无文字 |
A---B |
实线,无箭头,无文字 |
A--文字---B |
实线,无箭头,文字 |
A--文字-->B |
实线,箭头,文字 |
A-.->B |
虚线,箭头,无文字 |
A-.文字.->B |
虚线,箭头,文字 |
A==>B |
大箭头,无文字 |
A==文字==>B |
大箭头,文字 |
时序图(Sequence Diagrams)
sequenceDiagram
Manu->>Tim: Hello Tim, how are you?
alt is sick
Tim->>Manu: Not so good :(
else is well
Tim->>Manu: Feeling fresh like a daisy
end
opt Extra response
Tim->>Manu: Thanks for asking
end
流程图(Flowcharts)
- 流程图图表方向
图表方向 |
含义 |
---|---|
TB/TD |
从上到下 |
BT |
从下到上 |
RL |
从右到左 |
LR |
从左到右 |
graph TD
A[开始] -->B[出示证件]
B --> C{是否是学生}
C -->|是| D[5 折]
C -->|否| E[全票]
D --> F[结束]
E --> F[结束]
甘特图(Gantt Charts)
gantt
title 甘特图
dateFormat YYYY-MM-DD
section Section
项目确定 :a1, 2020-01-01, 30d
可行性分析 :after a1 , 20d
section Another
需求分析 :2020-01-12 , 12d
项目实施 : 24d
类图(Class Diagrams)
classDiagram
Animal <|-- Dog
Animal <|-- Cat
Animal <|-- Wolf
Animal : +int age
Animal : +String name
Animal : +String color
Animal : +isMammal()
Animal : +getColor()
class Dog{
+Stirng type
+bark()
}
class Cat{
+String eyesColor
+catchMouse()
}
class Wolf{
+String area
+kill()
}
状态图(State Diagrams)
stateDiagram
[*] --> 保持
保持 --> [*]
保持 --> 移动
移动 --> 保持
移动 --> 加速
加速 --> [*]
饼图(Pie Charts)
pie
title 操作系统份额
"Windows" : 70
"MacOS" : 15
"Linux" : 8
"Others" : 7
- go语言实现将重要数据写入图片中
- poj-----(2528)Mayor's posters(线段树区间更新及区间统计+离散化)
- poj---(2886)Who Gets the Most Candies?(线段树+数论)
- Hadoop3.0通用版集群安装高可靠详细教程
- Hadoop3.0集群安装知识
- 分布式消息队列 RocketMQ 源码分析 —— Message 顺序发送与消费
- 深入解析快速排序算法的原理及其Go语言版实现
- Hadoop3.0: YARN Resource配置说明
- GO语言利用K近邻算法实现小说鉴黄
- Why Spring Boot
- 如何使用HammerDB进行MySQL基准测试
- 一个不可思议的MySQL慢查分析与解决
- Apache Spark 2.2中基于成本的优化器(CBO)
- golang的HTTP基本认证机制实例详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- vue + typescript 类组件教程
- 图像处理笔记(3)----OpenCV图像算术运算
- V - Distpicker 是一个简单易用的地区选择器
- [漫谈] 状态
- 变量覆盖
- 【Rust日报】2020-08-27 在Arduino Uno上面跑 Rust 程序
- 浅谈类加载
- Rust FFI 编程 - Rust导出共享库06
- go语言文件操作汇总
- Redis 主从复制 哨兵模式实战
- 【Rust日报】2020-08-28 Rust 1.46稳定版发布
- go语言反射
- 和同事谈谈Flood Fill 算法
- 【每周一库】 img_hash,rust下的pHash算法库
- 【Rust日报】2020-08-29 生产环境 Rust 序列化库的选择