Mermaid流程图
Markdown文档生成流程图、时序图、类图、状态图、ER图、用户旅程图、甘特图、饼图等
官网
Github 项目地址
一、介绍
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中
二、流程图基础
1、流程图符号和含义
Mermaid 的流程图的图形含义使用象形的表达形式，非常类似中国象形，理解起来也不难，比如矩形
[],圆角矩形(),圆形(())
| 图形 | 符号含义 | |
|---|---|---|
| 圆角矩形 | 表示开始和结束 |
id(“文字”)
|
| 矩形 | 表示过程环节 |
id["文字"]
|
| 单向箭头线段 | 表示流程进行方向 | |
| 菱形 | 决策判断 |
id{"文字"}
|
| 圆形 | 表示连接，避免流程图 |
id(("文字"))
|
| 右向旗帜节点 | 标志提示 |
id>"文字"]
|
更多形状参考官方文档
示例：
graph TBstart("圆角矩形")rectangle["矩形"]rhombus{"菱形"}round(("圆形"))right_arrow>"右向旗帜节点"]
2、节点之间的连线
| 表述 | 说明 | 使用示例 |
|---|---|---|
-->
|
添加尾部箭头 |
A(把你送进去监牢)-->B{打开监牢}
|
---
|
不添加尾部箭头 |
A(把你送进去监牢)---B{打开监牢}
|
--
|
单线 |
A(把你送进去监牢)--B{打开监牢}
|
--text--
|
单线上加文字 |
A(把你送进去监牢)--你好亲爱的--B{打开监牢}
|
==
|
粗线 |
A(把你送进去监牢)==>B{打开监牢}
|
==text==
|
粗线加文字 | |
-.-
|
虚线 | |
-.text.-
|
虚线加文字 |
代码示例 1:箭头连线示例
graph TDA(把你送进去监牢)-->B{打开监牢门}B-->|"你是初犯,使用小箭头"|C["放进去小监牢"]C---E("三杠没有箭头指向")B==>|"你是老犯,使用大箭头"|D["换个大监牢"]D-- "终身监禁" ---forever("没出头了")D---|"终身监禁"|forever("没出头了")
代码示例 2：箭头上加文字
加文字方式：节点连线表述定义+文字+节点连线表述定义
如：-.|“文字”|.->id("")
graph TBconnect["数据库连接"]--"root 127.0.0.1"-->start{"开始连接"}start-.虚线加文字.->ok["连接成功"]start-.->faild["虚线不加文字"]
代码示例3：结合fontawesome使用
graph TDB["fa:fa-weixin weixin"]B-->C[fa:fa-ban forbidden]B-->D(fa:fa-spinner waitting);
代码示例4：给流程表做标题
将其添加到流程图TD定义之后的顶部。
这将定义一个框，用下划线（<u>）设置其文本的样式，并使框填充和描边为空白#FFF（样式标题）并将其链接到实际的第一步/框（FirstStep），从而使其显示在顶部，同时使使用linkStyle 0隐藏链接
graph TD
http://www.taodudu.cc/news/show-3097191.html
相关文章：
- 企业标准怎么申请，具体的备案流程
- 标准流程Invalid bound statement (not found)出现原因和最特殊的解决方法
- ERP标准流程
- 数据挖掘建模的标准流程是什么，主要分为哪几步？
- 数据挖掘的标准流程
- 游戏开发标准流程
- 金蝶采购模块退货业务标准流程
- 数据挖掘标准流程CRISP-DM
- 数据分析的标准流程，基本划分为哪几步？
- 【流程标准化】标准操作规程（SOP）基础知识
- 【STC单片机学习】第十三课：串口通信和RS485
- 经典的shell十三问
- Understanding and Modeling of WiFi Signal Based Human Activity Recognition
- 泛函分析笔记(十三) 傅里叶级数、紧自伴算子
- Android高级之十三讲之安全方案
- shell经典,shell十三问
- shell 经典, shell 十三问
- 第十三届蓝桥杯大赛软件赛省赛（C/C++ 大学B组）
- （五十三） Android O wifi 状态机消息处理及状态切换流程分析-以WifiController为例
- 【毕业设计】室内定位系统（wifi指纹定位）
- wifi室内定位讲解——K邻近法
- shell 十三问：
- 高级shell编程笔记(第三十三章 杂项)
- Download模块 (十三)
- WIFI学习第一天
- 第十三届蓝桥杯大赛软件赛省赛（C/C++ 大学A组）
- 二十三 HDP搭建大数据环境
- SHELL 十三问
- 网中人《shell十三问》简体版整理
- 【收藏】经典shell十三问
Mermaid流程图相关推荐
- Markdown 里 mermaid 流程图(flowchart)教程
作者: Jintao 日期:2021-7-12 简介: 未完待续 Markdown 里 mermaid 流程图flowchart教程 前言: 1.0 流程图的方向 TD LR BT RL 2.0 节点 ...
- hexo 利用 Markdown 语法画 mermaid 流程图
hexo默认不支持流程图,flowchart是一种简便好用的解决方案,但由于其语法过于简单,导致其在应付稍复杂一些的流程图时捉襟见肘,本文记录在hexo中添加Mermaid流程图的方法. 添加支持 安 ...
- l流程图平行四边形_关于写作那些事之快速上手Mermaid流程图
本文主要介绍了如何快速上手 Mermaid 流程图,不用贴图上传也不用拖拉点拽绘制,基于源码实时渲染流程图,操作简单易上手,广泛被集成于主流编辑器,包括 markdown 写作环境. 通过本节内容你将 ...
- Hexo引入Mermaid流程图和MathJax数学公式
文章目录 Mermaid MathJax 参考文献 近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二: 如果把流程图和数学公式都以图片方式放到文章内,当 ...
- mermaid流程图工具_MarkDown绘图mermaid流程graph
[注]更多详情请参阅mermaid流程图官方文档. 1. 绘图方向 命令 方向 TB(TD) 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 2. 节点形状 命令 形状 A[text] 文本 ...
- mermaid流程图工具_Markdown高级使用之流程图
文章首发于博客园,转载请注明出处: Markdown高级使用之流程图 - 小白先生哦 - 博客园 流程图在Markdown中的的表现形式就是代码块,代码块语言标记为mermaid.主要内容大体分为:方 ...
- Flowchart流程图和 Mermaid流程图的对比
在CSDN的markdown编辑器里有两种流程图绘制方式,分别是mermaid下的flowchart流程图和graph流程图.两种流程图的语法和绘制效果都有一定区别.本文重点讨论流程图的区别 本文 ...
- mermaid流程图工具_基于 Mermaid 的时序图、流程图和甘特图
简介 Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中. 之前用过 PlantUML,但是发现这个东西的实现原理是生 ...
- mermaid与flowchart.js绘制流程图分支结构试验
mermaid与flowchart.js绘制流程图分支结构试验 近日绘制流程图时对不断修改调整流程图中节点位置感到很厌烦,想要改用代码方式来写流程图.以下试验均基于CSDN编辑器的的mermaid和f ...
最新文章
- pytorch问题索引
- 工作发狂：Mybatis 中$和#千万不要乱用！
- 为什么绩效管理如此重要？有哪些数字化绩效管理工具？
- win10 安装MySQL过程和遇到的坑
- 每天一道LeetCode-----实现一个栈，提供一个接口用于返回栈中最小值
- Kafka2.5-＞Flink1.12-＞Mysql8(Jark实验改为DDL形式)
- POJ2560-雀斑(Freckles)【图论，并查集，最小生成树，KURUSKAL】
- thymeleaf 模板语言简介
- android非法字符 ufeff,Java-在Android Studi上编译时出现错误（1,1）非法字符'\ ufeff'...
- Mac下安装emacs+cscopse+auto-complete
- 如何更高效地使用 OkHttp
- 文档对象模型(DOM)
- catia工程图纸中如何画图_catia工程图 方法和步骤
- tecplot无法处理高版本fluent导出的Ensight格式
- 弗曼学习方法-终极快速学习方法
- 【毕业设计_课程设计】基于python的微信公众平台机器人的设计与实现
- M001: MongoDB Basics Chapter 3: Deeper Dive on the MongoDB Query Language学习记录
- 获取高程数据并生成等高线
- 光纤熔接机的光纤对准方式
- 更新后的微信新功能，你知道吗？