使用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

相关推荐
阿珊和她的猫几秒前
Webpack 优化:构建速度与包体积的双重提升
前端·webpack·node.js
阿珊和她的猫1 分钟前
Webpack 打包体积优化:让应用更轻量、更高效
前端·webpack·状态模式
im_AMBER1 分钟前
Vite + React 项目启动深度踩坑指南
前端·学习·react.js·前端框架
Hammer Ray5 分钟前
前端开发基础概念(React)
前端·react.js·前端框架
wdfk_prog28 分钟前
[Linux]学习笔记系列 -- [kernel]kthread
linux·笔记·学习
沐浴露z1 小时前
【微服务】基本概念介绍
java·微服务
Z3r4y2 小时前
【代码审计】RuoYi-4.7.3&4.7.8 定时任务RCE 漏洞分析
java·web安全·ruoyi·代码审计
Sunlightʊə2 小时前
2.登录页测试用例
运维·服务器·前端·功能测试·单元测试
Kuo-Teng3 小时前
LeetCode 160: Intersection of Two Linked Lists
java·算法·leetcode·职场和发展