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

相关推荐
oak隔壁找我5 小时前
Node.js的package.json
前端·javascript
shenghaide_jiahu5 小时前
数学分析简明教程——总练习题6
学习
talenteddriver5 小时前
web: http请求(自用总结)
前端·网络协议·http
全栈派森5 小时前
Flutter 实战:基于 GetX + Obx 的企业级架构设计指南
前端·flutter
Awu12275 小时前
Vue3自定义渲染器:原理剖析与实践指南
前端·vue.js·three.js
石像鬼₧魂石5 小时前
HexStrike AI 理想操作流程清单(完整功能版)
linux·人工智能·windows·学习·ubuntu
支撑前端荣耀5 小时前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试
进击的野人5 小时前
Vue.js 插槽机制深度解析:从基础使用到高级应用
前端·vue.js·前端框架
czhc11400756635 小时前
C# 1221
java·servlet·c#
重铸码农荣光5 小时前
🎯 从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化全解析!
前端·react.js·架构