一图胜千言：Typora中Mermaid图表语法全解析
目录
一、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配置
-
版本要求：Typora ≥ 0.9.9（建议升级到最新版）
-
启用方式：
设置 → Markdown → 勾选Mermaid -
渲染模式：实时预览，导出时自动转换为SVG
二、6大核心图表语法详解
2.1 流程图（Flowchart）
graph TDA[开始] --> B{条件判断}B -->|是| C[执行操作]B -->|否| D[结束]C --> D
语法说明：
graph TD：从上到下布局（TB/BT/RL/LR）
A[文本]：矩形节点
B{文本}：菱形判断节点
-->：连接线，可添加|文字|描述
2.2 时序图（Sequence Diagram）
sequenceDiagramparticipant 客户端participant 服务端客户端->>服务端: HTTP请求服务端-->>客户端: JSON响应loop 重试机制客户端->服务端: 失败重试end
语法要点：
participant：定义参与者
->>：实线箭头，-->>虚线箭头
loop：循环区块
alt/else：条件分支
2.3 类图（Class Diagram）
classDiagramAnimal <|-- Duck : 继承Animal <|-- FishAnimal : +String nameAnimal : +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）
gantttitle 项目计划dateFormat YYYY-MM-DDsection 设计需求分析 :a1, 2023-08-01, 7d原型设计 : after a1, 5dsection 开发前端开发 :2023-08-10, 10d后端开发 :5d 
参数说明：
dateFormat：日期格式
section：任务分组
after：任务依赖关系
时间单位：d(天)、w(周)、m(月)
2.5 状态图（State Diagram）
stateDiagram-v2[*] --> 待机待机 --> 运行 : 启动命令运行 --> 待机 : 停止命令运行 --> 故障 : 异常发生故障 --> [*] : 系统复位
---
title: Simple sample
---
stateDiagram-v2[*] --> StillStill --> [*]Still --> MovingMoving --> StillMoving --> CrashCrash --> [*]
高级特性：
[*]：初始/终止状态
-->：状态转换
: 文本：转换条件支持嵌套状态
2.6 饼图（Pie Chart）
pietitle 编程语言使用率"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/neutralfontFamily: "Microsoft YaHei"sequence:diagramMarginX: 50diagramMarginY: 10四、常见问题解决方案
| 问题 | 解决方案 |
|---|---|
| 图表不渲染 | 检查是否启用Mermaid插件 |
| 中文显示乱码 | 添加%%{init: {'theme': 'base', 'themeVariables': { 'fontFamily': '微软雅黑'}}%% |
| 连线文字位置偏移 | 使用--- 文字 ---替代` |
| 导出PDF缺失图表 | 安装pandoc并配置环境变量 |
五、Mermaid进阶技巧
5.1 自定义样式
graph LRA[黑色背景-红色边框-白色字体] --> 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 TBsubgraph 子系统AA1 --> A2endsubgraph 子系统BB1 --> B2endA2 --> B1
六、学习资源推荐
-
官方文档：Mermaid Live Editor
-
速查手册：Mermaid Cheatsheet 或是 Mermaid.js指南
-
Typora教程：官方Mermaid指南
-
online网站：mermaidchart 或是 中文Mermaid