Mermaid功能及用法

1.Mermaid（“美人鱼”）的定位和优势

Mermaid是一款在Markdown文本编辑器中，绘制示意图或图表的工具。

语法简单，使用高效，可以动态创建和修改图表。

2.在软件中使用Mermaid的前提设置

2.1Typora中的设置

第一步：

第二步：

在文字编辑页面输入“三个点+mermaid”回车键入代码，要注意的是其中三个点，按键位置在Tab上面，在英文状态下输入，结尾也要有三个点。

2.2VScode中的设置

第一步：

下载Mermaid支持插件，比如以下这个：

第二步：

同上，但要注意结尾三个点要手动补充，在Markdown预览页面就可以看到效果。

3.用Mermaid绘制各种图形的语法

3.1可实现图表

官网显示目前共有12种示意图或图表，实际操作可实现情况：

3.1.1可以实现11种

• 时序图（Sequence）
• 流程图（Flow）
• 类图（Class）
• 状态图（State）
• 实体关系图（ER）
• 甘特图（Gantt）
• 用户旅程图（User Journey）
• 分支图（Git）
• 饼图（Pie）
• 思维导图（Mindmap）
• 四象限图（QuadrantChart）

3.1.2尚不能实现1种

• 折线图（XYChart）

3.2实现图表的语法及效果图(用语雀文档演示)

3.2.1时序图（Sequence）

sequenceDiagram
    Alice ->> +John: He11o John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

关键功能说明：

条件分支的用法：

1. alt/else 块闭合：

   • 确保 alt 和 else 块用 end 闭合，否则 Mermaid 无法正确解析条件分支。

   • 调整缩进，使逻辑更清晰。

2. 激活条（+/-）匹配：

   • 每个 + 激活的参与者必须对应一个 - 来结束激活状态。

   • 例如 scene_data客户端 ->> +scene_data 后必须用 -->> -scene_data 结束。

　　3.填充色-语法说明：

• • rect <　　颜色> 开始彩色区域

  • end 结束区域　　

  • 必须包含完整的消息块　　

　　

示例：

sequenceDiagram
    participant A
    participant B
    participant C

    rect rgba(180, 240, 180, 0.3) # 外层绿色区块
        alt 缓存命中
            A ->> B: 返回缓存数据
        else 缓存未命中
            rect rgba(240, 180, 180, 0.3) # 内层红色区块
                A ->> C: 查询数据库
                C -->> A: 返回数据
            end
        end
    end

 

 

 

3.2.2流程图（Flow）

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[[Laptop]]
    C -->|Two| E[[iPhone]]
    C -->|Three| F[fa:fa-car Car]
    
    style A fill:#f9f,stroke:#333
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#ff9,stroke:#333
    style D fill:#cfc,stroke:#333
    style E fill:#cfc,stroke:#333
    style F fill:#cfc,stroke:#333

 

3.2.3类图（Class）

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

 

 

3.2.4状态图（State）

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

3.2.5实体关系图（ER）

classDiagram
    class CUSTOMER {
    }
    
    class DELIVERY-ADDRESS {
    }
    
    class ORDER {
    }
    
    class INVOICE {
    }
    
    class ORDER-ITEM {
    }
    
    CUSTOMER "1" *-- "1..*" DELIVERY-ADDRESS : has
    CUSTOMER "1" --> "0..*" ORDER : places
    CUSTOMER "1" --> "0..*" INVOICE : "liable for"
    DELIVERY-ADDRESS "1" --> "0..*" ORDER : receives
    INVOICE "1" --> "1..*" ORDER : covers
    ORDER "1" *-- "1..*" ORDER-ITEM : includes

 

3.2.6甘特图（Gantt）

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d
    
    section Section 1
    Task A           :a1, 2014-01-01, 30d
    Another Task     :after a1, 20d
    
    section Section 2
    Task in section  :2014-01-12, 12d
    Another task     :24d

 

3.2.7用户旅程图（User Journey）

journey
    title My Working Day
    section Go to Work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go Home
      Go downstairs: 5: Me
      Sit down: 3: Me

 

3.2.8分支图（Git）

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

 

 

3.2.9饼图（Pie）

pie title Pets Adopted by Volunteers
    "Dogs": 386
    "Cats": 85
    "Rats": 15

 

 

3.2.10思维导图（Mindmap）

mindmap
  root((Mind Mapping))
    Origins
      "Long history"
        :::icon(fa fa-book)
      Popularization
        "British author<br>Tony Buzan"
    Research
      Effectiveness
      Features
      "Automatic creation"
    Uses
      "Creative techniques"
      "Strategic planning"
      "Argument mapping"
    Tools
      "Pen and paper"
      Mermaid

 

 

3.2.11四象限图（QuadrantChart）

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]

 

3.2.12折线图（XYChart）

目前暂不支持实现。

感谢你花费宝贵的时间阅读这篇文章，你的点赞不仅是对我创作的肯定，也是我持续提供优质内容的动力。如果这篇文章对你有所帮助，欢迎收藏起来，以便日后查阅或再次参考。

 

转：https://zhuanlan.zhihu.com/p/674072709