博客园可以直接支持 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"
```
CUSTOMERDELIVERY-ADDRESSORDERINVOICEORDER-ITEMPRODUCT-CATEGORYPRODUCThasplacesliable forreceivescoversincludescontainsordered in

类图

Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3

流程图 简视

流程图是使用 flowchart LR

  • 设置节点
flowchart LR
节点名称[节点内容]

如果没有设置[节点内容],默认为节点名称

例子:

```mermaid
flowchart LR
id
```
id
```mermaid
flowchart LR
id[This is the text in the box]
```
This is the text in the box
  • 流程控制

    不同的流程控制会有不同的效果

    • TD - 自上而下/与TB相同
    • TB - 从上到下
    • BT - 从下而上
    • RL - 从右到左
    • LR - 从左到右
flowchart 流程控制
节点名称[节点内容] --> 节点名称[节点内容]

例子:

```mermaid
flowchart TD
Start --> Stop
```
Start
Stop
```mermaid
flowchart LR
id1[box1] --> id2[box2]
```
box1
box2
  • 节点形状
```mermaid
flowchart LR
id1(This is the text in the box)
```
This is the text in the box
```mermaid
flowchart LR
id1((This is the text in the circle))
```
This is the text in the circle

对于括号可以使用() [] {} / \进行组合,/ \ 只能内层不可单独使用

比如:[/文本\]

```mermaid
flowchart LR
id[/文本\]
```
文本

总之Mermaid的内容很多在此不在继续介绍

拒绝伸手党,下面自助
建议自行探索mermaid官网资料




posted @   sha0dow  阅读(431)  评论(4编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示