底部
分享
加群
指南
插件
视频
obsidian文档咖啡豆版
obsidian文档咖啡豆版

主题

mermaid流程图

coffeebean作者🖊
大约 5 分钟阅读时间⌛

更新说明

  • 2023-10-16 ✔优化【流程图基础语法-如何调整方向】
  • 2023-10-16 ✔新增【流程图高级用法】序列图
  • 2023-10-16 ✔新增【流程图高级用法】甘特图
  • 2023-10-16 ✔新增【流程图高级用法】类图class
  • 2023-10-16 ✔新增【流程图高级用法】ER图
  • 2023-10-16 ✔新增【流程图高级用法】mindmap导图
  • 2023-10-16 ✔新增【流程图高级用法】四象限图-SWOT分析

mermaid流程图基础语法 ​

插件简介： mermaid，是markdown自带的流程图语法，obsidian中也支持了部分mermaid的特性。我们不用了解太多，照着下面的用就可以了。

代码： ::: code-tabs @tab 流程图语法

markdown
```mermaid
  flowchart TB
      A("开始") --> B["一级"]
      A --> C("二级")
      A --> D("三级")
```

@tab 带说明的流程图

markdown
```mermaid
  flowchart TB
      A("开始") --> B["一级"]
      A --> C("二级")
      A -->|"说明"| D("三级")
```

@tab 带子菜单的流程图

markdown
```mermaid
  flowchart TB
      A("开始") --> B["一级"]
      A --> C("二级")
      A -->|"说明"| D("三级")
          B --> B1("我是B的下级菜单")
          C --> C1("我是C的下级菜单")
```

@tab 调整方向

markdown
```mermaid
  flowchart LR
      A("开始") --> B["一级"]
      A --> C("二级")
      A -->|"说明"| D("三级")
          B --> B1("我是B的下级菜单")
          C --> C1("我是C的下级菜单")
```

:::

效果： ::: code-tabs @tab 流程图语法

mermaid
  flowchart TB
      A("开始") --> B["一级"]
      A --> C("二级")
      A --> D("三级")

@tab 带说明的流程图

mermaid
  flowchart TB
      A("开始") --> B["一级"]
      A --> C("二级")
      A -->|"说明"| D("三级")

@tab 带子菜单的流程图

mermaid
  flowchart TB
      A("开始") --> B["一级"]
      A --> C("二级")
      A -->|"说明"| D("三级")
          B --> B1("我是B的下级菜单")
          C --> C1("我是C的下级菜单")

@tab 调整方向

mermaid
  flowchart LR
      A("开始") --> B["一级"]
      A --> C("二级")
      A -->|"说明"| D("三级")
          B --> B1("我是B的下级菜单")
          C --> C1("我是C的下级菜单")

:::

如何调整方向 ​

在上面的代码中，我们可以看到 flowchart TB 和 flowchart LR 两种写法，这两种写法的区别就是方向不同。

  • TB 表示从上到下（Top to Bottom）
  • LR 表示从左到右（Left to Right）
  • BT 表示从下到上（Bottom to Top）
  • RL 表示从右到左（Right to Left）

如何调整形状 ​

在上面的代码中，我们可以看到 A("开始") 和 B["一级"] 两种写法，这两种写法的区别就是形状不同。

  • A("开始") 表示圆角矩形
  • B["一级"] 表示矩形
  • C{"二级"} 表示菱形
  • D[("三级")] 表示圆形
  • E[["四级"]] 表示子程序形状
  • F[("五级")] 表示圆柱形
  • G(("六级")) 表示圆形
  • H>"七级"] 表示不对称形状
  • I八级 表示六边形
  • J[/"九级"/] 表示平行四边形
  • K[\"十级"\] 表示平行四边形（反向）
  • L[/"十一级"\] 表示梯形
  • M[\"十二级"/] 表示梯形（反向）

代码：

markdown
```mermaid
flowchart TB
    A("圆角矩形")
    B["矩形"]
    C{"菱形"}
    D[("圆柱形")]
    E[["子程序形状"]]
    F(("圆形"))
    G>"不对称形状"]
    H{{"六边形"}}
    I[/"平行四边形"/]
    J[\"平行四边形（反向)"\]
    K[/"梯形"\]
    L[\"梯形（反向)"/]
```

效果：

mermaid
flowchart TB
    A("圆角矩形")
    B["矩形"]
    C{"菱形"}
    D[("圆柱形")]
    E[["子程序形状"]]
    F(("圆形"))
    G>"不对称形状"]
    H{{"六边形"}}
    I[/"平行四边形"/]
    J[\"平行四边形（反向)"\]
    K[/"梯形"\]
    L[\"梯形（反向)"/]

如何调整连接线 ​

在上面的代码中，我们可以看到 A --> B 和 A -->|"说明"| D 两种写法，这两种写法的区别就是连接线不同。

  • A --> B 表示实线箭头
  • A --- B 表示实线
  • A -.-> B 表示虚线箭头
  • A -.- B 表示虚线
  • A ==> B 表示粗实线箭头
  • A === B 表示粗实线
  • A -->|"说明"| B 表示带说明的实线箭头
  • A -.->|"说明"| B 表示带说明的虚线箭头
  • A ==>|"说明"| B 表示带说明的粗实线箭头

代码：

markdown
```mermaid
flowchart LR
    A("开始") --> B["实线箭头"]
    A --- C["实线"]
    A -.-> D["虚线箭头"]
    A -.- E["虚线"]
    A ==> F["粗实线箭头"]
    A === G["粗实线"]
    A -->|"说明"| H["带说明的实线箭头"]
    A -.->|"说明"| I["带说明的虚线箭头"]
    A ==>|"说明"| J["带说明的粗实线箭头"]
```

效果：

mermaid
flowchart LR
    A("开始") --> B["实线箭头"]
    A --- C["实线"]
    A -.-> D["虚线箭头"]
    A -.- E["虚线"]
    A ==> F["粗实线箭头"]
    A === G["粗实线"]
    A -->|"说明"| H["带说明的实线箭头"]
    A -.->|"说明"| I["带说明的虚线箭头"]
    A ==>|"说明"| J["带说明的粗实线箭头"]

mermaid流程图高级用法 ​

序列图 ​

序列图是一种交互图，显示进程如何相互操作以及以什么顺序操作。

代码：

markdown
```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

效果：

mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

甘特图 ​

甘特图是一种条形图，用于说明项目进度表。

代码：

markdown
```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```

效果：

mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

类图 ​

类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模，并用于将模型转换为编程代码的详细建模。

代码：

markdown
```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
```

效果：

mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

ER图 ​

实体关系图（ER图）显示实体集之间的关系。

代码：

markdown
```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

效果：

mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

mindmap导图 ​

思维导图是一种图表，用于可视化地组织信息。

代码：

markdown
```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

效果：

mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

四象限图-SWOT分析 ​

四象限图用于SWOT分析等场景。

代码：

markdown
```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

效果：

mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

分享知识、成就自我

Copyright © 2025 coffeebean

分享知识、成就自我
Copyright © 2025 coffeebean