markdown 流程图js_在Markdown中用mermaid语法绘制图表
Python数据挖掘与文本分析&Stata应用能力提升与实证前沿云特训~
Mermaid可以用文本方式绘制图表和流程图,相比Visio而言更加的轻量便捷,此外Markdown内部支持Mermaid语法,可以有效避免切换软件,让我们更加专注于内容本身。
mermaid官方文档
https://mermaid-js.github.io/mermaid/#/README
图表类型支持
饼形图(Pie Chart)
流程图(Flow Chart)
时序图(Sequence Diagram)
状态图(State Diagram)
甘特图(Gantt Diagram)
类图(class Diagram)
等等
饼形图
饼形图是我们经常用到的图表,在mermaid中最简单,基本上一看就会
代码
```mermaid pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15 ``
用到的关键词
关键词 | 功能 |
---|---|
pie | 定义饼形图 |
title | 标题 |
流程图
该流程图就是用下方的代码再markdown中实现的
```mermaidgraph RL; A-->B; A-->C; B-->D; C-->D;```
关键词解读
关键词 | 功能 |
---|---|
graph | 定义流程图 |
TD | 流程图方向。mermai的方位还有T、D、L、 R,分别代表上、下、左、右。两个方位组合成一个流动方向。本案例是从上到下,即TD |
-->
|
有向箭头 |
节点还可以用:::
调用修饰函数,如下
```mermaidgraph LR A:::someclass --> B classDef someclass fill:#f96;```
时序图
时序图用于描述对象之间的传递消息的时间顺序, 即用例中的行为顺序. 顺序图稍微复杂了一丢丢,代码如下
```mermaidsequenceDiagram participant Alice participant Bob participant John Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!```
用到的关键词
关键词 | 功能 |
---|---|
sequenceDiagram | 定义顺序表 |
participant | 定义图中的节点 |
loop 、end | 循环体代码块,以loop开头,end结束; |
Note | 提示框 |
right of
|
方位关键词 |
->>
|
实线箭头连接线 |
-->>
|
虚线箭头 |
状态图
通过建立对象的生存周期模型来描述对象随时间变化的动态行为
代码
```mermaidstateDiagram Start --> First First --> Second First --> Third Second --> End Third --> End state First { [*] --> fir fir --> [*] } state Second { [*] --> sec sec --> [*] } state Third {}```
代码关键词解读
关键词 | 功能 |
---|---|
stateDiagram | 用于定义状态图 |
[*]
|
实心黑点 |
-->
|
有向实线 |
state | 用于定义状态 |
我们可以看到状态state还可以定义内部的流程,如First和Second;Third没有定义内部处理过程。
甘特图
代码如下
```mermaidganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5d```
用到的关键词
关键词 | 功能 |
---|---|
gantt | 定义甘特图 |
dataFormat | 定义日期格式 |
title | 标题 |
excludes | 排除项目周期中的放假休息等日期 |
section | 定义一个项目 |
:done 、 :active 、:
|
项目中的状态 |
after | 紧随其后 |
class类图
面向对象的编程会经常看到类,类与类有所属关系。比如中国人是人类的一员,而人类又隶属于灵长类动物。
代码
```mermaidclassDiagram Animal Animal Animal Animal : int age Animal : String gender Animal: isMammal() Animal: mate() class Duck{ String beakColor swim() quack() } class Fish{ int sizeInFeet canEat() } class Zebra{ bool is_wild run() eat() }```
用到的关键词
关键词 | 功能 |
---|---|
classDiagram | 定义类图 |
隶属于某类 | |
Animal : int age
|
定义Animal的年龄属性(属性没有用括号) |
Animal: isMammal()
|
定义Animal的是否为哺乳动物方法(方法有括号) |
class Duck | 定义Duck类 |
大家如果熟悉Python,就能理解类的属性和方法区别就是是否有括号。
往期文章
读完本文你就了解什么是文本分析综述:文本分析在市场营销研究中的应用从记者的Twitter关注看他们稿件的党派倾向?Pandas时间序列数据操作70G上市公司定期报告数据集文本数据清洗之正则表达式Python网络爬虫与文本数据分析shreport库: 批量下载上海证券交易所上市公司年报Numpy和Pandas性能改善的方法和技巧漂亮~pandas可以无缝衔接BokehYelpDaset: 酒店管理类数据集10+G
markdown 流程图js_在Markdown中用mermaid语法绘制图表相关推荐
- Mermaid语法绘制图表
Typora 在画图方面的小技巧Mermaid,Mermaid是一种简单的类似 Markdown 的脚本语言,通过 JavaScript 编程语言,将文本转换为图片,支持绘制非常多种类的图,常见的有时 ...
- markdown 流程图js_如何在Markdown中画流程图
如何在Markdown中画流程图呢?当然是用mermaid了,mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用(现在 ...
- markdown 流程图js_科学网—让Markdown支持ASCII流程图和JavaScript流程图 - 李继存的博文...
2014-12-25 12:08:34 计算机领域中一直存在两种不同的理念并彼此竞争, 可视化与可控化, 或称为所见即所得与所愿即所得. 前者是Windows的典型做法, 而后者是Linux的典型理念 ...
- python绘制圆角正方形_Python中用圆角矩形绘制图表
我发现了一张有趣的图表,它展示了不同的大气微量化学物质的特定谱带,可用于卫星探测.在 上图使用了为光谱测量范围提供的圆角矩形.在 我想用python重现这种艺术.在 现在,我可以使用Plotly包以相 ...
- markdown流程图画法小结
markdown流程图画法小结 markdown 画图 流程图 最简单的流程图为例 ```mermaid! graph TD A --> B //在没有(),[].{}等括号的情况之下,图标默 ...
- 在Markdown中用mermaid画流程图和ER图
# 在Markdown中用mermaid画流程图 mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用. 流程图方向有下 ...
- markdown 做图 : Mermaid语法
Mermaid语法 使用Markdown 流程图制作: Mermaid 引自: https://mermaid-js.github.io/mermaid/#/ sequenceDiagram 使用 s ...
- 【高效工具】《三》Typora直接使用MarkDown语法绘制流程图、时序图、甘特图
平常使用Typora撰写内容的时候,偶尔会用到流程图,原来一直使用Word来作图,在插入到文档中,昨天偶然间了解到Typora支持使用mermaid来绘制流程图,才发现自己差点Out了.此处整理一下如 ...
- markdown 流程图js_MarkDown 流程图示例
后知后觉的我,最近才知道MarkDown支持mermaid语法,可以用MarkDown画流程图! 犹记得当初做毕业设计时,自己用Word插入一个个形状再插入一条条线的方式作图,流程稍微有点改动就要牵一 ...
最新文章
- Android px、dp、sp之间相互转换
- 如何设置SecureCRT通过代理连接SSH[转]
- 注解 @EnableFeignClients 工作原理
- 微信“看一看“个性化推荐:排序篇
- .Net 强名称签名程序集
- 编程算法 - 最小的k个数 红黑树 代码(C++)
- Win10开机提示蓝屏错误ntoskrnl.exe怎么修复?
- python 点云配准_点云的全局配准
- pandas—pd.DataFrame.sample
- Ros学习笔记(四)创建Ros消息
- 三菱GXWorks2 绘制梯形图
- 超级浏览器对跨境亚马逊防关联有用吗?
- matlab-imresize-最近邻插值、双线性插值、双三次插值学习总结
- #12304;#9733;#28404;#28404;#37329;#34701;#23458;#26381;#30005;#35805;#9733;#12305;
- PostgreSQL 数据库查询
- 更完美 联想乐Phone获取root权限教程
- 微信小程序实现举报功能
- 调查问卷生成json字符串
- 【Go】Go语言中的下划线
- 计算机网络(自顶向下)第四章部分答案
热门文章
- 【Flink】Flink 源码阅读笔记(20)- Flink 基于 Mailbox 的线程模型
- 【ElasticSearch】Es 源码之 NodeClient 源码解读
- 【ES】es 冻结的索引如何查询
- 【Flink】Flink CDC 数据同步 【视频笔记】
- 【MySQL】MySQL 执行 PROCEDURE ANALYSE 报错 ERROR 1064 (42000)
- 95-136-070-源码-Operator-扩展有状态的operators
- 95-280-036-源码-资源管理-计算资源管理-TaskSlot-TaskExecutor 中 Slot 的管理
- 12c集群日志位置_大数据系列教程006-开启日志聚合功能
- 惊呆了!被公司辞退拿了22万补偿金,原东家称每月涨薪7000,只要退还22万
- 如何手撸一个较为完整的RPC框架?