Typro的基础使用以及画图

Typro的基础使用

标题

#标题#
  • ​ ’#个数‘代表标题等级

文字

~~两个波浪号代表删除线~~
  • 两个波浪号代表删除线
**两个星号代表加粗**
  • 两个星号代表加粗
*一个星号代表斜体*
  • 一个星号代表斜体
<u>下划线<u>
  • 下划线快捷键ctrl+u
==两个=代表高亮==
  • 两个=代表高亮
~ 包裹为下标 H~2~O~2~
  • ​ H2O2 ~ 包裹为下标
^ 包裹为上标  X^2^
  • ​ X2 ^ 包裹为上标
:smile:  :  包裹为表情
  • 😄 : 包裹为表情

表格

name | age
--- | ---
快捷键|CTRL+T
nameage
姜傲20
阿苏20

引用

一级引用 >

二级引用 >>

三级引用 >>>

列表

无序列表

--符号 空格
* 可以使用*作为标记
+ 可以使用+作为标记
- 可以使用-作为标记
  • 可以使用*作为标记
  • 可以使用+作为标记
  • 可以使用-作为标记

有序列表

--数字. 空格
1. 有序列表以数字和.开始
2. 数字的序列并不会影响生产的列表序列
3. 但仍然推荐按照自然顺序(1.2.3..)编写
  1. 有序列表以数字开始
  2. 数字的序列并不会影响生产的列表序列
  3. 但仍然推荐按照自然顺序(1.2.3…)编写

代码

代码块

public class Base64Test {
    @Test
    public void test() throws UnsupportedEncodingException {
        // 编码
        String encode = Base64.getEncoder().encodeToString("姜傲".getBytes("UTF-8"));
        System.out.println(encode);
        // 解码
        byte[] decode = Base64.getDecoder().decode(encode);
        System.out.println(new String(decode, "UTF-8"));
    }
}

行内代码

`java` `C`

java C

分割线

---
***


跳转

外部跳转

[link text](link)
[跳转百度](http://www.baidu.com)

[跳转百度](www.baidu.com)

### 	内部跳转
[跳转查看引用](##引用)

跳转查看引用

自动连接

<http://www.baidu.com>

http://www.baidu.com

图片

### 	网上图片
![图片名字](图片地址)
![java](https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuamF2YXdlYi5zaG9wL3VwbG9hZC9pbWFnZS8yMDE5MDkyNC8xNTY5MzEzNjQyODkxMDY2NjAxLmdpZg)

java

本地图片

![本地图片名](../Imgs/test.jpg)

Markdown画图篇

轻量级,功能并不全
Mermaid:一个用于画流程图,状态图,时序图,甘特图的库
使用JS进行本地渲染,广泛集成于虚脱的Markdown编辑器中
生成的不是一个图片,而是一段HTML代码

流程图(graph)

用词含义

用词含义
TB从上到下
BT从下到上
RL从右到左
LR从左到右
graph TB
 A-->B
 B-->C
 C-->A
A
B
C
graph LR
 A-->B
 B-->C
 C-->A
A
B
C

节点形状

表述说明含义
id[文字]矩形节点表示过程,也就是整个流程中的一个环节
id(文字)圆角矩形节点表示开始和结束
id((文字))圆形节点表示连接。为避免流程过长或有交叉,可将流程切开。成对
id{文字}菱形节点表示判断、决策
id>文字]右向旗帜状节点
graph TB
  A
  B(圆角矩形节点)
  C[矩形节点]
  D((圆形节点))
  E{菱形节点}
  F>右向旗帜状节点] 
A
圆角矩形节点
矩形节点
圆形节点
菱形节点
右向旗帜状节点
graph LR
 begin(JA)-->play[球场]
 -->ball{篮球}
 ball--YES-->hava[投篮]-->happy[开心]-->back(回家)
 ball--NO-->sad[伤心]-->back
YES
NO
JA
球场
篮球
投篮
开心
回家
伤心

连线形状

graph TB
  A1-->B1
  A2---B2
  A3--text---B3
  A4--text-->B4
  A5-.-B5
  A6-.->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  A10==>B10
  A11==text===B11
  A12==text==>B12
text
text
text
text
text
text
A1
B1
A2
B2
A3
B3
A4
B4
A5
B5
A6
B6
A7
B7
A8
B8
A9
B9
A10
B10
A11
B11
A12
B12

子图表

graph LR
subgraph 兴高采烈
 	begin(JA)-->play[球场]
 	-->ball{篮球}
 end
 ball--YES-->hava[投篮]-->happy[开心]-->back(回家)
 ball--NO-->sad[伤心]-->back 
兴高采烈
YES
NO
篮球
球场
JA
投篮
开心
回家
伤心

序列图(Sequence diagram)

sequenceDiagram
		Title: 打篮球
    JA->>球场: 有人么
    球场-->>JA: 没有,那就回家
JA 球场 有人么 没有,那就回家 JA 球场 打篮球

饼图(Pie)

pie
    title TOTAL
    "后端" : 3
    "测试" : 1
    "前端" : 2 
    "UI" :  1	
43% 14% 29% 14% TOTAL 后端 测试 前端 UI

甘特图(gantt)

  title 标题
	dateFormat 日期格式
	section 部分名
	任务名:参数一, 参数二, 参数三, 参数四,参数五
 
  //参数一:crit(是否重要,红框框) 或者 不填
  //参数二:done(已完成)、active(正在进行) 或者 不填(表示为待完成状态)
  //参数三:取小名 或者 不填
  //参数四:任务开始时间
  //参数五:任务结束时间
Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值