博客园可以直接支持 mermaid 了
博客园可以直接支持 mermaid 了
Mermaid 简介
Mermaid是一种基于Javascript的绘图工具,使用类似于Markdown的语法,使用户可以方便快捷地通过代码创建图表
平时写博客时可以使用Markdown编写,嵌入Mermaid能让阅读体验更佳
在 Markdown 中使用 Mermaid
```mermaid 绘图类型 Mermaid语句 ```
支持绘图类型
- 流程图:使用
graph
关键字 - 序列图:使用
sequenceDiagram
关键字 - 类图:使用
classDiagram
关键字 - 状态图:使用
stateDiagram
关键字 - 实体关系图:使用
erDiagram
关键字 - 用户旅程图:使用
journey
关键字 - 甘特图:使用
gantt
关键字 - 饼状图:使用
pie
关键字 - 需求图:使用
requirementDiagram
关键字
注意:使用中文可能会出现异常
实例展示:
```mermaid erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in" ```
类图
流程图 简视
流程图是使用 flowchart LR
- 设置节点
flowchart LR 节点名称[节点内容]
如果没有设置[节点内容],默认为节点名称
例子:
```mermaid flowchart LR id ```
```mermaid flowchart LR id[This is the text in the box] ```
-
流程控制
不同的流程控制会有不同的效果
- TD - 自上而下/与TB相同
- TB - 从上到下
- BT - 从下而上
- RL - 从右到左
- LR - 从左到右
flowchart 流程控制 节点名称[节点内容] --> 节点名称[节点内容]
例子:
```mermaid flowchart TD Start --> Stop ```
```mermaid flowchart LR id1[box1] --> id2[box2] ```
- 节点形状
```mermaid flowchart LR id1(This is the text in the box) ```
```mermaid flowchart LR id1((This is the text in the circle)) ```
对于括号可以使用()
[]
{}
/
\
进行组合,/
\
只能内层不可单独使用
比如:[/文本\]
```mermaid flowchart LR id[/文本\] ```
总之Mermaid的内容很多在此不在继续介绍
拒绝伸手党,下面自助
建议自行探索mermaid官网资料
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库