【mermaid怎么用】Mermaid 是一种基于 Markdown 的图表生成工具，广泛用于文档、博客、笔记等场景中，能够快速绘制流程图、序列图、甘特图、类图等多种类型的图表。对于初次接触 Mermaid 的用户来说，了解其基本语法和使用方法是关键。
一、Mermaid 基本用法总结
| 使用方式 | 描述 | 示例 |
| 引入脚本 | 在 HTML 页面中引入 Mermaid 的 JS 文件 | `<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>` |
| 初始化配置 | 设置 Mermaid 的全局配置（如主题、语言等） | `mermaid.initialize({ theme: 'default' });` |
| 编写代码块 | 在 Markdown 或 HTML 中使用 `mermaid` 关键字包裹图表代码 | ```mermaid\ngraph TD\nA-->B\n``` |
| 渲染图表 | 确保页面加载后调用 `mermaid.run()` 渲染所有图表 | `document.addEventListener('DOMContentLoaded', () => mermaid.run());` |
二、常见图表类型与语法示例
| 图表类型 | 语法关键词 | 示例代码 | ||||
| 流程图 | `graph TD` | ```mermaid\ngraph TD\nA[开始] --> B{判断}\nB --> | 是 | C[处理]\nB --> | 否 | D[结束]\n``` |
| 序列图 | `sequenceDiagram` | ```mermaid\nsequenceDiagram\nAlice->>Bob: Hello Bob\nBob-->>Alice: Hi Alice\n``` | ||||
| 甘特图 | `gantt` | ```mermaid\ngantt\ndateFormat = YYYY-MM-DD\nsection 任务1\n任务1: a1, 2025-01-01, 14d\n``` | ||||
| 类图 | `classDiagram` | ```mermaid\nclassDiagram\nclass Animal\nclass Dog\nAnimal < | -- Dog\n``` |
三、注意事项
- 正确闭合标签：确保每个图表代码块被 `mermaid` 标签正确包裹。
- 避免缩进问题：Mermaid 对缩进敏感，建议使用空格或制表符统一格式。
- 支持多种环境：Mermaid 可以在浏览器、Jupyter Notebook、Typora、VS Code 等环境中使用。
- 自定义样式：通过 CSS 或 Mermaid 内置样式选项可以调整图表外观。
四、总结
Mermaid 是一个简单但功能强大的图表生成工具，适合需要在文本中嵌入可视化内容的用户。掌握其基础语法和使用方法，可以极大提升文档的可读性和专业性。无论是写技术文档、做项目计划还是教学材料，Mermaid 都是一个值得学习的工具。
如需进一步了解，建议查阅 [Mermaid 官方文档](https://mermaid-js.github.io/mermaid//) 获取更详细的信息。
