使用markmaid语言,在Typora中用mermaid画流程图和ER图

在markmaid中用mermaid画流程图和ER图


流程图方向有下面几个值

  • TB从上到下
  • BT从下到上
  • RL从右到左
  • LR从左到右
  • TD同TB

示例

从上到下

graph TD

A --> B
A B

从左到右

graph LR

A --> B
A B

基本图形

id + [文字描述] 矩形

  • id + (文字描述) 圆角矩形
  • id + > 文字描述] 不对称的矩形
  • id + {文字描述}菱形
  • id + ((文字描述))圆形

矩形 圆角矩形 不对成的矩形 菱形 圆形

节点之间的连接

A --> B A带箭头指向B

A --- B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B
A -- 描述 --- B A不带箭头指向B并在中间加上文字描述
A -- 描述 --> B A带箭头指向B并在中间加上文字描述
A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述

描述 描述 描述 描述 A B A B A B A B A B A B A B A B A B

子流程图

subgraph title

graph definition

end
three one c2 c1 a2 a1

自定义样式

语法:style id 具体样式

示例
start stop

相关推荐
酉鬼女又兒1 分钟前
零基础快速入门前端ES6 核心特性详解:Set 数据结构与对象增强写法(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6
慧一居士3 分钟前
Vue项目中,子组件调用父组件方法示例,以及如何传值示例,对比使用插槽和不使用插槽区别
前端·vue.js
香香甜甜的辣椒炒肉7 分钟前
Spring(1)基本概念+开发的基本步骤
java·后端·spring
我是伪码农23 分钟前
HTML和CSS复习
前端·css·html
林恒smileZAZ24 分钟前
前端实现进度条
前端
前端老石人27 分钟前
邂逅前端开发:从基础到实践的全景指南
开发语言·前端·html
阿珊和她的猫37 分钟前
以用户为中心的前端性能指标解析
前端·javascript·css
木心术137 分钟前
OpenClaw网页前端开发与优化全流程指南
前端·人工智能
Amumu1213837 分钟前
HTML5的新特性
前端·html·html5
SeSs IZED43 分钟前
【Nginx 】Nginx 部署前端 vue 项目
前端·vue.js·nginx