目录

一、Mermaid简介与Typora配置

1.1 什么是Mermaid？

1.2 Typora配置

二、6大核心图表语法详解

2.1 流程图（Flowchart）

2.2 时序图（Sequence Diagram）

2.3 类图（Class Diagram）

2.4 甘特图（Gantt）

2.5 状态图（State Diagram）

2.6 饼图（Pie Chart）

三、Typora专属技巧

3.1 实时预览优化

3.2 导出配置

四、常见问题解决方案

五、Mermaid进阶技巧

5.1 自定义样式

5.2 子图嵌套

六、学习资源推荐

---

一、Mermaid简介与Typora配置

1.1 什么是Mermaid？

        Mermaid是一种基于文本的图表绘制语言，通过简单的语法即可生成流程图、时序图、甘特图等专业图表，完美兼容Markdown编辑器。

1.2 Typora配置

1. 版本要求：Typora ≥ 0.9.9（建议升级到最新版）

2. 启用方式：设置 → Markdown → 勾选Mermaid

3. 渲染模式：实时预览，导出时自动转换为SVG

 

---

二、6大核心图表语法详解

2.1 流程图（Flowchart）

graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> D

语法说明：

• graph TD：从上到下布局（TB/BT/RL/LR）

• A[文本]：矩形节点

• B{文本}：菱形判断节点

• -->：连接线，可添加|文字|描述

---

2.2 时序图（Sequence Diagram）

sequenceDiagram
    participant 客户端
    participant 服务端
    客户端->>服务端: HTTP请求
    服务端-->>客户端: JSON响应
    loop 重试机制
        客户端->服务端: 失败重试
    end

语法要点：

• participant：定义参与者

• ->>：实线箭头，-->>虚线箭头

• loop：循环区块

• alt/else：条件分支

 

---

2.3 类图（Class Diagram）

classDiagram
    Animal <|-- Duck : 继承
    Animal <|-- Fish
    Animal : +String name
    Animal : +void eat()
    class Duck{
        +void swim()
    }
    class Fish{
        +int depth
        +void dive()
    }

关键语法：

• <|--：继承关系

• +：public成员

• -：private成员

• #：protected成员

所有关联关系：

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

classA <|-- classB	继承关系
classC *-- classD	组合关系
classE o-- classF	聚合关系
classG <-- classH	单向关联关系
classI -- classJ	双向关联关系
classK <.. classL	依赖关系
classM <|.. classN	实现关系
classO .. classP	关联关系

---

2.4 甘特图（Gantt）

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 设计
    需求分析 :a1, 2023-08-01, 7d
    原型设计 : after a1, 5d
    section 开发
    前端开发 :2023-08-10, 10d
    后端开发 :5d

 

参数说明：

• dateFormat：日期格式

• section：任务分组

• after：任务依赖关系

• 时间单位：d(天)、w(周)、m(月)

 

---

2.5 状态图（State Diagram）

stateDiagram-v2
    [*] --> 待机
    待机 --> 运行 : 启动命令
    运行 --> 待机 : 停止命令
    运行 --> 故障 : 异常发生
    故障 --> [*] : 系统复位

---
title: Simple sample
---
stateDiagram-v2
    [*] --> Still
    Still --> [*]

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

高级特性：

• [*]：初始/终止状态

• -->：状态转换

• : 文本：转换条件

• 支持嵌套状态

 

---

2.6 饼图（Pie Chart）

pie
    title 编程语言使用率
    "Java" : 42
    "Python" : 30
    "JavaScript" : 20
    "其他" : 8

参数说明：

• 数值自动计算百分比

• 支持小数："Java": 42.5

• 颜色自定义（需CSS支持）

 

---

三、Typora专属技巧

3.1 实时预览优化

• 快捷键：Ctrl+/切换源码模式

• 主题适配：自动匹配Typora深色/浅色主题

• 缩放调整：右键图表 → 缩放级别

3.2 导出配置

# Typora导出PDF设置
mermaid:
  theme: default # 可选dark/forest/neutral
  fontFamily: "Microsoft YaHei"
  sequence:
    diagramMarginX: 50
    diagramMarginY: 10

---

四、常见问题解决方案

问题	解决方案
图表不渲染	检查是否启用Mermaid插件
中文显示乱码	添加%%{init: {'theme': 'base', 'themeVariables': { 'fontFamily': '微软雅黑'}}%%
连线文字位置偏移	使用--- 文字 ---替代`
导出PDF缺失图表	安装pandoc并配置环境变量

---

五、Mermaid进阶技巧

5.1 自定义样式

graph LR
    A[黑色背景-红色边框-白色字体] --> B{绿色背景-黑色边框-红色字体}
style A fill: #000000
style A stroke:#FF0000
style A color:#FFFFFF
style B stroke:#000000
style B fill: #008000
style B color:#FF0000

5.2 子图嵌套

flowchart TB
    subgraph 子系统A
        A1 --> A2
    end
    subgraph 子系统B
        B1 --> B2
    end
    A2 --> B1

 

---

六、学习资源推荐

1. 官方文档：Mermaid Live Editor

2. 速查手册：Mermaid Cheatsheet 或是 Mermaid.js指南

3. Typora教程：官方Mermaid指南

4. online网站：mermaidchart  或是 中文Mermaid