type
status
date
slug
summary
tags
category
icon
password
Mermaid 是一种基于文本的图表生成工具,通过简单的代码语法即可创建各种专业图表。它具有以下显著优势:
- 跨平台兼容性强:支持 Notion、Obsidian、GitHub、GitLab、VSCode 等主流文档平台
- 便于版本控制:纯文本格式,易于追踪修改历史
- 修改效率高:直接编辑代码即可更新图表,无需返回原制图工具重新导出
- 集成简单:大多数平台原生支持或通过插件即可使用
相比传统的图片插入方式,Mermaid 代码化的特性使得图表维护更加便捷。虽然需要学习一定的语法,但掌握 20% 的核心语法即可满足 80% 的使用需求,是一项值得投资的通用技能。
一、Mermaid 核心语法框架图
二、各图表核心语法详解(按使用频率排序)
1. 流程图(使用频率:★★★★★)
核心语法:
- 方向声明:
graph TD(上下)或graph LR(左右)
- 节点形状:
[文本]矩形{文本}菱形决策(文本)圆角矩形
- 连接线:
->箭头连接
- 带标签连接:
A -->|标签| B
2. 序列图(使用频率:★★★★☆)
核心语法:
- 声明:
sequenceDiagram
- 参与者:
participant X as 别名
- 消息:
->>实线箭头-->虚线箭头
- 备注:
Note right/left of X: 文本
3. 甘特图(使用频率:★★★☆☆)
核心语法:
- 声明:
gantt
- 标题:
title 项目标题
- 日期格式:
dateFormat YYYY-MM-DD
- 阶段:
section 阶段名
- 任务:
任务名 :id, 开始时间, 持续时间
4. 类图(使用频率:★★★☆☆)
核心语法:
- 声明:
classDiagram
- 类定义:
class 类名 { ... }
- 成员可见性:
+公共- 私有
#保护
- 继承关系:
父类 <|-- 子类
5. 饼图(使用频率:★★☆☆☆)
核心语法:
- 声明:
pie
- 标题:
title 图表标题
- 数据项:
"标签" : 数值
6. 状态图(使用频率:★★☆☆☆)
核心语法:
- 声明:
stateDiagram-v2
- 初始状态:
[*] --> 状态
- 状态转换:
状态 --> 状态 : 事件
三、综合应用示例
四、实用资源链接
推荐工具与文档:
- 在线编辑器:
- Mermaid Live Editor - 官方实时渲染器,支持导出PNG/SVG
- Mermaid.ink - 快速生成Mermaid图表链接
- 官方文档:
- Mermaid 官方文档 - 完整语法参考和示例
- 快速入门指南 - 官方新手教程
- 集成插件:
- GitHub 仓库 - 查看源码和提交问题
- VSCode Markdown Mermaid - VSCode预览插件
💡 小贴士: 建议先在 Mermaid Live Editor 中测试语法,确认无误后再粘贴到目标平台,这样可以避免语法错误。
- 作者:Lizhichao
- 链接:https://www.zhichaoli.cn//article/learn/mermaid
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章
